/* ============================================================
   Atrio Studio — animations.css
   --------------------------------------------------------------
   Keyframes globales reusables + utility classes para reveals,
   stagger, parallax y micro-interactions.

   Pareja con assets/js/main.js (IntersectionObserver añade
   `data-revealed` y `.is-revealed` cuando el elemento entra en
   viewport). Las secciones específicas extienden estas reglas con
   su propio <style> scoped.
   ============================================================ */

/* ----------------------------------------------------------------
 *  Keyframes globales reusables
 * -------------------------------------------------------------- */

@keyframes trx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes trx-rise-in {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,        0); }
}

@keyframes trx-rise-in-sm {
  from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,        0); }
}

@keyframes trx-curtain-up {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0     0 0 0); }
}

@keyframes trx-curtain-down {
  from { clip-path: inset(0     0 100% 0); }
  to   { clip-path: inset(0     0 0     0); }
}

@keyframes trx-wipe-right {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0     0 0); }
}

@keyframes trx-line-rise {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: translate3d(0, 0,     0); }
}

@keyframes trx-scroll-pulse {
  0%   { transform-origin: top;    transform: scaleY(0); opacity: 1; }
  70%  { transform: scaleY(1); opacity: 1; }
  100% { transform-origin: bottom; transform: scaleY(1); opacity: 0; }
}

@keyframes trx-marquee {
  from { transform: translate3d(0,    0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ----------------------------------------------------------------
 *  Reveals — data-attrs (sintaxis usada en secciones)
 * -------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition:
    opacity   var(--duration-slow) var(--ease-emphasis),
    transform var(--duration-slow) var(--ease-emphasis);
  will-change: opacity, transform;
}
[data-reveal][data-revealed] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition:
    opacity   var(--duration-med) var(--ease-emphasis),
    transform var(--duration-med) var(--ease-emphasis);
}
[data-reveal-stagger][data-revealed] > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal-stagger][data-revealed] > *:nth-child(1) { transition-delay:  60ms; }
[data-reveal-stagger][data-revealed] > *:nth-child(2) { transition-delay: 120ms; }
[data-reveal-stagger][data-revealed] > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-stagger][data-revealed] > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger][data-revealed] > *:nth-child(5) { transition-delay: 300ms; }
[data-reveal-stagger][data-revealed] > *:nth-child(6) { transition-delay: 360ms; }
[data-reveal-stagger][data-revealed] > *:nth-child(7) { transition-delay: 420ms; }
[data-reveal-stagger][data-revealed] > *:nth-child(8) { transition-delay: 480ms; }
[data-reveal-stagger][data-revealed] > *:nth-child(9) { transition-delay: 540ms; }
[data-reveal-stagger][data-revealed] > *:nth-child(10) { transition-delay: 600ms; }

/* ----------------------------------------------------------------
 *  Utility classes — .reveal / .reveal-up / .reveal-fade
 *  Pensadas para markup arbitrario sin necesidad de section JS.
 * -------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition:
    opacity   var(--duration-slow) var(--ease-emphasis),
    transform var(--duration-slow) var(--ease-emphasis);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity var(--duration-med) var(--ease-emphasis);
}
.reveal-fade.is-revealed { opacity: 1; }

.reveal-up    { transform: translate3d(0, 1.5rem, 0); }
.reveal-up.is-revealed    { transform: translate3d(0, 0, 0); }
.reveal-down  { transform: translate3d(0, -1.5rem, 0); }
.reveal-down.is-revealed  { transform: translate3d(0, 0, 0); }
.reveal-left  { transform: translate3d(1.5rem, 0, 0); }
.reveal-left.is-revealed  { transform: translate3d(0, 0, 0); }
.reveal-right { transform: translate3d(-1.5rem, 0, 0); }
.reveal-right.is-revealed { transform: translate3d(0, 0, 0); }

.reveal-curtain {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--duration-slow) var(--ease-emphasis);
}
.reveal-curtain.is-revealed { clip-path: inset(0 0 0 0); }

/* ----------------------------------------------------------------
 *  Stagger utilities — .stagger > * recibe delays graduales
 *
 *  Variantes:
 *    .stagger       (delay base 80ms entre hijos)
 *    .stagger-tight (50ms)
 *    .stagger-wide  (140ms)
 *
 *  El padre debe llevar también `.reveal` o `[data-reveal]` para
 *  activarse al entrar en viewport; los hijos pueden ser cualquier
 *  cosa y heredan el patrón.
 * -------------------------------------------------------------- */

.stagger > *,
.stagger-tight > *,
.stagger-wide > * {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition:
    opacity   var(--duration-med) var(--ease-emphasis),
    transform var(--duration-med) var(--ease-emphasis);
}
.stagger.is-revealed       > *,
.stagger-tight.is-revealed > *,
.stagger-wide.is-revealed  > *,
[data-revealed].stagger       > *,
[data-revealed].stagger-tight > *,
[data-revealed].stagger-wide  > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Delays explícitos por posición (mobile-friendly: no se cargan a no ser que el padre lo use). */
.stagger > *:nth-child(1) { transition-delay:  80ms; }
.stagger > *:nth-child(2) { transition-delay: 160ms; }
.stagger > *:nth-child(3) { transition-delay: 240ms; }
.stagger > *:nth-child(4) { transition-delay: 320ms; }
.stagger > *:nth-child(5) { transition-delay: 400ms; }
.stagger > *:nth-child(6) { transition-delay: 480ms; }
.stagger > *:nth-child(7) { transition-delay: 560ms; }
.stagger > *:nth-child(8) { transition-delay: 640ms; }

.stagger-tight > *:nth-child(1) { transition-delay:  50ms; }
.stagger-tight > *:nth-child(2) { transition-delay: 100ms; }
.stagger-tight > *:nth-child(3) { transition-delay: 150ms; }
.stagger-tight > *:nth-child(4) { transition-delay: 200ms; }
.stagger-tight > *:nth-child(5) { transition-delay: 250ms; }
.stagger-tight > *:nth-child(6) { transition-delay: 300ms; }
.stagger-tight > *:nth-child(7) { transition-delay: 350ms; }
.stagger-tight > *:nth-child(8) { transition-delay: 400ms; }

.stagger-wide > *:nth-child(1) { transition-delay: 140ms; }
.stagger-wide > *:nth-child(2) { transition-delay: 280ms; }
.stagger-wide > *:nth-child(3) { transition-delay: 420ms; }
.stagger-wide > *:nth-child(4) { transition-delay: 560ms; }
.stagger-wide > *:nth-child(5) { transition-delay: 700ms; }
.stagger-wide > *:nth-child(6) { transition-delay: 840ms; }

/* Stagger numérico opcional para piezas grandes (.stagger-1, .stagger-2, ...).
   Útil para children dispersos por el DOM que no son hermanos directos. */
.stagger-1  { transition-delay:  80ms; }
.stagger-2  { transition-delay: 160ms; }
.stagger-3  { transition-delay: 240ms; }
.stagger-4  { transition-delay: 320ms; }
.stagger-5  { transition-delay: 400ms; }
.stagger-6  { transition-delay: 480ms; }
.stagger-7  { transition-delay: 560ms; }
.stagger-8  { transition-delay: 640ms; }
.stagger-9  { transition-delay: 720ms; }
.stagger-10 { transition-delay: 800ms; }

/* ----------------------------------------------------------------
 *  SplitText helper: máscara por línea (titulares cinematográficos)
 * -------------------------------------------------------------- */

.trx-line-mask { overflow: hidden; display: block; }
.trx-line {
  display: block;
  transform: translate3d(0, 100%, 0);
  transition: transform var(--duration-slow) var(--ease-emphasis);
  will-change: transform;
}
[data-revealed] .trx-line,
.is-revealed   .trx-line {
  transform: translate3d(0, 0, 0);
}
[data-revealed] .trx-line:nth-child(1),
.is-revealed   .trx-line:nth-child(1) { transition-delay:  80ms; }
[data-revealed] .trx-line:nth-child(2),
.is-revealed   .trx-line:nth-child(2) { transition-delay: 160ms; }
[data-revealed] .trx-line:nth-child(3),
.is-revealed   .trx-line:nth-child(3) { transition-delay: 240ms; }
[data-revealed] .trx-line:nth-child(4),
.is-revealed   .trx-line:nth-child(4) { transition-delay: 320ms; }
[data-revealed] .trx-line:nth-child(5),
.is-revealed   .trx-line:nth-child(5) { transition-delay: 400ms; }

/* ----------------------------------------------------------------
 *  Scroll-driven reveals nativos (CSS animation-timeline)
 *  Cuando el navegador los soporta, [data-curtain] entra solo.
 * -------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  [data-curtain] {
    animation: trx-curtain-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
    will-change: clip-path;
  }
  [data-wipe] {
    animation: trx-wipe-right linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
    will-change: clip-path;
  }
  [data-fade-on-view] {
    animation: trx-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
}

/* ----------------------------------------------------------------
 *  Parallax layer base — JS escribe --parallax-y
 * -------------------------------------------------------------- */

[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0), 0);
  will-change: transform;
}

/* ----------------------------------------------------------------
 *  Micro-interactions
 * -------------------------------------------------------------- */

[data-hover-lift] {
  transition: transform var(--duration-fast) var(--ease-standard);
}
@media (hover: hover) {
  [data-hover-lift]:hover { transform: translate3d(0, -2px, 0); }
}

.trx-press {
  transition: transform var(--duration-fast) var(--ease-standard);
}
.trx-press:active { transform: translate3d(0, 1px, 0) scale(0.985); }

/* ----------------------------------------------------------------
 *  Focus ring global (a11y)
 * -------------------------------------------------------------- */

:where(a, button, [tabindex], input, textarea, select):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------
 *  Lenis smooth scroll body class compatibility
 * -------------------------------------------------------------- */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ----------------------------------------------------------------
 *  Reduced motion master override
 *  Cubre todas las utilities anteriores; main.js además aplica
 *  data-revealed/.is-revealed por defecto cuando reduce=true para
 *  que el contenido no quede invisible.
 * -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-reveal-stagger] > *,
  .reveal,
  .reveal-up, .reveal-down, .reveal-left, .reveal-right,
  .reveal-curtain,
  .stagger > *, .stagger-tight > *, .stagger-wide > *,
  .trx-line {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  [data-parallax] { transform: none !important; }
  [data-curtain], [data-wipe], [data-fade-on-view] {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
}

/* Mismo override, aplicado vía atributo cuando main.js detecta cambio en vivo. */
html[data-reduced-motion] [data-reveal],
html[data-reduced-motion] [data-reveal-stagger] > *,
html[data-reduced-motion] .reveal,
html[data-reduced-motion] .stagger > *,
html[data-reduced-motion] .stagger-tight > *,
html[data-reduced-motion] .stagger-wide > *,
html[data-reduced-motion] .trx-line {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}