/* ==========================================================================
   SITE MENU
   Built from the Figma file "the-site-menu" (frames "Main" and "Menu 2",
   402 × 874). Like the Assumption Machine, each screen is drawn at its Figma
   size and scaled to fit the phone, so all positions are Figma coordinates.
   ========================================================================== */

/* Paper Mono, Medium and Bold (the two weights the design uses) */
@font-face { font-family: "Paper Mono"; font-weight: 500; font-display: swap;
  src: url("assets/fonts/PaperMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "Paper Mono"; font-weight: 700; font-display: swap;
  src: url("assets/fonts/PaperMono-Bold.woff2") format("woff2"); }

:root {
  --sage: #aab69b;      /* text, frames */
  --cream: #f4fad2;     /* corner marks */
  --violet: #8870ff;    /* buttons */
  --black: #000;
  --mono: "Paper Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--black); }
body { overflow: hidden; font-family: var(--mono); font-weight: 500; color: var(--sage); }
button, a { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button:focus, a:focus { outline: none; }
.kb button:focus-visible, .kb a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

/* Fixed frame the size of the window; the 402 × 874 screen is scaled inside. */
.viewport { position: fixed; inset: 0; overflow: hidden; background: var(--black); }
.screen {
  position: absolute; left: 0; top: 0;
  width: 402px; height: 874px;
  overflow: hidden;
  background: var(--black);
  transform-origin: 0 0;
  opacity: 0; visibility: hidden;
  transition: opacity 600ms ease, visibility 0s linear 600ms;   /* Figma: dissolve 600ms */
}
.screen.on { opacity: 1; visibility: visible; transition: opacity 600ms ease, visibility 0s; }
/* Arriving at Menu 2 from a project: Main stays hidden and Menu 2
   dissolves in from black (600ms, same as COME and Back) */
.open-menu #main { opacity: 0; visibility: hidden; }
.open-menu #menu { opacity: 0; visibility: visible; }
.instant .screen { transition: none !important; }
.screen img, .screen video { display: block; max-width: none; }

.abs { position: absolute; }
.mid { transform: translateY(-50%); }
.missing { visibility: hidden !important; }

/* ---------- Shared frame ---------- */
.dash {
  left: 24px; top: 56px; width: 354px; height: 778px;
  opacity: .5;
  /* 16-on / 16-off dashed border, as in Figma */
  background:
    repeating-linear-gradient(90deg, var(--sage) 0 16px, transparent 16px 32px) top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--sage) 0 16px, transparent 16px 32px) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--sage) 0 16px, transparent 16px 32px) left / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--sage) 0 16px, transparent 16px 32px) right / 1px 100% no-repeat;
}
.dash-line { left: 24px; width: 354px; height: 1px; opacity: .5;
  background: repeating-linear-gradient(90deg, var(--sage) 0 16px, transparent 16px 32px); }
.corner { width: 16px; height: 16px; border-color: var(--cream); border-style: solid; border-width: 0; }
.corner.tl { border-top-width: 1px; border-left-width: 1px; }
.corner.tr { border-top-width: 1px; border-right-width: 1px; }
.corner.bl { border-bottom-width: 1px; border-left-width: 1px; }
.corner.br { border-bottom-width: 1px; border-right-width: 1px; }

.ver  { left: 24px;  top: 42px; font-size: 16px; line-height: normal; white-space: nowrap; }
.date { right: 23px; top: 42px; font-size: 16px; line-height: normal; white-space: nowrap; text-align: right; }

/* Bubble video seen through three windows across the top */
.bubble { top: 58px; height: 88px; overflow: hidden;
  -webkit-mask: var(--bars) no-repeat 0 0 / 100% 100%; mask: var(--bars) no-repeat 0 0 / 100% 100%; }
/* bubble.mp4 is pre-cropped to the band that shows through the windows */
.bubble video { position: absolute; top: 0; width: 350px; height: 88px; object-fit: fill; }
.bubble.main { left: 27px; width: 349px;
  --bars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='349' height='88'%3E%3Cg fill='white'%3E%3Crect width='115' height='88'/%3E%3Crect x='117' width='115' height='88'/%3E%3Crect x='234' width='115' height='88'/%3E%3C/g%3E%3C/svg%3E"); }
.bubble.main video { left: -1px; }
.bubble.menu { left: 26px; width: 350px;
  --bars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='88'%3E%3Cg fill='white'%3E%3Crect width='116' height='88'/%3E%3Crect x='117' width='116' height='88'/%3E%3Crect x='234' width='116' height='88'/%3E%3C/g%3E%3C/svg%3E"); }
.bubble.menu video { left: 0; }

/* ==========================================================================
   MAIN
   ========================================================================== */
.grid-lines { left: 25px; top: 148px; width: 352px; height: 685px; opacity: .5; pointer-events: none; }
.grid-lines i { position: absolute; background: var(--sage); }

/* PORTFOLIO: each letter sweeps through its own cell (Figma "word cut":
   2s linear sweep, then 1s offstage, repeating). Positions are set by menu.js. */
.word { left: 27px; top: 148px; width: 348px; height: 579px; visibility: hidden; }
.word.ready { visibility: visible; }
.cell { position: absolute; width: 116px; height: 193px; overflow: hidden; }
.glyph {
  position: absolute; left: 0; top: 0; width: 116px; height: 193px; overflow: visible;
  transform: translate(var(--fx), var(--fy));            /* rests offstage */
  animation: sweep 3s linear infinite;
}
.glyph text { font-family: var(--mono); font-weight: 500; font-size: 269.92px; fill: var(--sage); }
@keyframes sweep {
  0%      { transform: translate(var(--fx), var(--fy)); }
  66.667% { transform: translate(var(--tx), var(--ty)); }
  100%    { transform: translate(var(--tx), var(--ty)); }
}

.intro { left: 25px; top: 728px; width: 117px; font-size: 10px; line-height: normal; white-space: pre-wrap; }

/* COME: the violet fill fades out and back in over 2s */
.come { left: 261px; top: 729px; width: 115px; height: 102.5px; }
.come .fill { position: absolute; inset: 0; background: var(--violet); animation: come-pulse 2s infinite; }
.come img { position: absolute; left: 0; top: 0; width: 115px; height: 103px; }
.come span { position: absolute; left: 26px; top: 41px; font-size: 26px; line-height: 19px; }
@keyframes come-pulse {
  0%   { opacity: 1; animation-timing-function: ease-out; }
  50%  { opacity: 0; animation-timing-function: ease-in; }
  100% { opacity: 1; }
}

/* ==========================================================================
   MENU 2
   ========================================================================== */
.portfolio { left: 30px; top: 74px; font-size: 26px; line-height: normal; white-space: nowrap; z-index: 2; }

/* Loading bars: fill one by one every 0.3s, then Back lights up, then repeat */
.load { left: 32px; top: 63px; width: 338px; height: 76px; }
.load i { position: absolute; width: 16px; border: 1px solid var(--sage); transition: background 300ms linear; }
.load i.short { top: 27px; height: 49px; }
.load i.tall { top: 0; height: 76px; }
.load i.lit { background: var(--sage); }
.load.reset i { transition: none; }
.back {
  left: 296px; top: 63px; width: 74px; height: 76px;
  border: 1px solid var(--sage);
  font-weight: 700; font-size: 16px;
  transition: background 300ms linear;
}
.back span { position: absolute; left: 17px; top: 32px; line-height: 11px; }
.back.lit { background: var(--violet); }
.load.reset ~ .back { transition: none; }

.section-label { left: 31px; top: 161.5px; width: 340px; font-size: 16px; line-height: normal; white-space: nowrap; }

.preview-frame { left: 32px; top: 175px; width: 338px; height: 430px; border: 4px solid var(--sage); }
.preview { left: 36px; top: 179px; width: 332px; height: 422px; overflow: hidden; }
.preview video { width: 100%; height: 100%; object-fit: cover; }
.star { width: 1px; height: 1px; background: var(--sage); }

/* Small window in the preview's corner */
.mini { left: 275px; top: 510px; width: 87px; height: 87px; overflow: hidden; background: var(--black); }
.mini video { position: absolute; left: 2px; top: 0; width: 83px; height: 87px; object-fit: cover; }
.bar { background: var(--sage); }
.tri { left: 307px; top: 588px; width: 23px; height: 23px; }

/* Project title scrolling right to left (Figma: 2.5s linear loop) */
.title { left: 32px; top: 613px; width: 338px; height: 42px; overflow: hidden; font-size: 26px; }
.title .track { position: absolute; left: -4px; top: 12px; display: flex; gap: 44px; white-space: nowrap; line-height: 19px;
  animation: title-scroll 2.5s linear infinite; }
.title .track span { width: 347px; flex: none; }
@keyframes title-scroll { to { transform: translateX(-391px); } }

.prev, .next, .select { background: var(--violet); }
.prev { left: 254px; top: 672px; width: 54px; height: 54px; }
.next { left: 316px; top: 672px; width: 54px; height: 54px; }
.select { left: 254px; top: 734px; width: 116px; height: 54px; font-weight: 700; font-size: 16px; }
.select span { position: absolute; left: 33px; top: 21px; line-height: 11px; }
.prev:active, .next:active, .select:active, .come:active, .back:active { filter: brightness(1.25); }
.prev[disabled], .next[disabled] { cursor: default; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .glyph, .come .fill, .title .track { animation: none; }
  .glyph { transform: none; }
}