/* ═══════════════════════════════════════════════════════════════
   PREMIUM EXPERIENCE LAYER
   Three.js painted stage · Lenis smooth scroll · GSAP chapters
   Additive only — everything is gated behind body.premium so the
   site falls back to its exact current design if WebGL/GSAP/Lenis
   fail to load or prefers-reduced-motion is set.
═══════════════════════════════════════════════════════════════ */

/* ── WebGL painted stage (sits behind all content) ── */
#webgl-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
body.premium #webgl-bg { opacity: 1; }

/* Lift non-<section> chrome above the stage (sections already get z-index:1) */
body.premium .ticker-wrap,
body.premium footer { position: relative; z-index: 1; }

/* ── Chapter tint: a whole-page colour wash that flows between chapters ──
   Sits just above the painted canvas, behind all content → readability-safe.
   The colour transitions smoothly when JS swaps it on each chapter change. */
#chapter-tint {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-color: transparent;
  mix-blend-mode: soft-light;
  transition: background-color 1s ease, opacity 1.4s ease;
}
body.premium #chapter-tint { opacity: 1; }

/* ── Cursor glow (desktop) — additive light following the pointer.
   JS sets background-color + transform + opacity; here we set the geometry. */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 300;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* ── Hero composition: light the brand visual with the accent so the
   3D "data core" and the product mark read as one scene. ── */
body.premium .hero-brand-visual { position: relative; isolation: isolate; }
body.premium .hero-brand-visual::after {
  content: '';
  position: absolute;
  inset: -16% -10%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 32%, rgba(31,223,120,0.22), transparent 72%);
  filter: blur(38px);
  pointer-events: none;
}

/* ── Lenis smooth scroll (per Lenis docs) ── */
html.lenis,
html.lenis body { min-height: 100%; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════
   TRANSLUCENT CHAPTERS
   Gradient scrims: opaque (text-safe) through the middle, more
   transparent across the 96px+ section padding so the painted
   color bleeds at every chapter seam — the "fluid color transition".
═══════════════════════════════════════════════════════════════ */

/* Soften section seams so chapters flow into one another (no hard cut lines) */
body.premium section[id],
body.premium .hero,
body.premium .cta-section { border-top-color: transparent !important; border-bottom-color: transparent !important; }

/* Hero — the signature moment: let the stage read strongest */
body.premium .hero {
  background:
    radial-gradient(ellipse 48% 42% at 9% 11%, rgba(31,223,120,0.16), transparent 68%),
    radial-gradient(ellipse 36% 38% at 88% 8%, rgba(255,181,71,0.10), transparent 64%),
    rgba(6,18,11,0.30) !important;
}

/* Dark chapters */
body.premium .ticker-wrap { background: rgba(6,18,11,0.5) !important; }
body.premium footer { background: rgba(6,18,11,0.55) !important; }
body.premium .cta-section {
  background: linear-gradient(180deg,
    rgba(6,18,11,0) 0%,
    rgba(6,18,11,0.55) 120px,
    rgba(6,18,11,0.55) 100%) !important;
}

/* Architecture is a DARK section (white heading, dark cards with light text) */
body.premium .architecture-section {
  background: linear-gradient(180deg,
    rgba(8,20,13,0) 0%,
    rgba(8,20,13,0.58) 130px,
    rgba(8,20,13,0.58) calc(100% - 130px),
    rgba(8,20,13,0) 100%) !important;
}

/* Light chapters — center stays opaque for crisp dark text,
   seams open up so the painted color bleeds between sections */
body.premium .problem-section,
body.premium .pillars-section,
body.premium .sst-section,
body.premium .platform-section,
body.premium .blueprint-section,
body.premium .workflow-section,
body.premium .features-section,
body.premium .roadmap-section,
body.premium .integrations-section,
body.premium .team-section {
  background: linear-gradient(180deg,
    rgba(240,244,238,0) 0%,
    rgba(240,244,238,0.90) 130px,
    rgba(240,244,238,0.90) calc(100% - 130px),
    rgba(240,244,238,0) 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC REVEALS — richer entrance under premium (CSS only,
   composes with the existing IntersectionObserver .visible toggle)
═══════════════════════════════════════════════════════════════ */
body.premium .reveal {
  transform: translateY(42px) scale(0.985);
  filter: blur(7px);
  transition:
    opacity 0.9s cubic-bezier(.16,1,.3,1),
    transform 0.9s cubic-bezier(.16,1,.3,1),
    filter 0.9s cubic-bezier(.16,1,.3,1);
}
body.premium .reveal-left,
body.premium .reveal-right {
  filter: blur(7px);
  transition:
    opacity 0.9s cubic-bezier(.16,1,.3,1),
    transform 0.9s cubic-bezier(.16,1,.3,1),
    filter 0.9s cubic-bezier(.16,1,.3,1);
}
body.premium .reveal.visible,
body.premium .reveal-left.visible,
body.premium .reveal-right.visible { filter: blur(0); transform: none; }

/* The two dark sections force-reveal their content in main.css —
   never leave them blurred */
body.premium .pillars-section .reveal,
body.premium .sst-section .reveal {
  filter: none !important;
  transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   CHAPTER RAIL — vertical chapter index (decorative, desktop only)
═══════════════════════════════════════════════════════════════ */
.chapter-rail {
  position: fixed;
  left: auto;                    /* defend against any inherited nav left:0 */
  right: 22px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 400;
  width: -moz-fit-content;
  width: fit-content;
  /* hard resets in case the element ever inherits global chrome styles */
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 13px;
  opacity: 0;
  pointer-events: none;          /* container never blocks the page */
  transition: opacity 0.7s ease 0.5s;
  --accent: #1fdf78;
}
body.premium .chapter-rail { opacity: 1; }
.chapter-rail button {
  -webkit-appearance: none;
  appearance: none;
  position: relative;            /* anchor for the absolute label */
  border: 0;
  margin: 0;
  padding: 5px 2px;
  background: transparent;
  cursor: pointer;
  display: block;
  font: inherit;
  pointer-events: auto;          /* only the dots are interactive */
}
.cr-label {
  position: absolute;            /* out of flow → rail stays dot-width */
  right: 100%;
  top: 50%;
  margin-right: 12px;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.cr-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(140,150,140,0.55);
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), background 0.35s ease,
              border-color 0.35s ease, box-shadow 0.35s ease;
  flex: none;
}
.chapter-rail button:hover .cr-label { opacity: 1; transform: translateY(-50%); }
.chapter-rail button:hover .cr-dot { border-color: var(--accent); transform: scale(1.2); }
.chapter-rail button.active .cr-label { opacity: 1; transform: translateY(-50%); color: #fff; }
.chapter-rail button.active .cr-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
              0 0 14px var(--accent);
  transform: scale(1.35);
}

/* ── Chapter marker — current chapter number + title, bottom-left ── */
.chapter-marker {
  position: fixed;
  left: 30px;
  bottom: 24px;
  z-index: 400;
  display: flex;
  align-items: baseline;
  gap: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease 0.6s;
  mix-blend-mode: difference;
}
body.premium .chapter-marker { opacity: 1; }
.cm-index {
  font-family: var(--body);
  font-weight: 800;
  font-size: 38px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
}
.cm-rule {
  width: 26px;
  height: 1px;
  background: #fff;
  opacity: 0.7;
  align-self: center;
}
.cm-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  max-width: 180px;
  line-height: 1.4;
}

/* ── Hide chapter chrome on smaller screens ── */
@media (max-width: 960px) {
  .chapter-rail { display: none; }
  .chapter-marker { display: none; }
}

/* ── Mobile: section padding is ~80px, so shrink the seam feather to keep
   text on the opaque zone (desktop uses 130px). ── */
@media (max-width: 768px) {
  body.premium .problem-section,
  body.premium .pillars-section,
  body.premium .sst-section,
  body.premium .platform-section,
  body.premium .blueprint-section,
  body.premium .workflow-section,
  body.premium .features-section,
  body.premium .roadmap-section,
  body.premium .integrations-section,
  body.premium .team-section {
    background: linear-gradient(180deg,
      rgba(240,244,238,0) 0%,
      rgba(240,244,238,0.92) 56px,
      rgba(240,244,238,0.92) calc(100% - 56px),
      rgba(240,244,238,0) 100%) !important;
  }
  body.premium .architecture-section {
    background: linear-gradient(180deg,
      rgba(8,20,13,0) 0%,
      rgba(8,20,13,0.6) 56px,
      rgba(8,20,13,0.6) calc(100% - 56px),
      rgba(8,20,13,0) 100%) !important;
  }
  body.premium .cta-section {
    background: linear-gradient(180deg,
      rgba(6,18,11,0) 0%,
      rgba(6,18,11,0.55) 56px,
      rgba(6,18,11,0.55) 100%) !important;
  }
  /* the brand-visual halo is large on desktop; keep it contained on mobile */
  body.premium .hero-brand-visual::after { inset: -8% -4%; filter: blur(24px); }
}

/* ── Respect reduced motion: never animate, never blur ── */
@media (prefers-reduced-motion: reduce) {
  #webgl-bg { display: none; }
  .chapter-rail, .chapter-marker, .cursor-glow, #chapter-tint { display: none; }
  body.premium .reveal,
  body.premium .reveal-left,
  body.premium .reveal-right { filter: none; }
}