/* ==========================================================================
   fametwin — main stylesheet
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --bg: #09090f;
  --bg-2: #11111a;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-2: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.22);
  --ink: #f6f4ff;
  --muted: #a9a6c0;
  --dim: #6f6c85;

  --lime: #d7ff3a;
  --lime-deep: #8fb300;
  --pink: #ff4fd8;
  --blue: #5b7cff;
  --cyan: #3cf0ff;
  --violet: #9b5cff;
  --orange: #ff8a2a;

  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  --radius: 22px;
  --nav-h: 68px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, canvas, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
mark { background: none; color: var(--lime); font-weight: 600; }
::selection { background: var(--lime); color: #000; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 8px; }

.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; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--lime); color: #000; padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }

/* ---------- background ---------- */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #15122a 0%, var(--bg) 60%); }
/* The blobs used to drift. Anything that big moving means the whole screen has to be redrawn every frame
   (144×/s on a 144 Hz display), together with every blur and blend on top of it, which saturated the GPU.
   Standing still they cost nothing. */
.bg__blob { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .55; }
.bg__blob--1 { background: radial-gradient(circle, rgba(255, 79, 216, .55) 0%, rgba(255, 79, 216, 0) 62%); top: -32vmax; left: -22vmax; }
.bg__blob--2 { background: radial-gradient(circle, rgba(91, 124, 255, .6) 0%, rgba(91, 124, 255, 0) 62%); top: 5vmax; right: -34vmax; }
.bg__blob--3 { background: radial-gradient(circle, rgba(215, 255, 58, .28) 0%, rgba(215, 255, 58, 0) 60%); bottom: -40vmax; left: 10vmax; }
.bg__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%); }

/* Just big enough to cover the screen through the ±4% jitter below (it used to be 9× the screen area,
   a huge texture for phones to rasterise and hold in GPU memory). */
.grain {
  position: fixed; inset: -10%; z-index: 150; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-3%, 2%); } 33% { transform: translate(2%, -4%); }
  50% { transform: translate(-4%, -1%); } 67% { transform: translate(3%, 3%); } 83% { transform: translate(-1%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter);
  background: linear-gradient(to bottom, rgba(9, 9, 15, .95), rgba(9, 9, 15, .84)); /* no backdrop blur: it re-blurs on every scroll frame */
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.logo { font: 800 1.35rem/1 var(--f-display); letter-spacing: -.04em; text-decoration: none; display: inline-flex; align-items: center; gap: .1em; }
.logo span:last-child { color: var(--lime); }
.logo__mark { display: inline-block; color: var(--pink); margin-right: .25em; font-size: .9em; animation: spin 8s linear infinite; }
.nav__links { display: flex; gap: 22px; margin-left: auto; }
.nav__links a { font: 500 .92rem/1 var(--f-body); color: var(--muted); text-decoration: none; position: relative; padding: 6px 0; transition: color .2s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* The pulsing ring: a disc behind the dot that grows + fades. transform/opacity only, so the compositor
   runs it (the old box-shadow version repainted every frame). */
.eyebrow__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; }
.eyebrow__pulse::after { animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.25); opacity: 0; } }

/* ---------- type helpers ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.eyebrow__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); color: var(--lime); }
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* ---------- buttons ---------- */
.btn {
  --shadow: rgba(0, 0, 0, .6);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .95em 1.35em; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--ink);
  font: 600 1rem/1 var(--f-body); letter-spacing: -.01em; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease-spring), background .2s, border-color .2s, box-shadow .25s;
  translate: var(--mx, 0) var(--my, 0);
}
.btn:hover { background: var(--panel-2); border-color: rgba(255, 255, 255, .35); }
.btn:active { transform: scale(.95); }
.btn--primary {
  background: var(--lime); color: #0a0a0a; border-color: transparent; font-weight: 700;
  box-shadow: 0 5px 0 var(--lime-deep), 0 14px 34px -10px rgba(215, 255, 58, .55);
}
.btn--primary:hover { background: #e4ff6e; border-color: transparent; box-shadow: 0 6px 0 var(--lime-deep), 0 18px 44px -10px rgba(215, 255, 58, .7); }
.btn--primary:active { transform: translateY(4px) scale(.98); box-shadow: 0 1px 0 var(--lime-deep), 0 6px 18px -8px rgba(215, 255, 58, .6); }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .75) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .8s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(130%); }
.btn--xl { font-size: 1.08rem; padding: 1.05em 1.55em; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }

.icon-btn { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); cursor: pointer; font-size: .8rem; transition: background .2s, transform .2s var(--ease-spring); }
.icon-btn:hover { background: var(--panel-2); }
.icon-btn:active { transform: scale(.9); }

/* ---------- hero ---------- */
.hero {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  min-height: calc(100svh - var(--nav-h)); padding: clamp(28px, 6vh, 80px) var(--gutter) 64px;
  display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px);
}
.hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.headline {
  font: 900 clamp(3.6rem, 7vw, 6.6rem)/.86 var(--f-display); letter-spacing: -.055em; text-transform: lowercase;
  margin: 4px 0 2px;
}
.headline__line { display: block; overflow: hidden; padding: .04em .02em .09em; margin-bottom: -.09em; }
.headline__word { display: inline-block; animation: wordUp 1s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
.headline__word--serif {
  font: italic 400 1.18em/0.8 var(--f-serif); letter-spacing: -.035em; padding-right: .08em;
  background: linear-gradient(90deg, var(--lime), var(--cyan) 30%, var(--pink) 60%, var(--lime) 90%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wordUp 1s var(--ease-out) both, sheen 6s steps(180) infinite; animation-delay: calc(var(--i) * 90ms + 120ms), 0s;
}
/* the shimmer repaints every frame (see app.js), so it only runs while someone can actually see it */
body.hero-off .headline__word--serif, body.is-locked .headline__word--serif, body[data-view="result"] .headline__word--serif { animation-play-state: paused; }
/* pop on the outer span, wobble on the inner one: two transform animations on one element can't both
   run on the compositor, so the wobble used to tick on the main thread forever */
.headline__emoji { display: inline-block; font-size: .62em; vertical-align: .32em; margin-left: .12em; animation: pop .8s var(--ease-spring) both; animation-delay: calc(var(--i) * 90ms + 300ms); }
.headline__emoji > span { display: inline-block; animation: wobble 3s ease-in-out 1.6s infinite; }
@keyframes wordUp { from { transform: translateY(105%) rotate(5deg); opacity: 0; } }
@keyframes sheen { to { background-position: -220% 0; } }
@keyframes pop { from { transform: scale(0) rotate(-30deg); opacity: 0; } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

.hero__sub { max-width: 31em; font-size: clamp(1.02rem, 1.25vw, 1.16rem); color: var(--muted); }
.hero__sub b { color: var(--ink); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 .82rem/1.2 var(--f-mono); color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero__hint { font: 400 .78rem/1.4 var(--f-mono); color: var(--dim); }

.reveal-load { animation: fadeUp .9s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 80ms + 200ms); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } }

.hero__visual { position: relative; display: grid; place-items: center; min-height: 520px; animation: cardIn 1.3s var(--ease-out) .35s both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) rotate(8deg) scale(.92); } }

.orbit { position: absolute; width: 132px; height: 132px; right: 2%; bottom: -3%; z-index: 5; display: grid; place-items: center; }
.orbit__text { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.orbit__text text { font: 600 12.5px var(--f-mono); letter-spacing: 2.4px; fill: var(--ink); text-transform: uppercase; }
.orbit__core { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: var(--pink); box-shadow: 0 10px 30px -8px rgba(255, 79, 216, .7), inset 0 -4px 0 rgba(0, 0, 0, .18); }
@keyframes spin { to { transform: rotate(360deg); } }

.sticker {
  position: absolute; left: var(--x); top: var(--y); z-index: 4;
  padding: .5em .9em; border-radius: 999px; border: 3px solid #fff;
  font: 700 .82rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .7);
  rotate: var(--r);
}
.sticker--lime { background: var(--lime); color: #000; }
.sticker--pink { background: var(--pink); color: #000; }
.sticker--white { background: #fff; color: #000; border-color: #000; }
.sticker--blue { background: var(--blue); color: #fff; }
.spark { position: absolute; left: var(--x); top: var(--y); color: var(--lime); font-size: 2rem; z-index: 4; text-shadow: 0 0 12px rgba(215, 255, 58, .7), 0 0 4px rgba(215, 255, 58, .6); }
.spark--sm { font-size: 1.2rem; color: var(--cyan); text-shadow: 0 0 10px rgba(60, 240, 255, .8), 0 0 4px rgba(60, 240, 255, .6); }
.spark--pink { color: var(--pink); text-shadow: 0 0 10px rgba(255, 79, 216, .8), 0 0 4px rgba(255, 79, 216, .6); }
.float { animation: float 6s ease-in-out infinite; animation-delay: calc(var(--f, 0) * -1.5s); translate: var(--px, 0) var(--py, 0); transition: translate .6s var(--ease-out); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(3deg); } }

/* ---------- holo card ---------- */
.holo {
  --w: 340px;
  position: relative; width: var(--w); aspect-ratio: 5 / 7; perspective: 1000px;
  container-type: inline-size; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.holo--hero { --w: min(360px, 78vw); }
.holo__inner {
  position: absolute; inset: 0; border-radius: 5.5cqw; padding: 2.6cqw; overflow: hidden;
  transform-style: preserve-3d; will-change: transform; /* tilt: set by holo.js */
  box-shadow: 0 2.5cqw 6cqw -1cqw rgba(0, 0, 0, .55), 0 10cqw 22cqw -6cqw var(--glow, rgba(255, 79, 216, .55));
}
.holo[data-tier="legendary"] { --foil: linear-gradient(125deg, #ffe27a 0%, #ff6ad5 22%, #8a6cff 44%, #3cf0ff 66%, #d7ff3a 88%, #ffe27a 100%); --glow: rgba(255, 106, 213, .6); --tier: #ffe27a; }
.holo[data-tier="ultra"] { --foil: linear-gradient(125deg, #ff4fd8 0%, #9b5cff 40%, #ff9ae8 70%, #ff4fd8 100%); --glow: rgba(155, 92, 255, .6); --tier: #ff9ae8; }
.holo[data-tier="rare"] { --foil: linear-gradient(125deg, #3cf0ff 0%, #5b7cff 45%, #b5f6ff 75%, #3cf0ff 100%); --glow: rgba(91, 124, 255, .6); --tier: #8ff3ff; }
.holo[data-tier="common"] { --foil: linear-gradient(125deg, #f2f2f7 0%, #8b8b99 40%, #e6e6ee 70%, #9d9dab 100%); --glow: rgba(200, 200, 220, .35); --tier: #e6e6ee; }

.fc {
  position: relative; z-index: 1; height: 100%; border-radius: 3.6cqw; padding: 3.6cqw;
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 3cqw;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .08), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 7px),
    #0d0d15;
  box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .08);
}
.fc__head { display: flex; justify-content: space-between; align-items: center; font: 600 3cqw/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.fc__logo { color: var(--ink); }
.fc__tier { color: #000; background: var(--tier); padding: 1.2cqw 2.4cqw; border-radius: 99px; font-weight: 700; }
.fc__photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; min-height: 0; }
.fc__photo { position: relative; overflow: hidden; border-radius: 3cqw; background: #1a1a26; box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .1); }
.fc__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.fc__label {
  position: absolute; left: 2cqw; bottom: 2cqw; max-width: calc(100% - 4cqw); overflow: hidden; text-overflow: ellipsis;
  padding: 1.2cqw 2cqw; border-radius: 99px; font: 600 2.6cqw/1 var(--f-mono); text-transform: lowercase; white-space: nowrap;
  background: rgba(0, 0, 0, .66); color: #fff;
}
.fc__label--r { left: auto; right: 2cqw; }
.fc__badge {
  position: absolute; left: 50%; top: 50%; width: 19cqw; height: 19cqw; translate: -50% -50%; rotate: -10deg; z-index: 2;
  display: grid; place-items: center; grid-auto-flow: column; align-content: center; justify-content: center;
  border-radius: 50%; background: var(--lime); color: #000; border: 1cqw solid #0d0d15;
  box-shadow: 0 2cqw 5cqw -1cqw rgba(0, 0, 0, .6);
  font: 900 6.6cqw/1 var(--f-display); letter-spacing: -.06em;
}
.fc__badge small { font-size: .5em; letter-spacing: 0; margin-left: .05em; align-self: start; margin-top: .25em; }
.fc__body { min-width: 0; }
.fc__kicker { font: italic 400 5.4cqw/1 var(--f-serif); color: var(--muted); }
.fc__name { font: 900 var(--name-size, 8.6cqw)/.98 var(--f-display); letter-spacing: -.045em; text-transform: uppercase; margin: 1.2cqw 0 1.4cqw; overflow-wrap: anywhere; }
.fc__tag { font: 500 2.8cqw/1.3 var(--f-mono); color: var(--muted); text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc__stats { display: grid; grid-template-columns: 1fr 1.5fr .9fr; gap: 1.6cqw; padding-top: 2.6cqw; border-top: .3cqw dashed rgba(255, 255, 255, .18); }
.fc__stats div { min-width: 0; }
.fc__stats span { display: block; font: 500 2.2cqw/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-bottom: 1.2cqw; }
.fc__stats b { display: block; font: 700 3.4cqw/1.1 var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.holo__shine, .holo__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
/* Every moving part of the card is its own layer, moved by transform/opacity from holo.js, so tilting it
   never repaints the card. The values here are the card at rest, facing straight on. */
.holo__foil, .holo__stripes, .holo__glow { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.holo__foil { width: 200%; height: 200%; background: var(--foil); transform: translate(-25%, -25%); }
.holo__shine {
  z-index: 3; mix-blend-mode: color-dodge; opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5) 0 .25cqw, transparent .5cqw),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .4) 0 .2cqw, transparent .45cqw);
  background-size: 9cqw 9cqw, 13cqw 13cqw;
}
.holo__stripes {
  width: 260%; height: 260%; transform: translate(-30.77%, -30.77%);
  background: repeating-linear-gradient(115deg, rgba(255, 79, 216, .0) 0%, rgba(255, 79, 216, .38) 3%, rgba(255, 226, 122, .38) 6%, rgba(60, 240, 255, .38) 9%, rgba(155, 92, 255, .38) 12%, rgba(255, 79, 216, 0) 15%);
}
.holo__glare { z-index: 4; mix-blend-mode: overlay; opacity: .25; }
.holo__glow { width: 200%; height: 200%; transform: translate(-25%, -25%); background: radial-gradient(circle 105cqw at 50% 50%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .14) 28%, rgba(0, 0, 0, .35) 95%); }

/* hero mystery card */
.holo--mystery .fc__photo--you { background: radial-gradient(circle at 50% 40%, #1f2a10, #0d0d15 70%); }
.holo--mystery .fc__photo--mystery { display: grid; place-items: center; background: conic-gradient(from 0deg at 50% 50%, #2a0f2a, #12122e, #0d2a2e, #2a0f2a); }
.fc__q { font: 900 30cqw/1 var(--f-display); background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .2)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: qPulse 2.4s ease-in-out infinite; }
@keyframes qPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08) rotate(-4deg); opacity: 1; } }
.holo--mystery .fc__badge { background: var(--pink); }
.fc__scan { position: absolute; left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(to bottom, transparent, rgba(215, 255, 58, .32) 85%, var(--lime) 100%); transform: translateY(-100%); animation: band 2.6s var(--ease-in-out) infinite; will-change: transform; }
/* A scan band 22% of its box tall, swept from just above the box to just below it. Moved with
   transform (not `top`), so it never triggers layout or paint. */
@keyframes band { from { transform: translateY(-100%); } to { transform: translateY(454.545%); } }

/* ---------- mesh (dot face) ---------- */
.mesh { --scan-dur: 2.6s; position: absolute; inset: 0; display: grid; place-items: center; }
.mesh svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mesh circle { fill: var(--lime); }
.mesh path { fill: none; stroke: rgba(215, 255, 58, .38); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.mesh__base circle { fill-opacity: .4; }
/* The bright copy of the mesh shows through a band that sweeps down with the scan line (same keyframes,
   same box). The band moves down while its contents move up by the same amount, so the bright dots stay
   put and light up as the line passes. Both are transforms: no per-frame work for the page. */
.mesh__band {
  position: absolute; left: 0; right: 0; top: 0; height: 22%; overflow: hidden; pointer-events: none;
  transform: translateY(-100%); animation: band var(--scan-dur) var(--ease-in-out) infinite; will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 75%); mask-image: linear-gradient(to bottom, transparent, #000 75%);
}
.mesh__band-in { position: absolute; left: 0; top: 0; width: 100%; height: 454.545%; animation: bandIn var(--scan-dur) var(--ease-in-out) infinite; will-change: transform; }
@keyframes bandIn { from { transform: translateY(22%); } to { transform: translateY(-100%); } }
.mesh__lit path { stroke: rgba(215, 255, 58, .85); }
.mesh__lit .halo { fill-opacity: .22; } /* glow drawn as soft dots, not a filter */

/* ---------- marquee ---------- */
.marquee { position: relative; z-index: 3; margin: 0 -2vw; padding: 16px 0; background: var(--lime); color: #000; rotate: -2.2deg; overflow: hidden; box-shadow: 0 20px 50px -20px rgba(215, 255, 58, .5); }
.marquee::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px; }
.marquee__track { display: flex; width: max-content; gap: 28px; align-items: center; animation: marquee 28s linear infinite; font: 800 clamp(1rem, 2vw, 1.45rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; }
.marquee__track i { font-style: normal; color: var(--pink); -webkit-text-stroke: 1px #000; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(80px, 12vw, 150px) var(--gutter) 0; }
.section__head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
.section__title { font: 800 clamp(2rem, 5vw, 3.8rem)/1 var(--f-display); letter-spacing: -.045em; text-transform: lowercase; max-width: 16ch; }
.section__title em { font-size: 1.15em; color: var(--lime); letter-spacing: -.03em; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.step {
  position: relative; padding: 26px 24px 28px; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--line);
  transition: transform .5s var(--ease-out), border-color .3s;
}
.step:hover { transform: translateY(-6px) rotate(-.6deg); border-color: rgba(215, 255, 58, .4); }
.step__num { display: block; margin-bottom: 14px; font: 900 2.6rem/1 var(--f-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3); transition: color .3s, -webkit-text-stroke-color .3s; }
.step:hover .step__num { color: var(--lime); -webkit-text-stroke-color: var(--lime); }
.step h3 { font: 700 1.35rem/1.1 var(--f-display); letter-spacing: -.035em; margin: 18px 0 10px; text-transform: lowercase; }
.step p { color: var(--muted); font-size: .98rem; }
.step__art { position: relative; height: 170px; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; display: grid; place-items: center; }

.phone { position: relative; width: 82px; height: 140px; border-radius: 18px; border: 3px solid #fff; background: linear-gradient(160deg, #2a1346, #0f1a3a); display: grid; place-items: center; animation: phoneBob 3.6s ease-in-out infinite; box-shadow: 0 16px 40px -12px rgba(255, 79, 216, .6); }
.phone__notch { position: absolute; top: 6px; width: 26px; height: 6px; border-radius: 9px; background: #fff; }
.phone__face { font-size: 2.4rem; }
.phone__flash { position: absolute; inset: 0; border-radius: 15px; background: #fff; opacity: 0; animation: camFlash 3.6s ease-out infinite; }
@keyframes phoneBob { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-8px); } }
@keyframes camFlash { 0%, 62% { opacity: 0; } 64% { opacity: .95; } 80%, 100% { opacity: 0; } }

.step__art--mesh .mesh { inset: 6px; --scan-dur: 2.8s; }
/* same box + keyframes as the mesh band above, so the line and the lit dots move together */
.step__scan { position: absolute; left: 0; right: 0; top: 6px; height: calc((100% - 12px) * .22); background: linear-gradient(to bottom, transparent, rgba(215, 255, 58, .25)); border-bottom: 2px solid var(--lime); transform: translateY(-100%); animation: band 2.8s var(--ease-in-out) infinite; will-change: transform; }

.venn { position: absolute; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font: 800 1.6rem/1 var(--f-display); mix-blend-mode: screen; }
.venn--a { background: var(--pink); color: #000; animation: vennA 3.2s var(--ease-in-out) infinite; }
.venn--b { background: var(--cyan); color: #000; animation: vennB 3.2s var(--ease-in-out) infinite; }
.venn__pct { position: relative; z-index: 2; font: 900 2.2rem/1 var(--f-display); color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
@keyframes vennA { 0%, 100% { transform: translateX(-46px); } 50% { transform: translateX(-16px); } }
@keyframes vennB { 0%, 100% { transform: translateX(46px); } 50% { transform: translateX(16px); } }

.privacy__inner {
  position: relative; overflow: hidden; border-radius: 32px; padding: clamp(32px, 6vw, 72px);
  background: radial-gradient(90% 120% at 100% 0%, rgba(255, 79, 216, .22), transparent 55%), radial-gradient(80% 100% at 0% 100%, rgba(91, 124, 255, .25), transparent 55%), var(--bg-2);
  border: 1px solid var(--line);
}
.privacy__title { font: 800 clamp(2.1rem, 5.6vw, 4.4rem)/1.02 var(--f-display); letter-spacing: -.05em; margin: 18px 0 22px; max-width: 15ch; text-transform: lowercase; }
.privacy__title em { color: var(--lime); font-size: 1.12em; display: inline-block; }
.strike { position: relative; color: var(--dim); white-space: nowrap; }
.strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: .12em; background: var(--pink); border-radius: 9px; transform: scaleX(0) rotate(-3deg); transform-origin: left; transition: transform .8s var(--ease-out) .5s; }
.privacy__inner.in .strike::after { transform: scaleX(1) rotate(-3deg); }
.privacy__lead { max-width: 40em; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); }
.pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px; }
.pill { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 18px; border-radius: 18px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.pill > span { grid-row: span 2; font-size: 1.6rem; }
.pill b { font: 700 1rem/1.2 var(--f-display); letter-spacing: -.03em; }
.pill small { color: var(--muted); font-size: .86rem; }

.faq__list { display: grid; gap: 10px; max-width: 860px; }
.faq__item { border-radius: 18px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, background .3s; }
.faq__item[open] { border-color: rgba(215, 255, 58, .35); background: rgba(215, 255, 58, .04); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font: 600 1.06rem/1.3 var(--f-body); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); font: 500 1.2rem/1 var(--f-mono); transition: transform .35s var(--ease-spring), background .3s, color .3s; }
.faq__item[open] summary::after { transform: rotate(135deg); background: var(--lime); color: #000; }
.faq__item p { padding: 0 22px 22px; color: var(--muted); max-width: 64ch; animation: fadeUp .45s var(--ease-out); }

/* ---------- footer ---------- */
.footer { position: relative; max-width: var(--maxw); margin: clamp(90px, 12vw, 150px) auto 0; padding: 0 var(--gutter) 24px; overflow: hidden; }
.footer__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.footer__cta p { font: 800 clamp(1.5rem, 3.4vw, 2.4rem)/1 var(--f-display); letter-spacing: -.045em; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; font: 500 .85rem/1 var(--f-mono); }
.footer__links a { color: var(--muted); text-decoration: none; }
.footer__links a:hover { color: var(--lime); }
.footer__fine { margin-top: 16px; max-width: 70ch; color: var(--dim); font-size: .8rem; }
.footer__word {
  margin-top: 30px; font: 900 min(13.2vw, 170px)/.78 var(--f-display); letter-spacing: -.07em; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 92%); -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none; translate: 0 8%;
}
body[data-view="result"] .footer__cta { display: none; }

/* ---------- result ---------- */
.result { max-width: var(--maxw); margin: 0 auto; padding: clamp(24px, 5vh, 56px) var(--gutter) 0; outline: none; }
.result__hero { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 6vw, 88px); align-items: center; }
.result__cardwrap { display: grid; justify-items: center; gap: 14px; }
.result__cardwrap .holo { --w: min(380px, 84vw); }
.tilt-hint { font: 500 .75rem/1 var(--f-mono); color: var(--dim); }
.result__info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.giving { display: flex; flex-direction: column; gap: 6px; }
.giving__kicker { font: italic 400 clamp(2rem, 4vw, 3.2rem)/1 var(--f-serif); color: var(--muted); }
.giving__name {
  font: 900 clamp(2.6rem, 7vw, 6.2rem)/.9 var(--f-display); letter-spacing: -.055em; text-transform: lowercase;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, var(--lime) 50%, var(--ink) 60%, var(--ink) 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 5s steps(150) infinite;
  overflow-wrap: anywhere; padding-bottom: .05em;
}
.res__tag { font: 500 .95rem/1.3 var(--f-mono); color: var(--muted); }
.meter { width: min(100%, 460px); }
.meter__bar { height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; border: 1px solid var(--line); }
.meter__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--violet), var(--cyan), var(--lime)); background-size: 460px 100%; box-shadow: 0 0 22px rgba(215, 255, 58, .5); transition: width 1.6s var(--ease-out); }
.res__pct { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 500 1rem/1 var(--f-mono); color: var(--muted); }
.res__pct b { font: 900 1.9rem/1 var(--f-display); color: var(--ink); letter-spacing: -.05em; }
.tier-chip { padding: 7px 12px; border-radius: 99px; background: var(--lime); color: #000; font: 700 .78rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; }
.tier-chip[data-tier="ultra"] { background: var(--pink); }
.tier-chip[data-tier="rare"] { background: var(--cyan); }
.tier-chip[data-tier="common"] { background: #e6e6ee; }
.res__vibe { font-size: 1.05rem; color: var(--ink); }
.res__vibe span { color: var(--muted); }
.res__note { padding: 10px 14px; border-radius: 14px; background: rgba(255, 138, 42, .12); border: 1px solid rgba(255, 138, 42, .35); color: #ffc38f; font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.actions--center { justify-content: center; }

.result__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: clamp(48px, 8vw, 96px); align-items: start; }
.result__side { display: grid; gap: 18px; }
.panel { border-radius: 26px; padding: clamp(18px, 2.4vw, 26px); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); border: 1px solid var(--line); }
.panel__head { display: grid; gap: 4px; margin-bottom: 18px; }
.panel__head h3 { font: 800 1.5rem/1.05 var(--f-display); letter-spacing: -.045em; text-transform: lowercase; }
.panel__head h3 sup { font-size: .5em; color: var(--lime); }
.panel__head p { color: var(--muted); font-size: .92rem; }
.panel__head b { color: var(--ink); }

.morph__stage { position: relative; border-radius: 20px; overflow: hidden; background: #000; aspect-ratio: 4 / 5; max-height: 72vh; margin: 0 auto; box-shadow: 0 30px 60px -30px rgba(91, 124, 255, .6); }
.morph__stage canvas { width: 100%; height: 100%; object-fit: cover; }
.morph__chip { position: absolute; top: 12px; padding: 7px 12px; border-radius: 99px; font: 600 .78rem/1 var(--f-mono); background: rgba(0, 0, 0, .66); transition: background .2s, color .2s; text-transform: lowercase; }
.morph__chip--l { left: 12px; }
.morph__chip--r { right: 12px; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.morph__chip.is-on { background: var(--lime); color: #000; }
.morph__controls { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.range { -webkit-appearance: none; appearance: none; flex: 1; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--lime) var(--fill, 0%), rgba(255, 255, 255, .12) var(--fill, 0%)); cursor: pointer; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--lime); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--lime); }

.also__list { display: grid; gap: 8px; counter-reset: also 1; }
.also__btn {
  width: 100%; display: grid; grid-template-columns: auto 52px 1fr auto; align-items: center; gap: 12px; padding: 8px 14px 8px 10px;
  border-radius: 18px; border: 1px solid transparent; background: rgba(0, 0, 0, .25); cursor: pointer; text-align: left;
  transition: background .2s, border-color .2s, transform .25s var(--ease-spring);
  animation: fadeUp .6s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 300ms);
}
.also__btn:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-2); transform: translateX(4px); }
.also__btn[aria-pressed="true"] { border-color: var(--lime); background: rgba(215, 255, 58, .07); }
.also__rank { font: 700 .8rem/1 var(--f-mono); color: var(--dim); width: 1.6em; }
.also__btn img { width: 52px; height: 65px; border-radius: 12px; object-fit: cover; background: #1a1a26; }
.also__meta { min-width: 0; display: grid; gap: 6px; }
.also__name { font: 700 1rem/1.1 var(--f-display); letter-spacing: -.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: lowercase; }
.also__bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.also__bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width 1.2s var(--ease-out); }
.also__pct { font: 800 1.05rem/1 var(--f-display); letter-spacing: -.04em; }

.anti__row { width: 100%; display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(255, 79, 216, .07); border: 1px dashed rgba(255, 79, 216, .45); cursor: pointer; text-align: left; transition: transform .25s var(--ease-spring), background .2s; }
.anti__row:hover { transform: rotate(-1deg) scale(1.01); background: rgba(255, 79, 216, .12); }
.anti__row img { width: 64px; height: 80px; border-radius: 12px; object-fit: cover; filter: grayscale(.4) contrast(1.1); }
.anti__row .also__name { font-size: 1.1rem; }
.anti__row small { color: var(--muted); font-size: .82rem; }
.anti__pct { font: 900 1.4rem/1 var(--f-display); color: var(--pink); letter-spacing: -.05em; }

.result__fine { margin-top: 28px; color: var(--dim); font-size: .8rem; text-align: center; }
.result__fine a { color: var(--muted); }

/* result entrance */
.result.is-in .result__cardwrap { animation: flipIn 1.2s var(--ease-out) both; }
.result.is-in .result__info > * { animation: fadeUp .8s var(--ease-out) both; }
.result.is-in .result__info > *:nth-child(1) { animation-delay: .25s; }
.result.is-in .result__info > *:nth-child(2) { animation-delay: .35s; }
.result.is-in .result__info > *:nth-child(3) { animation-delay: .5s; }
.result.is-in .result__info > *:nth-child(4) { animation-delay: .6s; }
.result.is-in .result__info > *:nth-child(5) { animation-delay: .7s; }
.result.is-in .result__info > *:nth-child(6) { animation-delay: .8s; }
.result.is-in .result__info > *:nth-child(n+7) { animation-delay: .9s; }
.result.is-in .result__grid { animation: fadeUp 1s var(--ease-out) .7s both; }
@keyframes flipIn { from { opacity: 0; transform: perspective(1200px) rotateY(-100deg) scale(.7) translateY(30px); } 60% { opacity: 1; } }
/* on the card itself, so it stacks with the tilt holo.js puts on .holo__inner */
.holo.is-swapping { animation: swap .6s var(--ease-out); }
@keyframes swap { 0% { transform: perspective(1000px) rotateY(0) scale(1); } 45% { transform: perspective(1000px) rotateY(90deg) scale(.92); } 55% { transform: perspective(1000px) rotateY(-90deg) scale(.92); } 100% { transform: perspective(1000px) rotateY(0) scale(1); } }

/* ---------- scan overlay ---------- */
.scan {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(80% 60% at 50% 0%, rgba(155, 92, 255, .22), transparent 70%), rgba(6, 6, 11, .96);
  clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%));
  transition: clip-path .75s var(--ease-in-out);
}
.scan.is-open { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
/* The overlay is 96% opaque, but everything under it (card, stickers, marquee…) kept animating and being
   drawn every frame, competing with the scan. Once the overlay covers the screen, hide what's beneath. */
body.scan-covered main, body.scan-covered .footer, body.scan-covered .nav, body.scan-covered .bg { visibility: hidden; }
/* same while the (97% opaque) camera is open */
body:has(#camera:not([hidden])) :is(main, .footer, .nav, .bg) { visibility: hidden; }
.scan__inner { width: min(760px, 100%); display: grid; gap: 18px; }
.scan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scan__title { font: 800 clamp(1.2rem, 3vw, 1.8rem)/1.1 var(--f-display); letter-spacing: -.04em; }
.dots i { display: inline-block; font-style: normal; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.scan__close { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); cursor: pointer; font-size: 1rem; }
.scan__close:hover { background: var(--panel-2); }
.scan__close:focus-visible { outline-width: 1px; outline-offset: 2px; }
.scan__duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(8px, 2vw, 20px); }
.scan__frame { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #111118; border: 1px solid var(--line-2); }
.scan__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scan__frame--you { rotate: -2.5deg; box-shadow: 0 24px 60px -24px rgba(215, 255, 58, .45); }
.scan__frame--reel { rotate: 2.5deg; box-shadow: 0 24px 60px -24px rgba(255, 79, 216, .55); }
.scan__eq { position: relative; font: 900 clamp(1.8rem, 5vw, 3rem)/1 var(--f-display); color: var(--lime); animation: eqPulse 1s ease-in-out infinite; }
/* the colour shift is a pink copy fading in on top (animating `color` itself repaints every frame) */
.scan__eq::after { content: "≈"; position: absolute; inset: 0; color: var(--pink); opacity: 0; animation: fadePulse 1s ease-in-out infinite; }
@keyframes eqPulse { 50% { transform: scale(1.25); } }
@keyframes fadePulse { 50% { opacity: 1; } }
.scan__line { position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(to bottom, transparent, rgba(215, 255, 58, .2) 80%, rgba(215, 255, 58, .9)); box-shadow: 0 6px 18px rgba(215, 255, 58, .6); transform: translateY(-100%); animation: scanY3 1.8s var(--ease-in-out) infinite; pointer-events: none; will-change: transform; }
@keyframes scanY3 { from { transform: translateY(-100%); } to { transform: translateY(333.333%); } }
.scan.is-matched .scan__line { animation: none; opacity: 0; transition: opacity .4s; }
.scan__corners i { position: absolute; width: 26px; height: 26px; border: 3px solid var(--lime); }
.scan__corners i:nth-child(1) { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.scan__corners i:nth-child(2) { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.scan__corners i:nth-child(3) { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.scan__corners i:nth-child(4) { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.scan__tag { position: absolute; left: 12px; bottom: 12px; z-index: 3; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 12px; border-radius: 99px; background: rgba(0, 0, 0, .7); font: 600 .78rem/1 var(--f-mono); }
.scan__tag--r { left: auto; right: 12px; }
.reel__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(17, 17, 24, .9), transparent 22%, transparent 78%, rgba(17, 17, 24, .9)); }
.scan.is-matched .reel__shade { opacity: 0; transition: opacity .5s; }
.reel__pct { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 10px 14px; border-radius: 99px; background: var(--lime); color: #000; font: 900 1.3rem/1 var(--f-display); letter-spacing: -.05em; animation: pop .6s var(--ease-spring) both; }
.terminal { min-height: 7.2em; padding: 14px 16px; border-radius: 16px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line); font: 400 .82rem/1.5 var(--f-mono); color: var(--muted); overflow: hidden; }
.terminal li { display: flex; gap: 10px; animation: termIn .35s var(--ease-out) both; }
.terminal li::before { content: "›"; color: var(--lime); }
.terminal li.ok::after { content: "✓"; color: var(--lime); margin-left: auto; }
.terminal li.warn::before { color: var(--orange); }
.terminal li b { color: var(--ink); font-weight: 600; }
@keyframes termIn { from { opacity: 0; transform: translateX(-8px); } }
.scan__progress { height: 4px; border-radius: 9px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.scan__progress i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--lime), var(--cyan)); transition: transform .4s var(--ease-out); }
.scan__skip { justify-self: center; background: none; border: 0; color: var(--muted); font: 500 .85rem/1 var(--f-mono); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; padding: 6px; }
.scan__skip:hover { color: var(--ink); }

.scan__error { width: min(520px, 100%); text-align: center; display: grid; gap: 14px; justify-items: center; animation: fadeUp .6s var(--ease-out) both; }
.scan__error-emoji { font-size: 4rem; animation: wobble 2s ease-in-out infinite; }
.scan__error h2 { font: 800 clamp(1.6rem, 4vw, 2.4rem)/1.05 var(--f-display); letter-spacing: -.045em; }
.scan__error > p { color: var(--muted); }
.scan__tips { display: grid; gap: 8px; text-align: left; margin: 6px 0 10px; }
.scan__tips li { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: .94rem; }
.scan__tips li::before { content: "✦"; color: var(--lime); }

/* ---------- camera ---------- */
.camera { position: fixed; inset: 0; z-index: 110; display: grid; grid-template-rows: 1fr auto; gap: 16px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(6, 6, 11, .97); animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; } }
.camera__box { position: relative; justify-self: center; align-self: center; width: min(560px, 100%); aspect-ratio: 3 / 4; max-height: 100%; border-radius: 28px; overflow: hidden; background: #000; border: 1px solid var(--line-2); }
.camera__box video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera__box video.no-mirror { transform: none; }
.camera__guide { position: absolute; left: 50%; top: 46%; width: 58%; aspect-ratio: 3 / 4; translate: -50% -50%; border-radius: 50%; border: 3px dashed rgba(215, 255, 58, .8); box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); animation: guide 2.4s ease-in-out infinite; }
/* lime ↔ pink: a pink copy of the border fades in on top, instead of animating border-color (a repaint per frame) */
.camera__guide::after, .dropzone__inner::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px dashed rgba(255, 79, 216, .9); opacity: 0; animation: fadePulse 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes guide { 50% { transform: scale(1.03); } }
.camera__hint { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 600 .82rem/1 var(--f-mono); }
.camera__count { position: absolute; inset: 0; display: grid; place-items: center; font: 900 8rem/1 var(--f-display); color: var(--lime); text-shadow: 0 6px 40px rgba(0, 0, 0, .6); pointer-events: none; }
.camera__count span { animation: countPop .9s var(--ease-out) both; }
@keyframes countPop { from { transform: scale(2.2); opacity: 0; } 30% { opacity: 1; } to { transform: scale(.8); opacity: 0; } }
.camera__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.camera__flash.go { animation: flashGo .5s ease-out; }
.camera__bar { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 6vw, 48px); }
.shutter { width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff; background: transparent; padding: 5px; cursor: pointer; transition: transform .2s var(--ease-spring); }
.shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--lime); transition: transform .2s; }
.shutter:active span { transform: scale(.85); }
.shutter[disabled] { opacity: .5; }

/* ---------- misc overlays ---------- */
/* invisible until something is dragged over the page — and not rendered or animated at all until then */
.dropzone { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; background: rgba(9, 9, 15, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dropzone.is-on { opacity: 1; visibility: visible; transition: opacity .25s; }
.dropzone__inner { position: relative; width: min(640px, 100%); aspect-ratio: 16 / 10; border-radius: 36px; display: grid; place-content: center; justify-items: center; gap: 10px; border: 4px dashed var(--lime); background: rgba(215, 255, 58, .06); font: 900 clamp(1.6rem, 5vw, 3rem)/1 var(--f-display); letter-spacing: -.05em; text-align: center; }
.dropzone__inner::after { inset: -4px; border-width: 4px; animation-duration: 1.6s; }
.dropzone__emoji { font-size: 4rem; }
.dropzone:not(.is-on) .dropzone__inner::after { animation: none; }
.dropzone.is-on .dropzone__inner { animation: guide 1.6s ease-in-out infinite; }
.dropzone.is-on .dropzone__emoji { animation: wobble 1s ease-in-out infinite; }

.flash { position: fixed; inset: 0; z-index: 130; pointer-events: none; background: #fff; opacity: 0; }
.flash.go { animation: flashGo .7s ease-out; }
@keyframes flashGo { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 131; pointer-events: none; }

.toasts { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 140; display: grid; gap: 8px; justify-items: center; width: min(92vw, 440px); }
.toast { padding: 12px 18px; border-radius: 16px; background: #fff; color: #000; font: 600 .92rem/1.35 var(--f-body); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7); animation: toastIn .5s var(--ease-spring) both; text-align: center; }
.toast.out { animation: toastOut .35s ease-in both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.95); } }

/* ---------- consent sheet (first scan) + photo credit ---------- */
.consent { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 16px; }
.consent__scrim { position: absolute; inset: 0; background: rgba(5, 5, 10, .86); animation: fadeIn .25s ease both; }
.consent__sheet {
  position: relative; width: min(460px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 14px; padding: 28px 24px 18px; border-radius: 28px;
  background: radial-gradient(100% 60% at 50% 0%, rgba(255, 79, 216, .18), transparent 70%), #12121c;
  border: 1px solid var(--line-2); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9);
  animation: consentIn .45s var(--ease-out) both;
}
@keyframes consentIn { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.consent__title { font: 900 clamp(1.6rem, 6vw, 2rem)/1 var(--f-display); letter-spacing: -.05em; }
.consent__list { display: grid; gap: 10px; }
.consent__list li { position: relative; padding-left: 22px; color: var(--muted); font-size: .93rem; line-height: 1.45; }
.consent__list li::before { content: "✦"; position: absolute; left: 0; color: var(--lime); }
.consent__list b { color: var(--ink); font-weight: 600; }
.consent__check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); cursor: pointer; font-size: .9rem; line-height: 1.4; }
.consent__check input { width: 22px; height: 22px; margin: 0; accent-color: var(--lime); cursor: pointer; }
.consent__check a { color: var(--lime); }
.consent__later { justify-self: center; background: none; border: 0; color: var(--muted); font: 500 .85rem var(--f-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 6px; }
#consentGo[disabled] { opacity: .45; }
@media (max-width: 720px) {
  .consent { place-items: end center; padding: 0; }
  .consent__sheet { width: 100%; border-radius: 26px 26px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); max-height: 92svh; }
}
.photo-credit { max-width: 380px; margin-top: 6px; color: var(--dim); font: 400 .7rem/1.4 var(--f-mono); text-align: center; overflow-wrap: anywhere; }
.photo-credit a { color: var(--muted); }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 110ms); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

#landing, .footer { overflow-x: clip; }

/* view switching */
body[data-view="result"] #landing { display: none; }
body.is-locked { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; gap: 56px; }
  .hero__visual { min-height: 0; padding: 20px 0 30px; }
  .steps { grid-template-columns: 1fr; }
  .pills { grid-template-columns: 1fr; }
  .result__hero { grid-template-columns: 1fr; justify-items: center; }
  .result__info { align-items: center; text-align: center; }
  .giving { align-items: center; }
  .actions { justify-content: center; }
  .result__grid { grid-template-columns: 1fr; }
  .morph__stage { max-width: 480px; }
}
@media (max-width: 720px) {
  :root { --nav-h: 60px; }
  .nav__links { display: none; }
  .headline { font-size: 15.4vw; }
  .hero__cta { width: 100%; display: grid; grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
  .orbit { width: 96px; height: 96px; right: -1%; bottom: -2%; }
  .orbit__core { width: 46px; height: 46px; font-size: 1.3rem; }
  .sticker { font-size: .66rem; border-width: 2px; }
  .hero__visual .sticker--lime { --x: -1% !important; }
  .hero__visual .sticker--pink { --x: 50% !important; --y: -3% !important; }
  .hero__visual .sticker--white { --x: 74% !important; }
  .hero__visual .sticker--blue { --x: 0% !important; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .actions .btn--primary { grid-column: 1 / -1; }
  .actions .btn { width: 100%; padding-inline: .8em; }
  .scan__duo { grid-template-columns: 1fr 1fr; gap: 10px; }
  .scan__eq { display: none; }
  .terminal { font-size: .74rem; min-height: 6.4em; }
  .footer__cta { justify-content: center; text-align: center; }
}
@media (hover: none) {
  .tilt-hint { visibility: hidden; }
  .hero__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .grain { display: none; }
  .mesh__band { display: none; }
  .reveal { opacity: 1; transform: none; }
  .scan { clip-path: none; }
}

/* "try another pic" sheet: upload or camera */
.choice__sheet { gap: 12px; }
.choice__sheet .consent__title { margin-bottom: 6px; }