/* Pulse of Nation — shared brand kit */
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Archivo+Black&family=Inter:wght@400;500;600;700;800&family=Permanent+Marker&display=swap');

:root {
  --pon-pink: #E91E8C;
  --pon-pink-dark: #B8156D;
  --pon-yellow: #FFD600;
  --pon-blue: #00B0FF;
  --pon-blue-dark: #0086C2;
  --pon-ink: #141414;
  --pon-cream: #F5EFE0;
  --pon-paper: #F8F4E8;
  --header-h: 67px;   /* mobile: h-16 (64px) + border 3px */
}
@media (min-width: 768px) {
  :root { --header-h: 83px; } /* desktop: h-20 (80px) + border 3px */
}

html, body {
  background: var(--pon-cream);
  color: var(--pon-ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Bungee', 'Archivo Black', sans-serif; letter-spacing: 0.01em; }
.font-heavy   { font-family: 'Archivo Black', sans-serif; letter-spacing: -0.01em; }
.font-marker  { font-family: 'Permanent Marker', cursive; }
.font-body    { font-family: 'Inter', sans-serif; }

/* Comic book chunky text shadow */
.text-stroke-black {
  -webkit-text-stroke: 2px #141414;
  paint-order: stroke fill;
}
.text-stroke-thick {
  -webkit-text-stroke: 3px #141414;
  paint-order: stroke fill;
}
.text-shadow-pop {
  text-shadow:
    3px 3px 0 #141414,
    6px 6px 0 rgba(20,20,20,0.4);
}
.text-shadow-pop-lg {
  text-shadow:
    5px 5px 0 #141414,
    10px 10px 0 rgba(20,20,20,0.35);
}

/* Halftone dot pattern */
.bg-halftone {
  background-image: radial-gradient(circle, rgba(20,20,20,0.18) 1.4px, transparent 1.6px);
  background-size: 8px 8px;
}
.bg-halftone-light {
  background-image: radial-gradient(circle, rgba(255,255,255,0.25) 1.2px, transparent 1.4px);
  background-size: 7px 7px;
}
.bg-halftone-dense {
  background-image: radial-gradient(circle, rgba(20,20,20,0.35) 1.6px, transparent 1.8px);
  background-size: 6px 6px;
}

/* Paint-stroke / grunge texture using layered noise */
.grunge {
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.18) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(0,0,0,0.18) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.05) 0%, transparent 60%);
}
.grunge-strong {
  background-image:
    radial-gradient(ellipse 40% 25% at 15% 25%, rgba(255,255,255,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 35% 30% at 85% 75%, rgba(0,0,0,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 60% 20%, rgba(255,255,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 30% 80%, rgba(0,0,0,0.20) 0%, transparent 70%);
}

/* Hard pop-art shadow on boxes */
.shadow-pop {
  box-shadow: 6px 6px 0 0 #141414;
}
.shadow-pop-lg {
  box-shadow: 10px 10px 0 0 #141414;
}
.shadow-pop-pink {
  box-shadow: 6px 6px 0 0 var(--pon-pink), 6px 6px 0 2px #141414;
}

.border-ink { border-color: var(--pon-ink); }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-marquee-slow { animation: marquee 60s linear infinite; }

/* Pulse heartbeat */
@keyframes pulse-line {
  0%, 100% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: -20; }
}
.pulse-line-anim path { stroke-dasharray: 4 4; animation: pulse-line 2s linear infinite; }

@keyframes wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.animate-wiggle { animation: wiggle 4s ease-in-out infinite; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float { animation: float-y 5s ease-in-out infinite; }

@keyframes drift-x {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100vw); }
}

@keyframes blob {
  0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); }
  33% { transform: translate(20px,-30px) scale(1.1) rotate(5deg); }
  66% { transform: translate(-20px,20px) scale(0.95) rotate(-5deg); }
}
.animate-blob { animation: blob 18s ease-in-out infinite; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Comic burst star shape (CSS clip-path) */
.clip-burst {
  clip-path: polygon(
    50% 0%, 60% 12%, 75% 5%, 78% 22%, 95% 22%,
    88% 40%, 100% 50%, 88% 60%, 95% 78%, 78% 78%,
    75% 95%, 60% 88%, 50% 100%, 40% 88%, 25% 95%,
    22% 78%, 5% 78%, 12% 60%, 0% 50%, 12% 40%,
    5% 22%, 22% 22%, 25% 5%, 40% 12%
  );
}

/* Tape / sticker tilt utilities */
.tilt-l { transform: rotate(-3deg); }
.tilt-r { transform: rotate(3deg); }
.tilt-l2 { transform: rotate(-1.5deg); }
.tilt-r2 { transform: rotate(1.5deg); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pon-cream); }
::-webkit-scrollbar-thumb { background: var(--pon-ink); border: 2px solid var(--pon-cream); }
::-webkit-scrollbar-thumb:hover { background: var(--pon-pink); }

/* Buttons */
.btn-pop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Bungee', sans-serif;
  letter-spacing: 0.04em;
  border: 3px solid #141414;
  padding: 0.85rem 1.4rem;
  background: var(--pon-pink);
  color: white;
  box-shadow: 6px 6px 0 0 #141414;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.btn-pop:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 0 #141414; }
.btn-pop:active { transform: translate(3px,3px); box-shadow: 3px 3px 0 0 #141414; }

.btn-pop.yellow { background: var(--pon-yellow); color: #141414; }
.btn-pop.blue { background: var(--pon-blue); color: white; }
.btn-pop.cream { background: var(--pon-cream); color: #141414; }
.btn-pop.ink { background: #141414; color: white; }

/* Section divider pulse */
.divider-pulse svg { width: 100%; height: 40px; display: block; }