/* PULLMINT landing. Default = the static printed version (no WebGL, reduced motion, no JS);
   html.has-3d = one WebGL canvas, the words live on the sheet, HTML keeps the navbar, the gate prompt and the ledger cards. */
@font-face { font-family: "Gloock"; src: url("/assets/fonts/gloock-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin-wght.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gloock Fallback"; src: local("Georgia"); size-adjust: 104%; ascent-override: 92%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"); size-adjust: 96%; }

:root {
  --night: #120D0B; --night-2: #1C1512; --night-3: #2A201B;
  --ivory: #F1E8D6; --ivory-2: #D9CBB0;
  --oxblood: #7A1E24; --ox-l: #A3343B;
  --copper: #B8734A; --copper-l: #D99A6C; --lamp: #F2C879;
  --display: "Gloock", "Gloock Fallback", Georgia, serif;
  --sans: "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --nav-h: 54px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--ivory); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }
.pm-skiplink { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ivory); color: var(--oxblood); padding: 8px 12px; text-decoration: none; font-weight: 600; }
.pm-skiplink:focus { top: 10px; }

/* ── navbar ─────────────────────────────────────────────── */
.pm-nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 40; display: flex; align-items: center; gap: 22px; padding: 0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-left));
  background: linear-gradient(to bottom, rgba(18, 13, 11, .92), rgba(18, 13, 11, .55) 70%, rgba(18, 13, 11, 0)); }
.pm-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: linear-gradient(to right, rgba(184, 115, 74, .55) calc(var(--prog, 0) * 100%), rgba(184, 115, 74, .14) calc(var(--prog, 0) * 100%)); }
.pm-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 400 21px/1 var(--display); letter-spacing: .005em; color: var(--ivory); }
.pm-brand .pm-mark { flex: none; display: inline-flex; width: 28px; height: 28px; color: var(--ivory); }
.pm-brand .pm-mark svg { width: 100%; height: 100%; }
.pm-links { display: flex; gap: 20px; }
.pm-links a { text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory-2); padding: 6px 0; }
.pm-links a:hover { color: var(--ivory); }
.pm-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pm-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--ivory-2); background: none; border: 0; cursor: pointer; text-decoration: none; }
.pm-ic svg { width: 17px; height: 17px; }
.pm-ic:hover { color: var(--ivory); }
.pm-ca-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; margin-right: 6px; border: 1px solid rgba(184, 115, 74, .5); background: rgba(18, 13, 11, .5); color: var(--ivory-2); cursor: pointer; font-size: 12px; }
.pm-ca-chip .lbl { font-weight: 600; letter-spacing: .14em; color: var(--copper-l); font-size: 11px; }
.pm-ca-chip svg { width: 13px; height: 13px; }
.pm-ca-chip:hover { border-color: var(--copper-l); color: var(--ivory); }
@media (max-width: 720px) {
  .pm-nav { gap: 14px; padding: 0 10px 0 12px; }
  .pm-brand span { display: none; }
  .pm-links { gap: 13px; }
  .pm-links a { font-size: 11px; letter-spacing: .1em; }
  .pm-ca-chip .addr { display: none; }
  .pm-ca-chip { padding: 0 8px; margin-right: 0; }
  .pm-ic { width: 30px; }
}
@media (max-width: 360px) { .pm-links a:first-child { display: none; } }

/* ── shared print bits: kickers, buttons, index cards ───── */
.kick { margin: 0 0 10px; font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--copper-l); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid var(--oxblood); text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: .04em; cursor: pointer; }
.btn-ink { background: var(--oxblood); color: var(--ivory); }
.btn-ink:hover { background: var(--ox-l); border-color: var(--ox-l); }
.pm-toast { position: fixed; left: 50%; bottom: 26px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; transition: .25s; background: var(--ivory); color: var(--oxblood); padding: 10px 16px; font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); pointer-events: none; }
.pm-toast.show { opacity: 1; transform: translate(-50%, 0); }

.pm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card { position: relative; background: var(--ivory); color: var(--oxblood); padding: 22px 22px 20px; min-width: 0;
  background-image: linear-gradient(to bottom, transparent 46px, var(--oxblood) 46px, var(--oxblood) 48px, transparent 48px), repeating-linear-gradient(to bottom, transparent 0 29px, rgba(184, 115, 74, .28) 29px 30px);
  background-position: 0 0, 0 48px; background-repeat: no-repeat, repeat-y;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 14px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3); }
.card .kick { color: var(--oxblood); opacity: .8; margin-bottom: 22px; }
.card h2 { margin: 0 0 12px; font: 400 44px/1 var(--display); color: var(--oxblood); }
.card .when { margin: 0 0 10px; font: 400 21px/1.2 var(--display); }
.card .go { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; font: 400 21px/1.2 var(--display); text-decoration: none; color: var(--oxblood); border-bottom: 1px dotted rgba(122, 30, 36, .35); }
.card .go i { font-style: normal; font-family: var(--sans); font-size: 15px; transition: transform .2s; }
.card .go:hover i { transform: translateX(4px); }
.card-token { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 22px; align-items: center; }
.card-token .kick { grid-column: 1 / -1; }
.card-token h2 { margin: 0; }
.card-token .pm-ca-row { margin: 0; }
.pm-ca-row { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 100%; margin: 4px 0 16px; padding: 10px 12px; background: rgba(122, 30, 36, .06); border: 1px solid rgba(122, 30, 36, .4); color: var(--oxblood); cursor: pointer; text-align: left; }
.pm-ca-row .lbl { font: 600 11px/1 var(--sans); letter-spacing: .14em; }
.pm-ca-row .addr { font: 500 12.5px/1.3 var(--sans); overflow-wrap: anywhere; flex: 1; min-width: 0; }
.pm-ca-row .ic svg { width: 16px; height: 16px; display: block; }
.pm-ca-row:hover { background: rgba(122, 30, 36, .12); }
.pm-cd { display: flex; gap: 8px; }
.pm-cd-c { display: grid; justify-items: center; min-width: 52px; padding: 8px 4px 6px; border: 1px solid rgba(122, 30, 36, .45); }
.pm-cd-c b { font: 400 26px/1 var(--display); }
.pm-cd-c i { font: 600 9.5px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; font-style: normal; opacity: .75; }
.pm-cd-note { font: 400 21px/1.2 var(--display); }

/* ── static version (default) ───────────────────────────── */
html:not(.has-3d) .only-3d, html:not(.has-3d) #press, html:not(.has-3d) .pm-load { display: none; }
html:not(.has-3d) body { background:
  linear-gradient(to bottom, rgba(18, 13, 11, .25), rgba(18, 13, 11, .7) 52vh, var(--night) 88vh) no-repeat,
  url("/assets/landing/keyart-1600.webp") center top / 100% auto no-repeat, var(--night); }
@media (max-width: 900px) { html:not(.has-3d) body { background-image: linear-gradient(to bottom, rgba(18, 13, 11, .2), rgba(18, 13, 11, .75) 40vh, var(--night) 70vh), url("/assets/landing/keyart-900.webp"); background-size: auto, 160% auto; } }
html:not(.has-3d) .pm-outline { max-width: 920px; margin: 0 auto; padding: calc(var(--nav-h) + 30vh) 18px 24px; display: grid; gap: 22px; outline: none; }
html:not(.has-3d) .st { position: relative; background: var(--ivory); color: var(--oxblood); padding: clamp(26px, 5vw, 54px); box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  outline: 1px solid rgba(122, 30, 36, .55); outline-offset: -14px; }
html:not(.has-3d) .st::after { content: ""; position: absolute; inset: 18px; border: 2px solid rgba(122, 30, 36, .8); pointer-events: none; }
html:not(.has-3d) .st .kick { color: var(--oxblood); }
html:not(.has-3d) .st h1, html:not(.has-3d) .st h2 { margin: 0 0 14px; font: 400 clamp(34px, 5.4vw, 62px)/1.02 var(--display); letter-spacing: -.005em; }
html:not(.has-3d) .st p { max-width: 36em; margin: 0 0 8px; font-size: clamp(16px, 1.6vw, 19px); }
html:not(.has-3d) .st-hero { background: transparent; color: var(--ivory); box-shadow: none; outline: 0; padding-left: 0; padding-right: 0; }
html:not(.has-3d) .st-hero::after { display: none; }
html:not(.has-3d) .st-hero .kick { color: var(--copper-l); }
html:not(.has-3d) .st-hero h1 { font-size: clamp(42px, 7vw, 86px); }
html:not(.has-3d) .st .live { margin-top: 18px; padding: 12px 14px; border: 1px dashed rgba(122, 30, 36, .6); font-size: 15px; }
html:not(.has-3d) .st .live .lbl { display: block; font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
html:not(.has-3d) .pm-ledger { max-width: 920px; margin: 0 auto; padding: 10px 18px 80px; }
@media (max-width: 760px) { .pm-cards { grid-template-columns: 1fr; } .card-token { grid-template-columns: 1fr auto; row-gap: 12px; } .card-token .ca { grid-column: 1 / -1; grid-row: 3; } }

/* ── 3D version ─────────────────────────────────────────── */
html.has-3d body { overscroll-behavior: none; }
html.has-3d.in-gate, html.has-3d.in-gate body { overflow: hidden; height: 100%; }
html.has-3d #press { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; touch-action: pan-y; }
html.has-3d .pm-track { position: relative; z-index: -1; pointer-events: none; }
/* the words are on the sheet: keep the outline for assistive tech only */
html.has-3d .pm-outline { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* loader veil */
.pm-load { position: fixed; inset: 0; z-index: 60; background: var(--night); display: grid; place-items: center; transition: opacity .9s ease .1s, visibility 0s linear 1s; }
.pm-load i { position: absolute; left: 50%; top: calc(50% + 46px); width: 120px; height: 1px; margin-left: -60px; background: rgba(184, 115, 74, .2); }
.pm-load i::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, .05)); background: var(--copper); transition: transform .3s; }
.pm-load-mark { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(184, 115, 74, .6); box-shadow: 0 0 0 6px rgba(184, 115, 74, .08), 0 0 60px rgba(242, 200, 121, .12); animation: pm-breathe 2.4s ease-in-out infinite; }
@keyframes pm-breathe { 50% { box-shadow: 0 0 0 10px rgba(184, 115, 74, .04), 0 0 80px rgba(242, 200, 121, .2); } }
html.ready .pm-load { opacity: 0; visibility: hidden; pointer-events: none; }

/* gate */
.pm-gate { position: fixed; inset: 0; z-index: 20; display: none; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
html.has-3d.in-gate .pm-gate { display: block; }
.pm-gate.grab { cursor: grabbing; }
.pm-ring { position: absolute; left: 0; top: 0; width: 200px; height: 200px; pointer-events: none; overflow: visible; opacity: .0; transition: opacity 1.2s ease 1.2s; }
html.ready .pm-ring { opacity: 1; }
.pm-ring.flip { scale: -1 1; }
.pm-ring circle { fill: none; transform: rotate(-90deg); transform-origin: 100px 100px; }
.pm-ring .trk { stroke: rgba(242, 200, 121, .22); stroke-width: .8; stroke-dasharray: 1.5 3.2; vector-effect: non-scaling-stroke; }
.pm-ring .val { stroke: var(--lamp); stroke-width: 1.6; stroke-dasharray: 100 100; stroke-dashoffset: 100; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(242, 200, 121, .6)); }
.pm-ring .arr { fill: none; stroke: var(--lamp); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .9; transform-origin: 100px 100px; animation: pm-nudge 2.8s ease-in-out infinite; }
.pm-gate.touched .pm-ring .arr { animation: none; opacity: 0; transition: opacity .6s; }
@keyframes pm-nudge { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(24deg); } }
.pm-gate-copy { position: absolute; left: 0; right: 0; bottom: max(34px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 6px; text-align: center; pointer-events: none; padding: 0 18px;
  opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease 1s, transform 1.2s ease 1s; }
html.ready .pm-gate-copy { opacity: 1; transform: none; }
.pm-gate-kicker { margin: 0; font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(217, 154, 108, .85); }
.pm-gate-title { margin: 0; font: 400 clamp(34px, 4.6vw, 56px)/1.05 var(--display); color: var(--ivory); text-shadow: 0 2px 24px rgba(0, 0, 0, .8); }
.pm-gate-how { margin: 2px 0 6px; font-size: 13px; color: var(--ivory-2); opacity: .8; }
.pm-gate.touched .pm-gate-title, .pm-gate.touched .pm-gate-how { opacity: .45; transition: opacity .8s; }
.pm-skip { pointer-events: auto; background: none; border: 0; border-bottom: 1px solid rgba(217, 203, 176, .4); padding: 4px 2px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory-2); cursor: pointer; }
.pm-skip:hover { color: var(--ivory); border-color: var(--ivory); }
.pm-turn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pm-turn:focus-visible { position: fixed; inset: auto auto 50% 50%; width: 1px; height: 1px; clip-path: none; outline-offset: 60px; }
@media (max-width: 640px) { .pm-gate-copy { bottom: max(22px, env(safe-area-inset-bottom)); } .pm-gate-kicker { font-size: 10px; letter-spacing: .16em; } }

/* scroll hint after the gate */
.pm-hint { position: fixed; left: 50%; bottom: 22px; z-index: 10; margin: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font: 600 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ivory-2); opacity: 0; transition: opacity .8s; pointer-events: none; }
.pm-hint i { width: 1px; height: 28px; background: linear-gradient(var(--ivory-2), transparent); animation: pm-drip 2s ease-in-out infinite; transform-origin: top; }
@keyframes pm-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.pm-hint.show { opacity: .8; }

/* ledger cards over the filed sheet */
html.has-3d .pm-ledger { position: fixed; left: 0; top: 0; z-index: 15; width: 600px; height: 420px; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; pointer-events: none; }
html.has-3d .pm-ledger.on { opacity: 1; visibility: visible; transition: opacity .9s ease .1s; pointer-events: auto; }
html.has-3d .pm-ledger .pm-cards { width: min(100%, 860px); }
html.has-3d .pm-ledger .card { transform: translateY(16px) rotate(var(--r, 0deg)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
html.has-3d .pm-ledger.on .card { transform: rotate(var(--r, 0deg)); }
html.has-3d .pm-ledger .card:nth-child(1) { --r: -.6deg; transition-delay: .05s; }
html.has-3d .pm-ledger .card:nth-child(2) { --r: .8deg; transition-delay: .12s; }
html.has-3d .pm-ledger .card:nth-child(3) { --r: -.4deg; transition-delay: .19s; }
html.has-3d .pm-ledger .card:nth-child(4) { --r: .5deg; transition-delay: .26s; }
@media (max-width: 760px) {
  html.has-3d .pm-ledger .pm-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  html.has-3d .pm-ledger .card { padding: 14px 13px 12px; background-image: linear-gradient(to bottom, transparent 36px, var(--oxblood) 36px, var(--oxblood) 37px, transparent 37px), repeating-linear-gradient(to bottom, transparent 0 25px, rgba(184, 115, 74, .25) 25px 26px); background-position: 0 0, 0 37px; }
  html.has-3d .pm-ledger .card-token { grid-column: 1 / -1; grid-template-columns: 1fr auto; row-gap: 10px; }
  html.has-3d .pm-ledger .card-token .ca { grid-column: 1 / -1; grid-row: 3; }
  html.has-3d .pm-ledger .card-launch { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 10px; }
  html.has-3d .pm-ledger .card-launch .kick { grid-column: 1 / -1; }
  html.has-3d .pm-ledger .card-launch .when { margin: 0 0 4px; }
  html.has-3d .pm-ledger .card .kick { margin-bottom: 16px; font-size: 9.5px; }
  html.has-3d .pm-ledger .card h2 { font-size: 32px; }
  html.has-3d .pm-ledger .card .go { font-size: 17px; padding: 6px 0; }
  html.has-3d .pm-ledger .card .when { font-size: 16px; }
  html.has-3d .pm-ledger .pm-cd { gap: 4px; }
  html.has-3d .pm-ledger .pm-cd-c { min-width: 40px; padding: 5px 2px 4px; }
  html.has-3d .pm-ledger .pm-cd-c b { font-size: 19px; }
  html.has-3d .pm-ledger .pm-cd-c i { font-size: 8px; letter-spacing: .08em; }
  html.has-3d .pm-ledger .btn { min-height: 40px; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: .01ms !important; } }
.card h2 .dollar { font-family: var(--sans); font-weight: 500; font-size: .62em; vertical-align: .38em; margin-right: .06em; }