/* ═══════════════════════════════════════════════════════════════════════════
   CINEMATIC INTRO  —  cinematic.css
   Position everything with position:fixed so no parent layout can push
   the canvas off-screen or give it zero height.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stage wrapper (mainly used to group for display:none teardown) ─────── */
#cinematic-stage {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}

/* ── Canvas container — base GPU layer (z-index:1)  ─────────────────────── */
/* Sits beneath #main (z-index:2) — #main is visibility:hidden during       */
/* the cinematic so the canvas is visible.  Cinematic text stays at 9000+.  */
#hero-scene-container {
  position: fixed   !important;
  top:      0       !important;
  left:     0       !important;
  width:    100vw   !important;
  height:   100vh   !important;
  z-index:  1       !important;   /* low base layer — GPU composited */
  display:  block   !important;
  overflow: hidden  !important;
  background: #050510 !important;
  pointer-events: auto !important;
  /* Own GPU compositing layer — stops layer thrashing with Framer */
  transform:           translateZ(0);
  will-change:         transform;
  backface-visibility: hidden;
  isolation:           isolate;
}

/* ── Text overlay — sits above the canvas ───────────────────────────────── */
#cinematic-text-overlay {
  position:        fixed          !important;
  top:             0              !important;
  left:            0              !important;
  width:           100vw          !important;
  height:          100vh          !important;
  z-index:         10000          !important;
  display:         flex           !important;
  align-items:     center         !important;
  justify-content: center         !important;
  pointer-events:  none           !important;
  padding: 0 clamp(1rem, 6vw, 8rem);
  /* GPU layer isolation — prevents flicker when canvas repaints beneath */
  will-change:         transform;
  backface-visibility: hidden;
  transform:           translateZ(0);
}

/* ── Giant headline ─────────────────────────────────────────────────────── */
.giant-text {
  margin:       0;
  font-family:  'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size:    clamp(2rem, 7.5vw, 7rem);
  font-weight:  900;
  color:        #ffffff;
  text-align:   center;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height:  1.05;
  opacity:      0;
  transform:    translateY(18px);
  transition:
    opacity   0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  text-shadow:
    0 0 40px rgba(0, 229, 255, 0.55),
    0 2px 12px rgba(0, 0, 0, 0.9),
    0 0 80px rgba(124, 58, 237, 0.3);
}

.giant-text.visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── Framer site — own GPU layer, sits above canvas (z-index:2) ─────────── */
/* IMPORTANT: use visibility:hidden, NOT display:none.                       */
/* display:none blocks React hydration → Framer's #tmp-loading never fades.  */
/* visibility:hidden keeps the element in the DOM so React can hydrate.       */
/* background:transparent lets the canvas show through before reveal.        */
/* display:none → display:block causes a layout reflow flash.               */
/* Use opacity + visibility instead — GSAP drives the 0→1 fade on reveal.  */
#main {
  visibility:     hidden      !important;
  pointer-events: none        !important;
  opacity:        0;           /* NO !important — GSAP inline style overrides this */
  position:            relative     !important;
  z-index:             2            !important;
  background:          transparent  !important;
  transform:           translateZ(0);
  will-change:         transform;
  backface-visibility: hidden;
  contain:             layout style paint;
}

#main.cinematic-revealed {
  visibility:     visible     !important;
  pointer-events: auto        !important;
  /* opacity intentionally omitted — GSAP animates 0→1 via inline style     */
}

/* ── Framer inner wrapper — own compositing layer ───────────────────────── */
.framer-wrapper,
[class^="framer-"],
[data-framer-component-type] {
  backface-visibility: hidden;
  transform:           translateZ(0);
}

/* Kill Framer's orange loading overlay — we have our own 3D loading UI */
#tmp-loading { display: none !important; }

/* ── Scroll spacer — invisible 400vh trigger element ───────────────────── */
/* position:relative so it participates in document height but doesn't     */
/* affect any visual layout; the canvas is fixed and doesn't move with it. */
#cinematic-spacer {
  position:       relative;
  height:         400vh;
  width:          1px;
  pointer-events: none;
  z-index:        -1;
}