/* Belavo landing — Figma 1417:677 ("MacBook Pro 16\" - 1", 1728 × 2209). Desktop: Figma coordinates in --u units
   (one Figma pixel scaled to the viewport). Below 900 px the same elements reflow into one column. Needs site.css. */
html { scroll-behavior: smooth; }
body.landing { overflow-x: hidden; }
body.landing main { overflow-x: clip; }
body.landing main { max-width: none; padding: 0; margin: 0; }

/* ---------- Loader: the intro's wordmark, then the room opens ---------- */
/* ---------- Loading: the name, in light ----------
   A fresh visit opens on "Belavo" alone. Its letters condense out of a soft blur one by one, a halo breathes behind
   them, a band of light passes across the word, and a hairline beneath fills as the page gets ready. Then the word
   glides down and becomes the mark under the opening line (landing.js). */
.loader { display: none; }
html.loading .loader { display: grid; position: fixed; inset: 0; z-index: 90; place-items: center; pointer-events: none; }
html.loading, html.loading body { overflow: hidden; }
html.loading .h-hero, html.loading .lp-logo { visibility: hidden; }
.loader .lw { position: relative; font-family: var(--display); font-size: max(calc(128 * var(--u)), 58px); line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.loader .lw > span { display: block; }
.loader .lw-text { color: #f6f2fb; }
/* Each glow letter is its own layer, blurred once; only its opacity moves. A wave of light passes left to right as
   the letters arrive, then settles into a soft halo. Everything animates on the compositor (opacity/transform). */
.loader .lw-glow { position: absolute; inset: 0; color: #fff; }
.loader .lw-glow .c { filter: blur(20px); opacity: 0; will-change: opacity; }
.loader .lw .c { display: inline-block; }
.loader .lw-text .c { opacity: 0; transform: translateY(.07em); will-change: opacity, transform; }
.loader .lw .kx .c { display: inline; } /* used for one frame to measure the font's kerning */
html.loading.go .loader .lw-glow .c { animation: glowWave 2.6s cubic-bezier(.3,.7,.2,1) both; animation-delay: calc(var(--i) * 95ms); }
html.loading.go .loader .lw-text .c { animation: lightIn 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(120ms + var(--i) * 95ms); }
.loader .halo { position: absolute; width: min(70vw, 900px); height: min(26vw, 300px); border-radius: 50%; opacity: 0; will-change: opacity, transform;
  background: radial-gradient(closest-side, rgba(244,238,255,.075), rgba(26,213,213,.025) 60%, transparent); }
html.loading.go .loader .halo { animation: haloIn 2.4s ease-out .2s both; }
.loader .lbar { position: absolute; top: calc(50% + max(calc(110 * var(--u)), 54px)); width: min(240px, 40vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); overflow: hidden; }
.loader .lbar i { display: block; height: 100%; transform-origin: 50% 50%; transform: scaleX(0); background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.loader.leaving .lbar, .loader.leaving .halo, .loader.leaving .lw-glow { opacity: 0; transition: opacity .5s ease; }
@keyframes lightIn { from { opacity: 0; transform: translateY(.07em); } to { opacity: 1; transform: none; } }
@keyframes glowWave { 0% { opacity: 0; } 32% { opacity: .95; } 100% { opacity: .38; } }
@keyframes haloIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
html.logo-set .lp-logo { opacity: 1 !important; filter: none !important; transition: none !important; }

/* ---------- Intro letter sweep (IntroTextRenderer) ---------- */
/* Smooth and soft: each word rises out of a blur and sharpens; key words settle by a few percent. No springs. */
@keyframes wordIn { from { opacity: 0; filter: blur(14px); transform: translateY(.2em); } 65% { filter: blur(0); } to { opacity: 1; filter: none; transform: none; } }
@keyframes wordInKey { from { opacity: 0; filter: blur(14px); transform: translateY(.2em) scale(1.05); } 65% { filter: blur(0); } to { opacity: 1; filter: none; transform: none; } }
.intro .nb { white-space: nowrap; }
.intro .w { display: inline-block; white-space: nowrap; transform-origin: 50% 60%; }
.intro .g { display: inline; }
.intro.play:not(.done) .w { will-change: opacity, filter, transform; }
.intro.kx .g { display: inline; }
/* Words, not letters, are the moving parts: ~13 GPU layers instead of ~55, so Safari keeps up. Letters stay plain
   inline text, so the font's own kerning applies. */
.intro .w { opacity: 0; }
.intro.play .w { animation: wordIn 1.15s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--wd); }
.intro.play .w.k { animation-name: wordInKey; }
.intro.reform .w { animation: wordReform 1.1s cubic-bezier(.22,1,.36,1) both !important; animation-delay: calc(.32s + var(--ri, 0) * 38ms) !important; }
.intro.reform .w.k { animation-name: wordReform !important; }
@keyframes wordReform { from { opacity: 0; filter: blur(12px); transform: translateY(.22em); } 65% { filter: blur(0); } to { opacity: 1; filter: none; transform: none; } }
/* The outgoing line and mark dissolve in place */
.ghost-out { animation: ghostOut .75s cubic-bezier(.4,0,.2,1) both; will-change: opacity, transform; }
@keyframes ghostOut { to { opacity: 0; transform: translateY(-14px) scale(.985); } }
.pearl .g { background-image: var(--pearl); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro.static .g, .intro.static .w { opacity: 1; animation: none; }
/* After the sweep, the title hands its letters to the scroll (IntroTimeline.departure, driven by scroll). */
.intro.done .g, .intro.done .w { animation: none; opacity: 1; }
.intro.done .g { opacity: var(--o, 1); filter: var(--f, none); }
.intro.done .w { transform: scale(var(--ws, 1)); }
.intro em { font-style: italic; }

/* Subtitle words drift up after the title */
.words .wd { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(6px); }
.words.play .wd { animation: wordUp .7s var(--ease-out-cubic) both; animation-delay: var(--d); }
@keyframes wordUp { to { opacity: 1; transform: none; filter: none; } }

/* ---------- Stage (desktop: Figma 1417:677, 1728 × 3039; every element at its Figma coordinates in --u) ---------- */
.stage { position: relative; width: calc(1728 * var(--u)); height: calc(2860 * var(--u)); margin: 0 auto; }
.grp { display: contents; }
.abs { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }

/* 1. Hero */
.h-hero { --x: 123; --y: 230; width: calc(494 * var(--u)); font-family: var(--display); font-weight: 400;
  font-size: max(calc(64 * var(--u)), 36px); line-height: normal; margin: 0; letter-spacing: 0; }
.p-hero { --x: 123; --y: 594; width: calc(459 * var(--u)); margin: 0; font-size: max(calc(24 * var(--u)), 17px); line-height: normal; color: #fff; font-weight: 300; }
.p-hero b { font-weight: 700; }
.h-hero, .h-two, .h-three, .p-hero, .h-bios, .h-group { text-wrap: wrap; }
.pearl .wd { background-image: var(--pearl); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.store.s1 { --x: 123; --y: 732; }
.stage .store { height: max(calc(67 * var(--u)), 52px); width: max(calc(205 * var(--u)), 168px); border-radius: max(calc(17 * var(--u)), 14px); }
.stage .store svg { width: max(calc(42 * var(--u)), 32px); height: max(calc(42 * var(--u)), 32px); }
.stage .store .t small, .stage .store .t b { font-size: max(calc(20 * var(--u)), 16px); }

/* The phone, centred: Figma "Home 3" (331.7 × 721, 10 pt black bezel, radius 47) over "Home 2" (the screen, blurred 87). */
.device { --x: 672.7; --y: 47; width: calc(382.7 * var(--u)); height: calc(831 * var(--u)); perspective: 1600px; z-index: 1; }
.device .fly { position: absolute; inset: 0; perspective: 1600px; }
/* The glow is baked (blurred once, offline) and only scaled here, so it never costs a live blur. */
/* Figma "Home 2": the screen itself, radius 47, blurred 86.75. Baked once (with its 260 pt of spread) and only placed
   here, so the browser never runs a live blur. It sits flat behind the phone, outside the phone's 3D space. */
.device .glow { position: absolute; left: calc(-260.25 * var(--u)); top: calc(-260.25 * var(--u)); width: calc(902.9 * var(--u)); height: calc(1351.5 * var(--u)); max-width: none; pointer-events: none; }
.device .tilt { position: absolute; left: 0; right: 0; top: calc(125.2 * var(--u)); display: grid; place-items: center; transition: transform .8s var(--spring-soft); }
.device .float { animation: phoneFloat 8s ease-in-out infinite; }
.device .dock { position: relative; will-change: transform; }
.device .dock::after { content: ""; position: absolute; inset: 2% 4% 0; border-radius: calc(47 * var(--u)); z-index: -1; pointer-events: none;
  box-shadow: 0 4px 45.9px rgba(0,0,0,.25), 0 30px 80px rgba(0,0,0,.45); }
.device .phone { width: calc(331.7 * var(--u)); height: calc(721 * var(--u)); border-radius: calc(47 * var(--u)); background: #000; padding: calc(10 * var(--u)); }
.device .screen { position: relative; width: 100%; height: 100%; border-radius: calc(37 * var(--u)); overflow: hidden; background: #050b0d; }
.device .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes phoneFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(calc(-8 * var(--u))) } }

/* "Their bios lie. Ours can't." — 103 pt, set into the background with an overlay blend */
.h-bios { --x: 1188; --y: 325; width: calc(343 * var(--u)); margin: 0; font-family: var(--display); font-weight: 400; text-align: center;
  font-size: max(calc(103 * var(--u)), 44px); line-height: normal;
  /* Figma: outline only — transparent letters with a fine deep-teal stroke (measured #1A3644, ~2 pt at 103 pt). */
  color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: max(calc(2 * var(--u)), 1.2px) #1a3644; }

/* 2. Passion */
.anime { --x: 575; --y: 1028; width: calc(578 * var(--u)); height: calc(355 * var(--u)); margin: 0; z-index: 0;
  -webkit-mask-image: linear-gradient(#000 74%, transparent); mask-image: linear-gradient(#000 74%, transparent); }
.anime .fly { position: absolute; inset: 0; overflow: hidden; border-radius: calc(4 * var(--u)); }
.anime video { position: absolute; left: 0; top: calc(-18 * var(--u)); width: 100%; height: calc(100% + 36 * var(--u)); object-fit: cover; object-position: 54% 30%; background: #0b0d18; }
.h-two { --x: 433; --y: 1343; width: calc(866 * var(--u)); text-align: center; font-family: var(--display); font-weight: 400;
  font-size: max(calc(64 * var(--u)), 32px); line-height: normal; margin: 0; color: #fff; z-index: 1; }

/* 3. Radar: Figma's 377 pt group is the app's 240 pt radar at 1.57× */
.radar-wrap { --x: 680.2; --y: 1604; width: calc(377 * var(--u)); height: calc(377 * var(--u)); z-index: 3; }
.radar-wrap .fly { position: absolute; inset: 0; }
.radar { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; z-index: 3; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; border-radius: 50%; outline: none; }
.radar canvas { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(var(--rs, 1)); pointer-events: none; /* the drawing spills past the radar; only the radar itself takes taps */ transition: transform .25s var(--spring-soft); }
.radar::before { content: ""; position: absolute; width: calc(300 * var(--u)); height: calc(300 * var(--u)); left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%; }
.radar:focus-visible::before { box-shadow: 0 0 0 2px var(--teal); }
.radar.is-pressed { --rs: .98; }
.radar-wrap .ticker { position: absolute; left: 50%; top: calc(50% + 72.5 * var(--u)); width: calc(208 * var(--u)); min-width: 180px; transform: translateX(-50%);
  height: 43px; text-align: center; font-size: max(calc(14 * var(--u)), 12px); line-height: 1.3; color: #fff; text-shadow: 0 4px 4px rgba(0,0,0,.25); pointer-events: none; z-index: 4; }
.tk-line { position: absolute; inset: 0; transition: opacity .35s ease-in, transform .35s ease-in, filter .35s ease-in; }
.tk-line.out { opacity: 0; transform: translateY(-10px); filter: blur(6px); }
.tk-w { display: inline-block; white-space: nowrap; }
.tk-g { display: inline-block; opacity: 0; filter: blur(10px); animation: glyph .45s var(--ease-out-cubic) both; }
.radar-hint { position: absolute; left: 50%; top: calc(50% - 228 * var(--u)); transform: translate(-50%, 6px); z-index: 5; pointer-events: none;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(27,31,34,.72);
  border: 1px solid rgba(26,213,213,.35); backdrop-filter: blur(10px); opacity: 0; transition: opacity .5s var(--ease-out-cubic), transform .5s var(--spring-soft); white-space: nowrap; }
.radar-hint.show { opacity: 1; transform: translate(-50%, 0); }

/* 4. Groups */
.h-once { --x: 93; --y: 1995; margin: 0; font-family: var(--display); font-weight: 400; font-size: calc(216 * var(--u)); line-height: normal;
  white-space: nowrap; color: rgba(255,255,255,.09); pointer-events: none; will-change: translate; }
.chat { --x: 406; --y: 2080; width: calc(385 * var(--u)); height: calc(314 * var(--u)); z-index: 2; }
.chat .fly { position: absolute; inset: 0; border-radius: calc(47 * var(--u)); background: linear-gradient(#1b2023, rgba(15,28,36,.17));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.chat .fly > * { position: absolute; }
.chat .c-shade { left: calc(29 * var(--u)); top: calc(27 * var(--u)); width: calc(328 * var(--u)); height: calc(68 * var(--u)); border-radius: calc(19 * var(--u));
  background: #030a0e; filter: blur(calc(38 * var(--u))); }
.chat .c-tilt { position: absolute; inset: 0; transition: transform .7s var(--spring-soft); }
.chat .c-tilt > * { position: absolute; }
.chat .c-head { left: calc(94 * var(--u)); top: calc(43 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); z-index: 2; }
.chat .c-head img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(12 * var(--u)); object-fit: cover; }
.chat .c-head > span { display: flex; flex-direction: column; line-height: normal; }
.chat .c-head b { font-family: var(--note-serif); font-variation-settings: "ital" 0; font-weight: 400; font-size: max(calc(24 * var(--u)), 16px); color: #fff; }
.chat .c-head small { display: flex; align-items: center; gap: 5px; font-size: max(calc(14 * var(--u)), 11px); color: #949494; }
.chat .c-live { width: 6px; height: 6px; border-radius: 50%; background: #1ad5d5; box-shadow: 0 0 0 0 rgba(26,213,213,.6); animation: liveDot 2.4s ease-out infinite; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(26,213,213,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(26,213,213,0); } }
.chat .c-status { transition: color .3s; }
.chat .c-status.typing { color: #7fd6d6; }

/* The conversation: newest at the bottom; older messages slide up and fade out under the header. */
.chat .c-feed { left: calc(18 * var(--u)); right: calc(18 * var(--u)); top: calc(98 * var(--u)); bottom: calc(18 * var(--u)); display: flex; flex-direction: column; justify-content: flex-end;
  gap: calc(7 * var(--u)); padding-bottom: calc(10 * var(--u)); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 26%); mask-image: linear-gradient(transparent, #000 26%); }
.chat .d { align-self: center; flex: none; font-size: max(calc(11 * var(--u)), 9.5px); font-weight: 600; letter-spacing: .4px; color: #949494; padding: calc(2 * var(--u)) 0; }
.chat .m { display: flex; flex: none; align-items: flex-end; gap: calc(6 * var(--u)); max-width: 88%; }
.chat .m.r { align-self: flex-end; }
.chat .m img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; border-radius: 50%; object-fit: cover; }
.chat .m .b { position: relative; padding: calc(6 * var(--u)) calc(11 * var(--u)); border-radius: calc(16 * var(--u)); font-size: max(calc(14.5 * var(--u)), 11.5px);
  line-height: 1.3; letter-spacing: -.2px; cursor: pointer; transform-origin: 0 100%; transition: transform .35s var(--spring-soft), filter .3s; -webkit-tap-highlight-color: transparent; }
.chat .m.l .b { background: #23292d; color: #e9eef0; border-bottom-left-radius: calc(5 * var(--u)); }
.chat .m.r .b { background: #198c8c; color: #fff; border-bottom-right-radius: calc(5 * var(--u)); transform-origin: 100% 100%; }
.chat .m .b:hover { filter: brightness(1.12); transform: scale(1.03); }
.chat .m .b:active { transform: scale(.97); }
.chat .m .n { display: block; font-size: max(calc(10.5 * var(--u)), 9px); font-weight: 600; color: var(--nc, #7fd6d6); margin-bottom: 1px; }
.chat .m .rx { position: absolute; right: calc(-6 * var(--u)); bottom: calc(-9 * var(--u)); display: flex; gap: 1px; font-size: max(calc(11 * var(--u)), 10px); line-height: 1;
  padding: calc(2 * var(--u)) calc(5 * var(--u)); border-radius: 999px; background: #14191c; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.chat .m.has-rx { margin-bottom: calc(6 * var(--u)); }
.chat .m .b.t { display: flex; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); cursor: default; }
.chat .m .b.t i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); min-width: 5px; min-height: 5px; border-radius: 50%; background: #949494; animation: typing 1.3s ease-in-out infinite; }
.chat .m .b.t i:nth-child(2) { animation-delay: .16s; } .chat .m .b.t i:nth-child(3) { animation-delay: .32s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(calc(-4 * var(--u))); opacity: 1; } }
.chat .m .b .ph { display: block; width: calc(150 * var(--u)); min-width: 110px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(12 * var(--u)); margin: 0 0 calc(6 * var(--u)); }
.chat .m .b .caret { display: inline-block; width: 1.5px; height: .95em; margin-left: 1px; vertical-align: -0.12em; background: #fff; animation: caret 1s steps(2) infinite; }
@keyframes caret { to { opacity: 0; } }
.chat .m .b.t.held i { animation-play-state: paused; opacity: .35; }
.chat .seen { align-self: flex-end; flex: none; font-size: max(calc(10 * var(--u)), 9px); color: #949494; margin-top: calc(-3 * var(--u)); }
/* A tap on a message: a little burst of the reaction */
.chat .burst { position: absolute; left: 50%; top: 50%; pointer-events: none; font-size: max(calc(13 * var(--u)), 11px); z-index: 5; }
.chat .c-hint { left: 50%; bottom: calc(-30 * var(--u)); translate: -50% 0; font-size: 12px; font-weight: 600; color: #7fd6d6; opacity: 0; transition: opacity .5s, transform .5s var(--spring-soft); transform: translateY(6px); white-space: nowrap; pointer-events: none; }
.chat .c-hint.show { opacity: 1; transform: none; }
/* The member who's talking glows outside the card */
.ava.speaking .bob { animation-play-state: paused; }
.ava.speaking img { box-shadow: 0 0 0 3px rgba(26,213,213,.75), 0 0 34px rgba(26,213,213,.45); transform: scale(1.08); transition: transform .4s var(--spring-soft), box-shadow .3s; }
.g-group .ava { cursor: pointer; }
.a-g1 { --x: 225; --y: 2245; --s: 83; } .a-g2 { --x: 296; --y: 2167; --s: 57; } .a-g3 { --x: 222; --y: 2173; --s: 57; } .a-g4 { --x: 324; --y: 2237; --s: 57; }
.h-group { --x: 864; --y: 2218; width: calc(591 * var(--u)); margin: 0; font-family: var(--display); font-weight: 400; font-size: max(calc(48 * var(--u)), 26px); line-height: normal; color: #fff; }

/* 5. Closing */
.h-three { --x: 486; --y: 2521; width: calc(756 * var(--u)); text-align: center; font-family: var(--display); font-weight: 400; font-size: max(calc(48 * var(--u)), 26px); line-height: normal; margin: 0; }
.store.s2 { --x: 762; --y: 2656; }

/* ---------- Floating member photos ---------- */
.ava { width: calc(var(--s) * var(--u)); height: calc(var(--s) * var(--u)); min-width: calc(var(--s) * .55px); min-height: calc(var(--s) * .55px); z-index: 2; }
.ava .fly { width: 100%; height: 100%; }
.ava .fly.landed { translate: var(--mx, 0px) var(--my, 0px); transition: translate .6s cubic-bezier(.22,1,.36,1); }
.ava .bob { width: 100%; height: 100%; animation: bob var(--bob, 6s) ease-in-out infinite; animation-delay: var(--bobd, 0s); }
.ava img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); transition: box-shadow .35s, filter .35s; }
.ava:hover img { box-shadow: 0 0 0 3px rgba(26,213,213,.55), 0 0 40px rgba(26,213,213,.35); filter: saturate(1.1); }
.ava img:hover { transform: scale(1.08); transition: transform .4s var(--spring-soft), box-shadow .35s; }
@keyframes bob { 0%, 100% { transform: translate(0, 0) } 33% { transform: translate(calc(3 * var(--u)), calc(-8 * var(--u))) } 66% { transform: translate(calc(-4 * var(--u)), calc(5 * var(--u))) } }
.a-man { --x: 1520; --y: 520; --s: 150; }
.a-fr1 { --x: 1507; --y: 319; --s: 55; }
.a-fr2 { --x: 1254; --y: 838; --s: 55; }
.a-oranges { --x: 199; --y: 1493; --s: 105; }
.a-black { --x: 1350; --y: 1343; --s: 105; }

/* ---------- Notes (NotePaper: Figma 668:2047 / 1417:694 / 1431:957) ---------- */
.note { width: calc(386 * var(--u)); height: calc(292 * var(--u)); display: grid; place-items: center; z-index: 2; margin: 0;
  touch-action: pan-y; }
.note .fly, .note .sv { display: grid; place-items: center; width: 100%; height: 100%; }
.n1 { --x: 34; --y: 1131; --rot: -13.45deg; }
.n2 { --x: 1261.4; --y: 1478; --rot: 14.8deg; width: calc(387.6 * var(--u)); height: calc(297.3 * var(--u)); }
.note .lift { transform: rotate(calc(var(--rot) + var(--dr, 0deg))) scale(var(--ns, 1)); transition: transform .55s var(--spring-soft); }
.note .paper { position: relative; width: calc(345 * var(--u)); min-width: 250px; aspect-ratio: 345 / 218; cursor: grab; user-select: none; -webkit-user-select: none; }
.note .paper::before { content: ""; position: absolute; inset: -8% -6% -14%; border-radius: 30px; z-index: -1;
  background: radial-gradient(55% 50% at 50% 58%, rgba(254,252,243,.42), rgba(254,252,243,0) 72%); filter: blur(18px);
  opacity: 0; transition: opacity 1.2s var(--ease-out-cubic) .25s; }
.note.in .paper::before { opacity: 1; }
.note:hover .paper::before { opacity: 1; filter: blur(22px) brightness(1.15); }
.note .paper > img.pp { position: absolute; inset: 0; width: 100%; height: 100%; }
.note .frame { position: absolute; left: 4.2%; top: 6.65%; width: 91.6%; height: 86.7%; overflow: visible; }
/* A note arrives already written: text, signature, frame and sprigs are on the paper as it flies in. */
@keyframes draw { to { stroke-dashoffset: 0; } }
.note .sprig { position: absolute; width: 8.7%; aspect-ratio: 35.1 / 50; }
.note .sprig.tl { left: 2.4%; top: 3%; transform-origin: 20% 95%; }
.note .sprig.br { right: 2.4%; bottom: 3%; transform-origin: 80% 5%; rotate: 180deg; }
@keyframes sprig { from { transform: scale(0) rotate(-25deg); } to { transform: scale(1) rotate(0); } }
.note .txt { position: absolute; left: 10.7%; top: 13.2%; width: 78.3%; margin: 0; font-family: var(--note-serif); font-variation-settings: "ital" 0;
  font-size: max(calc(24 * var(--u)), 17.5px); line-height: 1.2; color: var(--ink); }
.note .sign { position: absolute; left: 11%; bottom: 10.5%; margin: 0; font-family: var(--sign); font-size: max(calc(14 * var(--u)), 11px); color: #949494; }
.note .idle { animation: noteIdle var(--idle, 8s) ease-in-out infinite; animation-delay: 1.4s; }
@keyframes noteIdle { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(calc(-7 * var(--u))) rotate(.7deg) } }
@media (hover: hover) { .note:hover { --ns: 1.035; --dr: calc(var(--rot) * -0.25); z-index: 6; } }
.note.dragging .paper { cursor: grabbing; }
.note.dragging .lift { transition: none; }
.note.dragging .idle { animation-play-state: paused; }

/* ---------- More life ---------- */
/* Each member photo sends a soft teal ring now and then, like a blip the radar just found. */
.ava .bob { position: relative; }
.ava .bob::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(26,213,213,.6); pointer-events: none; opacity: 0;
  animation: avaPing 5.6s cubic-bezier(.2,.6,.3,1) infinite; animation-delay: var(--ring, 2s); will-change: transform, opacity; }
@keyframes avaPing { 0%, 70% { transform: scale(1); opacity: 0; } 72% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
/* Key words breathe a little light once they've arrived. */
.intro .w.k { position: relative; }
.intro.done .w.k::after { content: ""; position: absolute; inset: 10% -6%; z-index: -1; border-radius: 40%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(26,213,213,.38), rgba(26,213,213,0)); opacity: 0; will-change: opacity;
  animation: keyGlow 6s ease-in-out infinite; animation-delay: var(--kg, 0s); }
@keyframes keyGlow { 0%, 60%, 100% { opacity: 0; } 78% { opacity: 1; } }
.pearl.done .w.k::after { animation: none; }
/* Reading progress hairline */
.lp-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; transform-origin: left; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--teal), #fff); pointer-events: none; }
/* ---------- Generic reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out-cubic), transform .8s var(--ease-out-cubic); transition-delay: var(--rd, 0s); }
[data-reveal].in { opacity: 1; transform: none; }
.store[data-reveal] { transform: translate3d(var(--mx, 0), calc(var(--my, 0px) + 18px), 0) scale(.98); filter: blur(8px); }
.store[data-reveal].in { filter: none; }
.store[data-reveal].in { transform: translate3d(var(--mx, 0), var(--my, 0), 0) scale(var(--ms, 1)); transition: opacity .9s var(--ease-out-cubic) var(--rd, 0s), transform .9s cubic-bezier(.22,1,.36,1) var(--rd, 0s), filter .9s var(--ease-out-cubic) var(--rd, 0s); }
.store[data-reveal].in.settled { transition: transform .45s var(--spring-soft), box-shadow .3s; }

/* ---------- Cinematic entrances (landing.js + Motion) ----------
   Until Motion takes them, everything that will fly in waits out of sight. html.cine is only set when that's about to
   happen, and is lifted after 5 s whatever happens, so nothing can stay hidden. */
html.cine .stage .fly { opacity: 0; }
.fly.landed { will-change: auto; }

/* ---------- Scroll, on the compositor ----------
   Scroll-linked motion is declared as CSS scroll-driven animations, so it runs on the GPU in step with the scroll.
   Browsers without them get the same motion from landing.js. */
.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .9; }
html.sda .stage .abs[data-depth] { animation: sdDepth linear both; animation-timeline: scroll(root); }
/* The phone steps back into the room as the reader moves on: it tilts away, shrinks a little and dims. */
html.sda .device .dock { animation: sdRecede linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
html.sda .device .glow { animation: sdFadeOnly linear both; animation-timeline: scroll(root); animation-range: 10vh 80vh; will-change: opacity; }
/* The anime frame drifts inside its window; the giant line slides across the screen as it passes. */
html.sda .anime video { animation: sdInner linear both; animation-timeline: view(); }
html.sda .h-once { animation: sdSlide linear both; animation-timeline: view(); }
html.sda .note .sv { animation: sdTilt linear both; animation-timeline: view(); }
html.sda .lp-progress { animation: sdProgress linear both; animation-timeline: scroll(root); }
html.sda .h-hero.depart .w { animation: sdDepart ease-in both; animation-timeline: scroll(root); animation-range: var(--r0) var(--r1); }
html.sda .p-hero.depart { animation: sdFade linear both; animation-timeline: scroll(root); animation-range: 12vh 57vh; }
html.sda .g-hero .store.depart { animation: sdFadeOnly linear both; animation-timeline: scroll(root); animation-range: 20vh 60vh; }
@keyframes sdDepth { to { transform: translate3d(0, calc(-2860 * var(--u) * var(--d, 0) * .05), 0); } }
@keyframes sdRecede { to { transform: perspective(1400px) rotateX(14deg) scale(.86); opacity: .35; } }
@keyframes sdInner { from { transform: translateY(calc(-18 * var(--u))); } to { transform: translateY(calc(18 * var(--u))); } }
@keyframes sdSlide { from { translate: 9% 0; } to { translate: -9% 0; } }
@keyframes sdTilt { from { rotate: 5deg; } to { rotate: -5deg; } }
@keyframes sdProgress { to { transform: scaleX(1); } }
@keyframes sdDepart { from { opacity: 1; scale: 1; } to { opacity: 0; scale: var(--ds, .94); } }
@keyframes sdFade { to { opacity: 0; } }
@keyframes sdFadeOnly { to { opacity: 0; } }

/* Scroll velocity: the notes lift and skew with how fast the reader scrolls (landing.js sets --v), then settle */
.note .fly { transform: translateY(calc(var(--v, 0) * -22px)) skewY(calc(var(--v, 0) * -2.4deg)); transition: transform .55s cubic-bezier(.22,1,.36,1); }
.note .fly.landed { will-change: transform; }
/* Scroll word reveal: words of the long lines brighten as the reader passes them */
.h-two.rv .w, .h-group.rv .w { color: rgba(255,255,255,.28); transition: color .45s ease; }
.h-two.rv .w.lit, .h-group.rv .w.lit { color: #fff; }
/* The anime window opens as it reaches the middle of the screen */
.anime .fly { transform: scale(var(--az, 1)); transform-origin: 50% 60%; }
/* Phone: a soft reflection that slides with the tilt */
.device .screen::after { content: ""; position: absolute; inset: -40% -60%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.07) 50%, transparent 58%); transform: translateX(var(--rf, -60%)); transition: transform .9s var(--spring-soft); }

/* Footer on the landing */
body.landing footer.site { position: relative; z-index: 1; }

/* ---------- Phones and narrow windows: one column, in reading order ---------- */
@media (max-width: 899px) {
  .stage { width: 100%; height: auto; display: flex; flex-direction: column; padding: 96px 20px 40px; gap: 0; overflow: hidden; }
  .grp { display: block; position: relative; }
  .abs { position: relative; left: auto; top: auto; }
  .h-hero { width: auto; font-size: clamp(38px, 10.5vw, 52px); }
  .p-hero { width: auto; margin-top: 18px; font-size: 18px; }
  .stage .store.s1 { margin-top: 26px; }
  .g-device { margin-top: 30px; padding-bottom: 10px; }
  .device { width: 300px; height: 652px; margin: 0 auto; }
  .device .tilt { top: 60px; }
  .device .phone { width: 260px; height: 565px; padding: 8px; border-radius: 40px; }
  .device .screen { border-radius: 32px; }
  .h-bios { width: auto; margin-top: 36px; font-size: clamp(44px, 14vw, 64px); }
  .a-man { position: absolute; left: -6px; top: 590px; width: 86px; height: 86px; min-width: 0; min-height: 0; } .a-fr1 { position: absolute; left: 4px; top: 90px; } .a-fr2 { position: absolute; right: 6px; top: 40px; }
  .g-s2 { display: flex; flex-direction: column; padding-top: 56px; }
  .anime { width: 100%; height: auto; aspect-ratio: 578 / 355; }
  .h-two { width: auto; margin-top: -24px; font-size: clamp(30px, 8.4vw, 40px); }
  .g-s2 .ava { position: absolute; } .a-oranges { left: 0; top: 10px; } .a-black { right: 0; top: 10px; }
  .note { width: 100%; height: 300px; margin-top: 30px; }
  .n1 .paper, .n2 .paper { width: min(86vw, 345px); }
  .g-radar { display: grid; place-items: center; padding: 40px 0; }
  .radar-wrap { width: 300px; height: 300px; }
  .g-group { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; padding: 30px 0 10px; }
  .g-group > .h-once, .g-group > .chat, .g-group > .h-group { flex: 0 0 100%; }
  .g-group > .chat { flex-basis: 330px; }
  .h-once { font-size: 19vw; white-space: normal; text-align: center; line-height: .95; }
  .chat { width: 330px; height: 270px; margin-top: 20px; }
  /* The group's people: a face pile under the card */
  .g-group .ava { width: 52px; height: 52px; min-width: 0; min-height: 0; margin: 22px -7px 0; }
  .g-group .ava img { box-shadow: 0 0 0 3px #0a1013; }
  .h-group { width: auto; margin-top: 30px; font-size: clamp(26px, 7.4vw, 34px); text-align: center; }
  .g-s3 { display: flex; flex-direction: column; align-items: center; padding: 60px 0 60px; }
  .h-three { width: auto; font-size: clamp(26px, 7.4vw, 34px); }
  .stage .store.s2 { margin-top: 28px; }
}
@media (max-width: 899px) { .chat { --u: calc(330px / 385); } }

/* ---------- Reduced motion: everything arrives at once, nothing idles ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro .g, .words .wd, .note .paper, .note .sprig, .note .txt .g, .note .sign, .ava img, .fly, [data-reveal], .tk-g { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .note .frame path { stroke-dashoffset: 0; animation: none !important; }
  .device .float, .chat .m .b.t i, .chat .c-live, .ava .bob, .note .idle, .loader .c, .loader .halo, .ava .bob::after, .intro.done .w.k::after { animation: none !important; }
  .lp-progress { display: none; }
  .note .paper::before { opacity: 1; }
  .spot { display: none; }
}

/* ---------- Opening frame (Figma "MacBook Pro 16 - 2", 1728 × 1117) ----------
   Only the line (96, centred, pearl) and the Belavo mark below it, over the same background. html.intro is set
   before first paint on a fresh visit and lifted by landing.js when the words move into the page. */
html.intro, html.intro body { overflow: hidden; }
/* Centred in the window, never wider than it: the type scales with the window (Figma: 96 pt on 1728 → 5.55 vw), so the
   two lines break exactly as in Figma at every size, and it sits a little above centre (Figma: 42 % down). */
html.intro .h-hero { position: fixed; left: 50%; top: 44vh; width: min(calc(1274 * var(--u)), calc(100vw - 48px)); transform: translate(-50%, -50%);
  font-size: clamp(30px, 5.55vw, 96px); text-align: center; z-index: 20; }
html.intro .stage .grp > :not(.h-hero), html.intro footer.site { visibility: hidden; }
.p-hero:not(.words) { opacity: 0; } /* until its words are split and rising */
@media (prefers-reduced-motion: reduce) { .p-hero:not(.words) { opacity: 1; } }
html.intro .lp-header { background: none; box-shadow: none; }
html.intro .lp-nav, html.intro .lp-header .store, html.intro .menu-btn { opacity: 0; pointer-events: none; }
html.intro .lp-logo { position: fixed; left: 50%; top: 76vh; translate: -50% -50%; font-size: clamp(26px, 2.45vw, 42px);
  opacity: 0; filter: blur(10px); transition: opacity 1.2s var(--ease-out-cubic) .5s, filter 1.2s var(--ease-out-cubic) .5s; z-index: 20; }
html.intro.intro-on .lp-logo { opacity: 1; filter: none; }
/* The move: the header's other parts arrive after the mark has landed. */
html.intro-out .lp-nav a, html.intro-out .lp-header .store, html.intro-out .menu-btn, html.intro-out .lp-logo { animation: headerIn .9s var(--ease-out-cubic) both; }
html.intro-out .lp-logo { animation-delay: .35s; }
html.intro-out .lp-nav a:nth-child(2) { animation-delay: .5s; } html.intro-out .lp-nav a:nth-child(3) { animation-delay: .56s; }
html.intro-out .lp-nav a:nth-child(4) { animation-delay: .62s; } html.intro-out .lp-nav a:nth-child(5) { animation-delay: .68s; }
html.intro-out .lp-nav a:nth-child(1) { animation-delay: .44s; } html.intro-out .lp-header .store { animation-delay: .8s; }
@keyframes headerIn { from { opacity: 0; transform: translateY(-14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 899px) {
  html.intro .h-hero { width: calc(100vw - 40px); font-size: clamp(40px, 11.5vw, 58px); }
}

/* The dim background line keeps its words quiet: no key-word light. */
.h-bios .w.k::after { display: none; }