/* CAT IN THE HOOD — $CATNHOOD */

@font-face{
  font-family:'Anton';
  src:url('assets/fonts/Anton-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('assets/fonts/SpaceGrotesk.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}

:root{
  --lime:#D0FA0B;
  --black:#0A0A0A;
  --bone:#F2F0E9;
  --display:'Anton',sans-serif;
  --body:'Space Grotesk',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--black);color:var(--lime)}
.hero ::selection,.footer ::selection{background:var(--black);color:var(--lime)}

/* film grain over everything */
.grain{
  position:fixed;inset:-12%;z-index:50;pointer-events:none;opacity:.09;
  animation:grain .9s steps(8) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── topbar ── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 18px;
  background:var(--black);
  border-bottom:2px solid var(--lime);
}
.topbar-brand{
  font-family:var(--display);color:var(--bone);
  font-size:15px;letter-spacing:.06em;
}
.topbar-brand sup{color:var(--lime);font-size:9px}
.topbar-buy{
  font-family:var(--display);font-size:14px;letter-spacing:.05em;
  color:var(--black);background:var(--lime);
  padding:7px 14px;text-decoration:none;
  border:2px solid var(--lime);
  transition:background .12s,color .12s;
}
.topbar-buy:hover{background:var(--black);color:var(--lime)}

/* ── hero ── */
.hero{
  position:relative;
  background:var(--lime);color:var(--black);
  padding:96px 0 0;
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.hero-type{position:relative;z-index:3;padding:0 4vw}
.hero h1{
  font-family:var(--display);
  font-size:clamp(84px,19.5vw,330px);
  line-height:.84;
  letter-spacing:-.005em;
  text-transform:uppercase;
}
.hero h1 .line{display:block}
.hero h1 .line:nth-child(2){margin-left:-.03em;white-space:nowrap}
.sticker{
  position:absolute;
  right:6vw;top:6px;
  font-family:var(--display);
  font-size:clamp(16px,2.4vw,30px);
  letter-spacing:.06em;
  background:var(--black);color:var(--lime);
  padding:10px 18px;
  transform:rotate(-6deg);
  box-shadow:6px 6px 0 rgba(10,10,10,.22);
}
.hero-cat{
  position:absolute;z-index:2;
  right:-4vw;bottom:-6vw;
  width:min(56vw,760px);
}
.hero-cat img{display:block;width:100%;height:auto}
.hero-foot{
  position:relative;z-index:3;
  margin-top:auto;
  padding:26px 4vw 42px;
  max-width:52%;
}
.tagline{
  font-family:var(--body);font-weight:500;
  font-size:clamp(17px,2vw,24px);
  margin-bottom:20px;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  font-family:var(--display);
  font-size:clamp(15px,1.6vw,20px);
  letter-spacing:.05em;
  text-decoration:none;
  padding:15px 26px;
  border:3px solid var(--black);
  transition:transform .12s,box-shadow .12s,background .12s,color .12s;
}
.btn-solid{background:var(--black);color:var(--lime)}
.btn-solid:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--black);background:var(--black)}
.btn-line{background:transparent;color:var(--black)}
.btn-line:hover{background:var(--black);color:var(--lime);transform:translate(-3px,-3px);box-shadow:5px 5px 0 rgba(10,10,10,.35)}
.halftone{
  position:absolute;z-index:1;left:-40px;bottom:-40px;
  width:300px;height:300px;opacity:.16;
  background-image:radial-gradient(var(--black) 2.1px,transparent 2.4px);
  background-size:13px 13px;
}

/* ── marquee ── */
.marquee{
  position:relative;z-index:5;
  background:var(--black);
  border-top:3px solid var(--black);border-bottom:3px solid var(--black);
  transform:rotate(-1.4deg) scale(1.04);
  margin:-12px 0 -6px;
  overflow:hidden;
  padding:12px 0;
}
.marquee-track{display:flex;white-space:nowrap;animation:scroll 22s linear infinite;width:max-content}
.marquee-track span{
  font-family:var(--display);
  font-size:clamp(20px,3vw,34px);
  color:var(--lime);
  letter-spacing:.05em;
}
@keyframes scroll{to{transform:translateX(-50%)}}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 12.5%{transform:translate(-2%,1%)}
  25%{transform:translate(1%,-2%)} 37.5%{transform:translate(-1%,-1%)}
  50%{transform:translate(2%,2%)} 62.5%{transform:translate(-2%,-2%)}
  75%{transform:translate(1%,1%)} 87.5%{transform:translate(-1%,2%)}
}

/* ── contract address ── */
.ca{
  position:relative;
  background:var(--black);
  padding:110px 4vw 90px;
}
.kicker{
  font-family:var(--display);
  color:var(--lime);
  font-size:clamp(15px,1.8vw,21px);
  letter-spacing:.14em;
  margin-bottom:22px;
}
.ticket{
  position:relative;
  display:flex;align-items:center;gap:16px;
  max-width:820px;
  border:2px dashed rgba(242,240,233,.5);
  padding:24px 22px;
  background:rgba(242,240,233,.03);
}
.ticket code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:clamp(15px,2.2vw,22px);
  word-break:break-all;
  color:var(--bone);
  flex:1;
}
#ca-copy{
  font-family:var(--display);
  font-size:15px;letter-spacing:.08em;
  background:var(--lime);color:var(--black);
  border:none;padding:12px 20px;cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
#ca-copy:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(204,255,0,.35)}
#ca-copy.done{background:var(--bone)}
.stamp{
  position:absolute;left:38%;top:50%;z-index:4;
  font-family:var(--display);
  font-size:clamp(26px,4vw,44px);letter-spacing:.1em;
  color:var(--lime);
  border:4px solid var(--lime);
  padding:6px 18px;
  transform:translate(-50%,-50%) rotate(-11deg) scale(1);
  mix-blend-mode:screen;
  animation:stampIn .28s cubic-bezier(.2,2.2,.4,1) both,stampOut .35s ease .95s forwards;
  pointer-events:none;
}
@keyframes stampIn{
  from{transform:translate(-50%,-50%) rotate(-4deg) scale(2.4);opacity:0}
  to{transform:translate(-50%,-50%) rotate(-11deg) scale(1);opacity:1}
}
@keyframes stampOut{to{opacity:0}}
.tape{
  position:absolute;width:120px;height:30px;
  background:rgba(208,250,11,.85);
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.tape-tl{top:-8px;left:-44px;transform:rotate(-45deg)}
.tape-br{bottom:-8px;right:-44px;transform:rotate(-45deg)}
.ca-note{margin-top:18px;color:rgba(242,240,233,.55);font-size:15px;max-width:560px}

/* ── legend ── */
.legend{
  background:var(--bone);color:var(--black);
  padding:90px 4vw 110px;
  display:grid;
  grid-template-columns:minmax(180px,.9fr) 1.4fr;
  gap:5vw;
  align-items:start;
  overflow:hidden;
}
.legend-title{
  font-family:var(--display);
  font-size:clamp(70px,11vw,190px);
  line-height:.86;
  margin-left:-.04em;
  transform:rotate(-2deg);
}
.legend-copy{max-width:560px;padding-top:14px}
.pull{
  font-family:var(--display);
  font-size:clamp(24px,3.2vw,40px);
  line-height:1.1;
  background:var(--black);color:var(--lime);
  display:inline-block;
  padding:14px 18px;
  transform:rotate(1deg);
  margin-bottom:30px;
}
.legend-copy p:not(.pull){margin-bottom:16px;font-size:clamp(16px,1.6vw,19px);font-weight:400}

/* ── how to buy ── */
.how{
  background:var(--black);
  padding:100px 4vw 120px;
}
.how-title{
  font-family:var(--display);
  color:var(--bone);
  font-size:clamp(56px,9vw,150px);
  line-height:.9;
  margin-bottom:60px;
}
.steps{list-style:none;max-width:900px}
.step{
  display:flex;gap:26px;align-items:flex-start;
  border-top:2px solid rgba(242,240,233,.18);
  padding:30px 0;
}
.step:nth-child(2){margin-left:4vw}
.step:nth-child(3){margin-left:8vw}
.step:nth-child(4){margin-left:12vw}
.num{
  font-family:var(--display);
  font-size:clamp(40px,6vw,76px);
  line-height:1;
  color:var(--lime);
  flex-shrink:0;
}
.step h3{
  font-family:var(--display);
  font-size:clamp(19px,2.4vw,28px);
  letter-spacing:.04em;
  color:var(--bone);
  margin-bottom:8px;
}
.step p{color:rgba(242,240,233,.72);max-width:480px;font-size:16px}
.steplink{
  display:inline-block;margin-top:12px;
  font-family:var(--display);font-size:16px;letter-spacing:.07em;
  color:var(--lime);text-decoration:none;
  border-bottom:2px solid var(--lime);
  transition:background .12s,color .12s;
  padding:2px 4px;
}
.steplink:hover{background:var(--lime);color:var(--black)}

/* ── footer ── */
.footer{
  background:var(--lime);color:var(--black);
  padding:90px 4vw 40px;
  overflow:hidden;
}
.footer-big{
  font-family:var(--display);
  font-size:clamp(80px,17vw,280px);
  line-height:.85;
  margin-left:-.04em;
}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;margin:44px 0 60px}
.footer-links a{
  font-family:var(--display);font-size:16px;letter-spacing:.06em;
  color:var(--lime);background:var(--black);
  text-decoration:none;padding:13px 22px;
  border:3px solid var(--black);
  transition:background .12s,color .12s,transform .12s,box-shadow .12s;
}
.footer-links a:hover{background:var(--lime);color:var(--black);transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--black)}
.disclaimer{font-size:13px;max-width:640px;color:rgba(10,10,10,.75);margin-bottom:26px}
.fineprint{font-family:var(--display);font-size:12px;letter-spacing:.12em;color:rgba(10,10,10,.6)}

/* ── generated brand assets ── */
.legend{position:relative;grid-template-columns:minmax(180px,.9fr) 1.2fr minmax(200px,.7fr)}
.poster{
  order:3;position:relative;justify-self:end;
  width:min(100%,300px);
  transform:rotate(3deg);
}
.poster img{width:100%;height:auto;display:block;box-shadow:8px 10px 0 rgba(10,10,10,.18)}
.tape-poster{top:-14px;left:50%;margin-left:-60px;transform:rotate(-4deg);position:absolute}
.how{position:relative}
.cash{
  position:absolute;right:4vw;top:90px;
  width:min(24vw,340px);
  transform:rotate(-3.5deg);
}
.cash img{width:100%;height:auto;display:block;box-shadow:8px 10px 0 rgba(208,250,11,.15)}
.tape-cash{top:-14px;left:50%;margin-left:-60px;transform:rotate(5deg);position:absolute}
.stick{position:absolute;pointer-events:none}
.stick-ca{width:130px;height:auto;right:5vw;top:52px;transform:rotate(12deg)}
.footer{position:relative}
.stick-footer{width:170px;height:auto;right:6vw;top:60px;transform:rotate(-9deg)}
.wallband{line-height:0;border-top:3px solid var(--lime)}
.wallband img{width:100%;height:auto;display:block}

/* ── memes gallery ── */
.memes{
  background:var(--bone);color:var(--black);
  padding:100px 4vw 110px;
  overflow:hidden;
}
.memes-title{
  font-family:var(--display);
  font-size:clamp(56px,9vw,150px);
  line-height:.9;
}
.memes-sub{
  font-family:var(--display);
  display:inline-block;
  background:var(--black);color:var(--lime);
  padding:8px 14px;
  font-size:clamp(15px,1.8vw,21px);
  letter-spacing:.06em;
  transform:rotate(-1.5deg);
  margin:18px 0 46px;
}
.meme-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.meme{
  position:relative;
  cursor:zoom-in;
  transition:transform .18s ease;
  line-height:0;
}
.meme img{width:100%;height:auto;display:block;box-shadow:6px 8px 0 rgba(10,10,10,.15)}
.meme:nth-child(3n+1){transform:rotate(-2deg)}
.meme:nth-child(3n+2){transform:rotate(1.4deg) translateY(10px)}
.meme:nth-child(3n){transform:rotate(2.2deg)}
.meme:nth-child(4n)::before{
  content:'';position:absolute;top:-12px;left:50%;margin-left:-52px;
  width:104px;height:26px;background:rgba(208,250,11,.85);
  transform:rotate(-5deg);z-index:2;
  box-shadow:2px 2px 0 rgba(10,10,10,.2);
}
.meme:hover{transform:rotate(0) scale(1.04);z-index:3}
.btn-pack{
  display:inline-block;margin-top:52px;
  background:var(--black);color:var(--lime);
}
.btn-pack:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--black)}
.lightbox[hidden]{display:none}
.lightbox{
  position:fixed;inset:0;z-index:60;
  background:rgba(10,10,10,.92);
  display:flex;align-items:center;justify-content:center;
  padding:4vw;
  cursor:zoom-out;
}
.lightbox img{max-width:min(92vw,860px);max-height:88vh;box-shadow:0 0 0 3px var(--lime)}
#lightboxClose{
  position:absolute;top:18px;right:18px;
  width:auto;font-family:var(--display);
  background:var(--lime);color:var(--black);border:none;
  font-size:20px;padding:10px 16px;cursor:pointer;
}

/* ── scroll reveal ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  .grain{animation:none}
}

/* ── mobile ── */
@media (max-width:980px){
  .meme-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .cash{position:static;width:min(70%,320px);margin:0 0 34px;transform:rotate(-2deg)}
  .legend{grid-template-columns:1fr}
  .poster{order:0;justify-self:start;width:min(72%,300px);margin-bottom:10px}
  .stick-ca{width:90px;top:auto;bottom:18px}
  .stick-footer{width:110px;top:auto;bottom:120px}
}
@media (max-width:720px){
  .hero{min-height:auto;padding-top:76px}
  .hero h1{font-size:19.5vw}
  .hero h1 .line:nth-child(2){margin-left:0}
  .sticker{position:static;display:inline-block;margin-top:14px;transform:rotate(-3deg)}
  .hero-cat{position:relative;right:auto;bottom:auto;width:100vw;margin:8px 0 -6px}
  .hero-foot{max-width:100%;padding-bottom:34px}
  .legend{grid-template-columns:1fr;gap:26px}
  .legend-title{transform:none}
  .step:nth-child(2),.step:nth-child(3),.step:nth-child(4){margin-left:0}
  .ticket{flex-direction:column;align-items:stretch}
  #ca-copy{width:100%}
}