/* cinema.css: the site's version 3, laid over the base (site.css).
   The engine (engine.js) draws one live picture of crystal candles behind every page;
   this layer makes the pages a film over it: each section opens on one screen with one
   giant word, the heading in two registers (a heavy grotesque, an italic serif accent in
   the crystal of the mark), glass that stays legible over moving light, the opening
   through the crystal F, and the hour dial. Tokens: the canon, plus the crystal measured
   from the mark (#1C4564, #458FB1, #B4F2F7, #F6FEFD). */

:root {
  --crystal: #B4F2F7; --crystal-mid: #458FB1; --crystal-deep: #1C4564; --crystal-peak: #F6FEFD;
  --crystal-text: linear-gradient(100deg, #F6FEFD 0%, #B4F2F7 30%, #6FC3E0 62%, #A5B4FC 100%);
  --out: cubic-bezier(.23, 1, .32, 1);
  --morph: cubic-bezier(.77, 0, .175, 1);
  --scrim: rgba(5, 6, 15, .78);
}

/* ---------- the engine ---------- */
.engine { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; background: #05060F; }
html.has-engine body::before, html.has-engine body::after { display: none; }
html.no-engine .engine { display: none; }
/* Without the engine (no WebGL, or it stopped), the field keeps the canon's light. */
html.no-engine body { background: radial-gradient(1200px 900px at 70% 10%, rgba(69,143,177,.16), transparent 60%), radial-gradient(900px 700px at 10% 60%, rgba(99,102,241,.12), transparent 60%), var(--bg0); }

/* ---------- type: two registers ---------- */
.h1, .h2 { font-weight: 800; letter-spacing: -.045em; }
.h1 em, .h2 em, .say em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em;
  background: var(--crystal-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .08em;
}
.kicker { color: #8FA9C6; }

/* ---------- the hero ---------- */
.cine-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-top: clamp(96px, 14vh, 150px); padding-bottom: clamp(56px, 10vh, 120px); }
/* A title card's light: the reading column in shadow, the picture open on the right. */
.cine-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,6,15,.86) 0%, rgba(5,6,15,.62) 34%, rgba(5,6,15,.12) 58%, rgba(5,6,15,0) 70%),
              linear-gradient(180deg, rgba(5,6,15,.5) 0%, rgba(5,6,15,0) 26%); }
.cine-hero > .wrap { position: relative; z-index: 1; }
/* On a narrow screen the river lies under the headline (engine.js drops it there), so the
   shadow eases off towards the bottom and the river shows; the copy keeps its own ground. */
@media (max-width: 960px) { .cine-hero::before { background: linear-gradient(180deg, rgba(5,6,15,.78) 0%, rgba(5,6,15,.5) 40%, rgba(5,6,15,.08) 100%); } }
.cine-hero .hero-h1 { font-size: clamp(46px, 7.1vw, 116px); line-height: .94; max-width: 11.5em; margin-top: 22px; }
.cine-hero .hero-h1 em { display: block; margin-top: .06em; }
.cine-hero .hero-copy { position: relative; }
.cine-hero .hero-copy::before, .cine-stage .sec-head::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -24% -30% -24% -46%;
  background: radial-gradient(closest-side, rgba(5,6,15,.86), rgba(5,6,15,.55) 58%, transparent 86%);
}
.cine-hero .stage::before { background: radial-gradient(closest-side, rgba(69,143,177,.28), rgba(99,102,241,.1) 55%, transparent 75%); }
.cine-hero .mac { box-shadow: inset 0 0 0 .5px rgba(180,242,247,.22), 0 50px 140px rgba(0,0,0,.7), 0 0 80px rgba(69,143,177,.18); }
.hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.hero-scroll i { width: 1px; height: 38px; background: linear-gradient(180deg, transparent, var(--crystal)); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: var(--crystal-peak); animation: drip 1.8s var(--out) infinite; }
@keyframes drip { to { top: 100%; } }
@media (max-width: 960px) { .hero-scroll { display: none; } }

/* ---------- a section is a scene ---------- */
.cine { position: relative; padding-block: 0 clamp(72px, 11vh, 150px); }
.cine-stage { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-block: clamp(100px, 15vh, 170px) clamp(40px, 8vh, 90px); }
.cine-stage .sec-head { position: relative; max-width: 620px; margin-bottom: 0; gap: 22px; }
.cine.right .cine-stage .sec-head { margin-left: auto; }
.cine.center .cine-stage .sec-head { margin-inline: auto; text-align: center; justify-items: center; max-width: 820px; }
.cine-stage .h2 { font-size: clamp(40px, 5.3vw, 82px); line-height: .98; }
.cine-stage .lede { color: #C9CEDD; }
.cine-body { position: relative; }

/* The giant word: one per scene, outlined in crystal, travelling against the scroll. */
.giant {
  position: absolute; left: 0; right: 0; top: 50%; z-index: -1; pointer-events: none; user-select: none;
  font: 800 clamp(110px, 21vw, 360px)/.8 var(--display); letter-spacing: -.06em; white-space: nowrap; text-align: center;
  color: rgba(180, 242, 247, .035); -webkit-text-stroke: 1.5px rgba(180, 242, 247, .3);
  transform: translate3d(calc((.5 - var(--p, .5)) * 34vw), -50%, 0);
  will-change: transform;
}
.cine.right .giant { transform: translate3d(calc((var(--p, .5) - .5) * 34vw), -50%, 0); }
/* A subpage's word stands still behind its opening heading. */
.page-head { position: relative; }
.page-head .giant { top: 60%; transform: translate3d(0, -50%, 0); text-align: right; padding-right: 2vw; }
@media (max-width: 760px) { .giant { font-size: 30vw; -webkit-text-stroke: 1px rgba(180, 242, 247, .12); } }

/* The stamp of the hour reads as a time code. */
.cine .stamp, .cine-hero .kicker { color: #8FA9C6; }
.cine .stamp time { font-size: 13px; color: var(--crystal); text-shadow: 0 0 14px rgba(180,242,247,.45); }

/* ---------- glass over moving light ---------- */
html.has-engine .card, html.has-engine .glass, html.has-engine .arch .node, html.has-engine .level, html.has-engine .next a, html.has-engine .faq details {
  background: linear-gradient(180deg, rgba(22, 27, 52, .74), rgba(7, 9, 21, .82));
  box-shadow: inset 0 0 0 .5px rgba(180, 242, 247, .12), inset 0 .5px 0 rgba(255,255,255,.16), 0 24px 70px rgba(0,0,0,.45);
}
html.has-engine .arch .node.mac { background: linear-gradient(180deg, rgba(40, 52, 110, .62), rgba(10, 13, 34, .84)); }
html.has-engine .noise { background: linear-gradient(180deg, rgba(10, 14, 30, .55), rgba(5, 6, 15, .7)); }
html.has-engine .page-head .sec-head, html.has-engine .prose { position: relative; }
html.has-engine .prose::before {
  content: ""; position: absolute; inset: -40px -60px; z-index: -1; pointer-events: none; border-radius: 40px;
  background: linear-gradient(180deg, rgba(5,6,15,.82), rgba(5,6,15,.9));
}
html.has-engine .page-head .sec-head::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -20% -10% -20% -30%;
  background: radial-gradient(closest-side, var(--scrim), rgba(5,6,15,.4) 60%, transparent 85%);
}

/* ---------- a page's subject on its own stage ---------- */
/* The head fills the first screen: its words, then a band where engine.js fits the scene's
   subject (the band is what the words leave, never under a third of the screen); the
   subject then leaves with the head as the page moves. 64px is the header's height. */
.stage-band { display: none; }
html.has-engine .page-head.staged { display: flex; flex-direction: column; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
html.has-engine .page-head.staged > .wrap { order: 1; width: 100%; }
html.has-engine .page-head.staged > .stage-band { display: block; order: 2; flex: 1 0 34vh; flex: 1 0 34svh; pointer-events: none; }
html.has-engine .page-head.staged.stage-top > .stage-band { order: 0; }
html.has-engine .page-head.staged .giant { top: 34%; }
html.has-engine .page-head.staged.stage-top .giant { top: 72%; }
/* On a wide screen a subject that stands (the charts, the slabs, the sphere, the ledger)
   takes the right two fifths of the first screen, the words keep to the left, centred in
   the height, and the giant word lies along the bottom. */
@media (min-width: 1000px) {
  html.has-engine .page-head.staged.stage-right { justify-content: center; }
  html.has-engine .page-head.staged.stage-right > .stage-band { position: absolute; top: 0; bottom: 0; right: 0; width: 42%; flex: none; }
  html.has-engine .page-head.staged.stage-right .sec-head > * { max-width: min(860px, 50vw); }
  html.has-engine .page-head.staged.stage-right .giant { top: 88%; text-align: left; padding: 0 0 0 2vw; }
}
/* The home's sections: each scene's subject on its band, fitted by engine.js. On a wide
   screen the band is the side the words leave (the right 44 percent, or the left for a
   section whose words stand right); the lattice sits under its centred words and the
   stream above its words at every width; on a narrow screen every subject sits under its
   words. 64px is the header's height. */
html.has-engine .cine-stage > .stage-band { display: block; pointer-events: none; }
html.has-engine .cine-stage > .wrap { order: 1; }
@media (min-width: 1000px) {
  html.has-engine .cine:not(.center):not(.stage-above) .cine-stage > .stage-band { position: absolute; top: 64px; bottom: 0; right: 0; width: 44%; }
  html.has-engine .cine.right .cine-stage > .stage-band { right: auto; left: 0; }
}
html.has-engine .cine.center .cine-stage, html.has-engine .cine.stage-above .cine-stage { display: flex; flex-direction: column; justify-content: flex-start; }
html.has-engine .cine.center .cine-stage > .stage-band { order: 2; flex: 1 0 36vh; flex: 1 0 36svh; }
html.has-engine .cine.stage-above .cine-stage > .stage-band { order: 0; flex: 1 0 30vh; flex: 1 0 30svh; }
@media (max-width: 999px) {
  html.has-engine .cine .cine-stage { display: flex; flex-direction: column; justify-content: flex-start; }
  html.has-engine .cine .cine-stage > .stage-band { order: 2; flex: 1 0 34vh; flex: 1 0 34svh; }
  html.has-engine .cine.stage-above .cine-stage > .stage-band { order: 0; }
}
/* On a narrower screen the waitlist's F keeps to a lower band, so the card's button stands
   clear of the hourly check's pill at the bottom of the first screen. */
@media (max-width: 999px) {
  html.has-engine .page-head.staged.stage-top { min-height: 0; }
  html.has-engine .page-head.staged.stage-top > .stage-band { flex: 0 0 24vh; flex: 0 0 24svh; }
}

/* ---------- the promise, under the F ---------- */
.cine-promise { min-height: 100vh; min-height: 100svh; display: grid; align-content: end; padding-bottom: clamp(70px, 14vh, 160px); padding-top: 52vh; }
@media (max-width: 960px) { .cine-promise { padding-top: 60vh; padding-top: 60svh; } }
.cine-promise .say { font-size: clamp(34px, 5vw, 72px); }

/* ---------- the opening ---------- */
.opening { display: none; }
html.opening-on .opening { position: fixed; inset: 0; z-index: 80; display: grid; align-content: end; justify-items: center; padding-bottom: clamp(70px, 15vh, 170px); pointer-events: none; }
html.opening-on, html.opening-on body { overflow: hidden; }
html.opening-on .site-head, html.opening-on .site-foot, html.opening-on .live-pill, html.opening-on main > :not(.opening) { opacity: 0; }
html.opening-out .site-head, html.opening-out .site-foot, html.opening-out .live-pill, html.opening-out main > :not(.opening) { opacity: 1; transition: opacity .9s var(--out) .12s; }
html.opening-out .opening { opacity: 0; transition: opacity .55s ease; }
/* The film (Blender, tools/film_opening.py): over the live engine until its last frame,
   which is the live F at the same place and size; then it fades into it. */
.op-film { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; pointer-events: none; background: #05060F; }
html.opening-film .op-film { opacity: 1; }
html.opening-film-out .op-film { opacity: 0; transition: opacity .32s ease; }
/* Each film is shown by the measure the engine frames its F with (engine.js, PHONE), so the
   hand-off holds on every screen. The wide film (16:9) by the height: cut at the sides up to
   16:9; on a wider screen shown whole, its side edges faded into the page. The phone film
   (6:13) by the width: cut top and bottom down to 6:13; on a taller screen shown whole, its
   floor faded. (Cover alone grew the F by 13 percent at 1920x955: 2026-10-02.) */
@media (min-aspect-ratio: 16/9) {
  .op-film { object-fit: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 88.9vh), #000 calc(50% - 62vh), #000 calc(50% + 62vh), transparent calc(50% + 88.9vh));
    mask-image: linear-gradient(90deg, transparent calc(50% - 88.9vh), #000 calc(50% - 62vh), #000 calc(50% + 62vh), transparent calc(50% + 88.9vh));
    -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 88.9dvh), #000 calc(50% - 62dvh), #000 calc(50% + 62dvh), transparent calc(50% + 88.9dvh));
    mask-image: linear-gradient(90deg, transparent calc(50% - 88.9dvh), #000 calc(50% - 62dvh), #000 calc(50% + 62dvh), transparent calc(50% + 88.9dvh)); }
}
@media (max-aspect-ratio: 6/13) {
  .op-film { object-fit: contain;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(50% + 78vw), transparent calc(50% + 108.3vw));
    mask-image: linear-gradient(180deg, #000 calc(50% + 78vw), transparent calc(50% + 108.3vw)); }
}
.op-word { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; }
.op-name { display: flex; overflow: hidden; padding: .04em .02em .1em; font: 800 clamp(42px, 6.2vw, 92px)/1 var(--display); letter-spacing: -.045em; color: var(--ink0); }
.op-name span { display: inline-block; transform: translate3d(0, 108%, 0); }
html.opening-word .op-name span { transform: none; transition: transform .74s var(--out); }
html.opening-word .op-name span:nth-child(2) { transition-delay: .03s; } html.opening-word .op-name span:nth-child(3) { transition-delay: .06s; }
html.opening-word .op-name span:nth-child(4) { transition-delay: .09s; } html.opening-word .op-name span:nth-child(5) { transition-delay: .12s; }
html.opening-word .op-name span:nth-child(6) { transition-delay: .15s; } html.opening-word .op-name span:nth-child(7) { transition-delay: .18s; }
html.opening-word .op-name span:nth-child(8) { transition-delay: .21s; } html.opening-word .op-name span:nth-child(9) { transition-delay: .24s; }
.op-name span:nth-child(n+5) { background: var(--crystal-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.op-sub { font: italic 400 clamp(18px, 2.1vw, 28px)/1.2 var(--serif); color: var(--ink1); opacity: 0; transform: translate3d(0, 10px, 0); }
html.opening-word .op-sub { opacity: 1; transform: none; transition: opacity .7s var(--out) .38s, transform .7s var(--out) .38s; }
.op-skip { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }

/* ---------- the hour dial ---------- */
.hour-dial { position: fixed; right: clamp(14px, 2vw, 30px); top: 50%; z-index: 30; display: grid; justify-items: center; gap: 10px; transform: translateY(-50%); pointer-events: none; }
.hd-face { position: relative; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.08), rgba(255,255,255,.015) 68%), rgba(7, 9, 21, .62);
  box-shadow: inset 0 0 0 .5px rgba(180,242,247,.2), inset 0 .5px 0 rgba(255,255,255,.2), 0 14px 40px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.hd-face i { position: absolute; left: 50%; top: 5px; width: 1px; height: 5px; margin-left: -.5px; background: rgba(255,255,255,.26); transform-origin: 50% 39px; }
.hd-face i:nth-of-type(1) { height: 8px; background: var(--crystal); }
.hd-face i:nth-of-type(2) { transform: rotate(30deg); } .hd-face i:nth-of-type(3) { transform: rotate(60deg); }
.hd-face i:nth-of-type(4) { transform: rotate(90deg); } .hd-face i:nth-of-type(5) { transform: rotate(120deg); }
.hd-face i:nth-of-type(6) { transform: rotate(150deg); } .hd-face i:nth-of-type(7) { transform: rotate(180deg); }
.hd-face i:nth-of-type(8) { transform: rotate(210deg); } .hd-face i:nth-of-type(9) { transform: rotate(240deg); }
.hd-face i:nth-of-type(10) { transform: rotate(270deg); } .hd-face i:nth-of-type(11) { transform: rotate(300deg); }
.hd-face i:nth-of-type(12) { transform: rotate(330deg); }
.hd-face b { position: absolute; left: 50%; top: 12px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 6px rgba(139,92,246,.9); transform-origin: 50% 32px; }
.hd-face b.c06 { transform: rotate(36deg); } .hd-face b.c17 { transform: rotate(102deg); } .hd-face b.c31 { transform: rotate(186deg); }
.hd-face b.c44 { transform: rotate(264deg); } .hd-face b.c52 { transform: rotate(312deg); } .hd-face b.c58 { transform: rotate(348deg); }
.hd-hand { position: absolute; left: 50%; top: 9px; width: 2px; height: 35px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(180deg, var(--crystal-peak), var(--crystal-mid)); box-shadow: 0 0 10px rgba(180,242,247,.7); transform-origin: 50% 35px; }
.hd-face::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--crystal-peak); box-shadow: 0 0 10px rgba(180,242,247,.9); }
.hd-read { font: 600 11px/1 var(--mono); color: var(--ink0); padding: 5px 8px; border-radius: 7px; background: rgba(7, 9, 21, .72); box-shadow: inset 0 0 0 .5px var(--hair); }
.hd-label { font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
@media (max-width: 1280px) { .hour-dial { display: none; } }

/* ---------- motion and reading rules ---------- */
@media (max-width: 960px) {
  .cine-stage { min-height: 88vh; min-height: 88svh; }
  .cine-stage .sec-head::before, .cine-hero .hero-copy::before { inset: -16% -14%; background: radial-gradient(closest-side, rgba(5,6,15,.92), rgba(5,6,15,.72) 62%, transparent 96%); }
  .cine.right .cine-stage .sec-head { margin-left: 0; }
}
/* The footer reads on its own ground, whatever the picture behind it is doing. */
html.has-engine .site-foot { background: linear-gradient(180deg, rgba(5,6,15,.72), rgba(5,6,15,.94) 30%); }
@media (prefers-reduced-motion: reduce) {
  .giant { transform: translate3d(0, -50%, 0) !important; }
  .hero-scroll i::after { animation: none; }
}
html.is-paused .giant { transition: none; }
@media print {
  .engine, .hour-dial, .opening, .stage-band { display: none !important; }
  .page-head.staged { min-height: 0 !important; }
}