/**
 * Cinematic presentation layer — GPU-first, content-agnostic.
 * Pairs with cinematic-effects.js (GSAP, Lenis, Three).
 */

/* --- Lenis: native smooth-scroll off (Lenis drives feel) --- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* --- Atmosphere: breathing mesh + grain (whole page) --- */
body.gttd-cinematic-ready::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(212, 175, 55, 0.16), transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 30%, rgba(255, 255, 255, 0.08), transparent 50%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(0, 0, 0, 0.06), transparent 45%),
    linear-gradient(125deg, #faf9f5 0%, #f4f1ea 35%, #faf8f2 70%, #f0ebe0 100%);
  background-size: 140% 140%, 120% 120%, 100% 100%, 200% 200%;
  animation: gttd-mesh-breathe 28s ease-in-out infinite alternate;
  opacity: 0.95;
}

@keyframes gttd-mesh-breathe {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%;
  }
  100% {
    background-position: 100% 45%, 0% 55%, 50% 0%, 100% 40%;
  }
}

body.gttd-cinematic-ready::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transform: translateZ(0);
}

@media (prefers-reduced-motion: no-preference) {
  body.gttd-cinematic-ready::after {
    animation: gttd-grain-drift 4.5s steps(6) infinite;
  }
}

@keyframes gttd-grain-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-0.35%, 0.25%, 0);
  }
}

/* --- Hero WebGL canvas --- */
.gttd-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.92;
}

.hero {
  position: relative;
}

.hero::before {
  z-index: 0;
}

.hero-overlay {
  z-index: 2;
}

/* SVG sweep above overlay */
.gttd-hero-svg-sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.gttd-hero-svg-sweep path {
  fill: none;
  stroke: rgba(212, 175, 55, 0.45);
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.35));
}

.gttd-char {
  display: inline-block;
}

/*
 * site-enhancements.css hides hero copy until window "load" (body.loaded).
 * Parent opacity:0 makes children invisible even after GSAP runs — title looked blank.
 * Cinematic drives hero motion instead; neutralize that gate + duplicate keyframes.
 */
@media (prefers-reduced-motion: no-preference) {
  body.gttd-cinematic-active:not(.loaded) .hero-subtitle,
  body.gttd-cinematic-active:not(.loaded) .hero-title,
  body.gttd-cinematic-active:not(.loaded) .hero-tagline,
  body.gttd-cinematic-active:not(.loaded) .hero-description,
  body.gttd-cinematic-active:not(.loaded) .hero-buttons,
  body.gttd-cinematic-active:not(.loaded) .hero-trust,
  body.gttd-cinematic-active:not(.loaded) .hero-logo-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

body.gttd-cinematic-active .hero-subtitle,
body.gttd-cinematic-active .hero-title,
body.gttd-cinematic-active .hero-tagline,
body.gttd-cinematic-active .hero-description,
body.gttd-cinematic-active .hero-buttons,
body.gttd-cinematic-active .hero-trust,
body.gttd-cinematic-active .hero-logo-card {
  animation: none !important;
}

/* --- Section geometry: diagonal seams --- */
section:not(.hero) {
  position: relative;
  z-index: 1;
}

section:not(.hero)::before {
  content: '';
  position: absolute;
  top: -min(4.5vw, 42px);
  left: 0;
  right: 0;
  height: min(4.5vw, 42px);
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent);
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

.features,
.services,
.pricing,
.gallery,
.about,
.contact,
.footer {
  margin-top: 0;
}

/* --- Scroll-driven section shell --- */
.gttd-section-shell {
  position: relative;
  z-index: 1;
}

/* --- Sticky horizontal track (gallery) --- */
.gttd-gallery-track {
  overflow: hidden;
  width: 100%;
}

.service-card,
.feature-card,
.pricing-card,
.extra-card,
.gallery-item,
.contact-card {
  position: relative;
}

/* --- Word reveal chunks --- */
.gttd-word {
  display: inline-block;
  margin-right: 0.35em;
}

.gttd-line {
  display: block;
  overflow: hidden;
}

/* --- Gallery clip assemble --- */
.gallery-item {
  overflow: hidden;
}

/* --- Pin spacer helper --- */
.gttd-pin-proxy {
  pointer-events: none;
}

/* --- Kill legacy CSS reveal when GSAP owns motion --- */
body.gttd-cinematic-active .gttd-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.gttd-cinematic-ready::before,
  body.gttd-cinematic-ready::after {
    animation: none !important;
  }

  body.gttd-cinematic-ready::after {
    opacity: 0.025;
  }

  .gttd-hero-canvas {
    display: none !important;
  }

  .gttd-hero-svg-sweep {
    display: none !important;
  }
}