@charset "UTF-8";

/**
 * SKYENGINEX cinematic scroll layer.
 * Styles for three scroll-driven scenarios (see scroll-cinema.js):
 *   1. Hero dispersion   - hero content scatters in 3D depth on exit.
 *   2. Cinematic reveal   - a panel unmasks via clip-path + blur + scale + mask.
 *   3. Stacking cards     - cards pile up with depth as you scroll.
 *
 * All motion runs on transform / opacity / filter only (GPU friendly) and is
 * gated by .no-gsap and prefers-reduced-motion fallbacks at the bottom.
 * Colours reuse the existing theme variables so light + dark stay in sync.
 */

/* ============================================================
   Scenario 1 — Hero dispersion (depth scatter on exit)
   The JS drives transforms on .hero-content children; the only thing
   CSS needs to supply is a shared perspective + compositor hints.
   ============================================================ */
.hero-content {
  perspective: 1200px;
}

.hero-content > * {
  transform: translateZ(0);
  will-change: transform, filter, opacity;
}

/* ============================================================
   Scenario 2 — Cinematic clip-path / mask reveal
   JS writes a single progress variable (--p, 0 -> 1) every frame,
   exactly like Framer Motion's useTransform(scrollYProgress, ...).
   CSS maps that progress onto clip-path, blur, scale, opacity and a
   light mask sweep across the headline.
   ============================================================ */
.cinema-reveal {
  position: relative;
  min-height: 220vh; /* scroll runway for the scrubbed reveal */
  overflow: clip;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 28%, rgba(160, 196, 255, 0.2), transparent 56%),
    linear-gradient(180deg, var(--bg) 0%, var(--surface-strong) 50%, var(--bg) 100%);
}

.dark .cinema-reveal {
  background:
    radial-gradient(circle at 50% 28%, rgba(143, 184, 255, 0.12), transparent 56%),
    linear-gradient(180deg, var(--bg) 0%, #0c0f15 50%, var(--bg) 100%);
}

.cinema-reveal-inner {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 104px 24px;
  perspective: 1500px;
}

.cinema-reveal-panel {
  --p: 0;
  position: relative;
  width: min(960px, 100%);
  padding: clamp(30px, 6vw, 76px);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
  isolation: isolate;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  /* useTransform-style mapping: progress drives every visual axis */
  opacity: calc(0.12 + var(--p) * 0.88);
  filter: blur(calc((1 - var(--p)) * 18px));
  transform:
    perspective(1500px)
    translateZ(0)
    scale(calc(1 + (1 - var(--p)) * 0.14))
    rotateX(calc((1 - var(--p)) * -8deg));
  clip-path: inset(
    calc((1 - var(--p)) * 46%)
    calc((1 - var(--p)) * 46%)
    round 20px
  );
  will-change: transform, filter, clip-path, opacity;
}

/* Faint engineering grid inside the panel for the futuristic texture */
.cinema-reveal-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(83, 127, 202, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 127, 202, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0 58%, transparent 92%);
  mask-image: radial-gradient(circle at center, #000 0 58%, transparent 92%);
}

/* Accent scan-line that slides in as the reveal completes */
.cinema-reveal-panel::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: calc(100% - var(--p) * 100%);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: calc(var(--p) * (1 - var(--p)) * 4); /* peaks mid-reveal, fades at ends */
  box-shadow: 0 0 18px rgba(160, 196, 255, 0.7);
}

.cinema-reveal-panel h2 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.04;

  /* light sweeps left -> right across the headline as progress grows */
  -webkit-mask-image: linear-gradient(
    100deg,
    #000 0 calc(var(--p) * 122%),
    transparent calc(var(--p) * 122% + 9%)
  );
  mask-image: linear-gradient(
    100deg,
    #000 0 calc(var(--p) * 122%),
    transparent calc(var(--p) * 122% + 9%)
  );
}

.cinema-reveal-copy {
  max-width: 600px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.75;
}

/* ============================================================
   Scenario 3 — Stacking cards (sticky pile-up with depth)
   Cards stick to the same line; as the next one scrolls up it covers
   the previous, while JS scales + dims + blurs the cards underneath.
   ============================================================ */
.cinema-stack {
  position: relative;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(160, 196, 255, 0.16), transparent 18%),
    var(--bg);
  padding: 14vh 0 22vh;
}

.dark .cinema-stack {
  background:
    linear-gradient(180deg, rgba(143, 184, 255, 0.1), transparent 18%),
    var(--bg);
}

.cinema-stack-inner {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
}

.cinema-stack-heading {
  max-width: 640px;
  margin: 0 auto 8vh;
  text-align: center;
}

.cinema-stack-track {
  position: relative;
}

.stack-card {
  position: sticky;
  top: calc(15vh + var(--i, 0) * 14px);
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: clamp(280px, 42vh, 380px);
  margin-bottom: 9vh;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface-strong);
  box-shadow: 0 30px 80px rgba(51, 51, 51, 0.16);
  transform-origin: center top;
  overflow: hidden;
  will-change: transform, filter;
}

.dark .stack-card {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.stack-card:last-child {
  margin-bottom: 0;
}

/* Accent edge stripe per card, cycling the brand palette */
.stack-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--accent);
}

.stack-card:nth-child(2)::before { background: var(--accent-dark); }
.stack-card:nth-child(3)::before { background: #7aa2f0; }
.stack-card:nth-child(4)::before { background: #537fca; }

.stack-index {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent-dark);
}

.stack-card h3 {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.1;
}

.stack-card p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.7;
}

/* ============================================================
   Responsive tuning
   ============================================================ */
@media (max-width: 760px) {
  .cinema-reveal {
    min-height: 180vh;
  }

  .cinema-reveal-inner {
    padding: 88px 18px;
  }

  .stack-card {
    top: calc(11vh + var(--i, 0) * 10px);
    min-height: 240px;
    margin-bottom: 7vh;
  }
}

/* ============================================================
   Graceful fallbacks — reveal everything when motion is off
   (mirrors the existing .no-gsap / reduced-motion patterns)
   ============================================================ */
.no-gsap .cinema-reveal,
.no-gsap .cinema-reveal-inner {
  position: relative;
  min-height: auto;
}

.no-gsap .cinema-reveal-panel,
.no-gsap .cinema-reveal-panel h2 {
  --p: 1;
}

.no-gsap .stack-card {
  position: relative;
  top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .cinema-reveal,
  .cinema-reveal-inner {
    position: relative;
    min-height: auto;
  }

  .cinema-reveal-panel {
    filter: none;
    clip-path: none;
    transform: none;
    opacity: 1;
  }

  .cinema-reveal-panel::after {
    display: none;
  }

  .cinema-reveal-panel h2 {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .stack-card {
    position: relative;
    top: auto;
    margin-bottom: 16px;
    transform: none;
    filter: none;
  }

  .hero-content > * {
    will-change: auto;
  }
}