/* ==========================================================
   SkibidiVladPikachu67Inu · $STOCK
   brainrot campaign site: comic sans body, impact captions,
   creature yellow, tie red, toilet white. 67.
   ========================================================== */

:root {
  --bg: #ffd83d;            /* legally distinct yellow */
  --bg2: #f2c400;
  --ink: #201a05;
  --ink-dim: rgba(32, 26, 5, 0.64);
  --accent-deep: #9a7c00;
  --pop: #ffffff;           /* porcelain */
  --tie: #e5252c;           /* mascot tie red (baked into the art) */
  --brand: #e5252c;         /* primary accent: red (nav, CTAs, chips) */
  --brand-deep: #9c1418;    /* 3D depth under red */
  --hot: #e5252c;           /* accent: the big-red-button + hot numbers */
  --hot-deep: #9c1418;      /* 3D depth under red */
  --blue: #2547ff;
  --line: rgba(32, 26, 5, 0.18);
  --mono: 'VT323', 'Courier New', monospace;
  --meme: Impact, 'Arial Black', sans-serif;
  --comic: 'Comic Sans MS', 'Comic Neue', cursive;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-width: thin; scrollbar-color: var(--accent-deep) var(--bg); }
html, body { background: var(--bg); color: var(--ink); font-family: var(--comic); overflow-x: hidden; }
::selection { background: var(--ink); color: var(--bg); }
a { color: inherit; text-decoration: none; }

/* ---------- LOADER ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; background: #131313;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader .brand {
  font-family: var(--meme); font-size: clamp(18px, 3.4vw, 34px); letter-spacing: 0.02em;
  background: var(--brand); color: #fff; padding: 12px 26px; border-radius: 12px;
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 var(--hot);
}
.loader .bar { width: min(320px, 70vw); height: 8px; background: rgba(255, 216, 61, 0.18); border-radius: 4px; position: relative; overflow: hidden; }
.loader .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--bg); transition: width 0.25s; }
.loader .pct { font-family: var(--mono); font-size: 22px; color: var(--bg); letter-spacing: 0.08em; }

/* ---------- FIXED CANVAS + VIGNETTE ---------- */
.canvas-wrap { position: fixed; inset: 0; z-index: 1; }
.canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(32, 26, 5, 0.12) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.10) 0%, transparent 16%, transparent 62%, rgba(255, 216, 61, 0.28) 100%);
}

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px clamp(18px, 4vw, 44px);
  background: linear-gradient(to bottom, rgba(255,255,255,0.22), transparent);
}
.nav .lockup {
  font-family: var(--meme); font-size: 19px; letter-spacing: 0.04em;
  background: var(--brand); color: #fff; padding: 8px 16px; border-radius: 10px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(32, 26, 5, 0.85);
}
.nav .nav-name {
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.05em; color: var(--ink-dim);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav .links { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); }
.nav .links a { font-family: var(--mono); font-size: 17px; letter-spacing: 0.06em; color: var(--ink); opacity: 0.75; transition: opacity 0.2s; }
.nav .links a:hover { opacity: 1; }
.nav .links a.x-link { display: flex; align-items: center; }
.nav .links a.x-link svg { width: 17px; height: 17px; display: block; fill: currentColor; }
.nav .links .cta {
  font-family: var(--mono); font-size: 17px; border: 0; cursor: pointer;
  color: #fff; background: var(--brand); padding: 7px 18px 5px; border-radius: 10px;
  letter-spacing: 0.06em; opacity: 1;
  box-shadow: 0 3px 0 var(--brand-deep);
  transition: transform 0.1s, box-shadow 0.1s;
}
.nav .links .cta:hover { filter: brightness(1.08); }
.nav .links .cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brand-deep); }
@media (max-width: 760px) { .nav .nav-name { display: none; } }
@media (max-width: 640px) { .nav .links a:not(.cta) { display: none; } }

/* ---------- CHAPTER RAIL ---------- */
.chapters {
  position: fixed; left: clamp(14px, 2.5vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 30; display: flex; flex-direction: column; gap: 20px;
}
.chapters .ch { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; justify-content: flex-end; cursor: pointer; }
.chapters .ch .lbl {
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.08em; color: var(--ink-dim);
  opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s, color 0.3s;
}
.chapters .ch .dot { width: 9px; height: 9px; border-radius: 2px; background: var(--ink-dim); opacity: 0.5; transform: rotate(45deg); transition: all 0.3s; }
.chapters .ch.active .lbl { opacity: 1; transform: translateX(0); color: var(--ink); }
.chapters .ch.active .dot { background: var(--brand); opacity: 1; transform: rotate(0deg) scale(1.2); box-shadow: 2px 2px 0 rgba(32, 26, 5, 0.5); }
@media (max-width: 760px) { .chapters { display: none; } }

/* ---------- SCENE CONTENT ---------- */
.content { position: relative; z-index: 10; }
.scene { min-height: 220vh; position: relative; }
.scene-sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(20px, 5vw, 72px) clamp(56px, 10vh, 110px);
}
.scene[data-align="right"] .scene-sticky { align-items: flex-end; text-align: right; }
.scene .kicker {
  align-self: flex-start;
  font-family: var(--mono); font-size: clamp(15px, 1.6vw, 19px); letter-spacing: 0.08em;
  background: var(--brand); color: #fff; text-transform: uppercase;
  padding: 5px 12px 3px; border-radius: 8px;
  transform: rotate(-1.5deg);
  box-shadow: 3px 3px 0 rgba(32, 26, 5, 0.35);
  margin-bottom: 18px;
}
.scene[data-align="right"] .kicker { align-self: flex-end; transform: rotate(1.5deg); }
/* alternate blue/red down the film for sticker-sheet energy */
.scene:nth-of-type(even) .kicker { background: var(--hot); }
.scene h2 {
  font-family: var(--meme); font-weight: 400;
  font-size: clamp(40px, 6.8vw, 96px); line-height: 0.98; letter-spacing: 0.005em;
  max-width: 13ch; text-wrap: balance; color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.45);
}
.scene .sub {
  margin-top: 22px; max-width: 44ch; font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.6; color: var(--ink-dim); font-weight: 700;
}
.scene .scroll-hint {
  margin-top: 40px; font-family: var(--mono); font-size: 16px; letter-spacing: 0.12em;
  color: var(--ink-dim); display: flex; align-items: center; gap: 12px;
}
.scene .scroll-hint .arrow { color: var(--ink); animation: hintdrop 1.6s ease-in-out infinite; }
.scene[data-ink="light"] .kicker { color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
.scene[data-ink="light"] h2 { color: #fff; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); }
.scene[data-ink="light"] .sub { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }
.scene[data-ink="light"] .scroll-hint, .scene[data-ink="light"] .scroll-hint .arrow { color: rgba(255,255,255,0.85); }
@keyframes hintdrop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- FINAL SECTION ---------- */
.final { position: relative; z-index: 20; background: var(--bg); border-top: 3px dashed var(--ink); }
.final-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 44px) 0; }
.final .kicker {
  display: inline-block;
  font-family: var(--mono); font-size: 17px; letter-spacing: 0.08em;
  background: var(--brand); color: #fff; text-transform: uppercase;
  padding: 5px 12px 3px; border-radius: 8px;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 rgba(32, 26, 5, 0.35);
}
.final .kicker.kicker-hot { background: var(--hot); transform: rotate(1deg); }
.final h2 {
  font-family: var(--meme); font-weight: 400;
  font-size: clamp(40px, 6vw, 84px); line-height: 1.0; margin-top: 18px; max-width: 16ch; text-wrap: balance;
  text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.45);
}
.final .lede { margin-top: 22px; max-width: 54ch; color: var(--ink-dim); font-size: clamp(14px, 1.5vw, 17px); line-height: 1.7; font-weight: 700; }
.final .lede b { color: var(--ink); }

.ticker { background: #131313; margin-top: clamp(48px, 8vh, 80px); overflow: hidden; }
.ticker .track { display: flex; white-space: nowrap; width: max-content; animation: tick 32s linear infinite; padding: 10px 0 8px; }
.ticker span { font-family: var(--mono); font-size: 20px; letter-spacing: 0.06em; color: var(--bg); padding: 0 22px; }
.ticker span::after { content: " ★"; color: rgba(255, 216, 61, 0.35); }
.ticker span b { color: #ff5a5a; font-weight: 400; }
.ticker span i { color: #7db8ff; font-style: normal; font-weight: 400; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: clamp(48px, 8vh, 80px); }
.card {
  background: var(--pop); border-radius: 8px; padding: clamp(24px, 3vw, 38px);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:nth-child(odd) { transform: rotate(-0.6deg); }
.card:nth-child(even) { transform: rotate(0.6deg); }
.card:hover { transform: translate(-2px, -2px) rotate(0deg); box-shadow: 9px 9px 0 var(--ink); }
.card .num { font-family: var(--mono); font-size: 17px; color: var(--brand); letter-spacing: 0.08em; }
.cards .card:nth-child(even) .num { color: var(--hot); }
.card h3 { font-family: var(--meme); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); margin: 14px 0 12px; }
.card p { color: var(--ink-dim); font-size: 14px; line-height: 1.6; font-weight: 700; }

.cta-block { text-align: center; padding: clamp(70px, 12vh, 130px) 0 clamp(60px, 10vh, 110px); }
.cta-block .brand {
  font-family: var(--meme); font-size: clamp(20px, 3.4vw, 40px);
  display: inline-block; background: var(--brand); color: #fff;
  padding: 16px 36px; border-radius: 14px; margin-bottom: 30px;
  transform: rotate(-1.5deg);
  box-shadow: 6px 6px 0 rgba(32, 26, 5, 0.85);
}
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.btn {
  display: inline-block; font-family: var(--meme); font-size: 17px; letter-spacing: 0.05em;
  padding: 14px 30px; border-radius: 12px; transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
}
.btn.primary { background: var(--brand); color: #fff; box-shadow: 0 4px 0 var(--brand-deep); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brand-deep); }
.btn.primary:disabled { opacity: 0.6; cursor: wait; }
.btn.ghost { background: var(--pop); border: 3px solid var(--ink); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn.ghost:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn.ghost:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
button.btn { border-width: 0; cursor: pointer; }
button.btn.ghost { border-width: 3px; }
.ca-line {
  margin-top: 22px; font-family: var(--mono); font-size: 17px; letter-spacing: 0.05em;
  color: var(--ink-dim); word-break: break-all; padding: 0 20px;
}
.ca-line span { color: var(--ink); }

/* ---------- PFP GENERATOR ---------- */
.pfp-center { text-align: center; }
.pfp-center h2 { margin-left: auto; margin-right: auto; }
.pfp-center .lede { margin-left: auto; margin-right: auto; }
.pfp-box { margin: clamp(34px, 6vh, 56px) auto 0; width: min(440px, 86vw); }
.pfp-out {
  aspect-ratio: 1; border-radius: 14px; position: relative; overflow: hidden;
  background: var(--pop);
  border: 4px dashed var(--ink);
  box-shadow: 8px 8px 0 rgba(32, 26, 5, 0.85);
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.2);
}
.pfp-out:hover { transform: rotate(-1deg) scale(1.01); }
.pfp-out::before {
  content: ''; position: absolute; inset: -35%;
  background: conic-gradient(transparent 0deg, transparent 250deg, var(--brand) 320deg, transparent 360deg);
  opacity: 0; animation: pfpspin 1.3s linear infinite paused;
}
.pfp-out.working::before { opacity: 1; animation-play-state: running; }
@keyframes pfpspin { to { transform: rotate(360deg); } }
.pfp-inner {
  position: absolute; inset: 7px; border-radius: 8px; background: var(--pop); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pfp-inner img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.12) rotate(3deg);
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(.16,1,.3,1);
}
.pfp-inner img.in { opacity: 1; transform: scale(1) rotate(0deg); }
.pfp-idle { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pfp-idle-num { font-family: var(--meme); font-size: 120px; color: rgba(32, 26, 5, 0.10); line-height: 1; }
.pfp-idle-lbl { font-family: var(--mono); font-size: 17px; letter-spacing: 0.1em; color: var(--ink-dim); }
.pfp-roll { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; }
.pfp-idle[hidden], .pfp-roll[hidden], .pfp-inner img[hidden], .pfp-actions a[hidden] { display: none; }
.pfp-roll-name {
  font-family: var(--meme); font-size: clamp(22px, 4.4vw, 34px);
  line-height: 1.1; text-wrap: balance; min-height: 2.2em;
  display: flex; align-items: center; justify-content: center;
}
.pfp-roll-sub { font-family: var(--mono); font-size: 16px; letter-spacing: 0.1em; color: var(--ink-dim); animation: pfpblink 1.6s ease-in-out infinite; }
@keyframes pfpblink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.pfp-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; justify-content: center; }
.pfp-status {
  font-family: var(--mono); font-size: 17px; letter-spacing: 0.06em; color: var(--ink-dim);
  margin-top: 16px; min-height: 20px;
}

/* ---------- THE 67 BUTTON ---------- */
.btn67 {
  font-family: var(--meme); font-size: clamp(64px, 10vw, 120px); line-height: 1;
  width: clamp(180px, 26vw, 280px); aspect-ratio: 1; border-radius: 50%;
  background: var(--hot); color: var(--pop); border: 0; cursor: pointer;
  margin-top: clamp(30px, 5vh, 50px);
  box-shadow: 0 14px 0 var(--hot-deep), 0 26px 50px rgba(32, 26, 5, 0.28);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn67:hover { filter: brightness(1.06); }
.btn67:active { transform: translateY(10px); box-shadow: 0 4px 0 var(--hot-deep), 0 12px 26px rgba(32, 26, 5, 0.28); }
.say67-count {
  margin-top: 30px; font-family: var(--mono); font-size: 18px; letter-spacing: 0.08em; color: var(--ink-dim);
}
.say67-count span { font-family: var(--meme); font-size: 26px; color: var(--ink); letter-spacing: 0.04em; margin-right: 10px; }
.vlad-stat {
  margin-top: 40px; display: inline-block;
  background: var(--pop); border-radius: 12px; padding: 14px 28px;
  border: 3px dashed var(--ink);
  font-family: var(--mono); font-size: 17px; letter-spacing: 0.06em;
}
.vlad-stat b { color: var(--hot); font-size: 22px; }
.vlad-stat-note { display: block; font-size: 14px; color: var(--ink-dim); letter-spacing: 0.06em; margin-top: 4px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq-list details {
  background: var(--pop); border-radius: 10px;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.15s;
}
.faq-list details[open] { transform: rotate(-0.4deg); }
.faq-list summary {
  font-family: var(--meme); font-size: 17px; letter-spacing: 0.02em;
  padding: 18px 24px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-list summary::after { content: "67"; font-family: var(--mono); font-size: 17px; color: var(--ink-dim); transition: transform 0.2s; }
.faq-list details[open] summary::after { content: "76"; color: var(--hot); }
.faq-list details p { padding: 0 24px 20px; color: var(--ink-dim); font-weight: 700; font-size: 14px; line-height: 1.6; }

/* ---------- FOOTER ---------- */
.footer { border-top: 1px solid var(--ink); position: relative; }
.footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 26px clamp(20px, 5vw, 44px);
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
}
.footer p { font-family: var(--mono); font-size: 14px; letter-spacing: 0.05em; color: var(--ink-dim); opacity: 0.7; line-height: 1.7; }
.footer .fl { display: flex; gap: 22px; }
.footer .fl a { font-family: var(--mono); font-size: 15px; letter-spacing: 0.08em; color: var(--ink-dim); }
.footer .fl a:hover { color: var(--ink); }

/* ---------- 67 CONFETTI OVERLAY ---------- */
#confetti67 { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

.reveal { opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .ticker .track, .scene .scroll-hint .arrow, .pfp-out::before, .pfp-roll-sub { animation: none; }
  .pfp-inner img { transition: opacity 0.3s ease; transform: none; }
}