/* ════════════════════════════════════════════════════════════════════════
 * garnet-cinematic.css — a cinematic storytelling layer over the warm gx-
 * system. Full-bleed scenes, the payphone-vs-home metaphor as an image
 * diptych, image-backed "moments" cards, a monumental gem interstitial, and
 * atmospheric scrims. Loads AFTER garnet-app.css; reuses its tokens.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Full-bleed cinematic hero ── */
.gx-hero--cine { position: relative; min-height: min(92vh, 820px); display: flex; align-items: center; padding-block: 0; overflow: hidden; }
.gx-hero__bg { position: absolute; inset: 0; z-index: 0; background: #050505 url('/assets/images/cinematic/hero.png') center/cover no-repeat; transform: scale(1.04); }
.gx-hero__scrim { position: absolute; inset: 0; z-index: 1; background:
    linear-gradient(90deg, rgba(5,5,5,0.94) 0%, rgba(5,5,5,0.78) 36%, rgba(5,5,5,0.30) 66%, rgba(5,5,5,0.55) 100%),
    linear-gradient(0deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0) 42%); }
.gx-hero--cine .gx-wrap { position: relative; z-index: 2; }
.gx-hero__content { max-width: 660px; }
.gx-hero--cine h1 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: 1.02; text-shadow: 0 2px 36px rgba(0,0,0,0.55); }
.gx-hero--cine .gx-lede { color: var(--paper-0); text-shadow: 0 1px 18px rgba(0,0,0,0.5); }
.gx-hero__scrolltip { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 2; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-2); }
.gx-hero__scrolltip::after { content: ''; display: block; width: 1px; height: 26px; margin: 0.5rem auto 0; background: linear-gradient(var(--accent-lift), transparent); animation: gx-cine-drop 2.2s ease-in-out infinite; }
@keyframes gx-cine-drop { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ── Metaphor diptych (payphone vs. home) ── */
.gx-scene { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gx-line); border-radius: var(--radius-3); overflow: hidden; border: 1px solid var(--gx-line); }
.gx-scene__panel { position: relative; min-height: 480px; display: flex; align-items: flex-end; padding: 2rem; background-size: cover; background-position: center; }
.gx-scene__panel--them { background-image: url('/assets/images/cinematic/payphone.png'); }
.gx-scene__panel--you  { background-image: url('/assets/images/cinematic/home.png'); }
.gx-scene__panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,5,5,0.95) 6%, rgba(5,5,5,0.35) 58%, rgba(5,5,5,0.1)); }
.gx-scene__copy { position: relative; z-index: 1; }
.gx-scene__copy p { margin: 0; font-size: 1.02rem; }
.gx-scene__kicker { display: inline-block; font: 600 0.72rem var(--gx-font-body); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.6rem; }
.gx-scene__panel--them .gx-scene__kicker { color: var(--paper-2); }
.gx-scene__panel--you .gx-scene__kicker { color: var(--accent-lift); }
.gx-scene__panel--you .gx-scene__copy strong { color: var(--accent-lift); }
@media (max-width: 760px) { .gx-scene { grid-template-columns: 1fr; } .gx-scene__panel { min-height: 380px; } }

/* ── Cinematic image "moments" cards (#why) ── */
.gx-card--cine { position: relative; overflow: hidden; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; border: 1px solid var(--gx-line); background: var(--ink-1); }
.gx-card--cine::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); transition: transform 0.7s var(--ease-out); }
.gx-card--cine:hover::before { transform: scale(1.09); }
.gx-card--cine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,5,5,0.96) 12%, rgba(5,5,5,0.45) 56%, rgba(5,5,5,0.18)); }
.gx-card--cine > * { position: relative; z-index: 1; }
.gx-card--cine h3 { text-shadow: 0 2px 16px rgba(0,0,0,0.6); }
.gx-card--journal::before { background-image: url('/assets/images/cinematic/journal.png'); }
.gx-card--documents::before { background-image: url('/assets/images/cinematic/documents.png'); }

/* ── Monumental gem interstitial (full-bleed) ── */
.gx-interstitial { position: relative; min-height: min(76vh, 680px); display: grid; place-items: center; text-align: center; overflow: hidden; padding: 3rem 1.25rem; }
.gx-interstitial__bg { position: absolute; inset: 0; background: #050505 url('/assets/images/cinematic/gem.png') center/cover no-repeat; transform: scale(1.04); }
.gx-interstitial::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(5,5,5,0.28) 0%, rgba(5,5,5,0.78) 58%, rgba(5,5,5,0.96) 100%); }
.gx-interstitial__copy { position: relative; z-index: 1; max-width: 680px; }
.gx-interstitial h2 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); text-shadow: 0 2px 40px rgba(0,0,0,0.6); }
.gx-interstitial .gx-lede { margin: 1rem auto 0; color: var(--paper-1); }

/* ── Cinematic reveal — slower, with a gentle rise (augments [data-reveal]) ── */
.gx-cine [data-reveal] { transition-duration: 0.95s; }

@media (prefers-reduced-motion: reduce) {
  .gx-hero__bg, .gx-interstitial__bg { transform: none; }
  .gx-card--cine::before { transform: none !important; }
  .gx-hero__scrolltip::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Crystal mode (body.gx-cryst) — the living raymarched garnet (garnet-crystal.js,
 * on the fixed #garnet-bg host) becomes the hero + interstitial background, and
 * the scroll-driven camera journey carries the story. The static cinematic PNGs
 * are dropped on those two surfaces (the gem is real-time now); the diptych and
 * "moments" cards keep their stills (and gain depth-parallax separately).
 * ════════════════════════════════════════════════════════════════════════ */

/* No-WebGL / pre-paint fallback: a still of the crystal hero sits on the fixed
   #garnet-bg host. garnet-crystal.js's opaque canvas covers it once it renders;
   if WebGL is unavailable, this poster shows instead of flat obsidian. */
.gx-cryst #garnet-bg {
  background: #050505 url('/assets/images/crystal-poster.jpg') center/cover no-repeat;
}

/* Hero: drop the static hero.png — the live crystal shows through. Keep a soft
   left-weighted scrim so the headline stays legible over the gem's glow. */
.gx-cryst .gx-hero__bg { display: none; }
.gx-cryst .gx-hero__scrim {
  background:
    linear-gradient(90deg, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.55) 32%, rgba(5,5,5,0.08) 60%, rgba(5,5,5,0) 100%),
    linear-gradient(0deg, rgba(5,5,5,0.66) 0%, rgba(5,5,5,0) 40%);
}

/* Interstitial: the crystal "returns" here, so drop gem.png and lighten the
   vignette to a gentle frame that lets the live gem read through it. */
.gx-cryst .gx-interstitial__bg { display: none; }
.gx-cryst .gx-interstitial::after {
  background: radial-gradient(ellipse at center, rgba(5,5,5,0) 0%, rgba(5,5,5,0.34) 60%, rgba(5,5,5,0.72) 100%);
}
.gx-cryst .gx-interstitial { min-height: min(86vh, 760px); }

/* The crystal is fill-rate heavy; under reduced motion garnet-crystal.js draws a
   single static frame, so the hero/interstitial copy still sits on a calm gem. */
@media (prefers-reduced-motion: reduce) {
  .gx-cryst .gx-hero--cine { min-height: min(88vh, 760px); }
}