/* ============================================================================
   QUANTUM CINEMA — the landing page's midnight look and the shared .cin-* parts.

   Loaded AFTER styles-landing*.css. It works by re-declaring the landing tokens
   (--bg, --ink, --brand ...) under .landing-pro.lp-cinema, so the sections that
   already exist (numbers, features, tracks, hardware, FAQ ...) turn midnight
   without a second copy of their CSS. This is a deliberate single-look page (the
   public pages are pinned light/dark by ui/publictheme.js and never use the
   in-app theme), so there is no light variant here.

   Palette: midnight navy base, electric blue primary, violet secondary, a very
   restrained magenta accent, a little warm white/gold. Gradients only where they
   stand for light or quantum energy. Motion: transform + opacity, GPU friendly.
   ========================================================================== */

.landing-pro.lp-cinema {
  /* Light theme matched to the in-app dashboard (styles.css :root): the same ground/surface/ink/rule/accent
     values, so the landing page and the app read as one product. */
  --bg: #F5F6FA;
  --bg-soft: #ECEEF3;
  --ink: #101320;
  --ink-2: #3D4557;
  --muted: #5F687C;
  --line: #D9DEE9;
  --line-2: #B6BFD0;
  --brand: #2F3FBF;
  --brand-600: #2432A3;
  --brand-50: #E2E5FA;
  --navy: #101320;
  --on-navy: #FFFFFF;
  --on-navy-2: #C9D0E2;
  --success: #0E8F63;
  --shadow-card: 0 1px 2px rgba(16, 19, 32, 0.05), 0 10px 30px rgba(16, 19, 32, 0.06);

  /* cinema tokens (every cinema section reads these; never hard-code a colour) */
  --cin-blue: #2F3FBF;        /* primary data colour */
  --cin-blue-soft: #6F7DE8;   /* lighter blue for fills / rings */
  --cin-violet: #6D4BD8;
  --cin-magenta: #C2336E;
  --cin-gold: #96620B;        /* label/kicker amber, AA on the light ground */
  --cin-good: #0E8F63;
  --cin-panel: #FFFFFF;
  --cin-panel-2: #F1F4F9;
  --cin-veil: rgba(16, 19, 32, 0.045);      /* faint tint for tracks, chips, hover fills */
  --cin-veil-2: rgba(16, 19, 32, 0.09);
  --cin-stroke: rgba(16, 19, 32, 0.22);     /* thin scientific lines on light */
  --cin-stroke-2: rgba(16, 19, 32, 0.12);
  --cin-glow: rgba(47, 63, 191, 0.22);
  --cin-t-micro: 140ms;
  --cin-t-comp: 280ms;
  --cin-t-sect: 600ms;
  --cin-ease: cubic-bezier(.22, .8, .24, 1);

  color-scheme: light;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(47, 63, 191, 0.07), transparent 60%),
    var(--bg);
}

/* thin scientific grid, very quiet, only on the first screen */
.landing-pro.lp-cinema .lp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 19, 32, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 19, 32, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 60% 30%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 60% 30%, #000, transparent 75%);
}

/* ---------- shared section scaffold ---------------------------------------- */
.cin-section { position: relative; padding: clamp(72px, 9vw, 128px) 0; }
.cin-wrap { width: min(1180px, 100% - 40px); margin: 0 auto; }
.cin-intro { max-width: 720px; margin: 0 0 clamp(28px, 4vw, 48px); }
.cin-kicker {
  display: inline-block; font: 600 12px/1 "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cin-gold); margin-bottom: 14px;
}
.cin-h2 {
  margin: 0 0 14px; color: var(--ink); font-weight: 650; letter-spacing: -0.03em;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; text-wrap: balance;
}
.cin-lede { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; }

/* ---------- instrument-style panel ----------------------------------------- */
.cin-panel {
  position: relative; border: 1px solid var(--line); border-radius: 18px; color: var(--ink-2);
  background: var(--cin-panel);
  box-shadow: var(--shadow-card);
}
.cin-mono { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }
.cin-label { font: 600 11px/1.2 "JetBrains Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---------- controls -------------------------------------------------------- */
.cin-btn {
  --mx: 50%; --my: 50%;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line-2);
  font: 600 15px/1 Inter, system-ui, sans-serif; letter-spacing: -0.005em; color: var(--ink); background: transparent;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: border-color var(--cin-t-micro) var(--cin-ease), background var(--cin-t-micro) var(--cin-ease), transform 180ms var(--cin-ease);
  will-change: transform;
}
.cin-btn::after { /* soft light that follows the pointer */
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--cin-t-comp) var(--cin-ease);
  background: radial-gradient(120px 80px at var(--mx) var(--my), rgba(255, 255, 255, 0.22), transparent 70%);
}
.cin-btn:hover::after { opacity: 1; }
.cin-btn:focus-visible { outline: 2px solid var(--cin-gold); outline-offset: 3px; }
.cin-btn-primary { border-color: transparent; color: #fff; background: var(--brand); box-shadow: 0 8px 22px var(--cin-glow); }
.cin-btn-primary:hover { background: var(--brand-600); }
.cin-btn-ghost:hover { border-color: var(--line-2); background: var(--cin-veil); }
.cin-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--cin-veil); color: var(--ink-2); font: 500 13px/1 Inter, system-ui, sans-serif;
}

/* ---------- reveal choreography (content is visible unless JS opts in) ------ */
.lp-cinema.lp-js .cin-rise { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--cin-t-sect) var(--cin-ease), transform var(--cin-t-sect) var(--cin-ease); }
.lp-cinema.lp-js .cin-rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .landing-pro.lp-cinema *, .landing-pro.lp-cinema *::before, .landing-pro.lp-cinema *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
  }
  .cin-btn { transform: none !important; }
}
@media (max-width: 720px) { .cin-section { padding: 64px 0; } .cin-wrap { width: min(1180px, 100% - 32px); } }

/* nav: no wrapping at tablet widths */
.landing-pro.lp-cinema .lp-navlinks { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 1100px) { .landing-pro.lp-cinema .lp-navlink { padding-inline: 8px; font-size: 14px; } }

/* ---------- Expedition band + legacy final CTA on the light theme ----------
   The band keeps its scene (the walkable island stays a dark framed "viewport" like a screen), but the section
   itself is now an ordinary light section like the ones above it. */
.landing-pro.lp-cinema .lp-navy { background: var(--bg-soft); color: var(--ink-2); }
.landing-pro.lp-cinema .lp-head.is-light .lp-kicker { color: var(--cin-gold); }
.landing-pro.lp-cinema .lp-head.is-light .lp-h2 { color: var(--ink); }
.landing-pro.lp-cinema .lp-head.is-light .lp-lede { color: var(--ink-2); }
.landing-pro.lp-cinema .lp-exp-chips li { border-color: var(--line-2); background: var(--cin-panel); color: var(--ink-2); }
.landing-pro.lp-cinema .lp-exp-chips i { background: var(--brand); }
.landing-pro.lp-cinema .lp-exp-frame { border-color: var(--line); box-shadow: var(--shadow-card); }
.landing-pro.lp-cinema .lp-navy .lp-btn-white { background: var(--brand); color: #fff; }
.landing-pro.lp-cinema .lp-navy .lp-btn-white:hover { background: var(--brand-600); }
.landing-pro.lp-cinema .lp-final { background: var(--brand); }
.landing-pro.lp-cinema .lp-btn-primary { color: #fff; background: var(--brand); }
.landing-pro.lp-cinema .lp-btn-primary:hover { background: var(--brand-600); }
.landing-pro.lp-cinema .lp-soft { background: var(--bg-soft); }