/* =========================================================
   Moving parts, the reel home. The classic landing (base.css with
   its shell.css, and home.css: the type, the sections) around
   the reel: the wall of clips, the record frame, and the three
   ways in, one after the other in that frame.
   ========================================================= */

:root { --rec: color-mix(in srgb, var(--text) 16%, transparent); --rec-strong: color-mix(in srgb, var(--text) 50%, transparent); }
html.rec, html.rec * { cursor: none !important; }
html.rec ::-webkit-scrollbar { display: none; }

/* ---------- the stage: one fixed WebGL canvas under the page, over the footer ---------- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; pointer-events: none; }
html.no-gl #gl { display: none; }
/* no WebGL, or a context lost for good: the posters in a flat grid, as dim as the wall at rest (stage.js) */
.wall-still { position: fixed; inset: 0; z-index: 1; display: none; overflow: hidden; pointer-events: none; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(clamp(170px, 22vw, 520px), 1fr)); gap: clamp(14px, 1.9vw, 44px);
  transition: opacity .6s var(--ease-out); }
.wall-still img { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; filter: grayscale(1) brightness(.3); }
html.no-gl .wall-still { display: grid; }
html.no-gl.in-focus .wall-still, html.no-gl.stage-off .wall-still { opacity: 0; }
/* what only speaks of the live wall goes with it */
html.no-gl .hud { visibility: hidden !important; }
html.no-gl .wcur, html.no-gl .wtag, html.no-gl .wdim { display: none; }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, transparent) 0, color-mix(in srgb, var(--bg) 0%, transparent) 170px),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 82%, transparent) 0, color-mix(in srgb, var(--bg) 0%, transparent) 120px),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 48%, transparent) 0, color-mix(in srgb, var(--bg) 0%, transparent) 50%),
    radial-gradient(42% 34% at 0% 12%, color-mix(in srgb, var(--bg) 78%, transparent) 0, color-mix(in srgb, var(--bg) 0%, transparent) 100%),
    radial-gradient(120% 95% at 50% 50%, color-mix(in srgb, var(--bg) 0%, transparent) 58%, color-mix(in srgb, var(--bg) 72%, transparent) 100%); }
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-2%, 6%); } 80% { transform: translate(5%, -2%); } 100% { transform: translate(0, 0); } }
html.stage-off .grain { animation: none; visibility: hidden; }

/* the page is a sheet over the footer: its first two screens are glass on the stage, the rest is ground */
.foot { z-index: 0; }
.page { background: transparent; box-shadow: none; }
.rest { position: relative; z-index: 3; background: var(--bg); border-radius: 0 0 var(--lift-r) var(--lift-r); box-shadow: 0 30px 60px -10px rgba(0, 0, 0, .45); }

/* a recording dot, shared by every frame (the keyframes are in shell.css) */
.rec-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text); margin-right: 8px; vertical-align: 1px; animation: live 1.6s var(--ease-out) infinite; }

/* ---------- (01) the wall ---------- */
.hero { position: relative; z-index: 2; height: 100svh; min-height: 600px; touch-action: pan-y; cursor: none; user-select: none; -webkit-user-select: none; }
.hero a { cursor: pointer; }
.hero-top { position: absolute; z-index: 3; left: var(--gut); top: clamp(92px, 12vh, 124px); display: grid; gap: 12px; max-width: 410px; pointer-events: none; }
.hero-top .mono { color: var(--label); }
.hero-lede { color: var(--muted); font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.45; text-shadow: 0 1px 14px color-mix(in srgb, var(--bg) 70%, transparent); }
/* the page's heading is the first sentence of the lede, set as running text */
.hero-lede h1, .hero-lede p { display: inline; margin: 0; font: inherit; letter-spacing: inherit; }
.hero-lede h1 { color: var(--text); font-weight: 460; }
/* the wordmark: plain solid type, with nothing under it */
.word { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: calc(34px - .12em); display: flex; column-gap: .2em; font-weight: 430; line-height: .8; letter-spacing: -.058em; font-size: 200px; white-space: nowrap; pointer-events: none; color: var(--text); }
.word .w-line { display: block; overflow: hidden; padding: .14em .04em .32em 0; margin-top: -.12em; }
.word .ch { display: inline-block; will-change: transform; }
.hud { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: 16px; display: grid; grid-template-columns: repeat(4, 1fr); color: var(--label); pointer-events: none; }
.hud > :last-child { justify-self: end; }
.hud > :nth-child(2) { justify-self: center; transform: translateX(-50%); }
.hud > :nth-child(3) { justify-self: center; transform: translateX(50%); }
.hud b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* the name tag on the hovered plane, and its size */
.wtag { position: fixed; z-index: 30; left: 0; top: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 5px 9px 4px 8px; background: var(--text); color: var(--bg); white-space: nowrap; font-size: 10.5px; clip-path: inset(0 100% 0 0); transition: clip-path .45s var(--ease-out); will-change: transform; }
.wtag.on { clip-path: inset(0 0 0 0); }
.wtag b { font-weight: 600; }
.wtag i { font-style: normal; opacity: .5; }
.wdim { position: fixed; z-index: 30; left: 0; top: 0; pointer-events: none; color: var(--text); font-size: 10px; opacity: 0; transition: opacity .3s; white-space: nowrap; will-change: transform; }
.wdim.on { opacity: .8; }
/* the pointer over the wall: a cross and a word */
.wcur { position: fixed; z-index: 41; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .35s; mix-blend-mode: difference; }
.wcur.on { opacity: 1; }
.wcur .x { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; transition: transform .4s var(--ease-out); }
.wcur .x::before, .wcur .x::after { content: ""; position: absolute; background: var(--text); }
.wcur .x::before { left: 8.5px; top: 0; width: 1px; height: 18px; }
.wcur .x::after { top: 8.5px; left: 0; height: 1px; width: 18px; }
.wcur.is-down .x { transform: rotate(45deg) scale(.8); }
.wcur .lbl { position: absolute; left: 16px; top: 8px; color: var(--text); font-size: 10px; white-space: nowrap; }
.wcur.is-down .lbl::after { content: " ·· hold"; color: var(--label); }
.wcur.off-stage { opacity: 0; }
@media (hover: none) { .wcur, .wtag, .wdim { display: none; } }

/* ---------- (02) in focus: pinned; the frame is a slot the stage reads ---------- */
.fx { position: relative; z-index: 2; height: 100svh; --slotw: min(58vw, calc((100svh - 210px) * 1.6)); }
.fx { --vfh: 34px; }
.fx-slot { position: absolute; right: var(--gut); top: calc(50% + 30px + var(--vfh) / 2); width: var(--slotw); aspect-ratio: 16 / 10; translate: 0 -50%; pointer-events: none; }

/* =========================================================
   The viewfinder: one treatment, for moving pictures only.
   A hairline around the picture and its status strip, crop
   marks flush on the outer corners, and one mono line: the
   recording dot, the file, one progress bar, the timecode.
   ========================================================= */
.vf, .vf-bar { opacity: var(--ticks, 1); }
.vf { position: absolute; left: 0; right: 0; bottom: 0; top: calc(-1 * var(--vfh)); pointer-events: none; z-index: 2; }
.vf::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--rec); }
.vf::after { content: ""; position: absolute; inset: 0; --m: 14px; --c: color-mix(in srgb, var(--text) 85%, transparent);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--m) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--m) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--m) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--m),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--m) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--m);
  background-repeat: no-repeat; }
.vf-bar { position: absolute; left: 0; right: 0; bottom: 100%; height: var(--vfh); display: flex; align-items: center; gap: 18px; padding: 0 14px; border-bottom: 1px solid var(--rec); color: var(--label); white-space: nowrap; }
.vf-bar b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.vf-rec { display: inline-flex; align-items: center; color: var(--text); }
.vf-bar .rec-dot { background: #ff4b3e; box-shadow: 0 0 8px rgba(255, 75, 62, .45); }
#s-file { display: inline-block; min-width: 21ch; }
.fx-bar { flex: 1; height: 1px; background: var(--rec); position: relative; overflow: hidden; display: block; }
.fx-bar::after { content: ""; position: absolute; inset: 0; background: var(--text); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }

/* the three windows: drawn at a logical size near their real one, scaled into the frame */
.fx-faces { position: absolute; inset: 0; overflow: hidden; }
.fx-fw { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; }
.fx-fw.on { opacity: 1; }
.fx-fw > .face { position: absolute; inset: 0; border-radius: 0; border: 0; box-shadow: none; }
.fx .face .ftop .mono { font-size: 10px; }
.fx .face-wf .wf-frame { border-radius: 0; }
/* the Designer gives its canvas the room: narrower panels, a tighter margin */
.fx .face-wf .fbody { grid-template-columns: 19% 1fr 22%; }
.fx .face-wf .wf-canvas { padding: 12px 8px 10px; }
.fx .face-ai { background: radial-gradient(120% 70% at 50% -10%, #fbf6ee 0%, #f4ece0 45%, #e6dccc 100%); }
.fx .face-ai .fbody { padding: 18px 18px 14px; gap: 12px; }
.fx .face-code pre { font-size: 12px; }

/* the parts a window is built from */
.fx .face-wf .wf-frame { box-shadow: none; }
.wf-sel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.wf-sel rect { x: -.5px; y: -.5px; width: calc(100% + 1px); height: calc(100% + 1px); fill: none; stroke: var(--wf); stroke-width: 1px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wf-set .attr .v { font-style: normal; white-space: nowrap; }
.face-code pre div.hl { position: relative; }
.face-code pre .ty { display: inline-block; vertical-align: top; }
.face-code pre .tcar { position: absolute; top: 3px; bottom: 3px; width: 7px; background: var(--text); opacity: 0; visibility: hidden; }
.ai-diff div span { min-width: 5ch; text-align: right; }
.ai-bot .orb.busy { animation-duration: .9s; }
.ai-say .dots { display: inline-flex; gap: 4px; padding-top: 6px; }
.ai-say .dots i { width: 5px; height: 5px; border-radius: 50%; background: #2a211a; animation: think 1s ease-in-out infinite; }
.ai-say .dots i:nth-child(2) { animation-delay: .15s; }
.ai-say .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes think { 0%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-2px); } }
/* the exposure of one frame, when the film lands */
.fx-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; mix-blend-mode: screen; }

/* the column: which component, and which way in */
.fx-col { position: absolute; left: var(--gut); top: calc(50% + 30px); translate: 0 -50%; width: calc(100vw - var(--slotw) - 4 * var(--gut)); height: calc(var(--slotw) / 1.6 + var(--vfh)); display: flex; flex-direction: column; justify-content: space-between; }
.fx-top { display: flex; align-items: center; justify-content: space-between; height: var(--vfh); color: var(--label); border-top: 1px solid var(--rec); border-bottom: 1px solid var(--rec); }
.fx-top b, .fx-count { color: var(--text); }
.mk { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mk > span { display: block; will-change: transform; }
.fx-count { display: inline-flex; gap: .35em; align-items: center; }
.fx-count > span:last-child { color: var(--label); }
.fx-count .mk { display: inline-block; padding: 0; margin: 0; }
.fx-name { font-weight: 430; font-size: clamp(40px, 5.4vw, 88px); line-height: .94; letter-spacing: -.05em; position: relative; }
.fx-meta { color: var(--label); margin-top: 16px; display: flex; gap: 18px; }
.fx-meta b { color: var(--text); font-weight: 500; }
.fx-what { color: var(--muted); max-width: 34ch; margin-top: 14px; font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.45; }
.fx-ways-h { font-weight: 430; font-size: clamp(22px, 1.9vw, 32px); line-height: 1; letter-spacing: -.045em; margin-bottom: 16px; }
.fx-ways-h span { color: var(--muted); }
.fx-rows { display: grid; border-top: 1px solid var(--line-strong); }
.fx-row { position: relative; display: grid; grid-template-columns: 38px minmax(76px, 110px) 1fr 18px; align-items: baseline; gap: 0 8px; padding: 13px 0 12px; border-bottom: 1px solid var(--line-strong); text-align: left; color: var(--label); cursor: pointer; transition: color .4s var(--ease-out); }
.fx-row .mono { color: var(--label); transition: color .4s var(--ease-out); }
.fx-row b { font-weight: 450; font-size: clamp(16px, 1.25vw, 20px); letter-spacing: -.025em; color: var(--muted); transition: color .4s var(--ease-out); }
.fx-row em { font-style: normal; font-size: 14.5px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-row .ic { width: 15px; height: 15px; align-self: center; opacity: .55; transition: opacity .4s, color .4s; }
.fx-row .pg { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--text); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; opacity: 0; transition: opacity .4s; }
.fx-row.on { color: var(--muted); }
.fx-row.on .mono, .fx-row.on b { color: var(--text); }
.fx-row.on .ic { opacity: 1; }
.fx-row.on[data-r="0"] .ic { color: #fff; }
.fx-row.on .pg { opacity: 1; }
.fx-row.on[data-r="0"] .pg { background: var(--wf); }
.fx-row:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .fx-row:not(.on):hover b { color: var(--text); } }

/* ---------- (03 to 05) the rest of the page: classic, with its numbered labels ---------- */
.rest .sec { border-top: 1px solid var(--line); }
.rest .sec:first-child { border-top: 0; }
.rec-frame { margin: clamp(44px, 6.5vh, 80px) 0 0; --vfh: 34px; }
.rf-media { position: relative; margin-top: var(--vfh); }
.rec-frame .clip { aspect-ratio: 16 / 10; background: var(--bg); }
.rec-frame .clip video { object-fit: contain; }
.walk .h2 { font-size: clamp(40px, 5.4vw, 88px); }

/* ---------- ?cam=2: the whole screen is the viewfinder while the stage runs ---------- */
.cam { display: none; }
html.cam2 .cam { display: block; position: fixed; z-index: 35; inset: 0; pointer-events: none; transition: opacity .4s; }
html.cam2.stage-off .cam, html.cam2.past-focus .cam { opacity: 0; }
html.cam2 .vf::after { display: none; }
.cam > i { position: absolute; width: 22px; height: 22px; border: 0 solid color-mix(in srgb, var(--text) 80%, transparent); }
.cam > i:nth-child(1) { left: var(--gut); top: 78px; border-left-width: 1px; border-top-width: 1px; }
.cam > i:nth-child(2) { right: var(--gut); top: 78px; border-right-width: 1px; border-top-width: 1px; }
.cam > i:nth-child(3) { left: var(--gut); bottom: 42px; border-left-width: 1px; border-bottom-width: 1px; }
.cam > i:nth-child(4) { right: var(--gut); bottom: 42px; border-right-width: 1px; border-bottom-width: 1px; }
.cam-rec, .cam-tc { position: absolute; top: 88px; color: var(--text); display: inline-flex; align-items: center; }
.cam-rec { left: calc(var(--gut) + 34px); }
.cam-rec .rec-dot { background: #ff4b3e; box-shadow: 0 0 8px rgba(255, 75, 62, .45); }
.cam-tc { right: calc(var(--gut) + 34px); color: var(--label); }
.cam-tc b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.cam-x { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; translate: -50% -50%; transition: opacity .4s; }
.cam-x::before, .cam-x::after { content: ""; position: absolute; background: color-mix(in srgb, var(--text) 60%, transparent); }
.cam-x::before { left: 6.5px; top: 0; width: 1px; height: 14px; }
.cam-x::after { top: 6.5px; left: 0; height: 1px; width: 14px; }
html.cam2.in-focus .cam-x { opacity: 0; }
html.cam2 .hero-top { top: clamp(120px, 14vh, 150px); left: calc(var(--gut) + 34px); }
html.cam2 .hud { left: calc(var(--gut) + 34px); right: calc(var(--gut) + 34px); bottom: 50px; }
html.cam2 .word { bottom: calc(76px - .12em); left: calc(var(--gut) + 20px); right: calc(var(--gut) + 20px); }

/* before the intro: the nav, the lede, the word and the hud wait out of sight, so the page is not seen, then hidden, then brought in */
html.pre-intro .nav, html.pre-intro .hero-top, html.pre-intro .hud, html.pre-intro .word { visibility: hidden; }

/* the loader: one mono line while the posters and the windows arrive */
.loader { position: fixed; z-index: 50; left: var(--gut); bottom: 18px; color: var(--label); pointer-events: none; }
.loader b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- portrait: the frame on top, the words below ---------- */
@media (max-aspect-ratio: 1/1) {
  .word { flex-direction: column; align-items: flex-start; bottom: calc(44px - .12em); line-height: .78; }
  .word .w-line + .w-line { margin-top: -.24em; }
  .hud { grid-template-columns: 1fr auto; }
  .hud > :nth-child(2), .hud > :nth-child(3) { display: none; }
  .fx { --slotw: calc(100vw - 2 * var(--gut)); }
  .fx-slot { top: calc(clamp(112px, 11.5vh, 160px) + var(--vfh)); translate: none; }
  .fx-col { top: calc(clamp(112px, 11.5vh, 160px) + var(--vfh) + var(--slotw) / 1.6 + 52px); bottom: 26px; height: auto; translate: none; width: calc(100vw - 2 * var(--gut)); }
  .fx-top { display: none; }
  .fx-name { font-size: clamp(44px, 8vw, 96px); }
  .fx-what { max-width: 44ch; }
}
@media (max-width: 820px) {
  .hero-top { max-width: calc(100% - 2 * var(--gut)); top: 84px; }
  .fx { --vfh: 30px; }
  .vf-bar { gap: 10px; padding: 0 10px; }
  #s-file { min-width: 0; }
  .fx-slot { top: max(calc(84px + var(--vfh)), calc(50svh - 250px)); }
  .fx-col { top: calc(max(calc(84px + var(--vfh)), calc(50svh - 250px)) + var(--slotw) / 1.6 + 40px); bottom: auto; justify-content: flex-start; }
  .fx-ways { margin-top: 30px; }
  .fx-what { font-size: 14.5px; margin-top: 10px; }
  .fx-meta { margin-top: 10px; }
  .fx-row { grid-template-columns: 30px 72px 1fr 16px; padding: 10px 0 9px; }
  .fx-row em { font-size: 13px; }
  .rec-frame { --vfh: 30px; }
  .rec-frame .vf-tc { display: none; }
}
@media (prefers-reduced-motion: reduce) { .grain, .rec-dot, .ai-say .dots i { animation: none; } }

/* on a touch screen the held section must not drift under a native fling */
@media (hover: none) { html.rh-held, html.rh-held body { overflow: hidden; } }
/* the nav takes its ground as soon as the section leaves the pin (html.rh-ground, written with the nav in shell.css) */
/* while the stage is on, the footer under the glass is not drawn at all, so a resize can never show it through the wall */
html:not(.stage-off) .foot { visibility: hidden; }

/* ---------- the passage between pages: a field of glyphs (page-glyph.js) instead of the native cross-fade ---------- */
@view-transition { navigation: none; }
.pg-cv { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483000; display: none; pointer-events: none; }
.pg-cv.on { display: block; pointer-events: auto; }
/* a page reached through the glyphs is covered from its first paint, until the field takes over */
html.pg-in::after { content: ""; position: fixed; inset: 0; z-index: 2147483001; background: var(--bg); }

/* the walk-through keeps its 16:10, and its whole frame fits the screen under the nav */
.walk .rec-frame { width: min(100%, max(320px, calc((100svh - 154px) * 1.6))); margin-left: auto; margin-right: auto; }

/* the membership price says what it covers; yearly, what it comes to each month */
.plan .price .per { font-size: clamp(15px, 1.2vw, 18px); color: var(--muted); letter-spacing: -.01em; }
.plan .price .per-eq { display: none; flex-basis: 100%; margin-top: 6px; font-size: 15px; color: var(--muted); }
.plan .price .per-eq.on { display: block; }
.plan .price .per-eq b { font-weight: 450; color: #3ecf8e; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -.02em; }