/* ============================================
   SAKUTEKI — Animation Styles
   GSAP ScrollTrigger + interaction states
   ============================================ */

/* ---- SCROLL REVEAL: Initial hidden state ---- */
[data-scroll] {
  opacity: 0;
  transform: translateY(30px);
}

/* Hero is above the fold — always visible */
.hero[data-scroll] {
  opacity: 1;
  transform: none;
}

/* Once GSAP initializes, it owns these properties.
   The class prevents flash-of-unstyled-content on slow loads. */
.gsap-ready [data-scroll] {
  /* GSAP controls opacity + transform from here */
}

/* ---- NAVIGATION SCROLL STATE ---- */
.nav--scrolled {
  background: rgba(10, 14, 39, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---- HAMBURGER ACTIVE (X shape) ---- */
.nav__hamburger--active .nav__hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav__hamburger--active .nav__hamburger-line:nth-child(2) {
  opacity: 0;
}

.nav__hamburger--active .nav__hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---- MOBILE MENU OPEN STATE ---- */
.nav__mobile-menu--visible {
  display: flex;
}

/* Lock body scroll when mobile menu is open */
.menu-open {
  overflow: hidden;
}

/* ---- MARQUEE PERFORMANCE ---- */
.marquee--in-view .marquee__track,
.marquee--in-view .footer__marquee-track {
  will-change: transform;
  backface-visibility: hidden;
}

/* ---- HERO TITLE — NEON PULSE LOOP ---- */
@keyframes neonPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px rgba(255, 240, 0, 1))
      drop-shadow(0 0 20px rgba(255, 240, 0, 0.7))
      drop-shadow(0 0 50px rgba(255, 240, 0, 0.3))
      drop-shadow(0 0 100px rgba(255, 240, 0, 0.12));
    -webkit-text-stroke-color: rgba(255, 240, 0, 0.9);
  }
  8% {
    filter:
      drop-shadow(0 0 5px rgba(255, 240, 0, 0.7))
      drop-shadow(0 0 14px rgba(255, 240, 0, 0.45))
      drop-shadow(0 0 35px rgba(255, 240, 0, 0.18))
      drop-shadow(0 0 70px rgba(255, 240, 0, 0.06));
    -webkit-text-stroke-color: rgba(255, 240, 0, 0.75);
  }
  12% {
    filter:
      drop-shadow(0 0 8px rgba(255, 240, 0, 1))
      drop-shadow(0 0 20px rgba(255, 240, 0, 0.7))
      drop-shadow(0 0 50px rgba(255, 240, 0, 0.3))
      drop-shadow(0 0 100px rgba(255, 240, 0, 0.12));
    -webkit-text-stroke-color: rgba(255, 240, 0, 0.9);
  }
  50% {
    filter:
      drop-shadow(0 0 15px rgba(255, 240, 0, 1))
      drop-shadow(0 0 40px rgba(255, 240, 0, 0.9))
      drop-shadow(0 0 80px rgba(255, 240, 0, 0.5))
      drop-shadow(0 0 150px rgba(255, 240, 0, 0.25));
    -webkit-text-stroke-color: rgba(255, 240, 0, 1);
  }
}

/* ---- GSAP-TARGETED ELEMENTS: initial hidden state ---- */
/* These are set via gsap.set() in JS, but we add CSS fallback
   for the brief moment before GSAP initializes */
.demo__step,
.trust__stat-card,
.technology__block,
.pricing__card,
.faq__item,
.founder__text,
.founder__art,
.cta-enhanced__inner,
.contact__inner {
  opacity: 0;
}

/* Once GSAP takes over, it controls everything */
.gsap-ready .demo__step,
.gsap-ready .trust__stat-card,
.gsap-ready .technology__block,
.gsap-ready .pricing__card,
.gsap-ready .faq__item,
.gsap-ready .founder__text,
.gsap-ready .founder__art,
.gsap-ready .cta-enhanced__inner,
.gsap-ready .contact__inner {
  /* GSAP owns these now */
}

/* ---- PREFERS REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  [data-scroll],
  .demo__step,
  .trust__stat-card,
  .technology__block,
  .pricing__card,
  .faq__item,
  .founder__text,
  .founder__art,
  .cta-enhanced__inner,
  .contact__inner {
    opacity: 1;
    transform: none;
  }

  .hero__title {
    animation: none !important;
  }
}