:root {
  --ink: #ffffff;
  --night: #070a10;
  --cream: #f6efe0;
  --display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; background: var(--night); overscroll-behavior: none; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }

body.is-intro { overflow: hidden; height: 100dvh; }
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: pan-y; cursor: grab; z-index: 0; }
body.is-intro #world { cursor: default; }
body.dragging #world { cursor: grabbing; }

/* ── loader ── */
#loader { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; gap: 18px; justify-items: center; background: var(--night); transition: opacity .8s ease; }
#loader.gone { opacity: 0; pointer-events: none; }
.loader-mark { font: 800 44px/1 var(--display); letter-spacing: -.02em; }
.loader-bar { width: min(240px, 60vw); height: 3px; background: rgba(255,255,255,.14); border-radius: 3px; overflow: hidden; }
#loader-fill { display: block; height: 100%; background: #ffd27a; transform-origin: left; transform: scaleX(.04); transition: transform .3s ease; }
#loader p { margin: 0; font: 500 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ── intro film overlay ── */
#intro-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.bars span { position: absolute; left: 0; right: 0; height: 6vh; background: #000; }
.bars span:first-child { top: 0; }
.bars span:last-child { bottom: 0; }
.film-titles { position: absolute; left: 16px; right: 16px; bottom: 17vh; height: 130px; }
.film-title { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font: 600 clamp(24px, 3.3vw, 44px)/1.15 var(--body); text-shadow: 0 2px 30px rgba(0,0,0,.65); opacity: 0; transform: translateY(12px); filter: blur(6px); transition: opacity 1s ease, transform 1s ease, filter 1s ease; }
.film-title-final { font: 800 clamp(46px, 7vw, 100px)/1 var(--display); letter-spacing: -.02em; }
.film-title.on { opacity: 1; transform: none; filter: none; }
.intro-hint { position: absolute; left: 24px; bottom: calc(6vh + 16px); display: flex; gap: 10px; align-items: center; font: 500 12px var(--mono); letter-spacing: .08em; color: rgba(255,255,255,.7); }
#paused-pill { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; }
.skip { pointer-events: auto; position: absolute; right: 24px; bottom: calc(6vh + 8px); min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font: 600 14px var(--body); cursor: pointer; backdrop-filter: blur(8px); }
.skip:hover { background: rgba(255,255,255,.18); }
.skip svg, .copy-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#dip { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 20; }
#veil { position: fixed; inset: 0; background: #f4f7f4; opacity: 0; pointer-events: none; z-index: 21; }

/* ── meadow UI ── */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 12; padding: 20px clamp(16px, 3vw, 36px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.wordmark { pointer-events: auto; font: 800 26px/1 var(--display); letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(10,30,60,.4); padding: 8px 0; }
.nav { pointer-events: auto; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(12,32,52,.36); backdrop-filter: blur(10px); font-size: 15px; }
.navlink { padding: 10px 14px; border-radius: 999px; font-weight: 600; transition: background .2s; }
.navlink:hover { background: rgba(255,255,255,.16); }

.dots { position: fixed; right: clamp(10px, 2vw, 26px); top: 50%; transform: translateY(-50%); z-index: 12; display: flex; flex-direction: column; gap: 4px; }
.dot { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 1px 6px rgba(0,0,0,.3); transition: transform .3s, background .3s; }
.dot.on::before { background: #fff; transform: scale(1.5); }

#sections { position: relative; z-index: 5; pointer-events: none; }
.sec { height: 100vh; height: 100dvh; position: relative; }
.sec a, .sec button, .sec code { pointer-events: auto; }
.sec > * { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.sec.in > * { opacity: 1; transform: none; }

.sec-hero .eyebrow { position: absolute; left: 50%; top: clamp(84px, 13vh, 128px); transform: translateX(-50%); margin: 0; padding: 9px 16px; border-radius: 999px; background: rgba(12,32,52,.34); backdrop-filter: blur(10px); white-space: nowrap; font: 500 13px var(--mono); letter-spacing: .32em; }
.sec-hero.in > .eyebrow { transform: translateX(-50%); }
.hero-bottom { position: absolute; left: 16px; right: 16px; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tagline { margin: 0 0 4px; font: 700 20px var(--body); text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.caption { margin: 0; font: 500 12px var(--mono); letter-spacing: .24em; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

.ca { max-width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 14px; background: rgba(14,30,18,.58); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.16); pointer-events: auto; }
.ca-label { font: 500 12px var(--mono); letter-spacing: .12em; color: rgba(255,255,255,.8); }
.ca-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px var(--mono); }
.copy-btn { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border: 0; border-radius: 10px; background: #fff; color: #13210f; font: 700 14px var(--body); cursor: pointer; }
.copy-btn:hover { background: #eef4ea; }

.statement { position: absolute; top: 50%; transform: translateY(-50%); max-width: min(560px, 44vw); }
.sec.in > .statement { transform: translateY(-50%); }
.sec > .statement { transform: translateY(calc(-50% + 18px)); }
.statement-left { left: clamp(20px, 6vw, 96px); }
.statement-right { right: clamp(48px, 7vw, 110px); text-align: right; }
.statement h2 { margin: 0; font: 800 clamp(38px, 5.2vw, 76px)/.98 var(--display); letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 4px 40px rgba(10,25,45,.45), 0 1px 2px rgba(10,25,45,.35); }
.kicker { margin: 0 0 14px; font: 500 12px var(--mono); letter-spacing: .28em; color: rgba(255,255,255,.88); text-shadow: 0 1px 10px rgba(0,0,0,.45); }

.cta { position: absolute; left: 16px; right: 16px; bottom: clamp(28px, 7vh, 72px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; pointer-events: auto; }
.btn { min-height: 48px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 999px; font: 700 16px var(--body); background: rgba(12,32,52,.42); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(10px); transition: background .2s, transform .2s; }
.btn:hover { background: rgba(12,32,52,.6); transform: translateY(-1px); }
.btn-primary { background: #ffd23f; color: #1a1405; border-color: transparent; }
.btn-primary:hover { background: #ffdd66; }

#drag-hint { position: fixed; left: 50%; bottom: 50%; transform: translate(-50%, 50%); z-index: 11; padding: 10px 16px; border-radius: 999px; background: rgba(10,20,30,.45); backdrop-filter: blur(8px); font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .6s; }
#drag-hint.show { opacity: 1; }

/* fallback when WebGL isn't available */
#fallback { position: fixed; inset: 0; z-index: 0; background: #6fa3d4 url('../assets/poster.jpg') center / cover no-repeat; }
body.no-webgl #world { display: none; }

@media (max-width: 720px) {
  .sec-hero .eyebrow { top: 128px; font-size: 11px; }
  .statement { max-width: none; left: 20px !important; right: 20px !important; text-align: left; top: auto; bottom: 22vh; transform: none !important; }
  .statement h2 { font-size: clamp(34px, 10vw, 48px); }
  .dots { right: 6px; }
  .bars span { height: 4vh; }
}
@media (prefers-reduced-motion: reduce) {
  .sec > *, .film-title { transition: none; }
}
.noscript { position: fixed; inset: auto 0 40% 0; text-align: center; font: 600 18px var(--body); }