/* ════════════════════════════════════════════════════════════════════════
   landing.css — restrained, BRAND-FAITHFUL elevation of the logged-out
   landing. Loaded ONLY by index.html, scoped under .landing-v2.
   Hard rule: keep --grad-cinema (ember #ff6a3d → astral #b66bff → ice
   #41d1ff) and the Inter + single serif-accent type system EXACTLY. No new
   palette, no Didone headline reset. The lift comes only from depth,
   atmosphere, spacing, and motion. Every JS hook is untouched.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────── HERO — depth & atmosphere ───────────────────── */
/* Brighter, larger color blooms built from the SAME three brand colors,
   so the field has visible cinematic presence instead of mostly-black —
   ember anchored top-left under the headline, astral on the right, ice
   rising from below. A slow drift gives it life. No hue we don't use. */
.landing-v2 .hero-bg::before {
  content: '';
  position: absolute; inset: -25%;
  z-index: 0;
  background:
    radial-gradient(44% 50% at 12% 18%, rgba(255,106,61,0.24), transparent 58%),
    radial-gradient(50% 56% at 90% 24%, rgba(182,107,255,0.22), transparent 60%),
    radial-gradient(54% 58% at 62% 108%, rgba(65,209,255,0.15), transparent 60%);
  filter: blur(20px);
  will-change: transform;
  animation: landing-nebula 38s var(--ease) infinite alternate;
}
.landing-v2 .hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  /* stronger cinematic vignette — clearly frames the shot and lifts the
     headline out of the field */
  background: radial-gradient(120% 110% at 48% 40%, transparent 38%, rgba(0,0,0,0.62) 78%, rgba(0,0,0,0.92) 100%);
}
@keyframes landing-nebula {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.05); }
  100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.12); }
}

/* Give the orbs gentle ambient life (colours unchanged) on top of the
   existing mouse-parallax, and a touch more bloom for depth. */
.landing-v2 .hero-orb { filter: blur(84px); opacity: 0.34; will-change: transform; }
.landing-v2 .hero-orb.a { animation: orb-float-a 22s ease-in-out infinite alternate; }
.landing-v2 .hero-orb.b { animation: orb-float-b 26s ease-in-out infinite alternate; }
.landing-v2 .hero-orb.c { animation: orb-float-c 30s ease-in-out infinite alternate; }
@keyframes orb-float-a { to { transform: translate3d(3%, 2%, 0); } }
@keyframes orb-float-b { to { transform: translate3d(-3%, 3%, 0); } }
@keyframes orb-float-c { to { transform: translate3d(2%, -3%, 0); } }

/* Slightly richer grain + a hair more line-height air under the tagline. */
.landing-v2 .hero .grain { opacity: 0.075; }
.landing-v2 .hero-inner { gap: 34px; }
.landing-v2 .hero-tagline { line-height: 1.42; }

/* A soft, on-brand glow on the serif-accent word — same white it already
   is, just lit, so "imagination" feels like the source of the light. */
.landing-v2 .hero h1 .serif-accent {
  text-shadow: 0 0 46px rgba(255,255,255,0.18), 0 0 90px rgba(182,107,255,0.16);
}

/* Scroll cue gets a quiet pulse so the eye knows there's more below. */
.landing-v2 .hero-meta .scroll .line {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: scroll-cue 2.6s var(--ease) infinite;
}
@keyframes scroll-cue { 0%,100% { opacity: .5; transform: scaleX(.7); } 50% { opacity: 1; transform: scaleX(1); } }

/* ───────────────────── HERO FILM WALL ───────────────────── */
/* Layering: film wall (0) < orbs/vignette (1) < grain (2) < copy (3).
   The wall is the new base; the orbs tint it; a heavy mask keeps the
   headline legible. */
.landing-v2 .hero-reel { z-index: 0; }
.landing-v2 .hero-bg   { z-index: 1; }
.landing-v2 .hero .grain { z-index: 2; }
.landing-v2 .hero-inner { z-index: 3; }
.landing-v2 .hero-meta  { z-index: 4; }

.landing-v2 .hero-reel {
  position: absolute; inset: 0;
  overflow: hidden;
  display: flex;
  gap: 1.1vw; padding: 1vw;
  /* tilt the wall back a touch + a slow parallax breath for depth */
  transform: perspective(1500px) rotateX(2.5deg) scale(1.06);
  transform-origin: 50% 42%;
  opacity: 0.58;
  filter: saturate(1.06);
  pointer-events: none;
  animation: reel-breath 46s ease-in-out infinite alternate;
}
@keyframes reel-breath {
  from { transform: perspective(1500px) rotateX(2.5deg) scale(1.06) translateY(-1.5%); }
  to   { transform: perspective(1500px) rotateX(2.5deg) scale(1.12) translateY(1.5%); }
}
/* Film-wheel columns: each strip is taller than the hero and drifts
   vertically (JS measures the overflow into --reel-shift; direction and
   tempo alternate per column) so new shots keep rotating into view. */
.landing-v2 .hero-reel-col { flex: 1 1 0; min-width: 0; position: relative; }
.landing-v2 .hero-reel-strip {
  display: flex; flex-direction: column; gap: 1.1vw;
  will-change: transform;
  animation: reel-drift 60s ease-in-out infinite alternate;
}
@keyframes reel-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--reel-shift, 0px))); }
}
.landing-v2 .hero-reel.reel-paused .hero-reel-strip { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .landing-v2 .hero-reel, .landing-v2 .hero-reel-strip { animation: none; }
}
.landing-v2 .hero-reel-tile {
  width: 100%; aspect-ratio: 2 / 3;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0c0c10 center / cover no-repeat;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.landing-v2 .hero-reel-tile video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Reliable, on-brand poster fills (no network dependency) — deep cinematic
   gradients drawn only from the brand palette. Real film art (.has-art)
   replaces these per-tile the moment a film has a posterUrl. */
.landing-v2 .reel-grad-0 { background: linear-gradient(155deg, #ff6a3d 0%, #2a0210 92%); }
.landing-v2 .reel-grad-1 { background: linear-gradient(155deg, #b66bff 0%, #170533 92%); }
.landing-v2 .reel-grad-2 { background: linear-gradient(155deg, #41d1ff 0%, #06283a 92%); }
.landing-v2 .reel-grad-3 { background: linear-gradient(155deg, #ff6a3d 0%, #6d28d9 96%); }
.landing-v2 .reel-grad-4 { background: linear-gradient(155deg, #a78bfa 0%, #0e7490 96%); }
.landing-v2 .reel-grad-5 { background: linear-gradient(155deg, #f7c948 0%, #1a0500 92%); }
/* a soft inner sheen so each tile reads as a poster, not a flat swatch */
.landing-v2 .hero-reel-tile::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 40%, rgba(0,0,0,0.35));
}
.landing-v2 .hero-reel-tile { position: relative; }
/* The wall is a desktop flourish — drop it on phones (battery + the orbs
   already carry the mobile hero). */
@media (max-width: 720px) { .landing-v2 .hero-reel { display: none !important; } }

/* Readability mask over the wall: dark on the left (under the headline),
   a centre/edge vignette, and top+bottom fades into the page. */
.landing-v2 .hero-reel::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0.84) 22%, rgba(0,0,0,0.42) 56%, rgba(0,0,0,0.34) 100%),
    radial-gradient(140% 120% at 40% 36%, transparent 34%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.65) 0%, transparent 16%, transparent 74%, #000 100%);
}
/* Keep the headline crisp over the moving wall. */
.landing-v2 .hero h1 {
  /* rotating scramble headline — kept to ONE line so its height is constant
     and nothing below it (tagline, CTAs) ever shifts as phrases cycle.
     Sized so the longest phrase ("A creative home for anyone.") fits one line. */
  font-size: clamp(30px, 5vw, 74px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 50px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.4);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.landing-v2 .hero-rot { display: block; }
/* Colour-wave headline: the wrapper holds the brand gradient clipped to text;
   each character toggles between transparent (reveals the gradient) and white. */
.landing-v2 .rot-grad {
  display: inline-block;
  white-space: nowrap;
  background: var(--grad-cinema);
  -webkit-background-clip: text;
          background-clip: text;
}
.landing-v2 .hch {
  -webkit-text-fill-color: #fff;
  color: #fff;
}
.landing-v2 .hch.is-color {
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* The last word carries its OWN gradient, sized to the word, so it shows the
   full orange→purple→cyan range instead of a slice of the title-wide one. */
.landing-v2 .rot-last {
  background: var(--grad-cinema);
  -webkit-background-clip: text;
          background-clip: text;
}

/* The hero content was a shrink-to-content, auto-centered flex item, so a
   changing single-line title re-centered the whole block (title + tagline +
   buttons slid sideways). Pin it full-width + left-aligned; a script sets
   padding-left to the logo's right edge so the title only grows rightward. */
.landing-v2 .hero-inner {
  align-self: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  align-items: flex-start;
  text-align: left;
}
/* Phones are too narrow for one line — allow wrap and reserve two lines so
   the layout below still stays put. */
@media (max-width: 640px) {
  .landing-v2 .hero h1 { white-space: normal; min-height: 2.2em; }
}
.landing-v2 .hero-tagline { text-shadow: 0 1px 24px rgba(0,0,0,0.7); }

/* The slate eyebrow sits over the brightest part of the wall — lift its
   contrast and back it with a shadow so it stays legible. */
.landing-v2 .hero .eyebrow {
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 2px 18px rgba(0,0,0,0.9);
}

/* ───────────────────── SECTION RHYTHM ───────────────────── */
/* A touch more vertical breathing room between movements (Apple-keynote
   pacing) without disturbing the existing layout. */
.landing-v2 section { position: relative; }
.landing-v2 .pillars { margin-top: 64px !important; gap: 18px; }

/* ───────────────────── PILLARS — depth + on-brand hover ───────────────────── */
.landing-v2 .pillar {
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -30px rgba(0,0,0,0.8);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* Cinema-gradient hairline reveal on hover — uses the BRAND gradient. */
.landing-v2 .pillar::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-cinema);
  opacity: 0; transform: scaleX(0.4); transform-origin: left;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.landing-v2 .pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 36px 80px -34px rgba(0,0,0,0.9);
}
.landing-v2 .pillar:hover::after { opacity: 1; transform: scaleX(1); }

/* ───────────────────── STUDIO SHOWCASE — more presence ───────────────────── */
.landing-v2 .studio-frame {
  box-shadow:
    0 60px 130px rgba(0,0,0,0.55),
    0 0 120px -50px rgba(182,107,255,0.30),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Faint brand bloom beneath the device so the screen "casts light." */
.landing-v2 .studio-frame::after {
  content: '';
  position: absolute; left: 10%; right: 10%; bottom: -46px; height: 110px;
  z-index: -2;
  background: radial-gradient(60% 100% at 50% 0%, rgba(182,107,255,0.22), rgba(65,209,255,0.10) 50%, transparent 72%);
  filter: blur(26px);
  opacity: 0.75;
}

/* ───────────────────── TOOL STRIP — smoother lift ───────────────────── */
.landing-v2 .tool {
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.landing-v2 .tool:hover { transform: translateY(-3px); }

/* ───────────────────── RAILS / GRID (when films exist) ───────────────────── */
.landing-v2 .rail .poster,
.landing-v2 .film-grid .poster {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.landing-v2 .rail .poster:hover,
.landing-v2 .film-grid .poster:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 26px 70px rgba(0,0,0,0.6);
}

/* ───────────────────── CLOSING CTA — brand bloom ───────────────────── */
.landing-v2 .cta { overflow: hidden; }
.landing-v2 .cta::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 80% at 50% 118%, rgba(255,106,61,0.12), rgba(182,107,255,0.08) 45%, transparent 62%);
}

/* ───────────────────── FEATURED CARDS — frames ───────────────────── */
.landing-v2 .rail .poster,
.landing-v2 .film-grid .poster {
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 20px 54px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.landing-v2 .rail .poster::after,
.landing-v2 .film-grid .poster::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 22%);
}
.landing-v2 .rail .poster:hover,
.landing-v2 .film-grid .poster:hover {
  border-color: rgba(255,255,255,0.26);
}
/* a real frame from the film fills the card; scrim keeps the title legible */
.landing-v2 .poster-framed video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.landing-v2 .poster-framed::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 32%, rgba(0,0,0,0.72) 100%);
}
.landing-v2 .poster-framed .poster-canvas { z-index: 2; }
.landing-v2 .poster-framed .grain { z-index: 1; }

/* ───────────────────── STUDIO PREVIEW — real scene + asset thumbs ─────────────── */
/* The stage shows an actual film clip (the "live preview") instead of an
   empty plate; a scrim keeps the caption legible. */
.landing-v2 .ss-stage .ss-scene {
  position: absolute; inset: 24px;
  border-radius: 14px; overflow: hidden;
  z-index: 1;
}
.landing-v2 .ss-stage .ss-scene video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.landing-v2 .ss-stage .ss-scene::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(82% 76% at 50% 42%, transparent 32%, rgba(3,0,10,0.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35), transparent 30%, rgba(0,0,0,0.45));
}
/* Asset tiles read as real frame thumbnails: inner frame + sheen + vignette. */
.landing-v2 .asset-tile {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 6px 18px rgba(0,0,0,0.4);
}
.landing-v2 .asset-tile:not(.dashed)::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 42%, rgba(0,0,0,0.4));
}
.landing-v2 .asset-tile.c { background: linear-gradient(135deg, #5b6472, #11151c); }

/* studio caption legibility over the live scene */
.landing-v2 .ss-stage .scene-text .label {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 2px 16px rgba(0,0,0,0.85);
}
.landing-v2 .ss-stage .scene-text .head { text-shadow: 0 2px 20px rgba(0,0,0,0.6); }
/* seeded asset tiles: a real still frame fills the square */
.landing-v2 .asset-tile.asset-seeded { background: #0c0c10; }
.landing-v2 .asset-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ───────────────────── INTEGRATED TOOLS — logo wall ───────────────────── */
.landing-v2 .tool-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.landing-v2 .tool-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.landing-v2 .reveal.in .tool-cell { animation: tool-in .55s var(--ease-spring) backwards; }
.landing-v2 .tool-cell:nth-child(2) { animation-delay: .04s; }
.landing-v2 .tool-cell:nth-child(3) { animation-delay: .08s; }
.landing-v2 .tool-cell:nth-child(4) { animation-delay: .12s; }
.landing-v2 .tool-cell:nth-child(5) { animation-delay: .16s; }
.landing-v2 .tool-cell:nth-child(6) { animation-delay: .20s; }
.landing-v2 .tool-cell:nth-child(n+7) { animation-delay: .24s; }
@keyframes tool-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.landing-v2 .tool-cell::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-cinema); opacity: 0; transition: opacity .4s var(--ease);
}
.landing-v2 .tool-cell:hover { transform: translateY(-5px); border-color: var(--line-strong); background: rgba(255,255,255,0.055); }
.landing-v2 .tool-cell:hover::before { opacity: 1; }
.landing-v2 .tool-logo {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 auto;
}
.landing-v2 .tool-logo img {
  width: 24px; height: 24px; object-fit: contain;
  /* normalise every brand mark to crisp monochrome white for a cohesive wall */
  filter: brightness(0) invert(1);
  opacity: 0.94;
}
.landing-v2 .tool-logo--mark {
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
}
.landing-v2 .tool-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.landing-v2 .tool-role { color: var(--text-mute); font-size: 12px; }
@media (max-width: 1100px) { .landing-v2 .tool-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .landing-v2 .tool-wall { grid-template-columns: repeat(2, 1fr); } }

/* ───────────────────── STUDIO PREVIEW — tabbed views ───────────────────── */
.landing-v2 .ss-toolbar .seg button { cursor: pointer; }
.landing-v2 .ss-view[hidden] { display: none !important; }
.landing-v2 .ss-view[data-view="frame"]:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.landing-v2 .ss-view[data-view="storyboard"],
.landing-v2 .ss-view[data-view="script"] { padding: 22px 24px; min-height: 496px; }

/* storyboard board */
.landing-v2 .ss-sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.landing-v2 .ss-sb-cell {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: #0c0c10; border: 1px solid var(--line);
}
.landing-v2 .ss-sb-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.landing-v2 .ss-sb-tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font-size: 10px; letter-spacing: 0.04em; color: #fff;
  background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16);
}

/* script (screenplay format) */
.landing-v2 .ss-script {
  font-family: 'Courier New', ui-monospace, Menlo, monospace;
  font-size: 13.5px; line-height: 1.7; color: var(--text-dim);
  max-width: 58ch; margin: 0 auto;
}
.landing-v2 .ss-script .ss-sl { color: #fff; font-weight: 700; letter-spacing: 0.04em; margin: 18px 0 12px; text-transform: uppercase; }
.landing-v2 .ss-script .ss-sl:first-child { margin-top: 0; }
.landing-v2 .ss-script p { margin: 0 0 12px; }
.landing-v2 .ss-script .ss-ch { color: #fff; text-align: center; margin: 16px 0 1px; letter-spacing: 0.08em; }
.landing-v2 .ss-script .ss-pa { text-align: center; color: var(--text-mute); font-size: 12px; margin-bottom: 1px; }
.landing-v2 .ss-script .ss-dl { text-align: center; max-width: 34ch; margin: 0 auto 12px; color: var(--text); }

/* ───────────────────── FAQ — fit to screen (two columns) ───────────────────── */
.landing-v2 .faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  align-items: start;
  max-width: none;       /* was capped at 880px — fill the full width */
}
.landing-v2 .faq-item summary { padding: 22px 0; }
@media (max-width: 820px) { .landing-v2 .faq-list { grid-template-columns: 1fr; } }

/* ───────────────────── MOTION RESPECT ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .landing-v2 .hero-bg::before,
  .landing-v2 .hero-orb.a, .landing-v2 .hero-orb.b, .landing-v2 .hero-orb.c,
  .landing-v2 .hero-reel,
  .landing-v2 .tool-cell,
  .landing-v2 .hero-meta .scroll .line { animation: none !important; }
}

/* Studio teaser — the real product, recorded. Fills the framed bezel. */
.landing-v2 .studio-teaser-video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1560 / 950;
  border-radius: inherit;
  object-fit: cover;
  background: #0b0b0f;
}