/* ============================================================
   Tick. Near-black ground under a halftone dot field, one
   greyscale ramp, square chips, and sentence case type that
   ends every line with a full stop.
   ============================================================ */

:root{
  --ink:        #000000;
  --panel:      #202020;
  --panel-soft: #141414;
  --panel-line: #262626;

  --paper:      #d9d9d9;   /* body text. never pure white */
  --white:      #ffffff;   /* headings and the live figure only */
  --grey-light: #a9a9a9;
  --grey-alt:   #686868;
  --grey:       #5e5e5e;
  --line:       #232323;

  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* their scale, in a 10px rem */
  --t-6xl: 9.6rem;  --t-6xl-lh: .896;
  --t-5xl: 6.4rem;  --t-5xl-lh: .9375;
  --t-3xl: 5.8rem;  --t-3xl-lh: .931;
  --t-2xl: 4.2rem;  --t-2xl-lh: 1.071;
  --t-xl:  3.4rem;
  --t-l:   2.7rem;
  --t-m:   2.2rem;
  --t-s:   1.5rem;
  --t-xs:  1.4rem;
  --t-2xs: 1.3rem;

  --gap: 1.5rem;
  --r-xl: 4.8rem;
  --r-lg: 2.4rem;
  --r-md: 1.6rem;
  --r-sm: 1.2rem;
  --pill: 999px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: dark;
}

@media (min-width:1024px){ :root{ --gap: 2rem; } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }

html{ font-size:62.5%; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--font); font-size:var(--t-s); line-height:1.5;
  font-weight:400; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
::selection{ background:var(--paper); color:var(--ink); }

/* scrollbars off, scrolling on, the way the reference does it */
*{ scrollbar-width:none; }
*::-webkit-scrollbar{ display:none; width:0; height:0; }

/* ---------- the dot field ---------- */
#dots{
  position:fixed; inset:0; width:100%; height:100svh; z-index:0;
  pointer-events:none;
}

/* ---------- type ---------- */
h1,h2,h3{ font-weight:700; letter-spacing:-.026em; }

.d-1{ font-size:clamp(3.4rem, 5vw, 6.6rem); line-height:1.04; }
.d-2{ font-size:clamp(2.8rem, 4.2vw, 5.2rem); line-height:1.06; }
.d-3{ font-size:clamp(2.4rem, 3vw, 4rem); line-height:1.1; }
.d-4{ font-size:var(--t-m); line-height:1.2; font-weight:700; }

.lede{ font-size:clamp(1.7rem, 2.1vw, var(--t-l)); line-height:1.19; color:var(--paper); letter-spacing:-.01em; }
.body{ font-size:var(--t-s); line-height:1.5; color:var(--grey-light); }
.small{ font-size:var(--t-xs); line-height:1.45; color:var(--grey-alt); }
/* Mono is now reserved for things that are literally numbers or hashes.
   Everything a person reads is set in the same face as the rest of the page. */
.label{ font-size:var(--t-xs); line-height:1.4; color:var(--grey-alt); }
.tag{
  display:inline-flex; align-items:center; gap:.8rem;
  padding:.7rem 1.4rem; border-radius:var(--pill);
  background:var(--panel-soft); color:var(--grey-light);
  font-size:var(--t-xs); line-height:1.2; letter-spacing:-.005em;
}
.tag b{ color:var(--white); font-weight:570; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.dim{ color:var(--grey); }
.mid{ color:var(--grey-light); }
.up{ color:var(--white); }

/* a centred column, which is how the whole message is set */
.mid-col{
  max-width:88rem; margin-inline:auto; text-align:center;
  display:grid; gap:2.4rem; justify-items:center;
}
.mid-col .lede,.mid-col .label{ max-width:58ch; }
.wordmark{ font-size:var(--t-l); font-weight:700; letter-spacing:-.03em; color:var(--white); }

/* ---------- the viewfinder ----------
   The mark is a focus frame, so the site frames things with it: the hero, the
   camera, every answer. Four corner brackets, drawn rather than imaged so they
   can be any size and any weight. */
.vf{ position:relative; }
.vf > i{
  position:absolute; z-index:1; pointer-events:none;
  width:var(--vf-size,2.8rem); height:var(--vf-size,2.8rem);
  border:var(--vf-weight,2px) solid var(--vf-color,var(--panel));
  transition:border-color .6s var(--ease), opacity .6s var(--ease), scale .8s var(--ease);
}
.vf > i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0;
  border-top-left-radius:var(--vf-radius,1rem); }
.vf > i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0;
  border-top-right-radius:var(--vf-radius,1rem); }
.vf > i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0;
  border-bottom-left-radius:var(--vf-radius,1rem); }
.vf > i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0;
  border-bottom-right-radius:var(--vf-radius,1rem); }

/* the hero sits inside one, at the edge of the viewport */
.hero-vf{
  position:fixed; z-index:1; pointer-events:none;
  inset:calc(var(--gap) + 6.4rem) var(--gap) var(--gap);
  --vf-size:clamp(3.2rem,5vw,6.4rem); --vf-weight:2px;
  --vf-color:#2b2b2b; --vf-radius:2rem;
}
.hero-vf > i{ animation:vf-in 1.2s var(--ease) both; }
.hero-vf > i:nth-child(2){ animation-delay:.06s; }
.hero-vf > i:nth-child(3){ animation-delay:.12s; }
.hero-vf > i:nth-child(4){ animation-delay:.18s; }
@keyframes vf-in{ from{ opacity:0; scale:.86; } to{ opacity:1; scale:1; } }
.hero.is-past ~ .hero-vf,.hero-vf.is-past{ opacity:0; }

/* the brand mark */
.mark{ width:2.2rem; height:2.2rem; flex:none; transition:filter .3s var(--ease); }
.chip:hover .mark{ filter:invert(1); }
.mark-lg{ width:clamp(5.6rem,7vw,8rem); height:auto; }
.brand-chip{ display:inline-flex; align-items:center; gap:1rem; padding-left:1.4rem; }

/* ---------- chips and buttons ---------- */
.chip{
  display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
  min-height:46px; padding:0 2rem; border-radius:var(--pill);
  background:var(--panel); color:var(--white);
  font-weight:500;
  font-size:var(--t-s); line-height:1.25; letter-spacing:.005em;
  cursor:pointer; white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.chip:hover{ background:var(--white); color:var(--panel); }
.chip:focus-visible{ outline:2px solid var(--white); outline-offset:4px; }
.chip[aria-current="page"]{ background:var(--white); color:var(--panel); }
.chip:disabled{ color:var(--grey); cursor:not-allowed; }
.chip:disabled:hover{ background:var(--panel); color:var(--grey); }
.chip-ghost{ background:transparent; box-shadow:inset 0 0 0 1px #2c2c2c; }
.chip-ghost:hover{ background:var(--white); box-shadow:none; }
.chip .led{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.chip.is-on .led{ background:#00ff85; }

.actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

.chip-lg{
  min-height:60px; padding:0 3.2rem; font-size:var(--t-m); font-weight:600;
  background:var(--white); color:#000;
}
.chip-lg:hover{ background:var(--paper); color:#000; }
.chip-lg .arrow{ font-size:.8em; translate:0 -.06em; }

/* ---------- header ---------- */
.header{
  position:fixed; top:0; left:0; z-index:30;
  width:100%; padding:var(--gap);
  display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem;
}
.header-left,.header-right{ display:flex; gap:.8rem; flex-wrap:wrap; }
.header-right{ gap:.8rem; }
.header-right{ justify-content:flex-end; }

/* ---------- shell ---------- */
main{ position:relative; z-index:1; }
.section{
  position:relative; z-index:2;
  padding:8rem var(--gap); border-top:1px solid var(--line); background:var(--ink);
}
.section-plain{ border-top:0; }
@media (min-width:1024px){ .section{ padding:12rem var(--gap); } }

/* ---------- the pinned hero ---------- */
.hero{
  position:fixed; top:0; left:0; z-index:1;
  width:100%; height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--gap) * 5) var(--gap) var(--gap);
  pointer-events:none;
}
.hero-inner{ position:relative; width:100%; pointer-events:auto; }
.hero-inner::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; translate:-50% -50%;
  width:min(120rem,150%); height:min(72rem,190%);
  background:radial-gradient(closest-side, rgba(0,0,0,.92), rgba(0,0,0,.72) 55%, transparent);
}
.hero-stack{ position:relative; width:100%; }
/* every line sits in the same place; the one leaving is left behind in grey */
.hero-line{
  transition:opacity .45s var(--ease), transform .6s var(--ease);
  color:var(--white); opacity:0;
}
.hero-line + .hero-line{ position:absolute; inset:0; }
.hero-line[data-state="in"]{ color:var(--white); opacity:1; transform:none; }
.hero-line[data-state="out"]{ color:var(--white); opacity:0; transform:translateY(-.12em); }
.hero-line[data-state="pre"]{ color:var(--white); opacity:0; transform:translateY(.12em); }

.hero-foot{
  margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:2rem 4rem;
  align-items:flex-end; justify-content:space-between;
}
.hero-copy{ max-width:56ch; }
.hero.is-past{ visibility:hidden; }
.hero-spacer{ height:280svh; }

/* ---------- the moment readout ---------- */
.readout{
  display:grid; gap:1.2rem; min-width:30rem;
  padding:2.4rem; border-radius:var(--r-lg);
  background:rgba(20,20,20,.72);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px var(--panel-line);
  transition:box-shadow .6s var(--ease), background .6s var(--ease);
}
.readout.is-open{ box-shadow:inset 0 0 0 1px #3a3a3a; background:rgba(24,24,24,.8); }
.readout-head{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; }
.readout-big{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:clamp(4.8rem, 6.4vw, var(--t-5xl)); line-height:.88;
  letter-spacing:-.04em; color:var(--grey-alt);
  transition:color .6s var(--ease);
}
.readout.is-open .readout-big{ color:var(--white); }

/* ---------- rows ---------- */
.rows{ display:grid; }
.rows > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding:1.3rem 0; border-top:1px solid var(--panel-line);
  font-size:var(--t-xs); letter-spacing:-.005em;
}
.rows .v{ font-family:var(--mono); }
.rows .k{ color:var(--grey); }
.rows .v{ color:var(--paper); font-variant-numeric:tabular-nums; text-align:right; }

/* ---------- ticker ---------- */
.ticker{
  position:relative; z-index:2; overflow:hidden; background:var(--ink);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.2rem 0;
}
.ticker-track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-run{ display:flex; align-items:center; gap:4rem; padding-right:4rem; }
.ticker-run span{
  font-size:var(--t-xs); letter-spacing:-.005em; color:var(--grey); white-space:nowrap;
}
.ticker-run b{ color:var(--paper); font-weight:500; font-family:var(--mono); }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- two column editorial ---------- */
.split{ display:grid; grid-template-columns:1fr; gap:3rem; align-items:start; }
@media (min-width:1024px){ .split{ grid-template-columns:1fr 1fr; gap:var(--gap); } }
.stack{ display:grid; gap:2rem; align-content:start; }
.stack p{ color:var(--grey-light); font-size:var(--t-s); line-height:1.5; max-width:56ch; }
.stack p strong{ color:var(--paper); font-weight:570; }

/* ---------- numbered list ---------- */
.acts{ display:grid; grid-template-columns:1fr; gap:0; margin-top:6rem; }
@media (min-width:900px){ .acts{ grid-template-columns:repeat(3,1fr); gap:var(--gap); } }
.acts > div{ padding:2.5rem 0; border-top:1px solid var(--line); display:grid; gap:1.2rem; align-content:start; }
.acts p{ color:var(--grey-light); font-size:var(--t-xs); line-height:1.5; }

/* ---------- verdict ---------- */
.verdict{ display:grid; grid-template-columns:1fr; gap:3rem; margin-top:6rem; }
@media (min-width:900px){ .verdict{ grid-template-columns:1fr 1fr; gap:var(--gap); } }
.verdict ul{ list-style:none; display:grid; gap:1.4rem; }
.verdict li{
  color:var(--grey-light); font-size:var(--t-xs); line-height:1.5;
  padding-top:1.4rem; border-top:1px solid var(--line);
}
.verdict li b{ color:var(--paper); font-weight:570; }

/* ---------- stat strip ---------- */
.strip{ display:grid; grid-template-columns:1fr; }
@media (min-width:760px){ .strip{ grid-template-columns:repeat(2,1fr); gap:var(--gap); } }
.strip > div{ padding:2.5rem 0; border-top:1px solid var(--line); display:grid; gap:.6rem; }
.strip b{ font-size:var(--t-2xl); line-height:1; font-weight:570; letter-spacing:-.02em; color:var(--white); }
.strip span{ font-size:var(--t-xs); color:var(--grey-light); }

/* ---------- the phone ----------
   A device drawn in CSS, showing the notification this product actually
   sends, with the real day and the real countdown in it. Nothing on the
   screen is invented. */
.phone{
  position:relative; width:min(30rem,78vw); aspect-ratio:9/18;
  padding:1.1rem; border-radius:var(--r-xl);
  background:linear-gradient(160deg,#242424,#0c0c0c 42%,#1a1a1a);
  box-shadow:0 0 0 1px #2a2a2a, 0 5rem 12rem -3rem #000, inset 0 1px 0 rgba(255,255,255,.08);
}
.phone-screen{
  position:relative; height:100%; overflow:hidden;
  border-radius:calc(var(--r-xl) - 1rem);
  background:#050505;
  display:grid; grid-template-rows:auto 1fr auto; gap:2rem;
  padding:3.2rem 1.4rem 2.4rem;
}
.phone-screen canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.3; }
.phone-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgba(5,5,5,.86), rgba(5,5,5,.25) 34%, rgba(5,5,5,.55) 72%, rgba(5,5,5,.9));
}
.phone-screen > *:not(canvas){ position:relative; z-index:2; }
.phone-lock{ text-align:center; display:grid; gap:.4rem; }
.phone-date{ font-size:var(--t-xs); color:rgba(255,255,255,.78); }
.phone-clock{
  font-size:clamp(4.2rem,9vw,5.6rem); font-weight:600; letter-spacing:-.04em;
  line-height:1; color:#fff; font-variant-numeric:tabular-nums;
}
.notif{
  align-self:end;
  border-radius:var(--r-md); padding:1.3rem 1.4rem;
  background:rgba(58,58,58,.6);
  backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  display:grid; gap:.5rem; text-align:left;
  animation:notif-in .9s var(--ease) .5s both;
}
@keyframes notif-in{ from{ opacity:0; transform:translateY(1.6rem) scale(.97); } to{ opacity:1; transform:none; } }
.notif-top{ display:flex; align-items:center; gap:.8rem; }
.notif-app{
  width:2.4rem; height:2.4rem; border-radius:.7rem; flex:none;
  background:#0d0d0d; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.notif-app img{ width:76%; height:auto; }
.notif-top b{ font-size:var(--t-xs); font-weight:600; color:#fff; }
.notif-when{ margin-left:auto; font-size:var(--t-2xs); color:rgba(255,255,255,.55); }
.notif p{ font-size:var(--t-xs); line-height:1.4; color:rgba(255,255,255,.9); }
.phone-bar{
  width:34%; height:5px; border-radius:99px; justify-self:center;
  background:rgba(255,255,255,.4);
}

/* ---------- the pot ---------- */
.pots{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));
  gap:1.2rem; width:100%; text-align:left;
}
.pot{
  background:var(--panel-soft); border-radius:var(--r-md); padding:2rem;
  display:grid; gap:1.4rem;
}
.pot-top{ display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem; }
.pot-sym{ font-size:var(--t-m); font-weight:700; letter-spacing:-.02em; color:var(--white); }
.pot-day{ font-family:var(--mono); font-size:var(--t-2xs); color:var(--grey); }
.pot-share{
  font-family:var(--mono); font-size:clamp(2.8rem,3.4vw,3.8rem); line-height:1;
  letter-spacing:-.03em; color:var(--white); font-variant-numeric:tabular-nums;
}
.pot-note{ font-size:var(--t-xs); color:var(--grey); }
/* the shut feed */
.lock{
  display:grid; gap:1rem; justify-items:center; width:100%;
  padding:clamp(4rem,7vw,7rem) 2.4rem;
  --vf-size:2.8rem; --vf-weight:2px; --vf-color:var(--panel); --vf-radius:1.4rem;
}
.lock b{ font-size:var(--t-m); font-weight:700; letter-spacing:-.02em; color:var(--paper); max-width:26ch; }
.lock em{ font-style:normal; font-size:var(--t-xs); color:var(--grey); max-width:44ch; }

.pot-line{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem;
}
.pot-line span{
  padding:.7rem 1.4rem; border-radius:var(--pill); background:var(--panel-soft);
  font-size:var(--t-xs); color:var(--grey-light);
}
.pot-line b{ color:var(--white); font-weight:570; }

.pots-empty{
  width:100%; padding:3.2rem 2rem; border-radius:var(--r-md);
  background:var(--panel-soft); color:var(--grey); font-size:var(--t-s);
}

/* ---------- the day's answers ---------- */
.feed{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(23rem,1fr));
  gap:1.6rem; margin-top:4rem;
}
.post{
  background:var(--panel-soft); border-radius:var(--r-md); padding:1.6rem;
  display:grid; gap:1.6rem;
}
.post-frame{
  position:relative; aspect-ratio:3/4; border-radius:var(--r-sm);
  background:#000; overflow:hidden;
}
.post-frame canvas{ width:100%; height:100%; }
/* the fingerprint runs under the stamp, so the stamp gets its own ground */
.post-frame::after{
  content:""; position:absolute; inset:auto 0 0; height:10rem; pointer-events:none;
  background:linear-gradient(transparent, rgba(0,0,0,.92));
}
.post-stamp{
  position:absolute; z-index:1; left:1.2rem; bottom:1.2rem; right:1.2rem;
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:var(--t-2xs); color:rgba(255,255,255,.82);
  white-space:nowrap;
}
.post-who{ display:flex; align-items:center; gap:1.2rem; padding:0 .4rem; min-width:0; }
.avatar{ width:3.2rem; height:3.2rem; border-radius:50%; flex:none; }
.post-name{ display:grid; gap:.1rem; flex:1 1 auto; min-width:0; overflow:hidden; }
.post-name b,.post-name span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.post-name b{ font-size:var(--t-xs); font-weight:570; color:var(--paper); font-family:var(--mono); }
.post-name span{ font-size:var(--t-2xs); color:var(--grey); }
.badge{
  position:absolute; z-index:1; top:1.2rem; right:1.2rem;
  padding:.5rem 1.1rem; border-radius:var(--pill);
  font-size:var(--t-2xs); background:rgba(0,0,0,.6); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  white-space:nowrap;
}
.badge.on-time{ background:var(--paper); color:var(--ink); }
.feed-empty{
  margin-top:4rem; padding:4rem 2rem; border-radius:var(--r-md);
  background:var(--panel-soft); text-align:center; color:var(--grey);
  font-size:var(--t-s);
}

/* ---------- faq ---------- */
.faq{ margin-top:6rem; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:2rem; padding:2rem 0;
  font-size:var(--t-m); font-weight:570; letter-spacing:-.01em; color:var(--paper);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover,.faq details[open] summary{ color:var(--white); }
.faq .plus{ flex:none; width:12px; height:12px; position:relative; }
.faq .plus::before,.faq .plus::after{
  content:""; position:absolute; inset:50% 0 auto; height:1px;
  background:currentColor; transform:translateY(-50%);
}
.faq .plus::after{ transform:translateY(-50%) rotate(90deg); transition:opacity .3s var(--ease); }
.faq details[open] .plus::after{ opacity:0; }
.faq-body{ padding:0 0 2.4rem; max-width:70ch; color:var(--grey-light); font-size:var(--t-xs); line-height:1.55; }

/* ---------- footer ---------- */
.footer{
  position:relative; z-index:2; background:var(--ink);
  border-top:1px solid var(--line); padding:6rem var(--gap) 3rem;
  display:grid; gap:6rem;
}
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.4rem; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; gap:var(--gap); } }
.footer-grid dl{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem var(--gap); align-content:start; }
.footer-grid dt{ font-size:var(--t-xs); color:var(--paper); }
.footer-grid dd{ font-size:var(--t-xs); color:var(--grey-alt); }
.footer-grid dd + dd{ grid-column:2; }
.footer-mark{ font-size:var(--t-l); font-weight:570; letter-spacing:-.02em; color:var(--paper); }
.footer-addr{ display:grid; gap:.5rem; font-family:var(--mono); font-size:var(--t-2xs); }
.footer-addr div{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-addr b{ font-weight:400; color:var(--grey); min-width:6rem; }
.footer-addr a,.footer-addr span{ color:var(--grey-alt); overflow-wrap:anywhere; }
.footer-addr a:hover{ color:var(--paper); }

/* ============================================================
   MOTION
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(1.6rem);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--reveal-delay,0s);
}
.reveal.in-view{ opacity:1; transform:none; }

/* Copy arrives grey and lifts as it crosses the viewport. It starts at a
   colour that is readable on its own, so a missed observer or a fast scroll
   costs a little polish and never a paragraph. */
p.lift,.lift{ color:var(--grey); transition:color .7s var(--ease); }
p.lift.in-view,.lift.in-view{ color:var(--grey-light); }
.lift.in-view b,.lift.in-view strong{ color:var(--white); }
.lede.lift.in-view{ color:var(--paper); }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  p.lift,.lift{ color:var(--grey-light); transition:none; }
  .hero-line{ transition:none; }
  .ticker-track{ animation:none; }
  .hero-line{ transition:none; }
}

/* ============================================================
   WALLET MODAL
   ============================================================ */
.wm{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:2rem; }
.wm-scrim{ position:absolute; inset:0; background:rgba(10,10,10,.86); }
.wm-panel{
  position:relative; width:min(42rem,100%); background:var(--panel-soft);
  border-radius:var(--r-lg); padding:2.4rem; animation:pop .3s var(--ease) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(1rem); } to{ opacity:1; transform:none; } }
.wm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.wm-x{ cursor:pointer; font-size:2rem; line-height:1; color:var(--grey-light); padding:.2rem .6rem; }
.wm-x:hover{ color:var(--white); }
.wm-body{ display:grid; gap:.8rem; }
.wm-item{
  display:flex; align-items:center; gap:1.2rem; width:100%; text-align:left;
  min-height:46px; padding:1.4rem 1.8rem; border-radius:var(--pill);
  background:var(--panel); color:var(--white);
  cursor:pointer; font-size:var(--t-s);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.wm-item:hover{ background:var(--white); color:var(--panel); }
.wm-item.is-busy{ opacity:.5; pointer-events:none; }
.wm-item span:nth-child(2){ flex:1; }
.wm-icon{ width:2.4rem; height:2.4rem; border-radius:.7rem; flex:none; }
.wm-dot{ width:2.4rem; height:2.4rem; border-radius:.7rem; background:currentColor; flex:none; }
.wm-row{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.2rem 0; border-bottom:1px solid #2e2e2e;
  font-size:var(--t-xs);
}
.wm-k{ font-family:var(--mono); font-size:var(--t-2xs); letter-spacing:.06em; text-transform:uppercase; color:var(--grey-light); }
.wm-v{ color:var(--white); }
.wm-full{ width:100%; margin-top:1.2rem; }
.wm-err{ color:var(--white); background:#2a1818; border-radius:var(--r-sm); padding:1.2rem 1.6rem; font-size:var(--t-xs); margin-top:1.2rem; }

/* ============================================================
   THE CAMERA
   ============================================================ */
.shell{ max-width:62rem; margin-inline:auto; padding:12rem var(--gap) 8rem; display:grid; gap:var(--gap); }

.cam-status{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  font-size:var(--t-s); letter-spacing:-.005em; color:var(--grey-light);
}
.cam-status .count{ font-family:var(--mono); font-size:var(--t-l); letter-spacing:-.03em; color:var(--grey-alt); font-variant-numeric:tabular-nums; }
.cam-status.is-open .count{ color:var(--white); }

.stage{
  position:relative; aspect-ratio:3/4; background:#000; overflow:hidden;
  display:grid; place-items:center;
  border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--panel-line);
  transition:box-shadow .5s var(--ease);
}
.stage.is-open{ box-shadow:inset 0 0 0 1px var(--grey-alt); }
.stage-vf{
  position:absolute; inset:1.6rem; z-index:2; pointer-events:none;
  --vf-size:3.2rem; --vf-weight:2px; --vf-color:rgba(255,255,255,.28); --vf-radius:1.2rem;
}
.stage.is-open .stage-vf{ --vf-color:rgba(255,255,255,.92); }
.stage.is-open .stage-vf > i{ animation:vf-snap .7s var(--ease) both; }
.stage-vf > i:nth-child(2){ animation-delay:.05s; }
.stage-vf > i:nth-child(3){ animation-delay:.1s; }
.stage-vf > i:nth-child(4){ animation-delay:.15s; }
@keyframes vf-snap{ from{ opacity:0; scale:1.5; } to{ opacity:1; scale:1; } }
.stage video,.stage img{ width:100%; height:100%; object-fit:cover; }
.stage .hint{
  position:absolute; padding:0 3rem; text-align:center;
  font-size:var(--t-xs); line-height:1.7; color:var(--grey);
}
.inset{
  position:absolute; top:1.5rem; left:1.5rem; width:27%; aspect-ratio:3/4;
  overflow:hidden; background:#000; border-radius:var(--r-sm);
  box-shadow:0 0 0 2px rgba(255,255,255,.8), 0 1.2rem 3rem rgba(0,0,0,.6);
}
.flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.flash.go{ animation:flash .5s var(--ease); }
@keyframes flash{ from{ opacity:.95; } to{ opacity:0; } }

.shutter{
  justify-self:center; width:7.2rem; height:7.2rem; border-radius:50%;
  background:var(--white); cursor:pointer;
  transition:transform .12s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.shutter:hover:not(:disabled){ transform:scale(1.05); }
.shutter:active:not(:disabled){ transform:scale(.92); }
.shutter:disabled{ background:transparent; box-shadow:inset 0 0 0 2px var(--panel); cursor:not-allowed; }

.note{ font-size:var(--t-xs); line-height:1.6; color:var(--grey-light); }
.note.is-good{ color:var(--white); }
.note.is-bad{ color:var(--white); background:#2a1818; border-radius:var(--r-sm); padding:1.2rem 1.6rem; }

.card{ background:var(--panel-soft); border-radius:var(--r-md); padding:2.4rem; display:grid; gap:1.8rem; }
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  font-size:var(--t-xs); letter-spacing:-.005em;
  color:var(--grey);
}
.streaks{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.streaks > div{ display:grid; gap:.4rem; }
.streaks b{ font-size:var(--t-2xl); line-height:1; font-weight:570; letter-spacing:-.02em; color:var(--white); }
.streaks span{ font-size:var(--t-xs); color:var(--grey); }
.streaks > div{ background:var(--panel); border-radius:var(--r-sm); padding:1.6rem; }