/* ============================================================
   scroll-motion.css — GSAP ScrollSmoother + 3D motion layer
   ============================================================ */

/* ── ScrollSmoother wrapper ──
   Position/overflow are applied via JS (initSmoother) so the page
   falls back to native scroll when ScrollSmoother is unavailable. */
#smooth-wrapper {
  /* intentionally empty — JS sets position:fixed when smoother loads */
}

#smooth-content {
  overflow: visible;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

html,
body {
  background-color: #1a1819;
}

footer.gsap-footer-reveal {
  margin-bottom: 0 !important;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* ── Perspective sections ── */
.perspective-section {
  perspective: 1200px;
  perspective-origin: 50% 30%;
  transform-style: preserve-3d;
}

/* ── Hero parallax layer classes ── */
.hero-bg-video {
  will-change: transform;
}

.hero-gradient-mesh {
  will-change: transform;
}

.gsap-hero-orb {
  will-change: transform;
  pointer-events: none;
}

.hero-content-layer {
  will-change: transform;
}

/* ── Service cards — 3D flip entrance ── */
.gsap-card-3d {
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ── Why Choose Us feature cards ── */
.gsap-feature-card {
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* ── Testimonial cards — depth stack ── */
.gsap-testimonial-card {
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

/* ── Client logos — scatter settle ── */
.gsap-logo-scatter {
  will-change: transform, opacity;
}

/* ── Contact form ── */
.gsap-form-reveal {
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

/* ── Footer ── */
.gsap-footer-reveal {
  will-change: transform, opacity;
}

/* ── Services cards track ── */
.gsap-services-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2rem;
}


/* ── Stat counters ── */
.gsap-stat-counter {
  will-change: contents;
}

/* ── Word-stagger heading reveal ──
   Each word is wrapped: .gsap-word-wrap (overflow:hidden mask)
   > .gsap-word (the animating element that slides up from below)
   GSAP sets initial y:'105%' — no CSS needed, always visible without JS */
.gsap-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}
.gsap-word {
  display: inline-block;
}

.gsap-split-heading,
.gsap-why-heading,
.gsap-services-heading {
  will-change: contents;
}

/* Services header: readable even before GSAP word reveal runs */
#services.services-cinematic .services-cinematic__header .gsap-word {
  color: #ffffff;
  transform: translateY(0);
  opacity: 1;
}

#services.services-cinematic .services-cinematic__header {
  opacity: 1;
}

#services.services-cinematic .services-cinematic__header .svc-cine-item,
#services.services-cinematic .services-stat-card {
  opacity: 1;
}

/* ── Tilt cards — cursor glow layer ── */
.gsap-card-3d::after,
.gsap-feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(212, 168, 83, 0.08), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.gsap-card-3d:hover::after,
.gsap-feature-card:hover::after {
  opacity: 1;
}

/* ── Loading screen — ensure it stays above smooth-wrapper ── */
#loadingScreen {
  z-index: 9999;
}

/* ── Fixed UI stays above smooth-content ── */
#backToTop,
#progressBar {
  z-index: 1000;
}

/* ── Mobile: disable heavy 3D to respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .gsap-card-3d,
  .gsap-feature-card,
  .gsap-testimonial-card,
  .gsap-form-reveal,
  .gsap-logo-scatter,
  .gsap-footer-reveal {
    will-change: auto;
    transform: none !important;
    opacity: 1 !important;
  }
}