@font-face { font-family: "Space Grotesk"; src: url(assets/fonts/SpaceGrotesk-latin-variable.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: Inter; src: url(assets/fonts/Inter-latin-variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #020617; --text: #e2e8f0; --text-2: #cbd5e1; --muted: #94a3b8;
  --blu: #00a2ff; --cyan: #22d3ee; --red: #f87171; --line: rgba(148, 163, 184, .22);
  --display: "Space Grotesk", "Segoe UI Variable Display", sans-serif;
  --body: Inter, "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; border-radius: 4px; }

/* backdrop: fox loop, shade for legibility, film grain, letterbox bars that open on load */
.t-bg { position: fixed; top: -18vh; left: 0; width: 100%; height: 100vh; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 96%); mask-image: linear-gradient(180deg, #000 62%, transparent 96%); z-index: -3; filter: saturate(1.05) contrast(1.05); animation: bgIn 2.4s ease-out both; }
.t-shade { position: fixed; inset: 0; z-index: -2; background:
  radial-gradient(120% 80% at 50% 35%, transparent 30%, rgba(2,6,23,.55) 70%, rgba(2,6,23,.92) 100%),
  linear-gradient(180deg, rgba(2,6,23,.35) 0%, transparent 25%, rgba(2,6,23,.55) 58%, rgba(2,6,23,.94) 100%); }
.t-grain { position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1s steps(6) infinite; }
.t-bars i { position: fixed; left: 0; right: 0; height: 50vh; background: #000; z-index: 50; pointer-events: none; animation: barOpen 1.8s cubic-bezier(.7,0,.2,1) .2s both; }
.t-bars i:first-child { top: 0; transform-origin: top; }
.t-bars i:last-child { bottom: 0; transform-origin: bottom; }

@keyframes bgIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes grain { 0% { transform: translate(0,0); } 33% { transform: translate(-3%,2%); } 66% { transform: translate(2%,-3%); } 100% { transform: translate(-1%,1%); } }
@keyframes barOpen { from { transform: scaleY(1); } to { transform: scaleY(.08); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.t-top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: max(5vh, 18px) var(--gutter) 0; font: 500 13px/1 var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--text-2); z-index: 5; animation: rise 1s ease 1.6s both; }
.t-mark { display: inline-flex; align-items: center; gap: 10px; }
.t-mark img { border-radius: 6px; }
.t-date { color: var(--cyan); }

.t-main { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 120px var(--gutter) 72px; gap: clamp(14px, 2.4vh, 26px); }

.t-clue { font: 400 clamp(15px, 1.6vw, 19px)/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); min-height: 1.4em; transition: opacity .6s ease, filter .6s ease; animation: rise 1s ease 1.9s both; }
.t-clue.out { opacity: 0; filter: blur(6px); }

.t-count { display: flex; gap: clamp(10px, 3vw, 44px); animation: rise 1.1s ease 2.1s both; }
.t-unit { display: flex; flex-direction: column; align-items: center; min-width: clamp(64px, 12vw, 150px); }
.t-unit b { font: 600 clamp(44px, min(8vw, 11vh), 112px)/.95 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: #f8fafc; text-shadow: 0 0 34px rgba(0,162,255,.45), 0 0 2px rgba(255,255,255,.4); }
.t-unit b.tick { animation: tick .5s ease; }
.t-unit span { margin-top: 10px; font: 500 11px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
@keyframes tick { 0% { opacity: .2; filter: blur(4px); transform: translateY(-6px); } 100% { opacity: 1; filter: none; transform: none; } }

.t-form, .t-sealed { width: min(640px, 100%); display: flex; flex-direction: column; gap: 12px; animation: rise 1s ease 2.4s both; }
.t-q { font: 500 clamp(20px, 2.4vw, 28px)/1.2 var(--display); letter-spacing: -.01em; }
.t-field { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 4px 0; transition: border-color .2s; }
.t-field:focus-within { border-color: var(--blu); box-shadow: 0 1px 0 0 var(--blu); }
.t-field input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: 400 clamp(17px, 1.8vw, 20px)/1.4 var(--body); padding: 12px 2px; text-align: left; }
.t-field input::placeholder { color: rgba(203,213,225,.45); }
.t-field input:focus { outline: none; }
.t-next, .t-seal, .t-copy { border: 1px solid rgba(0,162,255,.55); background: rgba(0,162,255,.12); color: var(--text); border-radius: 999px; cursor: pointer; font: 500 15px/1 var(--body); transition: background .15s, transform .15s; }
.t-next { width: 44px; height: 44px; font-size: 20px; }
.t-seal { padding: 13px 20px; white-space: nowrap; }
.t-next:hover, .t-seal:hover, .t-copy:hover { background: rgba(0,162,255,.28); }
.t-seal[disabled] { opacity: .55; cursor: progress; }
.t-step2:not([hidden]) { animation: rise .6s ease both; }
.t-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.t-fine { font-size: 13px; color: var(--muted); }
.t-fine b { color: var(--text-2); font-weight: 600; }
.t-err { color: var(--red); font-size: 14px; min-height: 1.2em; }

.t-sealed { align-items: center; animation-delay: .1s; }
.t-sealed-k { font: 600 clamp(24px, 3vw, 34px)/1.1 var(--display); }
.t-sealed-g { color: var(--text-2); font-style: italic; max-width: 52ch; overflow-wrap: anywhere; }
.t-code { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding: 14px 16px 14px 22px; border: 1px solid rgba(0,162,255,.45); border-radius: 14px; background: rgba(2,6,23,.6); backdrop-filter: blur(10px); }
.t-code-v { font: 600 clamp(24px, 4vw, 36px)/1 var(--display); letter-spacing: .12em; color: #f8fafc; text-shadow: 0 0 22px rgba(0,162,255,.55); }
.t-copy { padding: 10px 16px; font-size: 14px; }
.t-sealed-p { color: var(--cyan); font-weight: 600; }

.t-foot { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 16px; padding: 0 var(--gutter) max(3vh, 14px); font-size: 12px; color: var(--muted); animation: rise 1s ease 2.8s both; pointer-events: none; }

.t-reveal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #000; animation: flash 2.6s ease both; }
.t-reveal p { font: 600 clamp(40px, 8vw, 110px)/1 var(--display); letter-spacing: -.03em; color: #fff; text-shadow: 0 0 60px rgba(0,162,255,.8); animation: rise 1.2s ease .5s both; }
@keyframes flash { 0% { background: #fff; } 15% { background: #000; } }

@media (max-width: 640px) {
  .t-main { padding-bottom: 84px; }
  .t-field:has(.t-seal) { flex-wrap: wrap; border: 0; box-shadow: none; }
  .t-field:has(.t-seal) input { border-bottom: 1px solid var(--line); flex-basis: 100%; }
  .t-seal { width: 100%; }
  .t-foot { flex-direction: column; gap: 4px; text-align: center; }
  .t-top { letter-spacing: .22em; }
}
@media (max-height: 640px) { .t-foot { position: static; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .t-bars { display: none; }
}