/**
 * Animación del logo del footer — TERMINUS cicla entre su nombre y las
 * palabras Energy / Efficiency / Enthalpy / Earth mientras la "e" salta.
 *
 * Archivo PROPIO del tema (no toca assets/dist/output.css). Se carga solo
 * cuando la animación está activada (Personalizador → Portada → Pie).
 *
 * El ancho replica el que tenía el <img> estático que sustituye
 * (w-[170px] sm:w-[394px] en el footer, breakpoint Tailwind sm = 640px) para
 * no alterar el layout del footer al activar/desactivar la animación.
 *
 * @package TERMINUS
 */

.tm-logo-anim {
  --tm-teal: #03BFB5;
  --tm-white: #FFFFFF;
  --tm-fade: 420ms; /* duración del fade de las palabras */
  display: block;
  width: 170px;
  line-height: 0;
}

@media (min-width: 640px) {
  .tm-logo-anim {
    width: 394px;
  }
}

.tm-logo-anim svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

.tm-logo-anim .word {
  fill: var(--tm-white);
  opacity: 0;
  transition: opacity var(--tm-fade) ease;
  will-change: opacity;
}

.tm-logo-anim .word.is-on {
  opacity: 1;
}

.tm-logo-anim .e,
.tm-logo-anim .arc {
  fill: var(--tm-teal);
}

.tm-logo-anim .e {
  transform-box: view-box;
  transform-origin: 271.2px 363.9px; /* base de la "e": el squash se apoya en el piso */
  will-change: transform;
}

.tm-logo-anim .arc {
  transform-box: view-box;
  transform-origin: 271.2px 377.7px;
}

@media (prefers-reduced-motion: reduce) {
  .tm-logo-anim .word {
    transition-duration: 200ms;
  }
}