/* ==========================================================================
   MVIII Ltd Co. · mviiiltd.com
   Brand tokens from mviii-web/public/css/mviii.css (itself from the app's
   Theme/*.swift). Swiss rules hold: no rounded corners, no shadows.

   Two layouts:
     default  static. No JS, or prefers-reduced-motion (.still). The day
              renders finished at 23:00, everything visible, nothing pinned.
     .run     the scrubbed day. A 760vh track under a sticky stage; day.js
              maps scroll to a clock from 05:00 to 23:00.
   ========================================================================== */

:root {
  --purple: #2a164a;
  --black: #0a0a0a;
  --orange: #f25623;
  --green: #a8ffab;
  --gray-dark: #4d4d4d;
  --gray-muted: #a0a0a0;
  --gray-light: #dedede;
  --hair: rgba(255, 255, 255, 0.12);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --gut: 16px;
  --horizon: 78%;

  /* sky stops; day.js rewrites these every frame */
  --s0: #07060d;
  --s1: #150c28;
  --s2: #2a164a;
  --g0: #0d0816;
}

@media (min-width: 760px) { :root { --gut: 40px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--gray-light);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--black); }

.skip {
  position: absolute; left: var(--gut); top: -100px; z-index: 100;
  background: var(--orange); color: var(--black); padding: 8px 12px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Header ------------------------------------------------------ */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: 56px; padding: 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.bar.solid { background: rgba(10, 10, 10, .92); border-bottom-color: var(--hair); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.brand img { width: 28px; height: 28px; }
.bar nav { display: none; gap: 28px; font-size: 13px; }
.bar nav a { text-decoration: none; color: var(--gray-light); position: relative; padding: 4px 0; }
.bar nav a i { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--orange); margin-right: 6px; }
.bar nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.bar nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 600px) { .bar nav { display: flex; } }

/* ---------- The day: static layout (default) ---------------------------- */
.day { position: relative; }
.stage {
  position: relative; overflow: hidden;
  padding: 96px var(--gut) 56px;
  min-height: 100vh;
}
.sky {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, var(--s0) 0%, var(--s1) 46%, var(--s2) var(--horizon), var(--g0) var(--horizon), #040404 100%);
}
.horizon { position: absolute; left: 0; right: 0; top: var(--horizon); height: 1px; background: var(--orange); transform-origin: left; }
.ground { position: absolute; left: 0; right: 0; top: calc(var(--horizon) + 1px); bottom: 0; }
.sunwrap { position: absolute; left: 0; right: 0; top: 0; height: var(--horizon); overflow: hidden; }
.sun {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  background: var(--orange); will-change: transform; transform: translate3d(-200px, 200vh, 0);
}
.glow {
  position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px;
  background: radial-gradient(closest-side, rgba(242, 86, 35, .5), rgba(242, 86, 35, .14) 45%, rgba(242, 86, 35, 0));
  will-change: transform, opacity; opacity: 0; transform: translate3d(-900px, 200vh, 0);
}
.stars { position: absolute; left: 0; right: 0; top: 0; height: var(--horizon); opacity: 1; }
.stars i { position: absolute; width: 2px; height: 2px; background: #fff; opacity: .7; animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .15; } }

.grain {
  position: absolute; inset: -60px; z-index: 1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.intro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 48px; }
.intro-icon { width: 72px; height: 72px; }
.title {
  font-weight: 700; color: #fff; text-transform: uppercase;
  font-size: clamp(56px, 22vw, 220px); line-height: .84; letter-spacing: -0.055em;
}
.title .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.title .ln > span { display: inline-block; }
.title .ln + .ln { color: transparent; -webkit-text-stroke: 2px #fff; }
.lede { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-light); }
.cue { display: none; }

.deck { position: relative; z-index: 2; display: grid; gap: 40px; }
.left { min-width: 0; }
.right { display: flex; justify-content: center; }

/* ---------- Split-flap clock -------------------------------------------- */
.clock { --w: clamp(56px, min(16vw, 17vh), 150px); display: flex; align-items: center; gap: calc(var(--w) * .07); margin-bottom: calc(var(--w) * .32); }
.flap {
  position: relative; width: var(--w); height: calc(var(--w) * 1.36);
  font-weight: 700; font-size: calc(var(--w) * 1.08); line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
  background: #141414; display: flex; align-items: center; justify-content: center;
  perspective: calc(var(--w) * 6);
  outline: 1px solid rgba(255, 255, 255, .08); outline-offset: 0;
}
.flap .h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #161616; backface-visibility: hidden; }
.flap .h b { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.flap .t { top: 0; border-bottom: 1px solid #000; }
.flap .t b { top: 0; }
.flap .bt { bottom: 0; background: #121212; }
.flap .bt b { bottom: 0; }
.flap .ft { top: 0; z-index: 3; transform-origin: 50% 100%; border-bottom: 1px solid #000; visibility: hidden; }
.flap .ft b { top: 0; }
.flap .fb { bottom: 0; z-index: 3; transform-origin: 50% 0; background: #121212; visibility: hidden; }
.flap .fb b { bottom: 0; }
.colon { display: flex; flex-direction: column; gap: calc(var(--w) * .26); padding: 0 calc(var(--w) * .04); }
.colon i { width: calc(var(--w) * .1); height: calc(var(--w) * .1); background: var(--orange); }

/* ---------- Departure board ---------------------------------------------- */
.left { --fs: clamp(11px, min(1.3vw, 2.1vh), 19px); }
.board-head, .board li {
  display: grid; grid-template-columns: calc(var(--fs) * 5.7) calc(var(--fs) * 18.3) calc(var(--fs) * 4.6);
  column-gap: var(--fs); align-items: center;
}
.board-head, .board { width: max-content; max-width: 100%; }
.board-head { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-muted); padding-bottom: 8px; border-bottom: 1px solid var(--hair); margin-bottom: 10px; }
.board { list-style: none; font-family: var(--mono); font-size: var(--fs); display: grid; gap: .35em; }
.board li { color: var(--gray-light); }
.board time { color: var(--gray-muted); }
.board .st { color: var(--green); }

/* tiles (day.js wraps each character) */
.board.tiled li > * { display: flex; gap: .14em; white-space: pre; }
.board.tiled .c {
  display: inline-block; width: 1em; height: 1.55em; line-height: 1.55em; text-align: center;
  background: linear-gradient(180deg, #181818 0, #181818 calc(50% - .5px), #000 calc(50% - .5px), #000 calc(50% + .5px), #111 calc(50% + .5px));
}
.board li.past .lbl { color: var(--gray-muted); }
.board li.now .lbl { color: #fff; }
.board li.now time { color: var(--orange); }
.board li.later .lbl { color: var(--gray-light); }
.board .st.is-now { color: var(--orange); }
.board .st.is-next { color: var(--gray-light); }
.board.closed .lbl { color: #fff; }

/* ---------- Phone -------------------------------------------------------- */
.phone {
  position: relative; background: #000; border: 1px solid #2c2c2c; padding: 9px;
  width: min(300px, 78vw); aspect-ratio: 420 / 913;
  box-sizing: content-box;
}
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f3f1ec; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

@media (min-width: 900px) {
  .deck { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: 56px; }
}

/* ---------- The day: scrubbed layout ------------------------------------ */
.run .day { height: 760vh; }
.run .stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: 0;
}
.run .intro {
  position: absolute; left: var(--gut); right: var(--gut); top: 0; height: var(--horizon);
  justify-content: flex-end; padding-bottom: clamp(28px, 5vh, 56px); margin: 0;
  will-change: transform, opacity;
}
.run .intro-icon { width: clamp(64px, 8vw, 104px); height: auto; }
.run .cue {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  position: absolute; z-index: 2; left: var(--gut); right: var(--gut); top: calc(var(--horizon) + 14px);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--gray-muted);
}
.run .cue b { position: relative; flex: 1; height: 1px; background: var(--hair); overflow: hidden; }
.run .cue b::after { content: ""; position: absolute; top: 0; left: 0; width: 18%; height: 1px; background: var(--orange); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { from { transform: translateX(-100%); } to { transform: translateX(560%); } }

.run .deck {
  position: absolute; inset: 72px var(--gut) 20px; gap: 18px;
  grid-template-rows: auto minmax(0, 1fr); opacity: 0; visibility: hidden;
  will-change: transform, opacity;
}
.run .right { min-height: 0; align-items: center; }
.run .phone { height: calc(100% - 18px); width: auto; max-height: 700px; }
@media (min-width: 900px) {
  /* The board stands above the horizon; the phone stands on the ground. */
  .run .deck { inset: 88px var(--gut) 32px; grid-template-rows: minmax(0, 1fr); gap: 56px; align-items: stretch; }
  .run .left { align-self: end; padding-bottom: calc(22svh - 8px); }
  .run .right { height: 100%; }
  .run .clock { --w: clamp(56px, min(9.5vw, 17vh), 150px); }
}
@media (max-width: 899px) {
  .run .clock { --w: min(15vw, 9.5vh); margin-bottom: 14px; }
  .run .left { --fs: min(11px, 2.85vw); }
  .run .board { gap: .3em; }
  .run .board-head { margin-bottom: 6px; padding-bottom: 6px; }
}

/* Intro choreography (first 1.6s, before any scroll) */
.run .horizon { animation: draw 1.1s var(--ease) both; }
@keyframes draw { from { transform: scaleX(0); } }
.run .intro-icon { animation: rise .9s var(--out) .45s both; }
.run .title .ln > span { animation: up .9s var(--out) both; }
.run .title .ln:first-child > span:nth-child(1) { animation-delay: .55s; }
.run .title .ln:first-child > span:nth-child(2) { animation-delay: .60s; }
.run .title .ln:first-child > span:nth-child(3) { animation-delay: .65s; }
.run .title .ln:first-child > span:nth-child(4) { animation-delay: .70s; }
.run .title .ln:first-child > span:nth-child(5) { animation-delay: .75s; }
.run .title .ln + .ln > span:nth-child(1) { animation-delay: .80s; }
.run .title .ln + .ln > span:nth-child(2) { animation-delay: .84s; }
.run .title .ln + .ln > span:nth-child(3) { animation-delay: .88s; }
.run .title .ln + .ln > span:nth-child(4) { animation-delay: .92s; }
.run .title .ln + .ln > span:nth-child(5) { animation-delay: .96s; }
.run .title .ln + .ln > span:nth-child(6) { animation-delay: 1.00s; }
.run .title .ln + .ln > span:nth-child(7) { animation-delay: 1.04s; }
.run .lede { animation: rise .8s var(--out) 1.15s both; }
.run .cue { animation: fade .8s ease 1.5s both; }
.run .grain { animation: grain .9s steps(5) infinite; }
@keyframes up { from { transform: translateY(105%); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-22px, 14px); } 40% { transform: translate(18px, -26px); }
  60% { transform: translate(-12px, -8px); } 80% { transform: translate(26px, 20px); } 100% { transform: translate(0, 0); }
}

/* ---------- Crosshair (desktop, stage only) ----------------------------- */
.cross { display: none; }
@media (pointer: fine) and (min-width: 900px) {
  .run .stage { cursor: none; }
  .run .cross {
    display: block; position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
    opacity: 0; transition: opacity .25s ease; will-change: transform;
  }
  .run .cross.on { opacity: 1; }
  .cross i { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; }
  .cross i::before, .cross i::after { content: ""; position: absolute; background: var(--orange); }
  .cross i::before { left: 11.5px; top: 0; width: 1px; height: 24px; }
  .cross i::after { top: 11.5px; left: 0; height: 1px; width: 24px; }
  .cross b { position: absolute; left: 16px; top: 10px; font: 500 11px/1 var(--mono); color: #fff; letter-spacing: .04em; white-space: nowrap; }
}

/* ---------- Sections ----------------------------------------------------- */
main { position: relative; z-index: 2; background: var(--black); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: clamp(96px, 16vh, 180px) 0; border-top: 1px solid var(--hair); }
.app { background: linear-gradient(160deg, var(--purple) 0%, var(--black) 62%); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-muted); margin-bottom: 28px; }
.eyebrow i { font-style: normal; color: var(--orange); margin-right: 12px; }
.big { font-weight: 700; color: #fff; font-size: clamp(40px, 7.2vw, 108px); line-height: .94; letter-spacing: -0.045em; margin-bottom: 32px; max-width: 14ch; }
.body { font-size: clamp(17px, 1.5vw, 20px); max-width: 56ch; color: var(--gray-light); }
.body a { color: #fff; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.body a:hover { color: var(--orange); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 64px; }
.facts > div { border-top: 1px solid var(--hair); padding: 18px 0 28px; }
.facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-muted); margin-bottom: 8px; }
.facts dd { font-size: clamp(17px, 1.6vw, 22px); color: #fff; font-weight: 500; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); } }

.founders { margin-top: clamp(72px, 12vh, 140px); }
.founders ol { list-style: none; border-top: 1px solid var(--hair); }
.founders li {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 48px);
  padding: clamp(14px, 2.4vh, 26px) 0; border-bottom: 1px solid var(--hair);
  font-weight: 700; color: #fff; letter-spacing: -0.045em; line-height: 1;
  font-size: clamp(34px, 6.4vw, 96px);
  position: relative;
}
.founders li span { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--orange); min-width: 2.5em; }
.founders li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease);
}
.founders li:hover::after { transform: scaleX(1); transform-origin: left; }

.app-grid { display: grid; gap: 40px; align-items: start; }
.app-icon { width: clamp(120px, 16vw, 200px); }
@media (min-width: 900px) { .app-grid { grid-template-columns: auto 1fr; gap: 64px; } }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 36px; }
.stores img { height: 50px; width: auto; }
.tag {
  display: inline-flex; align-items: center; height: 50px; padding: 0 18px; border: 1px solid rgba(255,255,255,.35);
  text-decoration: none; font-size: 14px; color: #fff; transition: border-color .3s ease, color .3s ease;
}
.tag:hover { border-color: var(--orange); color: var(--orange); }
.credit { margin-top: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-muted); }

.go {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin-top: clamp(72px, 12vh, 140px); padding-bottom: 12px; position: relative;
  text-decoration: none; color: #fff; font-weight: 700; letter-spacing: -0.05em;
  font-size: clamp(44px, 10.5vw, 168px); line-height: .9; border-bottom: 1px solid var(--hair);
}
.go::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--orange);
  transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease);
}
.go b { font-weight: 400; color: var(--orange); transition: transform .7s var(--ease); }
.go:hover::after, .go:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.go:hover b, .go:focus-visible b { transform: translateX(.18em); }

.mail {
  display: inline-block; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: -0.045em;
  font-size: clamp(34px, 8.4vw, 132px); line-height: .95; margin-bottom: 28px; overflow-wrap: anywhere;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 3px no-repeat; padding-bottom: 6px;
  transition: background-size .7s var(--ease), color .3s ease;
}
.mail:hover, .mail:focus-visible { background-size: 100% 3px; }

.foot { border-top: 1px solid var(--hair); background: var(--black); position: relative; z-index: 2; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 28px; font-family: var(--mono); font-size: 12px; color: var(--gray-muted); }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.foot-brand img { width: 16px; height: 16px; }
.foot-links { display: flex; gap: 20px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--orange); }

/* Scroll reveals (motion only) */
.run .rv { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 100% 0); transition: opacity .9s var(--out), transform 1.1s var(--out), clip-path 1.1s var(--out); }
.run .rv.in { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }