/* Orys · web v3 · motion: «el instrumento se calibra» (spec §6).
   Solo transform/opacity. Curva única. Sin rebote, blur ni escala desde cero.
   .reveal la añade JS (mejora progresiva): sin JS todo es visible. */

/* 1 · Entrada de sección, escalonada por hijo */
.reveal > * { opacity: 0; transform: translateY(24px); }
.reveal.is-visible > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-entrada) var(--curva), transform var(--dur-entrada) var(--curva);
}
.reveal.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal.is-visible > *:nth-child(2) { transition-delay: calc(var(--escalon) * 1); }
.reveal.is-visible > *:nth-child(3) { transition-delay: calc(var(--escalon) * 2); }
.reveal.is-visible > *:nth-child(4) { transition-delay: calc(var(--escalon) * 3); }
.reveal.is-visible > *:nth-child(5) { transition-delay: calc(var(--escalon) * 4); }
.reveal.is-visible > *:nth-child(n+6) { transition-delay: calc(var(--escalon) * 5); }

/* 2 · Hub: las líneas se trazan, el disco aparece al final */
.reveal .hub__linea { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal.is-visible .hub__linea {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 800ms var(--curva);
}
.reveal.is-visible .hub__linea:nth-child(2) { transition-delay: 80ms; }
.reveal.is-visible .hub__linea:nth-child(3) { transition-delay: 160ms; }
.reveal.is-visible .hub__linea:nth-child(4) { transition-delay: 240ms; }
.reveal .hub__disco { opacity: 0; transform: scale(.92); transform-origin: center; transform-box: fill-box; }
.reveal.is-visible .hub__disco { opacity: 1; transform: none; transition: opacity 300ms var(--curva) 700ms, transform 300ms var(--curva) 700ms; }

/* 3 · Rail de montaje: la regla naranja crece con el progreso (JS → --progreso) */
.montaje__rail::after { transition: transform 600ms var(--curva); }

/* 4 · CTA (auditoría improve-animations: hover con gate de puntero + feedback de
   pulsación en el ghost, a la par del .cta primario que ya lo tenía en components.css) */
.cta__disco { transition: transform var(--dur-micro) var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover .cta__disco { transform: translateX(2px); }
}
.ghost { transition: transform var(--dur-micro) var(--curva); }
.ghost:active { transform: scale(.98); }

/* 5 · Overlay móvil: enlaces en revelado escalonado (nav.is-open lo dispara) */
@media (max-width: 48rem) {
  .nav__enlaces li { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--curva), transform 400ms var(--curva); }
  .nav.is-open .nav__enlaces li { opacity: 1; transform: none; }
  .nav.is-open .nav__enlaces li:nth-child(2) { transition-delay: 40ms; }
  .nav.is-open .nav__enlaces li:nth-child(3) { transition-delay: 80ms; }
  .nav.is-open .nav__enlaces li:nth-child(4) { transition-delay: 120ms; }
  .nav.is-open .nav__enlaces li:nth-child(5) { transition-delay: 160ms; }
  .nav.is-open .nav__enlaces li:nth-child(6) { transition-delay: 200ms; }
  .nav.is-open .nav__enlaces li:nth-child(7) { transition-delay: 240ms; }
}

/* 6 · Precios: hover de columna sube a hueso-alto (sin sombra). Cambio instantáneo:
   la spec §6 solo permite transicionar transform/opacity (ruling SDD 26-08-2026). */
.espec tbody td:hover { background: var(--hueso-alto); }

/* 6b · Mecanismo móvil: el panel entrante se desliza 16 px y funde; la regla de la
   pestaña activa se estira. Solo transform/opacity (spec §6). */
@media (max-width: 48rem) {
  .mecanismo__pestana::after { transition: transform var(--dur-micro) var(--curva); }
  .mecanismo__paneles.is-conmutable > .mecanismo__panel {
    transition: opacity var(--dur-micro) var(--curva), transform var(--dur-micro) var(--curva), visibility 0s linear;
  }
  .mecanismo__paneles.is-conmutable > .mecanismo__panel[aria-hidden="true"] { transform: translateX(-16px); transition-delay: 0s, 0s, var(--dur-micro); }
  .mecanismo__paneles.is-conmutable > .mecanismo__panel--arnes[aria-hidden="true"] { transform: translateX(16px); }
  .mecanismo__paneles.is-conmutable > .mecanismo__panel[aria-hidden="false"] { transform: none; }
}

/* 6c · Precios móvil: al cambiar de paquete los valores funden y suben 6 px; la regla de
   la pestaña activa se estira. Solo transform/opacity (spec §6). */
@media (max-width: 48rem) {
  .espec__pestana::after { transition: transform var(--dur-micro) var(--curva); }
  .espec.is-conmutable tbody { transition: opacity 200ms var(--curva), transform 200ms var(--curva); }
  .espec.is-conmutable tbody.is-saliendo { opacity: 0; transform: translateY(6px); }
}

/* 7 · Portada fotográfica: la foto se asienta (opacidad + scale 1.04→1, origen en
   el sujeto) y titular, cuerpo y etiqueta entran escalonados. Una vez, al cargar,
   en CSS puro (fuera del hilo principal mientras carga la página). Sustituye al
   trazado del hub, que esta variante oculta; no es un reveal nuevo (spec §10). */
@keyframes portada-foto { from { opacity: 0; transform: scale(1.04); } }
@keyframes portada-entrada { from { opacity: 0; transform: translateY(24px); } }
.portada--foto .portada__foto { transform-origin: 80% 50%; animation: portada-foto 800ms var(--curva) both; }
.portada--foto .portada__texto > h1,
.portada--foto .portada__cuerpo,
.portada--foto .portada__etiqueta { animation: portada-entrada var(--dur-entrada) var(--curva) both; }
.portada--foto .portada__texto > h1 { animation-delay: 80ms; }
.portada--foto .portada__cuerpo { animation-delay: calc(80ms + var(--escalon)); }
.portada--foto .portada__etiqueta { animation-delay: calc(80ms + 2 * var(--escalon)); }
@media (max-width: 48rem) {
  /* Banda móvil: solo fundido (el asentamiento por escala es para la foto a sangre). */
  .portada--foto .portada__foto { animation-name: portada-fundido; }
}

/* 8 · Los «no»: el conector gigante gira despacio sobre el centro del anillo
   (28-08-2026, del lienzo de rediseño). Solo transform; una vuelta cada 24 s. */
@keyframes conector-gira { to { transform: rotate(360deg); } }
.conector--los-no .conector__giro { transform-box: view-box; transform-origin: 21px 24px; animation: conector-gira 24s linear infinite; }

/* Reduced motion: todo visible y estático; solo opacidad instantánea */
@media (prefers-reduced-motion: reduce) {
  .reveal > *, .reveal .hub__disco { opacity: 1; transform: none; transition: none; }
  .reveal .hub__linea { stroke-dashoffset: 0; transition: none; }
  .reveal.is-visible > *, .reveal.is-visible .hub__linea, .reveal.is-visible .hub__disco { transition: none; }
  .montaje__rail::after, .cta__disco, .cta, .ghost, .nav__barra, .nav__enlaces, .nav__enlaces li, .mecanismo__pestana::after, .mecanismo__paneles.is-conmutable > .mecanismo__panel, .espec__pestana::after, .espec.is-conmutable tbody { transition: none; }
  .nav__enlaces li { opacity: 1; transform: none; }
  /* Portada fotográfica: la foto solo funde (sin escala); el texto no se mueve. */
  .portada--foto .portada__foto { animation: portada-fundido 200ms ease both; }
  .portada--foto .portada__texto > h1, .portada--foto .portada__cuerpo, .portada--foto .portada__etiqueta { animation: none; }
  .conector--los-no .conector__giro { animation: none; }
}
@keyframes portada-fundido { from { opacity: 0; } }