/* Foil site. One dark stage, like the app. Fonts are self-hosted: no third-party requests. */
@font-face { font-family: "Hanken Grotesk"; src: url(/fonts/hanken_grotesk.woff) format("woff"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(/fonts/bodoni_moda.woff) format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(/fonts/bodoni_moda_italic.woff) format("woff"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #0b0b0d;
  --graphite: #141418;
  --line: #26262d;
  --snow: #f1f0f4;
  --mist: #a9a7b2;
  --gold: #e3c78a;
  --gold-grad: linear-gradient(100deg, #b8904a 0%, #f2dfb0 40%, #c9a45c 70%, #f7e7c1 100%);
  --holo-grad: linear-gradient(115deg, #9fe7f5, #c6a7ff, #ffb3d9, #ffe6a7, #9fe7f5);
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
}

* { box-sizing: border-box; }
.sprite { position: absolute; }
html { background: var(--ink); }
body { margin: 0; color: var(--snow); font: 18px/1.55 var(--sans); background: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 20px; }

/* The italic f hangs past its box: padding keeps the whole glyph inside the painted gradient. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 44px; height: 44px; margin-left: -8px; }
/* The italic f reaches far past its box and background-clip: text paints only inside it: wide padding, cancelled by margins. */
.wordmark { display: inline-block; font: italic 600 36px/1.25 var(--display); padding: .12em .34em .34em .46em; margin: -.12em -.34em -.34em -.3em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-decoration: none; }
.top { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; }
.links { display: flex; gap: 24px; }
.top a.nav { color: var(--mist); text-decoration: none; font-size: 16px; }
.top a.nav:hover { color: var(--snow); }

h1, h2 { font-family: var(--sans); font-weight: 750; letter-spacing: -.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(46px, 8vw, 92px); }
h2 { font-size: clamp(34px, 5.6vw, 64px); }
.gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: var(--mist); font-size: clamp(19px, 2.2vw, 24px); margin: 22px 0 0; }

.soon { display: inline-flex; padding: 15px 24px; border-radius: 999px; background: var(--gold-grad); color: #1a1406; font-weight: 700; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 34px; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; min-height: min(760px, 86vh); padding-block: 20px 60px; }
.fan { --cap: 240px; container-type: inline-size; position: relative; height: 520px; }
/* Side cards reach 1.19 card widths from the centre, so this keeps the whole fan inside its column. */
.fan .card { --cw: min(var(--cap), calc((50cqi + 12px) / 1.19)); }
.fan > div { position: absolute; left: 50%; top: 50%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fan > div { cursor: pointer; }
.fan .f1 { transform: translate(-106%, -44%) rotate(-10deg); }
.fan .f2 { transform: translate(-50%, -54%); z-index: 2; }
.fan .f3 { transform: translate(6%, -44%) rotate(10deg); }

/* ---------- Cards (the app's design, decluttered) ---------- */
.card { --cw: 240px; width: var(--cw); aspect-ratio: 53.98 / 85.6; position: relative; border-radius: calc(var(--cw) * .07); transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.card.live { transition: transform .08s linear; }
.face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: rotateY(calc(var(--turn, 0deg) + var(--side, 0deg))); transition: transform .65s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 44px 70px -34px #000, inset 0 0 0 1px rgba(255, 255, 255, .09); }
.face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,.34), transparent 24%, transparent 76%, rgba(255,255,255,.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.grain { position: absolute; inset: 0; z-index: 1; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.iris { position: absolute; inset: 0; z-index: 1; opacity: 0; background: var(--holo-grad); background-size: 300% 300%; background-position: var(--mx, 50%) 50%; mix-blend-mode: multiply; }
/* The shine: one sweep left to right, a rest, then again. A loop, never a back-and-forth. */
.sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.34) 47%, rgba(255,255,255,.06) 53%, transparent 64%);
  background-size: 320% 100%; background-position: 100% 0; animation: sweep 4.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.card.live .sheen { animation: none; background-position: var(--mx) 0; }
@keyframes sweep { 0% { background-position: 100% 0; } 56%, 100% { background-position: 0% 0; } }

.body { position: relative; z-index: 3; height: 100%; padding: calc(var(--cw) * .075); display: flex; flex-direction: column; color: var(--tx); }
.row { display: flex; justify-content: space-between; align-items: center; }
.glyph { width: calc(var(--cw) * .09); height: calc(var(--cw) * .09); color: var(--tx); }
.stamp { font: italic 600 calc(var(--cw) * .062)/1.2 var(--display); padding: .12em .34em .34em .46em; margin: -.12em -.34em -.34em -.46em; opacity: .75;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plate { margin-top: calc(var(--cw) * .07); aspect-ratio: 1; border-radius: calc(var(--cw) * .05); overflow: hidden; background: #f7f7f5; position: relative; z-index: 4; }
.plate img { width: 100%; height: 100%; }
.handle { margin-top: auto; font: 500 calc(var(--cw) * .092)/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* The back, as in the app: what the camera gets, then the card's actions. Both faces turn together. */
.card.flipped { --turn: 180deg; }
.back { --side: 180deg; }
.back .row { justify-content: flex-start; gap: calc(var(--cw) * .035); }
.name { font: 700 calc(var(--cw) * .056)/1 var(--sans); }
.gets { margin: calc(var(--cw) * .08) 0 calc(var(--cw) * .02); font-size: calc(var(--cw) * .045); line-height: 1.2; opacity: .7; }
.payload { margin: 0; padding: calc(var(--cw) * .035); border-radius: calc(var(--cw) * .03); background: color-mix(in srgb, var(--tx) 10%, transparent);
  font: 500 calc(var(--cw) * .046)/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
.actions { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--cw) * .025); }
.actions span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--cw) * .008); padding-block: calc(var(--cw) * .03);
  border-radius: calc(var(--cw) * .04); background: color-mix(in srgb, var(--tx) 10%, transparent); font: 500 calc(var(--cw) * .042)/1.2 var(--sans); white-space: nowrap; }
.actions svg { width: calc(var(--cw) * .07); height: calc(var(--cw) * .07); }

.m-obsidian { --tx: #ededf2; --foil: linear-gradient(100deg, #9c9ca6, #f4f4f8 45%, #8e8e98 70%, #e2e2ea); }
.m-obsidian .face { background: linear-gradient(155deg, #2a2a33, #0c0c0f 55%, #1a1a20); }
.m-ig { --tx: #fff; --foil: linear-gradient(#fff, #fff); }
.m-ig .face { background: linear-gradient(35deg, #feda75 0%, #fa7e1e 22%, #d62976 50%, #962fbf 76%, #4f5bd5 100%); }
.m-yt { --tx: #fff; --foil: linear-gradient(#fff, #fff); }
.m-yt .face { background: linear-gradient(160deg, #ff3355, #b3001b); }
.m-holo { --tx: #1c1a24; --foil: linear-gradient(#1c1a24, #1c1a24); }
.m-holo .face { background: linear-gradient(160deg, #f7f6fa, #dad8e3); }
.m-holo .iris { opacity: .6; }
.m-holo .sheen, .m-champagne .sheen { mix-blend-mode: overlay; }
.m-champagne { --tx: #6e511e; --foil: linear-gradient(100deg, #6e511e, #b08a45 40%, #7a5a22 65%, #9c7838); }
.m-champagne .face { background: linear-gradient(150deg, #f4ead3, #dcc49a 58%, #ebdbb8); }
.m-carbon { --tx: #e4e4e8; --foil: linear-gradient(100deg, #8e8e96, #f0f0f4 45%, #85858d 70%, #dadae0); }
.m-carbon .face { background: repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 3px, transparent 3px 6px),
  repeating-linear-gradient(-45deg, rgba(0,0,0,.4) 0 3px, transparent 3px 6px), linear-gradient(160deg, #2e2e34, #101012); }

/* ---------- Story ---------- */
.story { padding-block: 16vh; }
.quote { font-size: clamp(34px, 6vw, 72px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 .35em; }
.quote:nth-child(2) { color: #cfcdd6; padding-left: 8%; }
.quote:nth-child(3) { color: #8f8d98; padding-left: 16%; }
.say { color: var(--gold); font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; margin-top: 1.4em; }

.apps { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 44px; }
.app { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; color: #fff; }
.app svg { width: 34px; height: 34px; }
.app.ig { background: linear-gradient(35deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5); }
.app.tt { background: #111; box-shadow: inset 0 0 0 1px #333; }
.app.fb { background: #1877f2; }
.app.wa { background: #25d366; }
.app.x { background: #000; box-shadow: inset 0 0 0 1px #333; }
.app.tg { background: #2aabee; }
.apps-note { color: var(--mist); margin-top: 22px; }

/* Deck scene: scrolling down slides the deck sideways, like swiping in the app. */
.deck-scene { height: 360vh; }
.sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 44px; overflow: hidden; }
.sticky h2 { padding-inline: 20px; max-width: 1100px; margin: 0 auto; width: 100%; }
.track { --cw: 250px; display: flex; gap: 30px; padding-inline: calc(50vw - 125px); width: max-content; will-change: transform; }
.track .card { --cw: 250px; flex: none; }
.deck-hint { text-align: center; color: var(--mist); margin: 0; }

.scan { display: grid; grid-template-columns: auto 1fr; gap: 70px; align-items: center; padding-block: 16vh; }
.viewfinder { position: relative; padding: 26px; }
.viewfinder i { position: absolute; width: 42px; height: 42px; border: 3px solid var(--gold); animation: aim 2.4s ease-in-out infinite; }
.viewfinder i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.viewfinder i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.viewfinder i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.viewfinder i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
@keyframes aim { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.94); opacity: .6; } }
.scan p { color: var(--mist); font-size: 20px; margin-top: 18px; }

.private { padding-block: 12vh; text-align: center; }
.private p { color: var(--mist); margin-top: 16px; font-size: 20px; }
.lock { width: 64px; height: 64px; margin: 0 auto 28px; color: var(--gold); }

.price { padding-block: 16vh 12vh; text-align: center; }
.price h2 { font-size: clamp(44px, 8vw, 96px); }
.price p { color: var(--mist); font-size: 20px; margin: 18px 0 26px; }
.price .eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
.pro { list-style: none; padding: 0; margin: 0 auto 38px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 700px; }
.pro li { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--graphite); color: var(--snow); font-size: 16px; }

.legal summary { cursor: pointer; }
.legal summary:hover { color: var(--snow); }
.legal p { margin: 8px 0 0; max-width: 560px; }
footer { border-top: 1px solid var(--line); padding-block: 26px 40px; color: var(--mist); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--snow); }

/* ---------- Scroll reveals (browsers without scroll timelines simply show everything) ---------- */
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
  @keyframes rise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
}

/* ---------- Privacy page ---------- */
.doc { max-width: 700px; padding-block: 30px 40px; }
.doc h1 { font-size: clamp(38px, 6vw, 56px); }
.doc h2 { font-size: 24px; letter-spacing: -.02em; margin-top: 38px; }
.doc p, .doc li { color: #d3d1da; }
.doc .updated { color: var(--mist); font-size: 14px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 10px; }
  .fan { height: 440px; --cap: 200px; }
  .scan { grid-template-columns: 1fr; gap: 30px; justify-items: center; text-align: center; }
  .quote:nth-child(2), .quote:nth-child(3) { padding-left: 0; }
}
@media (max-width: 420px) {
  .fan { height: 380px; --cap: 172px; }
  .viewfinder .card { --cw: 210px; }
  .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sheen, .viewfinder i, .reveal, .track { animation: none !important; }
  .card, .face { transition: none; }
  .deck-scene { height: auto; }
  .sticky { position: static; height: auto; padding-block: 12vh; }
  .track { width: auto; overflow-x: auto; }
}