/* =========================================================================
   Aetherium · capa dinámica
   -------------------------------------------------------------------------
   Se carga DESPUÉS de aetherium-global-test.css y es puramente aditiva.
   No toca paleta, tipografía, copy ni composición: el diseño global es un
   ejercicio de sustracción y se respeta tal cual.

   Lo que añade es un vocabulario de movimiento donde cada gesto significa
   algo, en lugar del único fade-up genérico que hoy comparten 23 elementos:

     1 · columna de recorrido   → mide tu paso por el capítulo
     2 · titulares por líneas   → composición editorial
     3 · filas que se enumeran  → orden y conteo
     4 · cursor del método      → continuidad entre estados
     5 · líneas del hero        → la retícula se construye
     6 · cascada de evidencia   → la prueba se acumula

   Sólo se anima transform y opacity. Todo se desactiva en reduced-motion.
   ========================================================================= */

.ae-global {
  --aed-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --aed-ease-rule: cubic-bezier(0.2, 0.75, 0.2, 1);
  --aed-line-dur: 780ms;
  --aed-rule-dur: 560ms;
  --aed-step: 90ms;
}

/* -------------------------------------------------------------------------
   1 · Columna de recorrido
   La regla vertical de cada escena ya existía, pero estática y decorativa.
   Ahora se dibuja según cuánto has avanzado dentro de la sección, así que
   deja de ser adorno y se vuelve una medida del recorrido.
   ------------------------------------------------------------------------- */
.ae-global .ae-scene::after {
  opacity: 0.1;
  transform: scaleY(var(--aed-p, 0));
  transform-origin: top center;
}

/* -------------------------------------------------------------------------
   2 · Titulares que se componen por líneas
   Cada línea sube detrás de su propio recorte, escalonada. Es el gesto que
   el hero ya insinuaba con sus tres bloques, extendido a todas las escenas.
   Se usan <i>/<b> como envoltorios porque `h2 span`, `h2 em` y `h2 del` ya
   están reservados por el diseño global.
   ------------------------------------------------------------------------- */
.ae-global .aed-l {
  display: block;
  clip-path: none;
  font-style: inherit;
  font-weight: inherit;
  padding-block: 0;
  margin-block: 0;
}

.ae-global .aed-l > b {
  display: block;
  font-style: inherit;
  font-weight: inherit;
  transform: none;
  opacity: 1;
}

.ae-global .ae-scene.is-seen .aed-l > b,
.ae-global .aed-split.is-seen .aed-l > b {
  transform: none;
}

/* El titular partido ya no necesita el fade-up genérico: su movimiento
   es la composición de sus líneas. */
.ae-global .aed-split.ae-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* -------------------------------------------------------------------------
   3 · Filas que se enumeran
   ------------------------------------------------------------------------- */
.ae-global .aed-row > * {
  opacity: 1;
  transform: none;
}

.ae-global .ae-scene.is-seen .aed-row > * {
  opacity: 1;
  transform: none;
}

/* Sólo las filas que YA tenían regla superior en el diseño global la ven
   dibujarse en dorado. No se añade regla donde el diseño la quitó
   (`.ae-art-intelligence__sequence article` lleva `border: 0 !important`):
   ahí el movimiento es únicamente la secuencia del contenido. */
.ae-global .aed-rule {
  position: relative;
}

.ae-global .aed-rule::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--ae-g-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--aed-rule-dur) var(--aed-ease-rule);
  transition-delay: calc(var(--aed-i, 0) * 130ms);
  pointer-events: none;
}

.ae-global .ae-scene.is-seen .aed-rule::before {
  transform: scaleX(1);
}

/* -------------------------------------------------------------------------
   4 · Cursor del método
   El track ya tenía una línea horizontal a media altura y las piezas ya
   expanden su flex-basis. Falta el vínculo: un segmento dorado que viaja
   por esa línea hasta la pieza activa, para que el cambio de estado tenga
   continuidad espacial en vez de saltar.
   ------------------------------------------------------------------------- */
.ae-global .aed-method-cursor {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 0;
  height: 2px;
  width: var(--aed-cursor-w, 25%);
  background: var(--ae-g-gold);
  transform: translate3d(var(--aed-cursor-x, 0), -50%, 0);
  /* Sin transición propia: el JS lee la geometría real de la pieza activa
     cuadro por cuadro, así que acompaña la curva del flex-basis en lugar de
     superponerle una segunda. */
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   5 · Líneas del hero
   Las tres verticales de la retícula estaban fijas. Ahora se dibujan al
   entrar: la estructura se construye antes que el mensaje.
   ------------------------------------------------------------------------- */
.ae-global .ae-art-hero__lines i {
  transform: scaleY(0);
  transform-origin: top;
  animation: aed-draw-down 1150ms var(--aed-ease-rule) forwards;
}

.ae-global .ae-art-hero__lines i:nth-child(1) { animation-delay: 140ms; }
.ae-global .ae-art-hero__lines i:nth-child(2) { animation-delay: 300ms; }
.ae-global .ae-art-hero__lines i:nth-child(3) { animation-delay: 460ms; }

@keyframes aed-draw-down {
  to { transform: scaleY(1); }
}

/* -------------------------------------------------------------------------
   6 · Cascada de evidencia
   Las seis capturas de producto entraban todas a la vez, lo que las hacía
   leer como un volcado. Escalonadas y con un desplazamiento alterno mínimo,
   se leen como una secuencia de pruebas que se acumula.
   ------------------------------------------------------------------------- */
.ae-global .aed-shot {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------------------
   Accesibilidad
   Nada de lo anterior es necesario para leer ni operar la página. En
   reduced-motion todo queda en su estado final; el cursor del método
   permanece porque es un indicador de estado, no una decoración.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ae-global .ae-scene::after {
    transform: none;
  }

  .ae-global .aed-l {
    clip-path: none;
    padding-block: 0;
    margin-block: 0;
  }

  .ae-global .aed-l > b {
    transform: none;
    transition: none;
  }

  .ae-global .aed-rule::before {
    transform: scaleX(1);
    transition: none;
  }

  .ae-global .aed-row > *,
  .ae-global .aed-shot {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ae-global .ae-art-hero__lines i {
    transform: none;
    animation: none;
  }
}