/* ==========================================================================
   GAAB Website — Animations
   Keyframes, base transition states, and the text-reveal gradient setup.
   GSAP handles the dynamic transforms; this file only defines the starting
   states + the CSS-driven primitives (the text-reveal gradient).
   ========================================================================== */


/* --------------------------------------------------------------------------
   ACCESSIBILITY — respect reduced-motion preference
   When the user prefers reduced motion, neutralize the heavy transforms.
   GSAP scrub/pin still works but is short-circuited where possible.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .text-reveal {
    color: var(--color-text-primary) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
            background-clip: initial !important;
  }
}


/* --------------------------------------------------------------------------
   PRE-ANIMATION STATES
   GSAP picks these up as "from" values; if JS fails to load, nothing
   stays invisible forever (graceful degradation below).
   -------------------------------------------------------------------------- */

/* Pre-animation state — set inline by GSAP via fromTo() so content remains
   visible if JS fails to load (no FOUC). Do NOT trap to opacity: 0 in CSS;
   gsap.from() reads current value as end state, which traps elements at 0. */
.hero-headline .line,
.hero-subtitle,
.hero-buttons,
.category-card {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   TEXT REVEAL — Vertical light gradient (the signature effect)
   --------------------------------------------------------------------------
   Concept: the text is "painted" with a 200% tall gradient whose top half
   is dark and bottom half is light. As the user scrolls, GSAP shifts the
   gradient up so the dark half slides into view from bottom to top — the
   text appears to fill in from light gray to solid black.
   -------------------------------------------------------------------------- */

.text-reveal {
  /* Gradient: top half = solid dark, bottom half = light ghost */
  background-image: linear-gradient(
    to bottom,
    var(--color-black) 0%,
    var(--color-black) 50%,
    rgba(10, 10, 10, 0.15) 50%,
    rgba(10, 10, 10, 0.15) 100%
  );

  /* Make it 2× the text height and start positioned showing the light half */
  background-size: 100% 200%;
  background-position: 0% 100%;
  background-repeat: no-repeat;

  /* Clip to text */
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;

  /* Avoid italic / weight inheritance issues with clip on some platforms */
  -webkit-text-fill-color: transparent;
}

/* Inverse variant — for use on dark backgrounds (white reveal) */
.text-reveal--on-dark {
  background-image: linear-gradient(
    to bottom,
    var(--color-white) 0%,
    var(--color-white) 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
}


/* --------------------------------------------------------------------------
   HERO HEADLINE LINE-MASK
   Each .line is overflow:hidden so the GSAP "y: 60" stagger reveals from
   underneath the line above it (cinematic stagger like Linear / Aesop).
   -------------------------------------------------------------------------- */

.hero-headline .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em; /* prevent descender clipping (e.g. y, g) */
}


/* --------------------------------------------------------------------------
   CINEMATIC TEXT — base state for moments (controlled by GSAP timeline)
   GSAP sets opacity on each .cinematic-text__moment as scroll progresses.
   We define the initial state here so there is no FOUC.
   -------------------------------------------------------------------------- */

.cinematic-text__moment {
  opacity: 0;
  will-change: opacity;
}

/* Keep moment 1 visible from the start so the section never opens blank.
   GSAP timeline still drives the wipe. */
.cinematic-text__moment[data-moment="1"] {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   WIPE GRIS → BLANCO (de derecha a izquierda)
   --------------------------------------------------------------------------
   The cinematic headline text starts as a translucent "ghost" grey and is
   progressively painted to solid white from right to left as the moment
   appears. Implemented via a 200%-wide horizontal gradient clipped to text.
   GSAP scrubs background-position from 0% to 100%.
   -------------------------------------------------------------------------- */

.cinematic-text__line {
  background-image: linear-gradient(
    90deg,
    #FFFFFF 0%,
    #FFFFFF 48%,
    rgba(255, 255, 255, 0.40) 52%,
    rgba(255, 255, 255, 0.40) 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0%; /* initial: ghost grey across the whole line */
  background-repeat: no-repeat;

  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* --------------------------------------------------------------------------
   KEYFRAMES — used for non-scroll, looped, or fallback animations
   -------------------------------------------------------------------------- */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}


/* --------------------------------------------------------------------------
   VIDEO PEEK — subtle scale-in once the page loads
   -------------------------------------------------------------------------- */

.hero-video-peek {
  animation: fadeInUp 1.2s var(--ease-out) 0.6s both;
}


/* --------------------------------------------------------------------------
   UTILITY — disable pin/scrub on small screens (handled by JS too)
   Use this class to opt-out of pinning if the JS detects mobile.
   -------------------------------------------------------------------------- */

.no-pin .cinematic-section__viewport {
  height: auto;
  min-height: 100vh;
}