/* Shared marketing chrome: sticky topbar + persistent poster wall + SPA view.
   Used by index.html, pricing.html, docs.html, requirements.html. */

/* Disable browser cross-document view transitions — we own transitions in JS */
@view-transition { navigation: none; }

/* Shell theme is owned HERE so SPA page-style swaps can never leave a white
   page (applyPageStyles used to strip body{background…} and the browser
   default white stuck for the rest of the session). */
:root{
  --bg:#151b23;
  --panel:#1f2937;
  --panel-2:#232f3e;
  --panel-edge:#2e3d4e;
  --well:#141b23;
  --ink:#e8eef4;
  --ink-dim:#93a5b8;
  --amber:#f0a844;
  --amber-2:#e8912d;
  --steel:#82abd1;
  --ok:#5fc48d;
  --danger:#e07070;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Sora',system-ui,sans-serif;
}
html{
  background:#151b23 !important;
  /* Keep scrollbar gutter stable so short pages (e.g. Alternatives) don't
     shift the sticky topbar when navigating to/from longer pages (Home). */
  overflow-y:scroll;
  scrollbar-gutter:stable;
}
body,
body.mkt-shell{
  margin:0 !important;
  min-height:100vh;
  background:#151b23 !important;
  color:#e8eef4 !important;
  font-family:var(--sans),system-ui,sans-serif;
}

/* ---------- Topbar / nav (identical on all marketing pages) ---------- */
/* Topbar width is FIXED and independent of page .wrap rules so SPA style
   swaps never reflow the nav (was the main button-jump cause). */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,12,18,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(46,61,78,.65);
}
.topbar .topbar-inner,
.topbar > .wrap{
  max-width:1080px !important;
  width:100%;
  margin:0 auto;
  padding:0 22px !important;
  box-sizing:border-box;
}
nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:20px;
  padding:16px 0;
  min-height:56px;
  box-sizing:border-box;
}
.brand{font:700 20px var(--sans);letter-spacing:-.02em;display:flex;text-decoration:none;opacity:1;transition:opacity .15s;flex-shrink:0;grid-column:1}
.brand:hover{opacity:.85;text-decoration:none}
.brand img{height:24px;width:auto;display:block}
.navlinks{
  display:flex;align-items:center;gap:22px;
  grid-column:2;justify-self:start;min-width:0;
}
.navlinks a{
  color:var(--ink-dim);text-decoration:none;font-size:14px;font-weight:600;
  transition:color .15s;white-space:nowrap;padding:4px 0;
  /* Always reserve underline thickness so active state never shifts layout */
  border-bottom:2px solid transparent;
  box-sizing:border-box;
}
.navlinks a:hover{color:var(--ink);text-decoration:none}
.navlinks a.is-active{color:var(--amber);border-bottom-color:rgba(240,168,68,.55);text-decoration:none}
/* Isolate topbar from SPA page styles that set bare `a { color… }` */
.topbar a{text-decoration:none}
.topbar .brand{color:var(--ink)}
/* Desktop: toggle hidden. Mobile styles below. */
.mkt-nav-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;
  border-radius:10px;border:1px solid var(--panel-edge,#2e3d4e);
  background:var(--well,#141b23);color:var(--ink,#e8eef4);
  font-size:20px;line-height:1;cursor:pointer;
  grid-column:2;justify-self:start;
}
.mkt-nav-toggle:hover{border-color:var(--amber,#f0a844);color:var(--amber,#f0a844)}
.mkt-nav-toggle[aria-expanded="true"]{border-color:var(--amber,#f0a844);color:var(--amber,#f0a844)}
nav .cta{
  grid-column:3;justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-shrink:0;
}
/* Reserve Discord slot so Log In / Sign Up never shift when invite loads */
nav .cta .discordbtn{
  flex:0 0 108px;
}
a.btn,button.btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;font:600 14px var(--sans);border-radius:10px;padding:9px 16px;
  transition:filter .15s,border-color .15s,background .15s;box-sizing:border-box;cursor:pointer;
  line-height:1.2;white-space:nowrap;
}
a.primary,button.primary{background:linear-gradient(180deg,var(--amber),var(--amber-2));color:#241a08;box-shadow:0 2px 12px -2px rgba(240,168,68,.45);border:none}
a.primary:hover,button.primary:hover{filter:brightness(1.07)}
a.ghostbtn,button.ghostbtn{color:var(--ink);border:1px solid var(--panel-edge);background:rgba(20,27,35,.72)}
a.ghostbtn:hover,button.ghostbtn:hover{border-color:var(--steel)}
/* Page styles often set `#mkt-view a { color: amber }` which beats `a.primary`.
   Keep content CTAs matching the topbar Sign Up / Log In buttons. */
#mkt-view a.btn.primary,
#mkt-view a.primary{
  color:#241a08 !important;
  text-decoration:none !important;
}
#mkt-view a.btn.primary:hover,
#mkt-view a.primary:hover{
  color:#241a08 !important;
  text-decoration:none !important;
  filter:brightness(1.07);
}
#mkt-view a.btn.ghostbtn,
#mkt-view a.ghostbtn{
  color:var(--ink) !important;
  text-decoration:none !important;
}
#mkt-view a.btn.ghostbtn:hover,
#mkt-view a.ghostbtn:hover{
  color:var(--ink) !important;
  text-decoration:none !important;
}
a.discordbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  color:#fff;border:1px solid transparent;background:#5865F2;
  width:108px;min-width:108px;max-width:108px;padding:9px 10px;box-sizing:border-box;
}
a.discordbtn:hover{background:#4752c4}
a.discordbtn svg{width:16px;height:16px;flex-shrink:0}
/* Keep the slot occupied when Discord isn't configured */
a.discordbtn[hidden]{display:inline-flex!important;visibility:hidden;pointer-events:none}

/* ---------- Auth dropdowns (login / signup) ----------
   Closed panels MUST use display:none so they never expand the nav row.
   (visibility:hidden still participates in some layout edge cases.) */
.topbar,.topbar > .wrap,.topbar nav,.topbar .cta{overflow:visible}
nav .cta{
  position:relative;
  z-index:60;
}
.auth-dd{
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  z-index:61;
}
.auth-dd > button.btn{
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  font-family:var(--sans),system-ui,sans-serif;
}
.auth-dd.is-open > button.btn{
  border-color:var(--amber,#f0a844);
  box-shadow:0 0 0 1px rgba(240,168,68,.35);
}
.auth-panel{
  /* Hidden by default — no layout impact */
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:300;
  width:300px;
  max-width:calc(100vw - 24px);
  box-sizing:border-box;
  padding:16px;
  border-radius:14px;
  border:1px solid #2e3d4e;
  background:#1f2937;
  background:linear-gradient(180deg,#232f3e,#1f2937);
  color:#e8eef4;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.7);
  text-align:left;
}
.auth-dd.is-open > .auth-panel{
  display:block;
}
.auth-panel h3{
  margin:0 0 4px;
  font:600 15px var(--sans),system-ui,sans-serif;
  color:#e8eef4;
  letter-spacing:-.01em;
}
.auth-panel .auth-sub{
  margin:0 0 12px;
  font:400 12.5px/1.4 var(--sans),system-ui,sans-serif;
  color:#93a5b8;
}
.auth-panel label{
  display:block;
  font:600 10px var(--mono),ui-monospace,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#93a5b8;
  margin:0 0 4px;
}
.auth-panel .field{margin:0 0 10px}
.auth-panel .field-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;
}
.auth-panel .field-head label{margin:0}
.auth-panel .field-head a{
  font:600 11.5px var(--sans),system-ui,sans-serif;
  letter-spacing:0;text-transform:none;color:#f0a844;text-decoration:none;
}
.auth-panel input{
  display:block;width:100%;box-sizing:border-box;
  background:#141b23 !important;
  border:1px solid #2e3d4e !important;
  border-radius:8px;
  color:#e8eef4 !important;
  padding:9px 11px;
  font:13px var(--mono),ui-monospace,monospace;
  -webkit-appearance:none;appearance:none;
}
.auth-panel input:focus{
  outline:none;
  border-color:#f0a844 !important;
  box-shadow:0 0 0 3px rgba(240,168,68,.15);
}
.auth-panel .auth-submit{
  display:block;width:100%;margin-top:4px;
  border:none;border-radius:9px;padding:10px 14px;
  font:600 13.5px var(--sans),system-ui,sans-serif;
  cursor:pointer;
  background:linear-gradient(180deg,#f0a844,#e8912d);
  color:#241a08;
}
.auth-panel .auth-submit:hover{filter:brightness(1.06)}
.auth-panel .auth-submit:disabled{opacity:.6;cursor:default}
.auth-panel .auth-err{
  margin:10px 0 0;font:12.5px/1.35 var(--sans),system-ui,sans-serif;color:#e07070;
}
.auth-panel .auth-err[hidden]{display:none !important}
.auth-panel .auth-switch{
  margin:12px 0 0;text-align:center;
  font:12.5px var(--sans),system-ui,sans-serif;color:#93a5b8;
}
.auth-panel .auth-switch button{
  border:none;background:none;padding:0;margin:0;
  color:#f0a844;font:600 12.5px var(--sans),system-ui,sans-serif;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
@media (max-width:420px){
  .auth-panel{width:min(280px, calc(100vw - 20px));right:-4px}
}

/* ---------- Persistent poster stage (fixed, never rebuilt on SPA nav) ---------- */
.poster-stage{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  pointer-events:none;overflow:hidden;
  opacity:0;
  /* Slow collective fade once the wall is built */
  transition:opacity 1.6s cubic-bezier(.22,.61,.36,1);
  will-change:opacity;
  /* Do NOT use contain:strict — size containment can collapse fixed layers */
  transform:translateZ(0);
  backface-visibility:hidden;
}
.poster-stage.visible{opacity:1}
.poster-stage.hidden{opacity:0}
body.posters-off .poster-stage{opacity:0 !important}
body.posters-on .poster-stage.visible{opacity:1}

.poster-wall{
  /* JS sets exact pixel width + centers; columns are fixed poster size (no flex grow) */
  position:absolute;top:0;bottom:0;
  left:50%;width:100vw;margin-left:-50vw;
  display:flex;gap:8px;justify-content:center;align-items:flex-start;
  flex-wrap:nowrap;
  padding:0;
  overflow:visible;
  pointer-events:none;
  box-sizing:border-box;
  filter:brightness(.78) saturate(.9) contrast(.98);
  /* Hidden until JS marks painted (all tiles decoded) — prevents pop-in */
  opacity:0;
  transform:translateZ(0);
}
.poster-wall.painted{opacity:.62}
.poster-stage.visible .poster-wall.painted{opacity:.62}
.poster-wall.ready{opacity:.62}
.poster-wall.fading{opacity:.62}

/* Gradient veil over posters so content stays readable (page-owned content sits above) */
.poster-stage::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 55% at 50% 36%,
      rgba(10,12,18,.62) 0%,
      rgba(12,15,22,.38) 50%,
      transparent 78%),
    linear-gradient(180deg,
      rgba(10,12,18,.48) 0%,
      rgba(15,18,26,.32) 30%,
      rgba(21,27,35,.55) 70%,
      var(--bg) 100%),
    linear-gradient(90deg,
      rgba(10,12,18,.55) 0%,
      rgba(10,12,18,.18) 25%,
      rgba(10,12,18,.12) 50%,
      rgba(10,12,18,.18) 75%,
      rgba(10,12,18,.55) 100%);
}

.poster-col{
  /* Fixed poster width — size is constant; more viewport width = more columns */
  flex:0 0 var(--poster-w, 138px);
  width:var(--poster-w, 138px);
  min-width:var(--poster-w, 138px);
  max-width:var(--poster-w, 138px);
  display:flex;flex-direction:column;gap:8px;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.poster-col .ph{
  width:100%;
  aspect-ratio:2/3;
  height:auto;
  flex:0 0 auto;
  border-radius:8px;overflow:hidden;
  background:transparent;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  contain:layout paint;
}
.poster-col .ph:empty{display:none}
.poster-col .ph img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) brightness(.92);
  /* Instant show — blobs are already decoded before stage fades in */
  opacity:1;
  transition:none !important;
}
@keyframes posterScrollUp{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,calc(-1 * var(--loop, 0px)),0)}
}
@keyframes posterScrollDown{
  from{transform:translate3d(0,calc(-1 * var(--loop, 0px)),0)}
  to{transform:translate3d(0,0,0)}
}
.poster-col.run{
  will-change:transform;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-fill-mode:none;
}
.poster-col.run.up{animation-name:posterScrollUp}
.poster-col.run.down{animation-name:posterScrollDown}
/* ~1/3 slower again (duration × 1.5) */
.poster-col.s1{animation-duration:188s}
.poster-col.s2{animation-duration:243s}
.poster-col.s3{animation-duration:203s}
.poster-col.s4{animation-duration:270s}
.poster-col.s5{animation-duration:224s}
.poster-col.s6{animation-duration:251s}

/* ---------- SPA main view ---------- */
#mkt-view{
  position:relative;z-index:1;
  min-height:50vh;
  /* Fade over the dark body — never over white */
  background:transparent;
  transition:opacity .16s ease;
}
#mkt-view.is-leaving{opacity:0.35}
#mkt-view .wrap{position:relative;z-index:1}

/* Hero banner regions: transparent so fixed posters show through.
   Height follows content — no forced min-height (that left huge empty gaps
   under disclaimers / short heroes on Pricing, Docs, Requirements, Home). */
.hero-banner{
  position:relative;
  padding:0 0 28px;
  overflow:visible;
  min-height:0;
  background:transparent;
}
body[data-page="home"] .hero-banner{padding-bottom:36px}
body[data-page="pricing"] .hero-banner{padding-bottom:12px}
body[data-page="docs"] .hero-banner,
body[data-page="requirements"] .hero-banner,
body[data-page="alternatives"] .hero-banner{padding-bottom:8px}
.hero-banner > .wrap{position:relative;z-index:2}
/* Shared amber period for page titles */
#mkt-view h1 .dot{color:var(--amber)}

/* ---- Mobile marketing nav (hamburger) ---- */
@media (max-width:720px){
  nav{
    grid-template-columns:auto auto 1fr;
    column-gap:10px;
    position:relative;
  }
  .mkt-nav-toggle{display:inline-flex;grid-column:2}
  .navlinks{
    display:none;
    position:absolute;
    top:calc(100% + 1px);
    left:0;right:0;
    z-index:70;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px;
    margin:0 -22px;
    background:rgba(10,12,18,.97);
    border-bottom:1px solid rgba(46,61,78,.85);
    box-shadow:0 16px 32px -12px rgba(0,0,0,.55);
  }
  body.mkt-nav-open .navlinks{display:flex}
  .navlinks a{
    padding:12px 14px;
    border-radius:10px;
    border-bottom:none;
    font-size:15px;
  }
  .navlinks a.is-active{
    background:rgba(240,168,68,.12);
    color:var(--amber);
    border-bottom:none;
  }
  .navlinks a:hover{background:rgba(255,255,255,.04)}
  nav .cta{grid-column:3}
}
@media (max-width:900px){
  .poster-wall{gap:6px}
  .poster-col{gap:6px;flex-basis:var(--poster-w, 114px);width:var(--poster-w, 114px);min-width:var(--poster-w, 114px);max-width:var(--poster-w, 114px)}
  .poster-col .ph{aspect-ratio:2/3;height:auto}
}
@media (max-width:640px){
  body[data-page="home"] .hero-banner{padding-bottom:28px}
  .poster-wall{gap:5px;filter:brightness(.85) saturate(.95)}
  .poster-wall.painted{opacity:.58}
  .poster-col{gap:5px;flex-basis:var(--poster-w, 96px);width:var(--poster-w, 96px);min-width:var(--poster-w, 96px);max-width:var(--poster-w, 96px)}
  /* Keep 2:3 — fixed heights crushed rows and broke scroll loop math */
  .poster-col .ph{border-radius:6px;aspect-ratio:2/3;height:auto}
  .poster-col.s1,.poster-col.s2,.poster-col.s3,
  .poster-col.s4,.poster-col.s5,.poster-col.s6{animation-duration:143s}
  nav .cta .discordbtn,a.discordbtn{flex-basis:44px;width:44px;min-width:44px;max-width:44px;padding:9px 8px}
  a.discordbtn .txt{display:none}
}
@media (max-width:400px){
  .poster-wall{gap:5px}
  .poster-col{flex-basis:var(--poster-w, 87px);width:var(--poster-w, 87px);min-width:var(--poster-w, 87px);max-width:var(--poster-w, 87px)}
  .poster-col .ph{border-radius:5px;aspect-ratio:2/3;height:auto}
}
@media (prefers-reduced-motion: reduce){
  .poster-col.run{animation:none !important;transform:translate3d(0,-8%,0)}
  .poster-stage{transition:opacity .35s ease}
  #mkt-view{transition:none}
}
@media (max-width:420px){
  nav{column-gap:8px}
  nav .btn{padding:9px 12px;font-size:13px}
  .topbar > .wrap{padding:0 12px !important}
  body.mkt-nav-open .navlinks{margin:0 -12px}
}