/* =====================================================================
   SHANI'S LEGENDS TROPHY — Animation keyframes & GSAP-support classes
   ===================================================================== */

/* Elements GSAP will drive start hidden only when JS is present */
.js .gsap-fade { opacity: 0; }
.js .gsap-up { opacity: 0; transform: translateY(40px); }
.js .gsap-char span, .js .gsap-word span { display: inline-block; }

/* Sticky storytelling stack (ONE TROPHY / ONE DREAM / ONE LEGACY) */
.story-stack { position: relative; }
.story-stack__pin {
  height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.story-word {
  position: absolute;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(3rem, 15vw, 12rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
  opacity: 0;
  will-change: transform, opacity;
}
.story-word .gold-text { display: inline; }
.story-progress {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.story-progress i { width: 26px; height: 2px; background: var(--line); transition: background 0.4s var(--ease); }
.story-progress i.on { background: var(--gold-1); }

/* Light beams for cinematic sections */
.beams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.beams::before, .beams::after {
  content: "";
  position: absolute;
  top: -30%;
  width: 40vw;
  height: 160%;
  background: linear-gradient(180deg, rgba(58,99,214,0.16), transparent 70%);
  filter: blur(20px);
  transform: rotate(18deg);
}
.beams::before { left: 10%; animation: beam-drift 12s ease-in-out infinite alternate; }
.beams::after { right: 12%; animation: beam-drift 16s ease-in-out infinite alternate-reverse; }
@keyframes beam-drift { to { transform: rotate(18deg) translateX(40px); opacity: 0.5; } }

/* Floodlight glow */
.floodlight { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(246,229,173,0.14), transparent 65%); filter: blur(20px); pointer-events: none; }

/* Animated line-draw underline */
.line-draw { position: relative; }
.line-draw::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease);
}
.line-draw.in::after { transform: scaleX(1); }

/* Magnetic button wrapper */
.magnetic { display: inline-block; will-change: transform; }

/* Count-up numbers */
.count { font-variant-numeric: tabular-nums; }

/* Parallax layer */
[data-parallax] { will-change: transform; }

/* Image mask reveal */
.mask-reveal { position: relative; overflow: hidden; }
.mask-reveal img { transform: scale(1.2); transition: transform 1.4s var(--ease); }
.mask-reveal::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: var(--navy-950);
  transform: translateX(0);
  transition: transform 1s var(--ease);
}
.mask-reveal.in::before { transform: translateX(101%); }
.mask-reveal.in img { transform: scale(1); }

/* Subtle fade for hero children (fallback if no GSAP) */
.hero__logo, .hero__title, .hero__sub, .hero__cta { animation: hero-fade 0.9s var(--ease) backwards; }
.hero__logo { animation-delay: 0.15s; }
.hero__title { animation-delay: 0.30s; }
.hero__sub  { animation-delay: 0.62s; }
.hero__cta  { animation-delay: 0.78s; }
@keyframes hero-fade { from { opacity: 0; transform: translateY(24px); } }

/* spin-free loading ring (uses stroke-dashoffset, GPU friendly-ish) */
@keyframes dash { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .beams::before, .beams::after, .floodlight { display: none; }
  .story-word { position: static; opacity: 1; }
  .story-stack__pin { height: auto; padding-block: 40px; }
  .hero__logo, .hero__title, .hero__sub, .hero__cta { animation: none; }
  .mask-reveal::before { display: none; }
  .mask-reveal img { transform: none; }
}