/* Coldfoil theme: purple foil + cyan light, display face Anton. Overrides the page's Tailwind tokens (every utility reads them). */
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

:root{
  --font-display:"Anton","Big Shoulders","Big Shoulders Display","Oswald","Arial Narrow",sans-serif;
  --color-amber:#b16cff;--color-amber-ink:#5b21b6;--color-amber-soft:#b16cff33;--color-amber-glow:#b16cff1a;--color-amber-wash:#5b21b626;
  --color-mint:#22e5ff;--color-mint-ink:#0e7490;--color-mint-soft:#22e5ff2b;--color-mint-glow:#22e5ff14;
  --color-accent:#22e5ff;--color-accent-2:#b16cff;--color-success:#22e5ff;--color-warning:#b16cff;--color-stamp-ink:#a21caf;
  --color-text-1:#f1f3ff;--color-text-lead:#cfd6ea;--color-text-2:#a4acc4;--color-text-label:#7f86a0;
  --color-paper:#eef0ff;--color-paper-raised:#f6f7ff;--color-paper-sunk:#dfe2f5;--color-paper-line:#c9cde6;--color-paper-line-loud:#8b90b3;
  --color-base:#0b0a12;--color-bg:#0b0a12;--color-void:#060509;--color-surface-1:#121019;--color-surface-2:#191624;
  --color-border:#221f31;--color-border-strong:#2f2a42;--color-border-loud:#7d78a3;--color-grid-line:#c9b8ff0c;
  --cf-cyan:#22e5ff;--cf-violet:#b16cff;--cf-violet-deep:#6d28d9;--cf-glow:rgba(177,108,255,.45);
}
html{background:#0b0a12}
body{background:var(--color-base)}

/* Display headings in Anton: slightly tighter and smaller than the condensed face they replace */
h1,h2,h3,.font-display,.cf-big,.cf-h,.cf-shop__head h2{font-family:var(--font-display);letter-spacing:.005em}
#hero h1{font-size:clamp(54px,8.9vw,138px);line-height:.94;letter-spacing:.006em;will-change:transform}
#hero h1>span{-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;animation:cf-breathe 5.5s ease-in-out infinite}
#hero h1>span:nth-child(1),#hero h1>span:nth-child(3){background-image:linear-gradient(180deg,#ffffff 0%,#e4ecff 40%,#a9dcff 78%,#7fcfff 100%);filter:drop-shadow(0 0 16px rgba(127,207,255,.28)) drop-shadow(0 2px 0 rgba(0,0,0,.35))}
#hero h1>span:nth-child(2){background-image:linear-gradient(180deg,#f0dcff 0%,#c88cff 38%,#9b4dff 72%,#6d28d9 100%);filter:drop-shadow(0 0 22px rgba(177,108,255,.5)) drop-shadow(0 2px 0 rgba(0,0,0,.35));animation:cf-breathe 5.5s ease-in-out infinite,cf-flicker 3.2s steps(1) 1.1s 1}
#hero h1>span:nth-child(3){animation-delay:.9s}
@keyframes cf-breathe{0%,100%{opacity:1}50%{opacity:.92}}
@keyframes cf-flicker{0%,100%{opacity:1}6%{opacity:.55}8%{opacity:1}11%{opacity:.7}13%{opacity:1}42%{opacity:1}44%{opacity:.75}46%{opacity:1}}
#hero p.text-amber{color:var(--cf-cyan);text-shadow:0 0 12px rgba(34,229,255,.45)}
#hero .bg-amber{background:var(--cf-cyan);box-shadow:0 0 10px rgba(34,229,255,.8)}
#hero dd.text-amber{color:var(--cf-cyan)}
#hero p.text-lead{color:#d7ddf0;text-shadow:0 1px 0 rgba(0,0,0,.6)}
/* the photo layer: our canvas paints the recoloured pack on top of the original picture */
.cf-hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:url(#pv-lift)}
#hero.cf-hero-ready img[data-nimg="fill"]{opacity:0}
/* ambient particles and light behind the copy */
.cf-hero-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cf-hero-fx i{position:absolute;left:var(--x);bottom:-6px;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 calc(var(--s) * 3) var(--c);opacity:0;animation:cf-float var(--d) linear var(--delay) infinite}
@keyframes cf-float{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.85}60%{opacity:.6}100%{transform:translateY(-110vh) translateX(var(--drift));opacity:0}}
.cf-hero-haze{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 55% at 72% 45%,rgba(120,50,230,.26),transparent 70%),radial-gradient(35% 40% at 20% 30%,rgba(34,229,255,.08),transparent 70%);animation:cf-haze 9s ease-in-out infinite}
@keyframes cf-haze{0%,100%{opacity:.75}50%{opacity:1}}
.cf-hero-copy{position:relative;z-index:2}
/* header: Open pack in pack colours; Connect keeps the paper outline */
header a.cf-open-pack,.cf-open-pack{background:linear-gradient(118deg,#5b21b6,#a855f7 55%,#5b21b6);color:#fff !important;border:1px solid var(--cf-cyan);box-shadow:0 0 18px rgba(168,85,247,.55),inset 0 0 0 1px rgba(255,255,255,.15);text-shadow:0 1px 0 rgba(0,0,0,.4)}
header a.cf-open-pack:hover{background:linear-gradient(118deg,#6d28d9,#c084fc 55%,#6d28d9);box-shadow:0 0 26px rgba(168,85,247,.8)}
/* section kickers and lines follow the cyan/violet pair */
.text-amber{color:var(--color-amber)}
.bg-amber{background-color:var(--color-amber)}
@media (prefers-reduced-motion:reduce){#hero h1>span,.cf-hero-fx i,.cf-hero-haze{animation:none !important}}
@media (max-width:767px){#hero h1{font-size:clamp(46px,13.5vw,88px)}}

/* ── Paper sections go dark: every "ground-paper" section (odds, proof, ship, sellback, faq) and its ink read these tokens ── */
:root{--color-paper:#100e18;--color-paper-raised:#171423;--color-paper-sunk:#0c0a12;--color-paper-line:#2a2640;--color-paper-line-loud:#5b56a0;--color-ink-1:#f1f3ff;--color-ink-2:#cbd1e8;--color-ink-3:#a4acc4;--color-mint-ink:#0f0c1b;--color-rail-off:#2a2640}
.ground-paper{background-color:#100e18 !important;background-image:radial-gradient(70% 50% at 80% 0%,rgba(120,50,230,.10),transparent 60%),radial-gradient(50% 40% at 10% 100%,rgba(34,229,255,.05),transparent 60%) !important;color:#f1f3ff}
.ground-paper+.ground-paper{border-top-color:#2a2640}
/* footer in the void with a violet seam and the outline wordmark in pack violet */
footer#footer{background:linear-gradient(180deg,#0f0c1b 0%,#120e24 100%) !important;border-top:1px solid #2a2640;box-shadow:inset 0 1px 0 rgba(177,108,255,.25)}
footer#footer div[class*="mt-20"]{color:#b16cff;-webkit-text-stroke-color:#b16cff;text-shadow:0 0 18px rgba(177,108,255,.35)}
footer#footer a{color:#cbd1e8}
footer#footer a:hover{color:#22e5ff}
/* the graded-card gallery and every link into it are gone; so is the demo rip */
#cards,a[href="#cards"],#demo [data-demo-cta],#demo .cf-hide{display:none !important}
/* demo section → the pack showcase: the render sits on its black plate, black vanishes on the dark ground */
.cf-render-img{object-fit:contain !important;mix-blend-mode:screen;filter:none !important}
#demo .demo-stage-button{cursor:pointer}
/* shelf cards with the renders */
#packs article.cf-render .pk-photo{filter:none !important;object-fit:contain;object-position:center;mix-blend-mode:screen}
#packs article.cf-render .pk-stage::before,#packs article.cf-render .pk-stage::after,#packs article.cf-render .pk-band,#packs article.cf-render .pk-vignette{display:none}
#packs article.cf-render .pk-stage{background:radial-gradient(60% 45% at 50% 55%,var(--glow,rgba(120,50,230,.35)),transparent 70%)}
#packs article.cf-render[data-pack="standard"] .pk-stage{--glow:rgba(31,61,255,.35)}
#packs article.cf-render[data-pack="curated"] .pk-stage{--glow:rgba(122,31,224,.4)}
#packs article.cf-render[data-pack="reserve"] .pk-stage{--glow:rgba(216,26,43,.35)}
#packs article.cf-render .pk-print-stripe{left:21%;right:21%;top:43%;height:auto;padding:10px 12px;background:rgba(6,6,12,.66);border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);backdrop-filter:blur(2px)}
#packs article.cf-render .pk-print-foot{left:21%;right:21%;bottom:19%}
#packs article.cf-render .pk-print-state{left:21%;right:21%;top:22%}
/* vault photos: the trio render in the frame, the torn pack as a dim backdrop */
#vault img[data-cf-swapped]{filter:none !important}
#vault [class*="-z-10"] img[data-cf-swapped]{opacity:.28;object-position:50% 50%}
/* the renders sit on their own black plate: give them a black stage so the plate edge never shows */
#packs article.cf-render .pk-stage{background-color:#000 !important;border-radius:6px;overflow:hidden}
#demo.cf-demo-done .p2-print-big,#demo.cf-demo-done .p2-print-small,#demo.cf-demo-done .p2-print-counter,#demo.cf-demo-done .p2-print-serial,#demo.cf-demo-done .p2-print-state{text-shadow:0 1px 2px #000,0 0 14px rgba(0,0,0,.95),0 0 3px #000}

/* ── No demo, no black plates: the packs are cut out (art/packs/cut-*.webp) and sit straight on the page ── */
#demo,a[href="#demo"]:not(header a){display:none !important}
#packs article.cf-render .pk-stage{background:radial-gradient(55% 45% at 50% 58%,var(--glow,rgba(120,50,230,.35)),transparent 72%) !important;overflow:visible}
#packs article.cf-render .pk-photo{mix-blend-mode:normal;filter:drop-shadow(0 22px 34px rgba(0,0,0,.6)) !important;object-fit:contain}
#packs article.cf-render .pk-print-stripe{left:22%;right:22%}
.cf-trio{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:6% 8% 4%;background:radial-gradient(60% 55% at 50% 62%,rgba(120,50,230,.38),transparent 72%),linear-gradient(180deg,#120e20,#0b0a12)}
.cf-trio img{width:36%;height:auto;flex:0 0 auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.65))}
.cf-trio img:nth-child(1){transform:translate(16%,6%) rotate(-11deg);z-index:1}
.cf-trio img:nth-child(2){transform:translateY(-3%) scale(1.1);z-index:2}
.cf-trio img:nth-child(3){transform:translate(-16%,6%) rotate(11deg);z-index:1}