/* logo Peddi em camadas. Hover: o P (com as faixas) desliza por cima do "EDDI", que some conforme o P passa;
   o P termina no centro do logo. Ao sair, tudo volta. */
.logo-peddi { position: relative; display: inline-block; height: var(--logo-altura, 24px); aspect-ratio: 582 / 115; }
.logo-peddi img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.65, 0, .35, 1), clip-path .6s cubic-bezier(.65, 0, .35, 1), opacity .6s ease; }
.logo-peddi__faixas, .logo-peddi__p { z-index: 1; } /* o P passa por cima do texto */
.logo-peddi__faixas { transform-origin: 21% 50%; }
.logo-peddi__eddi { clip-path: inset(0 0 0 0); }
@media (hover: hover) and (pointer: fine) {
  /* o símbolo ocupa ~29% da largura (centro em ~15%): andar 22% põe o P no centro do logo */
  a:hover > .logo-peddi .logo-peddi__p, a:focus-visible > .logo-peddi .logo-peddi__p { transform: translateX(22.68%); }
  a:hover > .logo-peddi .logo-peddi__faixas, a:focus-visible > .logo-peddi .logo-peddi__faixas { transform: translateX(22.68%) scaleX(1.25); }
  /* o recorte acompanha o P até a borda dele (~52.9%) e o resto do texto some em fade */
  a:hover > .logo-peddi .logo-peddi__eddi, a:focus-visible > .logo-peddi .logo-peddi__eddi { clip-path: inset(0 0 0 52.9%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .logo-peddi img { transition: none; } }
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  a:hover > .logo-peddi img, a:focus-visible > .logo-peddi img { transform: none; clip-path: none; opacity: 1; }
}