/* ══════════════════════════════════════════════════════════════════════════
   EL LOGO DE NEÓN — componente compartido (hero y nav)

   Marcado: templates/partials/neon-logo.php

   Dos estados:
     · reposo    → el logo armado, con el halo respirando. Es el default.
     · entrando  → la clase .is-entrando dispara la coreografía, una sola vez.

   El estado por defecto es el logo COMPLETO y visible a propósito: si el JS no
   corre o la pestaña está en segundo plano (donde las animaciones CSS no
   avanzan), el logo se ve igual. La animación solo adorna, nunca habilita.

   Suavidad: una sola curva para todo, cubic-bezier(.16,1,.3,1) — ease-out-expo.
   Arranca rápido y frena largo, que es lo que hace que un motion se sienta
   trabajado y no empujado. Nada de steps() ni parpadeos duros.
   ══════════════════════════════════════════════════════════════════════════ */

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

.thf-logo-word { fill: currentColor; }

.thf-logo-viaje,
.thf-logo-giro,
.thf-logo-halo-glow,
.thf-logo-halo-core {
    transform-box: fill-box;
    transform-origin: center;
}

/* La estela solo existe durante el viaje. En reposo no se ve. */
.thf-logo-estela {
    transform-box: fill-box;
    transform-origin: left center;
    opacity: 0;
}

/* ── Reposo: el halo respira ─────────────────────────────────────────── */

.thf-logo-halo-glow {
    opacity: .45;
    animation: thf-logo-respira 3200ms cubic-bezier(.4, 0, .6, 1) infinite;
}

.thf-logo-halo-core {
    animation: thf-logo-respira-core 3200ms cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes thf-logo-respira {
    0%, 100% { opacity: .42; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.07); }
}

@keyframes thf-logo-respira-core {
    0%, 100% { opacity: .93; }
    50%      { opacity: 1; }
}

/* ── Entrada ─────────────────────────────────────────────────────────
   El halo prende al centro, viaja a su lugar dejando estela, y la palabra
   se escribe detrás de él. Duración total 2.6 s: lento a propósito.

   --thf-logo-in: permite acelerarla o frenarla por instancia sin tocar los
   keyframes. El nav la usa un poco más corta que el hero.               */

.thf-logo { --thf-logo-in: 2600ms; }

.thf-logo.is-entrando .thf-logo-word {
    animation: thf-logo-escribe var(--thf-logo-in) cubic-bezier(.16, 1, .3, 1) both;
}

.thf-logo.is-entrando .thf-logo-viaje {
    animation: thf-logo-viaja var(--thf-logo-in) cubic-bezier(.16, 1, .3, 1) both;
}

.thf-logo.is-entrando .thf-logo-giro {
    animation: thf-logo-abre calc(var(--thf-logo-in) * .34) cubic-bezier(.16, 1, .3, 1) both;
}

.thf-logo.is-entrando .thf-logo-estela {
    animation: thf-logo-estela calc(var(--thf-logo-in) * 1.25) cubic-bezier(.16, 1, .3, 1) both;
}

/* La respiración espera a que el halo llegue: si respira mientras viaja,
   se ven dos movimientos peleando y ahí es donde se siente forzado. */
.thf-logo.is-entrando .thf-logo-halo-glow,
.thf-logo.is-entrando .thf-logo-halo-core {
    animation-delay: var(--thf-logo-in);
}

/* ── Variante hero: ENCIENDE ─────────────────────────────────────────
   La portada usa el gesto del prototipo logo-neon-animado.html: la palabra
   prende como tubo de neon y el halo entra al final. No viaja ni deja estela;
   a escala hero se lee mas limpio y mas parecido a un letrero real. */
.thf-logo--enciende.is-entrando .thf-logo-word {
    animation: thf-logo-prende-word 900ms steps(1, end) both;
}

.thf-logo--enciende.is-entrando .thf-logo-viaje {
    animation: thf-logo-prende-halo 1500ms steps(1, end) both;
}

.thf-logo--enciende.is-entrando .thf-logo-giro {
    animation: none;
}

.thf-logo--enciende.is-entrando .thf-logo-estela {
    animation: none;
    opacity: 0;
}

.thf-logo--enciende.is-entrando .thf-logo-halo-glow {
    animation: thf-logo-respira 3200ms cubic-bezier(.4, 0, .6, 1) 1500ms infinite;
}

.thf-logo--enciende.is-entrando .thf-logo-halo-core {
    animation: thf-logo-respira-core 3200ms cubic-bezier(.4, 0, .6, 1) 1500ms infinite;
}

/* El halo nace al centro del logo y frena en su lugar.
   -722.4 = centro del viewBox (912) menos el centro del halo (1634.4). */
@keyframes thf-logo-viaja {
    0%   { transform: translateX(-722.4px); opacity: 0; }
    14%  { transform: translateX(-722.4px); opacity: 1; }
    100% { transform: translateX(0);        opacity: 1; }
}

/* Abre como una moneda que se acuesta. */
@keyframes thf-logo-abre {
    0%   { transform: scaleY(.08); }
    100% { transform: scaleY(1); }
}

/* Por dónde pasó: crece con el halo y se apaga cuando él llega. */
@keyframes thf-logo-estela {
    0%   { transform: scaleX(0); opacity: 0; }
    12%  { transform: scaleX(0); opacity: .9; }
    80%  { transform: scaleX(1); opacity: .9; }
    100% { transform: scaleX(1); opacity: 0; }
}

/* La palabra se escribe detrás del halo, un poco después que él arranque. */
@keyframes thf-logo-escribe {
    0%   { clip-path: inset(0 100% 0 0); }
    18%  { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes thf-logo-prende-word {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    16%  { opacity: .15; }
    22%  { opacity: 1; }
    26%  { opacity: .35; }
    32%  { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes thf-logo-prende-halo {
    0%, 58% { opacity: 0; }
    62%     { opacity: 1; }
    66%     { opacity: .2; }
    72%     { opacity: 1; }
    76%     { opacity: .4; }
    82%     { opacity: 1; }
    100%    { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .thf-logo-halo-glow { animation: none; opacity: .75; }
    .thf-logo-halo-core { animation: none; }

    .thf-logo.is-entrando .thf-logo-word,
    .thf-logo.is-entrando .thf-logo-viaje,
    .thf-logo.is-entrando .thf-logo-giro,
    .thf-logo.is-entrando .thf-logo-estela {
        animation: none;
    }

    .thf-logo.is-entrando .thf-logo-word  { clip-path: none; }
    .thf-logo.is-entrando .thf-logo-viaje { transform: none; opacity: 1; }
    .thf-logo.is-entrando .thf-logo-estela { opacity: 0; }
    .thf-logo--enciende.is-entrando .thf-logo-word,
    .thf-logo--enciende.is-entrando .thf-logo-viaje {
        opacity: 1;
    }
}