/* ========================================================
   PEPE CLOWN — HERO
   Fonts:
     Handron-Solid  — all headings / title / CTAs (dafont)
     Handkids       — body copy / taglines / nav links (dafont)
     Bungee Shade   — decorative fallback for nav brand
   ========================================================= */

@font-face {
  font-family: 'RoundyRainbows';
  src: url('assets/fonts/RoundyRainbows.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Discoteca';
  src: url('assets/fonts/DiscotecaRounded.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Handron';
  src: url('assets/fonts/Handron-Solid.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nat29';
  src: url('assets/fonts/Nat29.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Handkids';
  src: url('assets/fonts/Handkids.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --red:          #e53935;
  --red-deep:     #b71c1c;
  --cream:        #fff7d6;
  --yellow:       #ffd21f;
  --yellow-deep:  #f2a900;
  --orange:       #ff7a1a;
  --green:        #3fb34a;
  --green-deep:   #1f7a2e;
  --blue:         #1e88e5;
  --purple:       #9c27b0;
  --pink:         #ff4fa3;
  --ink:          #120a26;

  --nav-h:        96px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: 'Nat29', 'Handkids', system-ui, sans-serif;
  color: var(--ink);
  background: #0e0423;
  overflow-x: hidden;
}

/* ========================================================
   SHARED .btn SYSTEM — glossy circus buttons with gleam
   Pill variant:   .btn .btn--pill .btn--{red|yellow|green|blue}
   Round variant:  .btn .btn--round .btn--{tg|x}
   Big variant:    add .btn--big
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 4px solid var(--ink);
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', cursive;
  letter-spacing: 2px;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  isolation: isolate;                   /* keep the ::before gleam contained */
  transition: transform .15s ease, box-shadow .15s ease;
  /* Base depth + inner bevel:
     - top inset highlight (white)
     - bottom inset shadow (ink) for the lip
     - drop shadow for lift
     - soft ambient shadow                                                   */
  box-shadow:
    0 8px 0 var(--ink),
    inset 0 3px 0 rgba(255,255,255,.45),
    inset 0 -4px 0 rgba(0,0,0,.22),
    0 14px 22px rgba(0,0,0,.35);
}
/* === Gleam highlight — glossy top half, clipped to shape === */
.btn::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 5%;
  right: 5%;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.65) 0%,
    rgba(255,255,255,.28) 55%,
    rgba(255,255,255,0)   100%);
  pointer-events: none;
  z-index: 1;
  filter: blur(.2px);
}
/* keep label/icons above the gleam */
.btn > * { position: relative; z-index: 2; }

.btn:hover   { transform: translateY(-3px); box-shadow: 0 11px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.22), 0 18px 28px rgba(0,0,0,.4); }
.btn:active  { transform: translateY(3px);  box-shadow: 0 3px 0 var(--ink),  inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.22), 0 6px 10px rgba(0,0,0,.35); }

/* ----- Shape variants ----- */
.btn--pill {
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 22px;
}
.btn--pill::before { border-radius: 999px; }

.btn--round {
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;        /* icon only */
  gap: 0;
}
.btn--round::before { top: 3px; left: 12%; right: 12%; height: 42%; border-radius: 50%; }
.btn--round svg { width: 24px; height: 24px; z-index: 2; }

.btn--big {
  padding: 22px 46px;
  border-radius: 999px;
  font-size: clamp(26px, 3.2vw, 38px);
  border-width: 5px;
  box-shadow:
    0 12px 0 var(--ink),
    inset 0 4px 0 rgba(255,255,255,.5),
    inset 0 -5px 0 rgba(0,0,0,.24),
    0 22px 36px rgba(0,0,0,.4);
  transform: rotate(-2deg);
}
.btn--big:hover  { transform: rotate(2deg) translateY(-3px) scale(1.03); }
.btn--big:active { transform: rotate(-2deg) translateY(6px); }

/* ----- Color variants ----- */
.btn--red {
  background: linear-gradient(180deg, #ff5a5a 0%, #e02121 55%, #9a0d0d 100%);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.4);
}
.btn--yellow {
  background: linear-gradient(180deg, #ffe36a 0%, #f2b916 55%, #c68a00 100%);
  color: #4a2a00;
  text-shadow: 1px 1px 0 rgba(255,255,255,.35);
}
.btn--green {
  background: linear-gradient(180deg, #6ee66e 0%, #2fb537 55%, #155d1a 100%);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.btn--blue {
  background: linear-gradient(180deg, #5cc3ff 0%, #1e88e5 55%, #0a4e8a 100%);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.btn--tg {
  background: linear-gradient(180deg, #5cc3ff 0%, #2196f3 55%, #0a4e8a 100%);
  color: #fff;
}
.btn--x {
  background: linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 55%, #000 100%);
  color: #fff;
}

/* label styling inside .btn */
.btn__label { display: inline-block; }

/* ================= OPENING RAINBOW WIPE ================= */
.opening {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
  pointer-events: none;
}
.opening__band {
  width: 100%;
  height: 100%;
  transform: translateX(-110%);
  animation: wipe-in 0.9s cubic-bezier(.7,.1,.2,1) forwards;
}
.opening__band--1 { background: #ff1f4b; animation-delay: 0.00s; }
.opening__band--2 { background: #ff7a1a; animation-delay: 0.08s; }
.opening__band--3 { background: #ffd21f; animation-delay: 0.16s; }
.opening__band--4 { background: #3fb34a; animation-delay: 0.24s; }
.opening__band--5 { background: #1e88e5; animation-delay: 0.32s; }
.opening__band--6 { background: #9c27b0; animation-delay: 0.40s; }

@keyframes wipe-in {
  0%   { transform: translateX(-110%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

/* After the reveal: fade the whole curtain out (no second wipe across the hero) */
.opening.is-gone {
  opacity: 0;
  transition: opacity 0.55s ease-out;
  pointer-events: none;
}

/* ================= NAV ================= */
.nav {
  position: relative;
  z-index: 10;
  min-height: var(--nav-h);
  background:
    repeating-linear-gradient(
      90deg,
      var(--red)    0 48px,
      var(--cream)  48px 96px
    );
  border-bottom: 6px solid var(--ink);
  box-shadow: 0 6px 0 0 rgba(0,0,0,.25);
}

/* circus tent "scallop" top */
.nav__tent {
  position: absolute;
  inset: -1px 0 auto 0;
  height: 28px;
  background:
    radial-gradient(circle at 24px 28px, var(--ink) 22px, transparent 23px) 0 0/48px 28px repeat-x;
  opacity: .35;
  pointer-events: none;
}

.nav__inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 28px 18px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.nav__brand img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: var(--yellow);
  box-shadow: 0 4px 0 var(--ink);
  object-fit: cover;
  animation: wobble 2.2s ease-in-out infinite;
}
.nav__brand-text {
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', 'Bungee Shade', cursive;
  font-size: 34px;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--yellow);
  text-shadow:
    -2px 0 var(--ink),  2px 0 var(--ink),
    0 -2px var(--ink),  0 2px var(--ink),
   -2px -2px var(--ink), 2px 2px var(--ink),
    4px 4px 0 var(--red-deep);
}

.nav__links {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.nav__link {
  position: relative;
  padding: 11px 20px 10px 34px;
  font-family: 'Nat29', 'Handkids', sans-serif;
  letter-spacing: 0.5px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
}
.nav__link:hover {
  transform: translateY(-2px) rotate(-2deg);
  box-shadow: 0 6px 0 var(--ink);
  background: var(--yellow);
}
.nav__link:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ink);
}
.nav__bulb {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 2px var(--ink),
    0 0 12px var(--yellow);
  animation: bulb 1.2s steps(2, end) infinite;
}
.nav__link:nth-child(2) .nav__bulb { animation-delay: .2s; background: var(--red); box-shadow: 0 0 0 2px var(--ink), 0 0 12px var(--red); }
.nav__link:nth-child(3) .nav__bulb { animation-delay: .4s; background: var(--green); box-shadow: 0 0 0 2px var(--ink), 0 0 12px var(--green); }
.nav__link:nth-child(4) .nav__bulb { animation-delay: .6s; background: var(--blue);  box-shadow: 0 0 0 2px var(--ink), 0 0 12px var(--blue); }

@keyframes bulb {
  0%, 100% { filter: brightness(1.3); }
  50%      { filter: brightness(0.6); }
}

.nav__cta {
  font-size: 22px;
  padding: 12px 26px 12px;
  transform: rotate(-2deg);
}
.nav__cta:hover  { transform: rotate(2deg) scale(1.04); }
.nav__cta:active { transform: translateY(3px) rotate(-2deg); }

/* Bunting flags across the navbar bottom */
.bunting {
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 3;
  pointer-events: none;
}
.bunting span {
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 22px solid var(--red);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.3));
  animation: sway 2.4s ease-in-out infinite;
}
.bunting span:nth-child(5n+1) { border-top-color: var(--red); }
.bunting span:nth-child(5n+2) { border-top-color: var(--yellow); }
.bunting span:nth-child(5n+3) { border-top-color: var(--green); }
.bunting span:nth-child(5n+4) { border-top-color: var(--blue); }
.bunting span:nth-child(5n+5) { border-top-color: var(--purple); }
.bunting span:nth-child(2n) { animation-delay: .3s; }
@keyframes sway {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg)  translateY(2px); }
}

/* ================= HERO ================= */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  padding: 96px 24px 120px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, #fffbd6 0%, transparent 60%),
    linear-gradient(120deg,
      #ff3b3b 0%, #ff8a1c 16%, #ffd21f 33%,
      #3fb34a 50%, #1e88e5 66%, #6a3cff 83%, #d53bff 100%);
  background-size: 100% 100%, 300% 300%;
  animation: bg-shift 14s ease-in-out infinite;
}
@keyframes bg-shift {
  0%, 100% { background-position: 50% 0%,   0% 50%; }
  50%      { background-position: 50% 0%, 100% 50%; }
}

/* spinning rainbow aura behind title */
.hero__aura {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 1200px;
  height: 1200px;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    #ff3b3b, #ff8a1c, #ffd21f, #3fb34a,
    #1e88e5, #6a3cff, #d53bff, #ff3b3b
  );
  filter: blur(70px);
  opacity: .45;
  animation: spin 22s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* twinkling confetti dots */
.hero__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__confetti span {
  position: absolute;
  width: 10px; height: 14px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  animation: confetti-fall linear infinite;
}
.hero__confetti span:nth-child(5n+1) { background: var(--red); }
.hero__confetti span:nth-child(5n+2) { background: var(--green); }
.hero__confetti span:nth-child(5n+3) { background: var(--blue); }
.hero__confetti span:nth-child(5n+4) { background: var(--pink); }
.hero__confetti span:nth-child(1)  { left:  4%; animation-duration:  7s; animation-delay: 0s;  }
.hero__confetti span:nth-child(2)  { left: 11%; animation-duration:  9s; animation-delay: 1s;  }
.hero__confetti span:nth-child(3)  { left: 18%; animation-duration:  8s; animation-delay: 3s;  }
.hero__confetti span:nth-child(4)  { left: 26%; animation-duration: 11s; animation-delay: 2s;  }
.hero__confetti span:nth-child(5)  { left: 33%; animation-duration:  6s; animation-delay: 0s;  }
.hero__confetti span:nth-child(6)  { left: 41%; animation-duration: 10s; animation-delay: 4s;  }
.hero__confetti span:nth-child(7)  { left: 49%; animation-duration:  8s; animation-delay: 2s;  }
.hero__confetti span:nth-child(8)  { left: 57%; animation-duration:  9s; animation-delay: 1s;  }
.hero__confetti span:nth-child(9)  { left: 65%; animation-duration:  7s; animation-delay: 5s;  }
.hero__confetti span:nth-child(10) { left: 72%; animation-duration: 10s; animation-delay: 0s;  }
.hero__confetti span:nth-child(11) { left: 78%; animation-duration:  8s; animation-delay: 2s;  }
.hero__confetti span:nth-child(12) { left: 84%; animation-duration: 11s; animation-delay: 3s;  }
.hero__confetti span:nth-child(13) { left: 90%; animation-duration:  7s; animation-delay: 1s;  }
.hero__confetti span:nth-child(14) { left: 95%; animation-duration:  9s; animation-delay: 4s;  }
.hero__confetti span:nth-child(15) { left:  8%; animation-duration: 12s; animation-delay: 6s;  }
.hero__confetti span:nth-child(16) { left: 22%; animation-duration:  9s; animation-delay: 2.5s;}
.hero__confetti span:nth-child(17) { left: 38%; animation-duration: 10s; animation-delay: 7s;  }
.hero__confetti span:nth-child(18) { left: 54%; animation-duration:  8s; animation-delay: 3s;  }
.hero__confetti span:nth-child(19) { left: 70%; animation-duration:  9s; animation-delay: 5s;  }
.hero__confetti span:nth-child(20) { left: 86%; animation-duration: 11s; animation-delay: 4s;  }
@keyframes confetti-fall {
  0%   { transform: translateY(-10vh) rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: .9; }
}

/* balloons */
.balloon {
  position: absolute;
  width: 68px;
  height: 84px;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  border: 4px solid var(--ink);
  box-shadow: inset -8px -12px 0 rgba(0,0,0,.15), 4px 4px 0 rgba(0,0,0,.25);
  animation: balloon-float 7s ease-in-out infinite;
}
.balloon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -46px;
  width: 2px; height: 46px;
  background: var(--ink);
  transform-origin: top center;
}
.balloon--1 { top: 14%; left: 6%;  background: var(--red);    animation-delay: 0s;   transform: rotate(-6deg); }
.balloon--2 { top: 22%; right: 8%; background: var(--blue);   animation-delay: 1.3s; transform: rotate(5deg); }
.balloon--3 { top: 60%; left: 3%;  background: var(--yellow); animation-delay: 2.1s; transform: rotate(4deg); }
.balloon--4 { top: 55%; right: 5%; background: var(--green);  animation-delay: 0.8s; transform: rotate(-5deg); }
@keyframes balloon-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0)); }
  50%      { transform: translateY(-18px) rotate(var(--r, 0)); }
}

/* content column */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.hero__mascot {
  width: clamp(260px, 32vw, 420px);
  animation: mascot-bounce 2.2s ease-in-out infinite;
}
.hero__mascot img {
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 12px 0 rgba(0,0,0,.28));
}
@keyframes mascot-bounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}

/* ===== TITLE — PEPE CLOWN ===== */
.title {
  margin: 0;
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', cursive;
  font-weight: 400;
  line-height: .95;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  user-select: none;
}
.title__row {
  display: inline-flex;
  justify-content: center;
  gap: clamp(2px, 0.5vw, 10px);
}
.letter {
  display: inline-block;
  font-size: clamp(64px, 11vw, 170px);
  color: #ffb11a;
  -webkit-text-stroke: 3px var(--ink);
  text-stroke: 3px var(--ink);
  text-shadow:
    0 3px 0 var(--ink),
    0 6px 0 var(--ink),
    0 9px 0 #8a3b00,
    0 12px 0 #8a3b00,
    0 15px 0 #702f00,
    0 20px 18px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(-120%) rotate(-18deg) scale(.4);
}
.letter--alt {
  color: #45d35a;
  text-shadow:
    0 3px 0 var(--ink),
    0 6px 0 var(--ink),
    0 9px 0 #1f5a24,
    0 12px 0 #1f5a24,
    0 15px 0 #154016,
    0 20px 18px rgba(0,0,0,.35);
}

/* letters drop/spin-in after rainbow finishes */
.title.is-in .letter {
  animation: letter-drop .7s cubic-bezier(.2,1.6,.3,1) forwards;
  animation-delay: calc(var(--i) * 0.08s);
}
@keyframes letter-drop {
  0%   { opacity: 0; transform: translateY(-140%) rotate(-22deg) scale(.4); }
  60%  { opacity: 1; }
  70%  { opacity: 1; transform: translateY(12%)   rotate(6deg)   scale(1.05); }
  100% { opacity: 1; transform: translateY(0)     rotate(0)      scale(1); }
}

/* gentle wobble after entrance */
.title.is-in .letter {
  animation:
    letter-drop .7s cubic-bezier(.2,1.6,.3,1) forwards,
    letter-wobble 3.2s ease-in-out calc(1s + var(--i) * .05s) infinite;
}
@keyframes letter-wobble {
  0%, 100% { transform: translateY(0)    rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

.tagline {
  margin: 2px 0 6px;
  font-family: 'Nat29', 'Handkids', sans-serif;
  letter-spacing: 1px;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--cream);
}
.tagline em {
  font-style: normal;
  color: var(--yellow);
}

/* ===== HONK BUTTON ===== */
.hero__actions {
  position: relative;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
/* ===== Honk button sizing (uses shared .btn system below) ===== */
.honk {
  font-size: 30px;
  padding: 20px 44px;
  transform: rotate(-2deg);
  cursor: pointer;
}
.honk:hover { transform: rotate(2deg) scale(1.04); }
.honk:active,
.honk.is-pressed {
  transform: translateY(8px) rotate(-2deg);
  box-shadow:
    0 2px 0 var(--ink),
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 8px 14px rgba(0,0,0,.35);
}

.honk-bubble {
  position: absolute;
  top: -52px;
  right: -40px;
  padding: 10px 18px;
  background: #fff;
  color: var(--red-deep);
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', cursive;
  font-size: 24px;
  letter-spacing: 2px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(6deg) scale(.6);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
  white-space: nowrap;
}
.honk-bubble::after {
  content: '';
  position: absolute;
  left: 20px; bottom: -14px;
  width: 0; height: 0;
  border-left:  10px solid transparent;
  border-right: 10px solid transparent;
  border-top:   16px solid #fff;
  filter: drop-shadow(0 3px 0 var(--ink));
}
.honk-bubble.is-on {
  opacity: 1;
  transform: rotate(-4deg) scale(1);
  animation: bubble-pop .4s cubic-bezier(.2,1.6,.3,1);
}
@keyframes bubble-pop {
  0%   { transform: rotate(10deg) scale(.3); }
  70%  { transform: rotate(-8deg) scale(1.15); }
  100% { transform: rotate(-4deg) scale(1); }
}

/* ===== SOCIALS layout ===== */
.socials {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* ===== BOTTOM GRADIENT MOVING LINE ===== */
.gradient-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  overflow: hidden;
  border-top: 5px solid var(--ink);
  background: #111;
}
.gradient-line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #ff3b3b, #ff7a1a, #ffd21f, #3fb34a,
    #1e88e5, #6a3cff, #d53bff, #ff3b3b,
    #ff7a1a, #ffd21f, #3fb34a, #1e88e5,
    #6a3cff, #d53bff, #ff3b3b
  );
  background-size: 200% 100%;
  animation: marquee 3.5s linear infinite;
}
.gradient-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.18) 0 12px,
      rgba(0,0,0,0)       12px 24px);
  mix-blend-mode: overlay;
  animation: marquee 2.5s linear infinite reverse;
}
@keyframes marquee {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
.gradient-line__bulbs {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  pointer-events: none;
}
.gradient-line__bulbs span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--ink), 0 0 12px #fff;
  animation: bulb 1s steps(2, end) infinite;
}
.gradient-line__bulbs span:nth-child(odd)  { animation-delay: .5s; }

/* ===== Wobble shared ===== */
@keyframes wobble {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 860px) {
  .nav__inner { flex-wrap: wrap; justify-content: center; }
  .nav__links { order: 3; width: 100%; justify-content: center; }
  .nav__cta   { order: 2; }
  .nav__brand-text { font-size: 22px; }
  .honk-bubble { right: auto; left: 50%; transform: translateX(-50%) rotate(-4deg) scale(.6); }
  .honk-bubble.is-on { transform: translateX(-50%) rotate(-4deg) scale(1); }
  .hero__mascot { width: 240px; }
  .balloon { transform: scale(.75); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   SHARED SECTION PRIMITIVES
   ========================================================= */

.section {
  position: relative;
  padding: 100px 24px 96px;
  overflow: hidden;
}

.section__title-wrap {
  text-align: center;
  margin-bottom: 56px;
}
.section__title {
  display: inline-block;
  margin: 0;
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', cursive;
  font-size: clamp(44px, 7vw, 92px);
  color: #ffb11a;
  letter-spacing: 3px;
  line-height: 1;
  -webkit-text-stroke: 3px var(--ink);
  text-shadow:
    0 3px 0 var(--ink),
    0 6px 0 var(--ink),
    0 9px 0 #8a3b00,
    0 12px 0 #702f00,
    0 18px 14px rgba(0,0,0,.35);
  transform: rotate(-2deg);
}
.section__title--alt {
  color: #45d35a;
  text-shadow:
    0 3px 0 var(--ink),
    0 6px 0 var(--ink),
    0 9px 0 #1f5a24,
    0 12px 0 #154016,
    0 18px 14px rgba(0,0,0,.35);
  transform: rotate(2deg);
}
.section__kicker {
  margin: 18px 0 0;
  font-family: 'Nat29', 'Handkids', sans-serif;
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: 2px;
  color: var(--cream);
  text-transform: lowercase;
}

/* =========================================================
   LORE
   ========================================================= */
.lore {
  background:
    radial-gradient(ellipse at 80% 10%, #ffd21f22 0%, transparent 55%),
    radial-gradient(ellipse at 15% 90%, #ff3b3b22 0%, transparent 55%),
    linear-gradient(180deg, #2a0a4a 0%, #1a0734 100%);
  border-top: 6px solid var(--ink);
  border-bottom: 6px solid var(--ink);
}
.lore::before,
.lore::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 30px;
  background: repeating-linear-gradient(
    90deg,
    var(--red)   0 40px,
    var(--cream) 40px 80px);
  opacity: .9;
}
.lore::before { top: 0; }
.lore::after  { bottom: 0; }

.lore__grid {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}

.lore__card {
  position: relative;
  background: var(--cream);
  border: 5px solid var(--ink);
  border-radius: 22px;
  padding: 40px 44px 52px;
  box-shadow: 10px 10px 0 var(--ink), 0 0 0 8px #ff3b3b inset;
  transform: rotate(-1.2deg);
}
.lore__p {
  margin: 0 0 18px;
  font-family: 'Nat29', 'Handkids', sans-serif;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
  color: #2a1616;
}
.lore__p strong { color: var(--red-deep); }
.lore__p em     { color: #6a3cff; font-style: normal; }

.lore__stamp {
  position: absolute;
  right: -14px;
  bottom: -18px;
  padding: 14px 22px;
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', cursive;
  font-size: 22px;
  color: #fff;
  letter-spacing: 2px;
  background: var(--red);
  border: 4px solid var(--ink);
  border-radius: 14px;
  transform: rotate(8deg);
  box-shadow: 4px 4px 0 var(--ink);
  text-shadow: 2px 2px 0 #0006;
}

.lore__portrait {
  position: relative;
  justify-self: center;
  width: min(100%, 400px);
  aspect-ratio: 1;
  animation: mascot-bounce 2.8s ease-in-out infinite;
}
.lore__portrait img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid var(--ink);
  box-shadow: 0 14px 0 var(--ink), 0 30px 50px rgba(0,0,0,.5);
  object-fit: cover;
}
.lore__portrait-ring {
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #ff3b3b, #ff8a1c, #ffd21f, #3fb34a,
    #1e88e5, #6a3cff, #d53bff, #ff3b3b);
  animation: spin 10s linear infinite;
  filter: blur(6px);
  opacity: .65;
  z-index: 1;
}

/* =========================================================
   NFT
   ========================================================= */
.nft {
  background:
    radial-gradient(ellipse at 50% 0%, #ffd21f33 0%, transparent 60%),
    linear-gradient(180deg, #1a0734 0%, #120524 100%);
}
.nft__stage {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.nft__spotlight {
  position: absolute;
  top: -40px;
  width: 320px;
  height: 380px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.15) 35%,
    transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  animation: spot-sway 5s ease-in-out infinite;
}
.nft__spotlight--l { left: -60px;  transform: rotate(-8deg); animation-delay: 0s; }
.nft__spotlight--r { right: -60px; transform: rotate(8deg);  animation-delay: 1s; }
@keyframes spot-sway {
  0%, 100% { transform: translateX(0) rotate(var(--r, 0)); opacity: .85; }
  50%      { transform: translateX(40px) rotate(var(--r, 0)); opacity: 1; }
}

.nft__frame {
  position: relative;
  display: inline-block;
  padding: 22px;
  background: linear-gradient(180deg, #ff3b3b 0%, #b71c1c 100%);
  border: 6px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 20px 0 var(--ink), 0 40px 60px rgba(0,0,0,.5);
  transform: rotate(-1deg);
}
.nft__video {
  display: block;
  width: min(88vw, 720px);
  height: auto;
  border: 5px solid var(--ink);
  border-radius: 14px;
  background: #000;
  box-shadow: inset 0 0 0 3px var(--yellow);
}
.nft__bulbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nft__bulbs span {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 3px var(--ink), 0 0 14px var(--yellow);
  animation: bulb 1s steps(2, end) infinite;
}
/* distribute 30 bulbs around the frame */
.nft__bulbs span:nth-child(1)  { top: -8px;  left: 2%;  }
.nft__bulbs span:nth-child(2)  { top: -8px;  left: 10%; }
.nft__bulbs span:nth-child(3)  { top: -8px;  left: 20%; }
.nft__bulbs span:nth-child(4)  { top: -8px;  left: 30%; }
.nft__bulbs span:nth-child(5)  { top: -8px;  left: 40%; }
.nft__bulbs span:nth-child(6)  { top: -8px;  left: 50%; }
.nft__bulbs span:nth-child(7)  { top: -8px;  left: 60%; }
.nft__bulbs span:nth-child(8)  { top: -8px;  left: 70%; }
.nft__bulbs span:nth-child(9)  { top: -8px;  left: 80%; }
.nft__bulbs span:nth-child(10) { top: -8px;  left: 90%; }
.nft__bulbs span:nth-child(11) { bottom: -8px; left: 2%;  }
.nft__bulbs span:nth-child(12) { bottom: -8px; left: 10%; }
.nft__bulbs span:nth-child(13) { bottom: -8px; left: 20%; }
.nft__bulbs span:nth-child(14) { bottom: -8px; left: 30%; }
.nft__bulbs span:nth-child(15) { bottom: -8px; left: 40%; }
.nft__bulbs span:nth-child(16) { bottom: -8px; left: 50%; }
.nft__bulbs span:nth-child(17) { bottom: -8px; left: 60%; }
.nft__bulbs span:nth-child(18) { bottom: -8px; left: 70%; }
.nft__bulbs span:nth-child(19) { bottom: -8px; left: 80%; }
.nft__bulbs span:nth-child(20) { bottom: -8px; left: 90%; }
.nft__bulbs span:nth-child(21) { left: -8px; top: 14%; }
.nft__bulbs span:nth-child(22) { left: -8px; top: 34%; }
.nft__bulbs span:nth-child(23) { left: -8px; top: 54%; }
.nft__bulbs span:nth-child(24) { left: -8px; top: 74%; }
.nft__bulbs span:nth-child(25) { right: -8px; top: 14%; }
.nft__bulbs span:nth-child(26) { right: -8px; top: 34%; }
.nft__bulbs span:nth-child(27) { right: -8px; top: 54%; }
.nft__bulbs span:nth-child(28) { right: -8px; top: 74%; }
.nft__bulbs span:nth-child(29) { top: -8px;  left: 95%; }
.nft__bulbs span:nth-child(30) { bottom: -8px; left: 95%; }
.nft__bulbs span:nth-child(2n) { animation-delay: .5s; background: var(--red);  box-shadow: 0 0 0 3px var(--ink), 0 0 14px var(--red); }
.nft__bulbs span:nth-child(3n) { animation-delay: .25s; background: var(--green); box-shadow: 0 0 0 3px var(--ink), 0 0 14px var(--green); }
.nft__bulbs span:nth-child(5n) { animation-delay: .75s; background: var(--blue);  box-shadow: 0 0 0 3px var(--ink), 0 0 14px var(--blue); }

.nft__caption {
  margin: 32px auto 0;
  max-width: 520px;
  font-family: 'Nat29', 'Handkids', sans-serif;
  font-size: clamp(16px, 1.7vw, 22px);
  color: var(--cream);
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--ink);
}

/* =========================================================
   TOKENOMICS
   ========================================================= */
.tokenomics {
  background:
    repeating-linear-gradient(
      90deg,
      #ffffff10 0 48px,
      transparent 48px 96px),
    linear-gradient(180deg, #b91515 0%, #7a0e0e 100%);
  border-top: 6px solid var(--ink);
  border-bottom: 6px solid var(--ink);
}

.tok__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}
.tok__card {
  position: relative;
  padding: 30px 24px;
  background: var(--cream);
  border: 5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 10px 0 var(--ink);
  text-align: center;
  transform: rotate(-1deg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tok__card:nth-child(even) { transform: rotate(1.5deg); }
.tok__card:hover {
  transform: rotate(0) translateY(-4px);
  box-shadow: 0 14px 0 var(--ink);
}
.tok__card::before {
  content: '';
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 24px;
  background: radial-gradient(circle at 50% 100%, var(--yellow) 0 12px, transparent 13px);
  background-repeat: repeat-x;
  background-size: 16px 24px;
}
.tok__card--red    { background: #fff2f2; }
.tok__card--red    .tok__value { color: var(--red-deep); }
.tok__card--yellow { background: #fff8dd; }
.tok__card--yellow .tok__value { color: #b88500; }
.tok__card--green  { background: #eefbea; }
.tok__card--green  .tok__value { color: var(--green-deep); }
.tok__card--blue   { background: #e8f2ff; }
.tok__card--blue   .tok__value { color: #0a4a8a; }

.tok__label {
  font-family: 'Nat29', 'Handkids', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--ink);
  opacity: .75;
}
.tok__value {
  margin: 10px 0 8px;
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', cursive;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 2px;
  line-height: 1;
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 3px 3px 0 var(--ink);
}
.tok__hint {
  font-family: 'Nat29', 'Handkids', sans-serif;
  font-size: 15px;
  color: #6b4a3f;
}

.tok__ca {
  max-width: 900px;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #120a26;
  border: 4px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 8px 0 var(--ink);
}
.tok__ca-label {
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', cursive;
  font-size: 22px;
  color: var(--yellow);
  letter-spacing: 2px;
}
.tok__ca code {
  flex: 1 1 360px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #d1e6ff;
  word-break: break-all;
}
.tok__copy { font-size: 16px; padding: 10px 20px; }
.tok__copy.is-ok { filter: hue-rotate(10deg) brightness(.9); }

/* =========================================================
   HOW TO BUY
   ========================================================= */
.howto {
  background:
    radial-gradient(ellipse at 50% 0%, #fffbd655 0%, transparent 50%),
    linear-gradient(135deg,
      #ff3b3b 0%, #ff8a1c 25%, #ffd21f 50%,
      #3fb34a 75%, #1e88e5 100%);
  background-size: 100% 100%, 200% 200%;
  animation: bg-shift 18s ease-in-out infinite;
}
.howto__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.step {
  position: relative;
  background: var(--cream);
  border: 5px solid var(--ink);
  border-radius: 22px;
  padding: 46px 26px 28px;
  box-shadow: 0 12px 0 var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover { transform: translateY(-6px); box-shadow: 0 18px 0 var(--ink); }
.step--1 { transform: rotate(-2deg); }
.step--2 { transform: rotate(1.5deg); }
.step--3 { transform: rotate(-1deg); }
.step--4 { transform: rotate(2deg); }

.step__num {
  position: absolute;
  top: -28px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', cursive;
  font-size: 32px;
  color: #fff;
  background: var(--red);
  border: 5px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 6px 0 var(--ink);
  text-shadow: 2px 2px 0 #0006;
}
.step--2 .step__num { background: var(--yellow); color: var(--ink); text-shadow: none; }
.step--3 .step__num { background: var(--green); }
.step--4 .step__num { background: var(--blue); }

.step__title {
  margin: 6px 0 10px;
  text-align: center;
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', cursive;
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--ink);
  -webkit-text-stroke: 1.5px var(--ink);
}
.step__body {
  margin: 0;
  font-family: 'Nat29', 'Handkids', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #2a1616;
}
.step__body strong { color: var(--red-deep); }

/* Big CTA under the steps (uses .btn .btn--big) */
.howto__cta {
  margin-top: 56px;
  text-align: center;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  position: relative;
  background: #0c0520;
  color: var(--cream);
  border-top: 6px solid var(--ink);
}
/* reusable gradient-line variant anchored to footer top */
.gradient-line--footer {
  position: relative;
  left: auto; right: auto; bottom: auto;
  height: 46px;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer__brand img {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: var(--yellow);
  box-shadow: 0 4px 0 var(--ink);
  object-fit: cover;
}
.footer__name {
  font-family: 'Handron', 'RoundyRainbows', 'Discoteca', cursive;
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--ink), -2px 0 var(--ink), 2px 0 var(--ink), 0 -2px var(--ink), 0 2px var(--ink);
}
.footer__tag {
  font-family: 'Nat29', 'Handkids', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--cream);
  opacity: .75;
}
.footer__socials {
  display: flex;
  gap: 12px;
  justify-self: center;
  flex-wrap: wrap;
  justify-content: center;
}
.footer__socials .btn--round { width: 48px; height: 48px; }
.footer__socials .btn--round svg { width: 20px; height: 20px; }
.footer__disclaim {
  margin: 0;
  font-family: 'Nat29', 'Handkids', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #c9b8e0;
  text-align: right;
  max-width: 360px;
  justify-self: end;
}

/* =========================================================
   MEMES — reusable bulb-frame + captions
   ========================================================= */
.memes {
  background:
    radial-gradient(ellipse at 15% 10%, #ffd21f26 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #3fb34a26 0%, transparent 55%),
    linear-gradient(180deg, #120524 0%, #2a0a4a 100%);
  border-top: 6px solid var(--ink);
  border-bottom: 6px solid var(--ink);
}

.memes__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 34px;
}
.meme { margin: 0; transition: transform .2s ease; }
.meme:nth-child(4n+1) { transform: rotate(-1.5deg); }
.meme:nth-child(4n+2) { transform: rotate(1.5deg); }
.meme:nth-child(4n+3) { transform: rotate(-1deg); }
.meme:nth-child(4n+4) { transform: rotate(1deg); }
.meme:hover { transform: rotate(0) scale(1.03); z-index: 2; }

/* reusable marquee bulb frame (shared with nft) */
.bulb-frame {
  position: relative;
  padding: 16px;
  background: linear-gradient(180deg, #ff3b3b 0%, #b71c1c 100%);
  border: 5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 14px 0 var(--ink), 0 28px 40px rgba(0,0,0,.45);
}
.bulb-frame__inner {
  position: relative;
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 12px;
  background: #000;
  box-shadow: inset 0 0 0 3px var(--yellow);
  aspect-ratio: 1 / 1;
}
.bulb-frame__inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sticker variant: transparent bg honkler webp. Use contain + a circus-gradient backdrop. */
.meme--sticker .bulb-frame__inner {
  background:
    radial-gradient(circle at 50% 80%, #fff8dd 0%, transparent 55%),
    linear-gradient(135deg,
      #ff3b3b 0%, #ff8a1c 20%, #ffd21f 40%,
      #3fb34a 60%, #1e88e5 80%, #6a3cff 100%);
  box-shadow: inset 0 0 0 3px var(--yellow), inset 0 0 60px rgba(0,0,0,.25);
}
.meme--sticker .bulb-frame__inner img {
  object-fit: contain;
  padding: 10%;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.35));
}
.bulb-frame__bulbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bulb-frame__bulbs span {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 2.5px var(--ink), 0 0 12px var(--yellow);
  animation: bulb 1s steps(2, end) infinite;
}
/* 20 bulbs: 6 top, 6 bottom, 4 left, 4 right */
.bulb-frame__bulbs span:nth-child(1)  { top: -7px; left:  4%; }
.bulb-frame__bulbs span:nth-child(2)  { top: -7px; left: 22%; }
.bulb-frame__bulbs span:nth-child(3)  { top: -7px; left: 40%; }
.bulb-frame__bulbs span:nth-child(4)  { top: -7px; left: 58%; }
.bulb-frame__bulbs span:nth-child(5)  { top: -7px; left: 76%; }
.bulb-frame__bulbs span:nth-child(6)  { top: -7px; left: 94%; }
.bulb-frame__bulbs span:nth-child(7)  { bottom: -7px; left:  4%; }
.bulb-frame__bulbs span:nth-child(8)  { bottom: -7px; left: 22%; }
.bulb-frame__bulbs span:nth-child(9)  { bottom: -7px; left: 40%; }
.bulb-frame__bulbs span:nth-child(10) { bottom: -7px; left: 58%; }
.bulb-frame__bulbs span:nth-child(11) { bottom: -7px; left: 76%; }
.bulb-frame__bulbs span:nth-child(12) { bottom: -7px; left: 94%; }
.bulb-frame__bulbs span:nth-child(13) { left: -7px; top: 18%; }
.bulb-frame__bulbs span:nth-child(14) { left: -7px; top: 42%; }
.bulb-frame__bulbs span:nth-child(15) { left: -7px; top: 66%; }
.bulb-frame__bulbs span:nth-child(16) { left: -7px; top: 90%; }
.bulb-frame__bulbs span:nth-child(17) { right: -7px; top: 18%; }
.bulb-frame__bulbs span:nth-child(18) { right: -7px; top: 42%; }
.bulb-frame__bulbs span:nth-child(19) { right: -7px; top: 66%; }
.bulb-frame__bulbs span:nth-child(20) { right: -7px; top: 90%; }
.bulb-frame__bulbs span:nth-child(2n) { animation-delay: .5s; background: var(--red);  box-shadow: 0 0 0 2.5px var(--ink), 0 0 12px var(--red); }
.bulb-frame__bulbs span:nth-child(3n) { animation-delay: .25s; background: var(--green); box-shadow: 0 0 0 2.5px var(--ink), 0 0 12px var(--green); }
.bulb-frame__bulbs span:nth-child(5n) { animation-delay: .75s; background: var(--blue);  box-shadow: 0 0 0 2.5px var(--ink), 0 0 12px var(--blue); }

/* classic Impact-style meme caption — white text, thick black outline */
.meme__cap {
  position: absolute;
  left: 4%;
  right: 4%;
  text-align: center;
  font-family: 'Impact', 'Oswald', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 2.6vw, 26px);
  letter-spacing: 1px;
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  text-shadow:
    -3px -3px 0 #000,  3px -3px 0 #000,
    -3px  3px 0 #000,  3px  3px 0 #000,
     0   -3px 0 #000,  0    3px 0 #000,
    -3px  0   0 #000,  3px  0   0 #000,
     0 6px 8px rgba(0,0,0,.6);
  pointer-events: none;
  word-break: break-word;
}
.meme__cap--top    { top: 8px; }
.meme__cap--bottom { bottom: 8px; }

.memes__hint {
  max-width: 700px;
  margin: 40px auto 0;
  text-align: center;
  font-family: 'Nat29', 'Handkids', sans-serif;
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: 1px;
  color: var(--cream);
}

/* =========================================================
   RESPONSIVE for new sections
   ========================================================= */
@media (max-width: 960px) {
  .lore__grid { grid-template-columns: 1fr; }
  .lore__portrait { order: -1; width: min(80%, 320px); }
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
  .footer__brand { justify-content: center; }
  .footer__disclaim { text-align: center; justify-self: center; max-width: 100%; }
}
@media (max-width: 560px) {
  .section { padding: 72px 16px 72px; }
  .section__title-wrap { margin-bottom: 40px; }
  .tok__card { transform: rotate(0) !important; }
  .step     { transform: rotate(0) !important; }
}