/* ============================================================
   C#NT — link-in-bio (/links)
   Phase 1 (guerrilla). Hard edges: no radius, no shadows,
   no gradients. Tokens per the C#NT design system.
   ============================================================ */

:root {
  --green: #39FF14;
  --blue:  #1F1FD4;
  --pink:  #FF1493;
  --ground:#0A0A0A;
  --black: #000000;
  --bone:  #F2F0EC;
  --panel: #111111;
  --border:#211F1C;
  --body:  #8A857D;
  --lab:   #6F6A63;
  --anton: 'Anton', sans-serif;
  --mono:  'Space Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* full-bleed strips overflow the column; clip beats hidden (no pan at all) */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--ground);
  color: var(--bone);
  font-family: var(--mono);
  display: flex;
  justify-content: center;
  overflow-x: hidden; /* full-bleed marquees use 100vw */
}

.page {
  width: min(430px, 100vw);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------- film grain overlay ---------------- */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.55s steps(3) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-4%, 3%); }
  66%  { transform: translate(3%, -3%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* ---------------- CRT / old-TV overlay ---------------- */
.crt {
  position: fixed;
  inset: 0;
  z-index: 61;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 3px),
    radial-gradient(130% 130% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
  animation: crt-flicker 4s steps(40) infinite;
}

.crt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -25%;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.045), transparent);
  animation: crt-roll 8s linear infinite;
}

@keyframes crt-roll {
  0%   { top: -25%; }
  100% { top: 100%; }
}

@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.94; }
  52% { opacity: 1; }
  70% { opacity: 0.975; }
}

@media (prefers-reduced-motion: reduce) {
  .crt { animation: none; }
  .crt::after { display: none; }
}

/* keep the copy toast above the CRT/grain overlays */
.toast { z-index: 100; }

/* ---------------- marquee edges ---------------- */
/* one skewed wrapper, two identical halves, translate -50% — seam-proof.
   full-bleed: the strips break out of the column to span the viewport */
.mq {
  height: 38px;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.mq--top    { background: var(--black); border-bottom: 2px solid var(--border); }
.mq--bottom { background: var(--green); margin-top: 14px; }

.mq__skew { transform: skewX(-6deg); }

.mq__track {
  display: inline-flex;
  white-space: nowrap;
  animation: mq-scroll 22s linear infinite;
}

.mq__half {
  font-family: var(--anton);
  font-size: 24px;
  line-height: 38px;
  display: inline-block;
}

.mq--top .mq__half    { color: var(--green); }
.mq--bottom .mq__half { color: var(--black); }

.mq__half .hash { width: 0.62em; height: 0.87em; display: inline-block; vertical-align: baseline; margin: 0 0.02em; }

.mq-star { margin: 0 0.26em; }

@keyframes mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------- lockup head ---------------- */
.head {
  position: relative;
  padding: 46px 32px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.head__punch {
  position: absolute;
  right: 24px;
  top: 30px;
  width: 60px;
  height: 60px;
  z-index: 1; /* above the lockup — the punch sits on top */
  animation: cnt-flick 9s steps(1) infinite;
}

.lk { width: 292px; animation: cnt-tremor 6.5s steps(1) infinite; }

.lk--rough { filter: url(#rough); }

/* owner override: outlined block, not filled (matches the main site) */
.lk__block {
  background: transparent;
  border: 0.06em solid currentColor;
  color: var(--green);
  font-family: var(--anton);
  font-weight: 400;
  font-size: 88px;
  line-height: 0.86;
  text-align: center;
  padding: 0.1em 0;
  transform: skewX(-6deg);
}

.hash {
  display: inline-block;
  width: 0.62em;
  height: 0.87em;
  margin: 0 0.02em;
  vertical-align: baseline;
}

.lk__strap {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--bone);
}

.head__tag {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--body);
}

/* ---------------- countdown band ---------------- */
.count {
  background: var(--green);
  color: var(--black);
  padding: 13px 22px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.count__label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
}

.count__value {
  font-family: var(--anton);
  font-size: 34px;
  line-height: 1;
  transform: skewX(-6deg);
  display: inline-block;
}

.count__value .u { font-size: 17px; }

/* ---------------- link stack ---------------- */
.stack {
  padding: 22px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lb {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  border: 2px solid;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--mono);
  cursor: pointer;
  text-align: left;
}

.lb__label {
  flex: 1;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lb__kicker {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3em;
}

.lb__big {
  font-family: var(--anton);
  /* 33px at the 412px design width; shrinks on narrow phones, never below the brand's 24px Anton floor */
  font-size: clamp(24px, 8vw, 33px);
}

/* the long @handle labels need a step down to clear the 62px tab */
.lb__big--long {
  font-size: clamp(24px, 6.8vw, 28px);
  line-height: 0.9;
  transform: skewX(-6deg);
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
}

.lb__tab {
  width: 62px;
  flex: none;
  border-left: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--anton);
  font-size: 24px;
}

/* 01 — primary */
.lb--primary { background: var(--green); color: var(--black); border-color: var(--green); }
.lb--primary:hover, .lb--primary:focus-visible { background: var(--ground); color: var(--green); }
.lb--primary:active { background: var(--black); color: var(--green); }

/* 02 — blue field (depth) */
.lb--blue { background: var(--blue); color: var(--bone); border-color: var(--blue); }
.lb--blue:hover, .lb--blue:focus-visible { background: var(--bone); color: var(--blue); border-color: var(--bone); }
.lb--blue:active { background: var(--black); color: var(--bone); border-color: var(--black); }

/* 03–04 — panels */
.lb--panel { background: var(--panel); color: var(--bone); border-color: var(--border); }
.lb--panel:hover, .lb--panel:focus-visible { background: var(--bone); color: var(--ground); border-color: var(--bone); }
.lb--panel:active { background: #C9C6C0; color: var(--ground); border-color: #C9C6C0; }

/* 04 — pink tab dose (black starburst on pink; never grows) */
.lb__tab--pink { background: var(--pink); border-left-color: currentColor; }
.lb__tab--pink svg { width: 26px; height: 26px; }

/* 05 — dead tickets slot */
.lb--dead { background: var(--ground); color: var(--lab); border-color: var(--border); cursor: not-allowed; }
.lb__tab--soon { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 0.2em; }

/* censor bar — the word must not be readable or selectable (incl. Safari) */
.censor {
  background: var(--black);
  color: var(--black);
  -webkit-user-select: none;
  user-select: none;
  padding: 0 0.4em;
}

/* wide screens (≥768px): the card breathes — bigger column, lockup,
   countdown and marquee edges. same proportions, same hard blocks. */
@media (min-width: 768px) {
  .page { width: 470px; }
  .mq { height: 46px; }
  .mq__half { font-size: 30px; line-height: 46px; }
  .head { padding: 56px 32px 30px; }
  .head__punch { width: 72px; height: 72px; right: 30px; top: 38px; }
  .lk { width: 340px; }
  .lk__block { font-size: 102px; }
  .lk__strap { font-size: 12px; }
  .count__value { font-size: 40px; }
  .count__value .u { font-size: 20px; }
}

/* tiny phones (≤360px): Anton stays at its 24px floor, the blocks shed
   padding instead so the long labels still clear the tab */
@media (max-width: 360px) {
  .stack { padding-left: 10px; padding-right: 10px; }
  .lb__label { padding: 14px 12px; }
  .lb__tab { width: 52px; }
}

/* ---------------- footer facts ---------------- */
.foot { padding: 22px 22px 8px; }

.foot p {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  line-height: 1.9;
  color: var(--body);
}

.foot__hit { color: var(--bone); }

/* ---------------- copy toast ---------------- */
.toast {
  position: fixed;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--green);
  border: 2px solid var(--green);
  padding: 16px 26px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.toast[hidden] { display: none; }

.toast__hash { width: 12px; height: 17px; }

/* ---------------- motion ---------------- */
@keyframes cnt-tremor {
  0%, 5%, 100% { transform: translate(0, 0); }
  0.6%  { transform: translate(-5px, 3px); }
  1.2%  { transform: translate(5px, -2px); }
  1.8%  { transform: translate(-6px, -2px); }
  2.4%  { transform: translate(6px, 3px); }
  3.0%  { transform: translate(-4px, 2px); }
  3.6%  { transform: translate(4px, -3px); }
  4.2%  { transform: translate(-2px, 1px); }
  4.6%  { transform: translate(2px, -1px); }
}

@keyframes cnt-flick {
  0%, 88.9%, 89.6%, 90.5%, 91.4%, 100% { opacity: 1; }
  89%, 89.5%, 90.6%, 91.3% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mq__track, .lk, .head__punch { animation: none; }
}

/* visually hidden, still read by screen readers (the lockup's text) */
.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; }