/* ==========================================================================
   KOCIAL — single-viewport app shell

   The document never scrolls. The whole site is one fixed 100vw x 100dvh
   frame; navigating moves between slides INSIDE that frame while the 3D world
   stays live behind them. Long content scrolls inside its own slide, never
   the page. Every slide stays in the DOM so the HTML remains fully crawlable.
   ========================================================================== */

html, body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}

.app{
  position:fixed; left:0; top:0; right:0;
  height:100dvh;                 /* dvh tracks the mobile URL bar */
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-columns:minmax(0,1fr);   /* without this the column is auto-sized
                                            and a wide slide widens the shell */
  /* clip, not hidden: `hidden` leaves the box programmatically scrollable, so
     anything that overhangs the edge (an off-screen dropdown, a wide slide)
     can silently shift the whole shell sideways. `clip` cannot scroll at all. */
  overflow:clip;
  isolation:isolate;
}
@supports not (overflow: clip){ .app{ overflow:hidden } }
@supports not (height: 100dvh){ .app{ height:100vh } }

/* ---------- persistent 3D layer, behind every slide ---------- */
.app__gl{position:absolute;inset:0;z-index:0;touch-action:none}
.app__gl canvas{width:100%;height:100%;display:block}
.app__poster{position:absolute;inset:0;z-index:0;transition:opacity .9s var(--ease-out)}
.app[data-gl="ready"] .app__poster{opacity:0}
.app[data-gl="off"] .app__gl{display:none}

/* a readability wash between the world and the slides */
.app__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,10,23,.35),transparent 25%,transparent 72%,rgba(5,10,23,.65)),
    linear-gradient(100deg,rgba(5,10,23,.86),rgba(5,10,23,.55) 42%,rgba(5,10,23,.05) 76%);
  transition:opacity .5s var(--ease);
}
.app[data-play="on"] .app__wash{opacity:.14}

/* ==========================================================================
   DECK — the slide stack
   ========================================================================== */
.deck{position:relative;grid-row:2;min-height:0;min-width:0;z-index:2;overflow:hidden}

.slide{
  position:absolute; inset:0;
  display:grid; align-content:center;
  grid-template-columns:minmax(0,1fr);   /* same trap as .app — an implicit auto
                                            column is sized by max-content and
                                            lets a long headline widen the slide */
  padding-inline:var(--pad);
  overflow:hidden;
  opacity:0; visibility:hidden;
  transform:translate3d(0,44px,0) scale(.985);
  transition:opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility .6s;
  will-change:transform,opacity;
}
.slide[data-active="true"]{opacity:1;visibility:visible;transform:none}
/* leaving upward when you go forward, downward when you go back */
.slide[data-past="true"]{transform:translate3d(0,-44px,0) scale(.985)}

.slide__in{
  width:100%; min-width:0; max-width:var(--maxw); margin-inline:auto;
  max-height:100%;
  overflow-y:auto; overflow-x:hidden;      /* only the code blocks scroll sideways */
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
  padding-block:clamp(14px,2.4vh,34px);
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.slide__in::-webkit-scrollbar{width:8px}
.slide__in::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px}
.slide__in::-webkit-scrollbar-track{background:transparent}
.slide--wide .slide__in{max-width:1460px}

/* a slide whose content overflows gets a hint that there is more inside it */
.slide__in[data-overflow="true"]{
  -webkit-mask-image:linear-gradient(#000 calc(100% - 34px), transparent);
  mask-image:linear-gradient(#000 calc(100% - 34px), transparent);
}
.slide__in[data-overflow="end"]{-webkit-mask-image:none;mask-image:none}

@media (prefers-reduced-motion:reduce){
  .slide{transition:opacity .2s linear, visibility .2s;transform:none !important}
}

/* ==========================================================================
   HUD — top bar
   ========================================================================== */
.bar{
  grid-row:1; z-index:20; position:relative;
  display:flex; align-items:center; gap:16px;
  padding:10px var(--pad);
  background:color-mix(in srgb,var(--void) 68%,transparent);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.bar__nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.bar__link{
  position:relative;padding:8px 13px;border-radius:9px;font-size:.87rem;font-weight:500;
  color:var(--ink-dim);transition:color .2s var(--ease),background .2s var(--ease);white-space:nowrap;
  background:none;border:0;cursor:pointer;font-family:inherit;
}
.bar__link:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.bar__link[aria-current="true"],.bar__link[aria-current="page"]{color:var(--ink)}
.bar__link[aria-current="true"]::after,.bar__link[aria-current="page"]::after{
  content:'';position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;
  background:var(--brand-grad);
}
.bar__cta{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* ---------- "this moved to qocial" strip (SEO shells) ---------- */
.moved{
  grid-row:1; z-index:21; position:relative;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:8px var(--pad);
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 18%,var(--void)),
                                   color-mix(in srgb,var(--brand-2) 14%,var(--void)));
  border-bottom:1px solid var(--accent-line);
  font-size:.83rem;
}
.moved b{font-weight:700;color:var(--ink)}
.moved span{color:var(--ink-dim)}
.moved a{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:6px 14px;border-radius:99px;background:var(--brand-grad);color:#04060f;
  font-weight:700;font-size:.8rem;transition:transform .2s var(--ease)
}
.moved a:hover{transform:translateY(-1px)}
.moved code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;color:var(--brand)}
@media (max-width:700px){
  .moved{font-size:.76rem;padding:7px var(--pad);gap:8px}
  .moved span{display:none}
  .moved a{margin-left:auto;padding:5px 11px}
}

/* the app grid gains a row when the moved-bar is present */
.app:has(.moved){grid-template-rows:auto auto minmax(0,1fr) auto}
.app:has(.moved) .bar{grid-row:1}
.app:has(.moved) .moved{grid-row:2}
.app:has(.moved) .deck{grid-row:3}
.app:has(.moved) .foot-strip{grid-row:4}

/* ==========================================================================
   HUD — bottom strip
   ========================================================================== */
.foot-strip{
  grid-row:3; z-index:20; position:relative;
  display:flex;align-items:center;gap:14px;
  padding:9px var(--pad);
  background:color-mix(in srgb,var(--void) 68%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  font-size:.74rem;color:var(--ink-mute);
}
.foot-strip a{color:var(--ink-mute);transition:color .2s}
.foot-strip a:hover{color:var(--brand)}
.foot-strip__links{display:flex;gap:14px;flex-wrap:wrap}
.foot-strip__right{margin-left:auto;display:flex;align-items:center;gap:14px}
.foot-strip__hint{display:flex;align-items:center;gap:7px;color:var(--ink-mute)}
@media (max-width:820px){
  .foot-strip{font-size:.68rem;gap:10px;padding:7px var(--pad)}
  .foot-strip__hint{display:none}
}
@media (max-width:520px){ .foot-strip__links a:nth-child(n+4){display:none} }

/* ==========================================================================
   RAIL — section indicator / jump control
   ========================================================================== */
.rail{
  position:absolute; right:calc(var(--pad) - 6px); top:50%; translate:0 -50%;
  z-index:18; display:flex; flex-direction:column; gap:3px; align-items:flex-end;
  padding:6px; pointer-events:auto;
}
.rail__b{
  display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  padding:5px 6px;border-radius:8px;color:var(--ink-mute);font:inherit;
}
.rail__b i{
  width:22px;height:2px;border-radius:2px;background:var(--line-strong);flex-shrink:0;
  transition:width .35s var(--ease),background .35s var(--ease);
}
.rail__b span{
  font-family:'Space Grotesk',sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  opacity:0;translate:6px 0;transition:.3s var(--ease);
}
.rail:hover .rail__b span{opacity:.75;translate:0}
.rail__b:hover i{width:30px;background:var(--ink-dim)}
.rail__b:hover span{opacity:1;color:var(--ink)}
.rail__b[aria-current="true"] i{width:34px;background:var(--c,var(--brand));
  box-shadow:0 0 12px var(--c,var(--brand))}
.rail__b[aria-current="true"] span{opacity:1;color:var(--ink)}
@media (max-width:900px), (max-height:560px){ .rail{display:none} }

/* progress bar on the bottom strip */
.prog{position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--brand-grad);
  box-shadow:0 0 10px var(--brand);transition:width .5s var(--ease-out)}

/* ==========================================================================
   SLIDE CONTENT PRIMITIVES  (sized to fit a viewport, not a scrolling page)
   ========================================================================== */
.s-head{display:flex;flex-direction:column;gap:11px;margin-bottom:clamp(14px,2.2vh,26px)}
.s-head h1{font-size:var(--t-h1)}
.s-head h2{font-size:var(--t-h2)}
.s-head p{max-width:64ch}

.s-split{
  display:grid;gap:clamp(18px,3vw,44px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}
/* Slides set their own column ratio inline, so the stack rule has to outrank
   an inline style — this is the one place !important is the right tool. */
@media (max-width:880px){
  .s-split{grid-template-columns:minmax(0,1fr) !important; gap:16px}
}

/* compact card set that fits the frame */
.q-grid{display:grid;gap:clamp(10px,1.4vw,18px)}
.q-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.q-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.q-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.q-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1240px){ .q-5{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1080px){ .q-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:980px){ .q-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:980px){ .q-5{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .q-5,.q-4,.q-3,.q-2{grid-template-columns:minmax(0,1fr)} }

/* keyboard hint pills */
.hint{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;color:var(--ink-mute);
  letter-spacing:.06em;font-family:'Space Grotesk',sans-serif}

/* ==========================================================================
   Mobile drawer (reused from the old nav, now inside the shell)
   ========================================================================== */
.sheet{
  position:absolute;inset:0;z-index:40;
  background:color-mix(in srgb,var(--void) 97%,transparent);
  backdrop-filter:blur(24px);
  padding:18px var(--pad) 28px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;translate:0 -10px;
  transition:opacity .3s var(--ease),translate .3s var(--ease),visibility 0s .3s;
}
.sheet[data-open="true"]{opacity:1;visibility:visible;translate:0;transition-delay:0s}
.sheet a,.sheet button{
  display:block;width:100%;text-align:left;padding:13px 4px;font-size:1.02rem;font-weight:500;
  border-bottom:1px solid var(--line);background:none;border-left:0;border-right:0;border-top:0;
  color:var(--ink);font-family:inherit;cursor:pointer;
}
.sheet__label{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-mute);padding:18px 4px 4px;font-weight:600}
.sheet__head{
  position:sticky;top:-18px;z-index:1;display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;background:var(--void);border-bottom:1px solid var(--line-strong);
}
.sheet .sheet__head button{
  width:auto;padding:10px 16px;border:1px solid var(--line-strong);border-radius:10px;
  font-size:.9rem;min-height:44px;
}

.deck-controls{display:flex;align-items:center;gap:9px;color:var(--ink-dim);white-space:nowrap}
.deck-controls button{
  width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;
  background:rgba(180,210,255,.06);cursor:pointer;font-size:1.1rem;
  transition:background .2s,border-color .2s;
}
.deck-controls button:hover{background:var(--accent-soft);border-color:var(--accent)}
.deck-controls span{font-variant-numeric:tabular-nums;min-width:42px;text-align:center;font-size:.76rem}
@media (max-width:620px){
  .foot-strip{flex-direction:column;gap:5px}
  .foot-strip__right{order:-1;justify-content:space-between;width:100%;margin:0}
  .foot-strip__links{justify-content:center;font-size:.65rem}
  .deck-controls button{width:44px;height:44px}
  .foot-strip__right > .btn{font-size:.74rem;padding-inline:12px}
}

/* ==========================================================================
   Very short viewports — give the content the room instead of the chrome
   ========================================================================== */
@media (max-height:620px){
  .bar{padding-block:6px}
  .foot-strip{padding-block:5px;font-size:.66rem}
  .slide__in{padding-block:8px}
  :root{--t-h1:clamp(1.6rem,3.4vw,2.3rem);--t-h2:clamp(1.3rem,2.6vw,1.8rem)}
}

/* ==========================================================================
   Surfaces sitting over a live 3D scene need a real backdrop — the site-wide
   translucent cards read fine on a flat page and vanish over moving geometry.
   ========================================================================== */
.slide .panel,
.slide .tile,
.slide .dcard,
.slide .code,
.slide .acc,
.slide .stat,
.slide .tbl{
  background-color:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.slide .stats{background-color:color-mix(in srgb,var(--line) 60%,transparent)}
.slide .code{background-color:color-mix(in srgb,#05070f 92%,transparent)}
.slide .field input,.slide .field textarea,.slide .field select{
  background-color:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(10px);
}

/* Division slides keep the copy in a left column so the character and the
   monument behind it stay visible in the right half of the frame. */
.s-solo{max-width:min(100%,640px)}
.s-facts{
  display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline;
  margin-top:4px;font-size:.88rem;
}
.s-facts dt{
  font-family:'Space Grotesk',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);
  padding-top:.28em;
}
.s-facts dd{margin:0;color:var(--ink)}
@media (max-width:560px){
  .s-facts{grid-template-columns:1fr;gap:2px 0}
  .s-facts dd{margin-bottom:8px}
}

/* ---------- responsive nav (must live after the base .bar rules) ---------- */
@media (max-width:1040px){
  .bar__nav{display:none}
  .burger{display:grid}
  .bar__cta .btn--ghost{display:none}
}
@media (max-width:520px){
  .bar{gap:10px}
  .brand span{font-size:.95rem}
}

/* ==========================================================================
   Product imagery — a browser chrome around a real screenshot beats any
   amount of describing what the product looks like.
   ========================================================================== */
.shot{
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--surface-2) 92%,transparent);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.4);
}
.shot__bar{
  display:flex; align-items:center; gap:7px; padding:8px 12px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border-bottom:1px solid var(--line);
}
.shot__dots{display:flex;gap:5px}
.shot__dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.shot__dots i:first-child{background:#ff5f57}
.shot__dots i:nth-child(2){background:#febc2e}
.shot__dots i:nth-child(3){background:#28c840}
.shot__url{
  flex:1; text-align:center; font-size:.7rem; color:var(--ink-mute);
  font-family:ui-monospace,Menlo,monospace; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shot__live{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:5px;flex-shrink:0;
}
.shot__live::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor}
.shot img{
  display:block; width:100%; height:auto;
  max-height:min(46vh, 420px); object-fit:cover; object-position:top center;
}
.shot--tall img{max-height:min(52vh,520px)}
.shot__cap{
  padding:9px 13px; font-size:.76rem; color:var(--ink-mute);
  border-top:1px solid var(--line); background:rgba(0,0,0,.25);
}

/* phone frame, for app shots */
.phone{
  position:relative;border-radius:26px;overflow:hidden;border:6px solid #171d2b;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.9);max-width:260px;margin-inline:auto;
}
.phone img{display:block;width:100%;height:auto}

/* video wall — real thumbnails, real links */
.reel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
@media (max-width:900px){ .reel{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .reel{grid-template-columns:minmax(0,1fr)} }
.vid{
  position:relative;display:block;border-radius:11px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
  aspect-ratio:16/9;transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.vid:hover{transform:translateY(-3px);border-color:var(--accent)}
.vid img{width:100%;height:100%;object-fit:cover;display:block}
.vid__t{
  position:absolute;left:0;right:0;bottom:0;padding:26px 10px 8px;
  font-size:.72rem;font-weight:600;line-height:1.3;color:#fff;
  background:linear-gradient(transparent,rgba(4,5,10,.94));
}
.vid__p{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:38px;height:38px;border-radius:50%;background:rgba(255,0,0,.88);
  display:grid;place-items:center;transition:transform .25s var(--ease);
}
.vid:hover .vid__p{transform:translate(-50%,-50%) scale(1.12)}
.vid__p::after{content:'';border-left:13px solid #fff;border-top:8px solid transparent;
  border-bottom:8px solid transparent;margin-left:3px}

/* thumbnail strip on the division cards */
.dcard__thumb{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left;
  border-radius:10px;border:1px solid var(--line);margin-bottom:4px;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));
}
.dcard--choice{padding:20px;gap:12px}
.dcard--choice .dcard__thumb{aspect-ratio:2.6;object-fit:contain;margin-bottom:0}
.dcard--choice .dcard__go{margin-top:0}

/* Social account rows — one line per handle, brand mark on the left. */
.soc{display:flex;flex-direction:column;gap:6px}
.soc__a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.soc__a:hover{background:var(--accent-soft);border-color:var(--accent-line);transform:translateX(3px)}
.soc__i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent)}
.soc__i svg{width:17px;height:17px}
.soc__a b{font-size:.92rem;font-weight:600;color:var(--ink)}
.soc__go{margin-left:auto;color:var(--accent);opacity:.6}
.soc__go svg{width:15px;height:15px}
.soc__a:hover .soc__go{opacity:1}

/* the footer's compact social row */
.foot-strip__social{display:flex;gap:6px;align-items:center}
.foot-strip__social a{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  color:var(--ink-mute);border:1px solid transparent;transition:.2s var(--ease);
}
.foot-strip__social a:hover{color:var(--brand);border-color:var(--line-strong);background:rgba(255,255,255,.05)}
.foot-strip__social svg{width:14px;height:14px}
@media (max-width:820px){ .foot-strip__social a:nth-child(n+4){display:none} }
@media (max-width:560px){ .foot-strip__social{display:none} }