/* ============================================================
   TIKITIKI PARTY
   Matatu graffiti x neobrutalism. Hard borders, offset shadows
   in clashing neon, no rounded corners, nothing apologetic.
   ============================================================ */

:root{
  --ink:#0B0B0B;
  --night:#121212;
  --paper:#FFFDF2;

  --acid:#E8FF00;
  --magenta:#FF2D87;
  --cyan:#00E5FF;
  --flame:#FF4D00;
  --grass:#00C26E;

  --bd:4px solid var(--ink);
  --bd-thin:3px solid var(--ink);
  --sh:10px 10px 0 var(--ink);

  --display:"Bungee",system-ui,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;

  --gut:clamp(16px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--night);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw + 13px,18px);
  line-height:1.55;
  overflow-x:hidden;
  /* faint diagonal hazard stripes, barely there */
  background-image:repeating-linear-gradient(135deg,
    rgba(255,255,255,.022) 0 2px, transparent 2px 9px);
}

img{max-width:100%}
[hidden]{display:none!important}

.wrap{width:min(1180px,100% - var(--gut)*2);margin-inline:auto}

/* film grain over everything */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.055;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────── ticker ─────────────── */
.ticker{
  position:sticky;top:0;z-index:100;
  background:var(--acid);color:var(--ink);
  border-bottom:var(--bd);
  padding:calc(env(safe-area-inset-top,0px) + 9px) 0 9px;
  overflow:hidden;
}
.ticker__track{
  display:flex;gap:22px;align-items:center;width:max-content;
  font-family:var(--display);font-size:.78rem;letter-spacing:.04em;
  animation:slide 26s linear infinite;
}
.ticker__track i{font-style:normal;color:var(--magenta)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none;justify-content:center;width:100%;flex-wrap:wrap;gap:12px}
}

/* ─────────────── buttons ─────────────── */
.btn{
  display:inline-block;font-family:var(--display);font-size:.92rem;
  letter-spacing:.02em;text-decoration:none;text-align:center;
  padding:16px 26px;border:var(--bd);cursor:pointer;
  transition:transform .09s ease, box-shadow .09s ease;
}
.btn--primary{background:var(--magenta);color:var(--paper);box-shadow:8px 8px 0 var(--acid)}
.btn--ghost{background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 var(--cyan)}
.btn--primary:hover,.btn--ghost:hover{transform:translate(3px,3px)}
.btn--primary:hover{box-shadow:4px 4px 0 var(--acid)}
.btn--ghost:hover{box-shadow:4px 4px 0 var(--cyan)}
.btn:active{transform:translate(8px,8px);box-shadow:0 0 0}
.btn:focus-visible{outline:4px solid var(--cyan);outline-offset:4px}

/* ─────────────── hero ─────────────── */
.hero{position:relative;padding:clamp(48px,9vw,110px) 0 clamp(56px,8vw,96px);overflow:hidden}

.hero__rings{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:0;pointer-events:none}
.hero__rings span{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:38vw;height:38vw;min-width:280px;min-height:280px;
  border:3px solid rgba(232,255,0,.16);border-radius:50%;
  animation:pulse 4.5s ease-out infinite;
}
.hero__rings span:nth-child(2){animation-delay:1.5s}
.hero__rings span:nth-child(3){animation-delay:3s}
@keyframes pulse{
  0%{transform:scale(.45);opacity:0}
  35%{opacity:1}
  100%{transform:scale(1.7);opacity:0}
}
@media (prefers-reduced-motion:reduce){.hero__rings span{animation:none;opacity:.35}}

.hero__inner{position:relative;z-index:1}

.eyebrow{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acid);margin:0 0 18px;
}

h1{
  font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(2.6rem,11.5vw,8.4rem);line-height:.86;
  letter-spacing:-.005em;text-transform:uppercase;
}
h1 .line{display:block;width:fit-content}
.line--a{color:var(--paper)}
.line--b{
  color:var(--acid);
  text-shadow:6px 6px 0 var(--magenta);
  margin-left:clamp(0px,2.5vw,48px);
}
.line--c{
  background:var(--magenta);color:var(--paper);
  padding:0 .12em;border:var(--bd);box-shadow:var(--sh);
  rotate:-1.6deg;margin:.06em 0;
}
.line--d{color:var(--paper);margin-left:clamp(0px,5vw,96px)}

.stickers{position:relative;height:0}
.sticker{
  position:absolute;font-family:var(--display);font-size:clamp(.7rem,1.7vw,1rem);
  padding:10px 14px;border:var(--bd-thin);color:var(--ink);
}
.sticker--1{background:var(--cyan);rotate:-9deg;right:4%;top:-3.6em;box-shadow:5px 5px 0 var(--ink)}
.sticker--2{background:var(--acid);rotate:7deg;right:16%;top:-1.1em;box-shadow:5px 5px 0 var(--ink)}
@media (max-width:760px){.stickers{display:none}}

.hero__sub{
  max-width:56ch;margin:clamp(28px,4vw,42px) 0 0;
  font-size:clamp(1rem,.5vw + .92rem,1.22rem);color:#E6E2D6;
}
.hero__sub strong{color:var(--acid);font-weight:800}

.hero__cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.hero__note{font-family:var(--mono);font-size:.82rem;color:#9A968C;margin-top:20px}

/* staggered entrance */
.reveal{animation:rise .62s cubic-bezier(.2,.75,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}}

/* ─────────────── counter ─────────────── */
.counter{padding:0 0 clamp(50px,7vw,84px)}
.counter__card{
  background:var(--paper);color:var(--ink);
  border:var(--bd);box-shadow:var(--sh);
  padding:clamp(22px,3.5vw,34px);
}
.counter__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.counter__num{font-family:var(--display);font-size:clamp(2.4rem,7vw,4.4rem);line-height:1;color:var(--magenta)}
.counter__label{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.92rem}
.meter{height:26px;border:var(--bd-thin);background:#EDE9DC;margin:18px 0 12px;overflow:hidden}
.meter__fill{
  height:100%;width:0;background:var(--acid);
  border-right:3px solid var(--ink);
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.14) 0 8px,transparent 8px 16px);
  transition:width 1.1s cubic-bezier(.2,.8,.3,1);
}
.counter__goal{margin:0;font-family:var(--mono);font-size:.84rem}

/* ─────────────── section titles ─────────────── */
.section-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,5.6vw,3.8rem);line-height:.95;margin:0 0 clamp(26px,4vw,44px);
}
.section-title em{
  font-style:normal;background:var(--acid);color:var(--ink);
  padding:0 .14em;border:var(--bd-thin);box-shadow:6px 6px 0 var(--magenta);
  display:inline-block;rotate:-1.2deg;
}

/* ─────────────── prize ─────────────── */
.prize{padding:clamp(56px,8vw,96px) 0;border-top:var(--bd);background:var(--ink)}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:clamp(18px,2.6vw,26px)}
.spec{border:var(--bd);padding:clamp(20px,2.8vw,28px);color:var(--ink)}
.spec--yellow {background:var(--acid);   box-shadow:9px 9px 0 var(--magenta)}
.spec--magenta{background:var(--magenta);box-shadow:9px 9px 0 var(--cyan); color:var(--paper)}
.spec--cyan   {background:var(--cyan);   box-shadow:9px 9px 0 var(--acid)}
.spec__num{font-family:var(--display);font-size:clamp(2.6rem,6vw,3.9rem);line-height:.92;margin:0}
.spec__num b{font-size:.5em;vertical-align:.18em}
.spec h3{font-size:1.06rem;text-transform:uppercase;letter-spacing:.05em;margin:.7em 0 .45em;font-weight:800}
.spec p{margin:0;font-size:.95rem;line-height:1.5}
.spec--magenta p{color:#FFE8F2}

.callout{
  margin-top:clamp(24px,3.4vw,34px);padding:clamp(20px,3vw,28px);
  border:var(--bd-thin);border-left:12px solid var(--flame);background:#1A1A1A;
}
.callout p{margin:0;font-size:1.02rem}
.callout b{color:var(--flame);text-transform:uppercase;letter-spacing:.03em}

/* ─────────────── hear it ─────────────── */
.hearit{padding:clamp(56px,8vw,96px) 0;border-top:var(--bd)}
.hearit__lead{margin:-20px 0 30px;font-family:var(--mono);font-size:.9rem;color:#A8A399}
.videos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(325px,1fr));
  gap:22px;justify-items:center;align-items:start;
}
/* Before embed.js swaps in the iframe, the blockquote is a plain link --
   style it so a blocked or slow script still looks deliberate. */
.tiktok-embed{
  margin:0;max-width:100%;min-width:325px;width:100%;
  border:var(--bd-thin);background:#171717;padding:0;
}
.tiktok-embed section{padding:26px 22px}
.tiktok-embed a{
  font-family:var(--display);font-size:.9rem;color:var(--acid);
  text-decoration:none;line-height:1.5;
}
.tiktok-embed a:hover{text-decoration:underline}
/* embed.js injects an iframe and inlines its own borders; drop ours once it lands */
.tiktok-embed:has(iframe){border:0;background:transparent}
@media (max-width:420px){
  .videos{grid-template-columns:1fr}
  .tiktok-embed{min-width:0}
}

/* ─────────────── form ─────────────── */
.enter{padding:clamp(56px,8vw,96px) 0;border-top:var(--bd);background:var(--ink)}
.form-card{
  background:var(--paper);color:var(--ink);border:var(--bd);
  box-shadow:14px 14px 0 var(--magenta);
  padding:clamp(24px,4.2vw,46px);max-width:680px;margin-inline:auto;
}
.form-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,6.4vw,3.2rem);line-height:.9;margin:0 0 12px;
}
.form-sub{margin:0 0 28px;font-size:.98rem;color:#3D3A33}

.field{margin-bottom:20px}
.field label{
  display:block;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:.8rem;margin-bottom:7px;
}
.field .hint{font-weight:400;text-transform:none;letter-spacing:0;color:#6B665C}
.field input,.field select{
  width:100%;font-family:var(--body);font-size:1.02rem;
  padding:14px 15px;border:var(--bd-thin);background:#fff;color:var(--ink);
  transition:box-shadow .1s ease,transform .1s ease;
}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 13px) 50%;
  background-size:7px 7px,7px 7px;background-repeat:no-repeat;padding-right:44px;
}
.field input:focus,.field select:focus{
  outline:none;box-shadow:5px 5px 0 var(--cyan);transform:translate(-2px,-2px);
}
.field input[aria-invalid="true"]{background:#FFF0F4;box-shadow:5px 5px 0 var(--magenta)}
.err{margin:7px 0 0;font-family:var(--mono);font-size:.8rem;color:#C40050;min-height:1px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn--submit{
  width:100%;background:var(--ink);color:var(--acid);
  box-shadow:8px 8px 0 var(--cyan);font-size:1.05rem;padding:19px 26px;margin-top:6px;
}
.btn--submit:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 var(--cyan)}
.btn--submit[disabled]{opacity:.55;cursor:wait;transform:none;box-shadow:8px 8px 0 #999}


.form-result{margin-top:22px;padding:20px;border:var(--bd-thin);font-weight:600}
.form-result.is-ok{background:var(--grass);color:#04301C;box-shadow:6px 6px 0 var(--ink)}
.form-result.is-dupe{background:var(--acid);color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.form-result.is-bad{background:#FFD9E4;color:#8A0038;box-shadow:6px 6px 0 var(--ink)}
.form-result strong{display:block;font-family:var(--display);font-weight:400;font-size:1.15rem;margin-bottom:6px}

/* ─────────────── steps ─────────────── */
.how{padding:clamp(56px,8vw,96px) 0;border-top:var(--bd)}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.steps li{border:var(--bd-thin);border-top:14px solid var(--cyan);padding:24px;background:#161616}
.steps li:nth-child(2){border-top-color:var(--magenta)}
.steps li:nth-child(3){border-top-color:var(--acid)}
.steps b{font-family:var(--display);font-size:1.7rem;color:#3E3E3E;display:block;line-height:1}
.steps h3{font-size:1.12rem;text-transform:uppercase;letter-spacing:.04em;margin:.5em 0 .4em}
.steps p{margin:0;font-size:.95rem;color:#B9B4A9}

/* ─────────────── faq ─────────────── */
.faq{padding:clamp(56px,8vw,96px) 0;border-top:var(--bd);background:var(--ink)}
.faq__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
details{border:var(--bd-thin);background:var(--paper);color:var(--ink)}
summary{
  cursor:pointer;padding:17px 20px;font-weight:800;list-style:none;
  text-transform:uppercase;letter-spacing:.03em;font-size:.88rem;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:1.3rem;line-height:1;color:var(--magenta)}
details[open] summary::after{content:"–"}
details[open] summary{border-bottom:var(--bd-thin);background:var(--acid)}
details p{margin:0;padding:17px 20px;font-size:.95rem;line-height:1.55}
summary:focus-visible{outline:4px solid var(--cyan);outline-offset:-4px}

/* ─────────────── footer ─────────────── */
.foot{
  padding:clamp(44px,6vw,72px) 0 calc(clamp(44px,6vw,72px) + env(safe-area-inset-bottom,0px));
  border-top:var(--bd);background:var(--acid);color:var(--ink);
}
.foot .wrap{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-end}
.foot__mark{font-family:var(--display);font-size:clamp(1.8rem,5vw,3rem);line-height:.86;margin:0}
.foot__mark span{color:var(--magenta)}
.foot__meta{margin:0;font-family:var(--mono);font-size:.8rem;line-height:1.7;text-align:right}
@media (max-width:640px){.foot__meta{text-align:left}}

::selection{background:var(--magenta);color:var(--paper)}

/* ─────────────── confirm page ─────────────── */
.cf-page{padding:clamp(40px,7vw,80px) 0 clamp(56px,8vw,96px);position:relative;z-index:2}
.cf-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,12vw,7rem);line-height:.86;margin:4px 0 0;
  color:var(--acid);text-shadow:7px 7px 0 var(--magenta);
}
.cf-pos{
  display:inline-block;margin:22px 0 0;padding:10px 16px;
  background:var(--paper);color:var(--ink);border:var(--bd);box-shadow:6px 6px 0 var(--cyan);
  font-family:var(--mono);font-size:.92rem;rotate:-1.2deg;
}
.cf-pos b{font-family:var(--display);font-weight:400;font-size:1.15rem;vertical-align:-1px}
.cf-lead{max-width:48ch;font-size:clamp(1.02rem,.5vw + .95rem,1.2rem);margin:26px 0 0;color:#E6E2D6}

.cf-next{margin-top:clamp(34px,4.5vw,48px);border:var(--bd-thin);border-left:12px solid var(--cyan);
         background:#171717;padding:clamp(20px,3vw,28px)}
.cf-next h2,.cf-share h2{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;
  margin:0 0 14px;color:var(--acid);font-weight:800;
}
.cf-next ol{margin:0;padding-left:1.2em;display:grid;gap:10px}
.cf-next li{font-size:.97rem;color:#CFCAC0}

.cf-share{margin-top:clamp(28px,3.6vw,38px)}
.cf-share p{margin:0 0 16px;color:#A8A399;font-size:.95rem}
.cf-share__row{display:flex;flex-wrap:wrap;gap:14px}
.cf-share__row .btn{font-size:.85rem;padding:15px 22px}

.cf-back{margin-top:clamp(30px,4vw,42px);font-family:var(--mono);font-size:.86rem}
.cf-back a{color:#9A968C;text-decoration:none;border-bottom:1px solid #3A3A38;padding-bottom:2px}
.cf-back a:hover{color:var(--acid);border-color:var(--acid)}

.cf-rise{animation:rise .6s cubic-bezier(.2,.75,.3,1) both;animation-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){.cf-rise{animation:none}}

/* ─────────────── confetti ─────────────── */
/* Hard-edged brand shapes with black keylines -- the neobrutalist version of
   confetti. No gradients, no circles, no fade-out mush. */
.confetti{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.confetti i{
  position:absolute;top:-24px;display:block;
  border:2px solid var(--ink);
  animation-name:drop;animation-timing-function:cubic-bezier(.35,.1,.6,1);
  animation-fill-mode:forwards;
}
@keyframes drop{
  0%  {transform:translate3d(0,-10vh,0) rotate(0deg);opacity:0}
  8%  {opacity:1}
  100%{transform:translate3d(var(--sx,0),108vh,0) rotate(var(--r,540deg));opacity:1}
}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}

/* ─────────────── scroll reveals ─────────────── */
.scroll-in{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.75,.3,1)}
.scroll-in.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.scroll-in{opacity:1;transform:none;transition:none}}