/* =====================================================================
   John Donson — vanilla CSS. Geen framework, geen build-stap.
   Kleuren, fonts en spacing zijn afgestemd op het "retro Miami / synthwave"
   moodboard: zonsondergang, neon, nostalgie, zelfvertrouwen, feest.
   ===================================================================== */

/* ---------- Zelf gehoste fonts (geen Google Fonts CDN) ---------- */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/bebas-neue-v16-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-v22-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-v22-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-v22-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-v22-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/press-start-2p-v16-latin-400.woff2") format("woff2");
}

:root {
  --color-bg-dark: #14102b;
  --color-bg-darker: #0c0920;
  --color-sunset-orange: #ff8a4c;
  --color-sunset-pink: #ff4d94;
  --color-magenta: #e0339c;
  --color-teal: #2dd4c2;
  --color-teal-dark: #17a394;
  --color-cream: #fdf6ec;
  --color-neon-cyan: #4de3ff;
  --color-white: #fefaf5;

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-pixel: "Press Start 2P", monospace;

  --nav-height: 84px;
  --container-w: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

html {
  scroll-behavior: smooth;
  background: var(--color-bg-dark);
}

body {
  background: var(--color-bg-dark);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--color-neon-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(77, 227, 255, 0.18);
}

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-teal);
  color: var(--color-bg-dark);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  z-index: 999;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

section[id], #contact {
  scroll-margin-top: calc(var(--nav-height) + 12px);
}

.eyebrow {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--color-teal);
  margin-bottom: 0.9rem;
}
.eyebrow--center { text-align: center; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  letter-spacing: 0.02em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 1rem;
}
.section-title--center { text-align: center; }

.section-lead {
  max-width: 46rem;
  color: rgba(254, 250, 245, 0.72);
  font-size: 1.05rem;
  margin-bottom: 3rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--color-teal);
  color: var(--color-bg-dark);
}
.btn--primary:hover {
  background: var(--color-teal-dark);
  box-shadow: 0 0 12px 0 rgba(45, 212, 194, 0.55), 0 0 32px 0 rgba(45, 212, 194, 0.3);
}

.btn--outline {
  background: transparent;
  color: var(--color-sunset-pink);
  border: 2px solid var(--color-sunset-pink);
  padding: 0.87rem 1.9rem;
}
.btn--outline:hover {
  background: rgba(255, 77, 148, 0.1);
  box-shadow: 0 0 12px 0 rgba(255, 77, 148, 0.55), 0 0 32px 0 rgba(255, 77, 148, 0.25);
}

.btn--sm {
  padding: 0.6rem 1.2rem;
  font-size: 0.78rem;
}

/* ---------- Angular "arcade badge" corner-cuts (replaces rounded-8px cards) --- */
.clip-notch {
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
}
.clip-notch-sm {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.clip-notch-tr {
  clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%);
}

.badge-pixel {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-cream);
  border: 1px solid var(--color-teal);
  background: rgba(45, 212, 194, 0.08);
  padding: 0.6rem 0.9rem;
  white-space: nowrap;
}


/* =====================================================================
   Navbar
   ===================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.nav--solid {
  background: rgba(12, 9, 32, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(45, 212, 194, 0.18);
}

.nav__inner {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  flex-shrink: 0;
}
.nav__links {
  display: none;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav__links a {
  position: relative;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 4px;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--color-teal);
  transition: width 0.2s ease;
}
.nav__links a:hover::after { width: 100%; }

.nav__social {
  display: none;
  align-items: center;
  gap: 0.2rem;
}
.nav__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 18px;
  color: var(--color-cream);
  transition: color 0.2s ease;
}
.nav__social a:hover { color: var(--color-teal); }

.nav__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-cream);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav__burger--active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger--active span:nth-child(2) { opacity: 0; }
.nav__burger--active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: rgba(12, 9, 32, 0.98);
  border-top: 1px solid rgba(45, 212, 194, 0.2);
  padding: 1.5rem;
  gap: 1.1rem;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.nav__mobile--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__mobile a {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.nav__mobile-social {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.nav__mobile-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 22px;
  color: var(--color-teal);
}

@media (min-width: 768px) {
  .nav__links, .nav__social { display: flex; }
  .nav__burger { display: none; }
  .nav__mobile { display: none; }
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__scene { position: absolute; inset: 0; z-index: 0; }

.hero__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #14102b 0%, #2c1a4d 38%, #8a2f6e 68%, #ff8a4c 100%);
}

.hero__stars {
  position: absolute;
  inset: 0 0 45% 0;
  opacity: 0.55;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 20%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 60% 12%, #fff 100%, transparent),
    radial-gradient(1px 1px at 80% 30%, #fff 100%, transparent),
    radial-gradient(1px 1px at 40% 16%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 92% 8%, #fff 100%, transparent),
    radial-gradient(1px 1px at 10% 42%, #fff 100%, transparent),
    radial-gradient(1px 1px at 30% 34%, #fff 100%, transparent);
}

.hero__sun {
  position: absolute;
  left: 50%;
  top: 30%;
  width: min(50vw, 440px);
  height: min(50vw, 440px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-sunset-orange) 0%, var(--color-sunset-pink) 55%, var(--color-magenta) 100%);
  box-shadow: 0 0 140px 30px rgba(255, 138, 76, 0.3);
  animation: sunPulse 8s ease-in-out infinite;
}
.hero__sun::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56%;
  background: repeating-linear-gradient(to bottom, var(--color-bg-dark) 0 4px, transparent 4px 13px);
  opacity: 0.9;
}
@keyframes sunPulse {
  0%, 100% { box-shadow: 0 0 140px 30px rgba(255, 138, 76, 0.3); }
  50% { box-shadow: 0 0 170px 40px rgba(255, 77, 148, 0.35); }
}

.hero__skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  width: 100%;
  height: 34%;
  z-index: 2;
}

.hero__grid {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 42%;
  background-image:
    linear-gradient(rgba(45, 212, 194, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 194, 0.4) 1px, transparent 1px);
  background-size: 56px 38px;
  transform: perspective(280px) rotateX(64deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, black 5%, transparent 88%);
  mask-image: linear-gradient(to top, black 5%, transparent 88%);
  opacity: 0.65;
  z-index: 1;
}

.hero__palm {
  position: absolute;
  bottom: -4px;
  width: 130px;
  height: auto;
  fill: var(--color-bg-darker);
  stroke: var(--color-bg-darker);
  z-index: 3;
  opacity: 0.95;
}
.hero__palm--left { left: -18px; }
.hero__palm--right { right: -18px; }

.hero__vice-figure {
  position: absolute;
  left: 6%;
  bottom: 9%;
  width: clamp(70px, 9vw, 130px);
  color: var(--color-bg-darker);
  opacity: 0.4;
  z-index: 1;
}
.hero__vice-figure svg { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .hero__vice-figure { display: none; }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(to bottom, transparent 38%, rgba(12, 9, 32, 0.55) 76%, rgba(12, 9, 32, 0.94) 100%);
}

.hero__content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: calc(var(--nav-height) + 2rem) 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__eyebrow {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--color-neon-cyan);
  margin-bottom: 1.4rem;
  text-shadow: 0 0 8px rgba(77, 227, 255, 0.7);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 15vw, 9.5rem);
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 0 18px rgba(45, 212, 194, 0.45), 0 0 44px rgba(255, 77, 148, 0.25);
}
.hero__title span { display: block; }

.hero__tagline {
  margin-top: 1.6rem;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.5;
  color: var(--color-cream);
  max-width: 46rem;
}

.hero__cta {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.hero__scroll-cue {
  position: absolute;
  bottom: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream);
  opacity: 0.8;
  animation: bounceCue 2.4s ease-in-out infinite;
}
.hero__scroll-cue svg { width: 26px; height: 26px; }
@keyframes bounceCue {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

@media (max-width: 480px) {
  .hero__palm { width: 78px; opacity: 0.55; }
}

/* =====================================================================
   About
   ===================================================================== */
.about { position: relative; padding: 7rem 0 6rem; background: var(--color-bg-dark); }

.about__intro { max-width: 48rem; margin: 0 auto 5rem; text-align: center; }
.about__intro-text {
  font-size: 1.1rem;
  color: rgba(254, 250, 245, 0.85);
}
.about__underline {
  display: block;
  width: 90px;
  height: 3px;
  margin: 2.2rem auto 0;
  background: linear-gradient(90deg, var(--color-teal), var(--color-sunset-pink));
  box-shadow: 0 0 10px rgba(45, 212, 194, 0.6);
}

.about__row {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 62rem;
  margin: 0 auto 4.5rem;
  padding-bottom: 4.5rem;
  border-bottom: 1px solid rgba(45, 212, 194, 0.15);
}
.about__row--reverse { flex-direction: row-reverse; }
.about__row-text { flex: 1; }
.about__row-text--right { text-align: left; }
.about__row-text p { color: rgba(254, 250, 245, 0.75); }
.about__row-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  color: var(--color-teal);
}
.about__row-title--center { text-align: center; color: var(--color-sunset-pink); }
.about__row-accent {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  color: var(--color-sunset-pink);
  opacity: 0.85;
}
.about__row--reverse .about__row-accent { color: var(--color-teal); }

.about__feature {
  max-width: 62rem;
  margin: 0 auto 5rem;
  padding: 3rem clamp(1.5rem, 5vw, 4rem);
  background: linear-gradient(120deg, var(--color-magenta) 0%, var(--color-sunset-pink) 55%, var(--color-sunset-orange) 100%);
  color: var(--color-bg-darker);
}
.about__feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.about__feature p { color: rgba(12, 9, 32, 0.85); font-size: 1.05rem; max-width: 48rem; }

.about__badges-wrap { max-width: 62rem; margin: 0 auto 5rem; text-align: center; }
.about__badges-label {
  font-family: var(--font-pixel);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--color-neon-cyan);
  margin-bottom: 1.3rem;
}

.about__outro { max-width: 42rem; margin: 0 auto; text-align: center; }
.about__outro p { color: rgba(254, 250, 245, 0.75); }
.about__outro-quote {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-white) !important;
  text-shadow: 0 0 12px rgba(45, 212, 194, 0.6);
}

@media (max-width: 760px) {
  .about__row, .about__row--reverse { flex-direction: column; text-align: center; }
  .about__row-text--right { text-align: center; }
  .about__row-accent { width: 64px; height: 64px; }
}

/* =====================================================================
   Music
   ===================================================================== */
.music { position: relative; padding: 6rem 0; background: var(--color-bg-darker); }

.music__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
@media (min-width: 640px) { .music__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .music__grid { grid-template-columns: repeat(3, 1fr); } }

.track-card {
  background: rgba(45, 212, 194, 0.04);
  border: 1px solid rgba(45, 212, 194, 0.25);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.track-card:hover {
  border-color: var(--color-teal);
  box-shadow: 0 0 12px 0 rgba(45, 212, 194, 0.55), 0 0 32px 0 rgba(45, 212, 194, 0.25);
  transform: translateY(-3px);
}
.track-card__cover {
  position: relative;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-bg-dark) 0%, #3a1d55 50%, var(--color-magenta) 100%);
}
.track-card__cover svg { width: 46px; height: 46px; color: var(--color-cream); opacity: 0.85; }

.track-card__cover--photo {
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}
.track-card__cover--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 14, 38, 0.05) 0%, rgba(18, 14, 38, 0.15) 55%, rgba(18, 14, 38, 0.75) 100%),
              linear-gradient(135deg, rgba(255, 77, 148, 0.28) 0%, rgba(45, 212, 194, 0) 60%);
}
.track-card:hover .track-card__cover--photo { transform: scale(1.06); }

.track-card__play {
  position: absolute;
  z-index: 1;
  right: 0.8rem;
  bottom: 0.8rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(18, 14, 38, 0.65);
  border: 1px solid rgba(254, 250, 245, 0.35);
  backdrop-filter: blur(2px);
}
.track-card__play svg { width: 16px; height: 16px; color: var(--color-cream); opacity: 0.95; }
.track-card__body { padding: 1.4rem; }
.track-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.track-card__title { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.02em; text-transform: uppercase; }
.track-card__year { font-family: var(--font-pixel); font-size: 0.55rem; color: var(--color-teal); flex-shrink: 0; }
.track-card__tagline { font-size: 0.92rem; color: rgba(254, 250, 245, 0.7); margin-bottom: 1.1rem; }
.track-card__embed--placeholder {
  border: 1px dashed rgba(254, 250, 245, 0.25);
  padding: 0.9rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(254, 250, 245, 0.5);
}
.track-card__embed iframe { display: block; border: none; }

.track-card__spotify-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-teal);
  border: 1px solid rgba(45, 212, 194, 0.4);
  padding: 0.65rem 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.track-card__spotify-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.track-card__spotify-link:hover {
  border-color: var(--color-teal);
  box-shadow: 0 0 10px rgba(45, 212, 194, 0.35);
}

/* =====================================================================
   Shows
   ===================================================================== */
.shows { position: relative; padding: 6rem 0; background: var(--color-bg-dark); }

.shows__format {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  max-width: 46rem;
  padding: 1.8rem;
  margin-bottom: 3rem;
  background: rgba(255, 138, 76, 0.08);
  border: 1px solid rgba(255, 138, 76, 0.35);
}
.shows__format-icon { width: 44px; height: 44px; color: var(--color-sunset-orange); flex-shrink: 0; }
.shows__format-label { font-family: var(--font-pixel); font-size: 0.55rem; color: var(--color-sunset-orange); margin-bottom: 0.5rem; letter-spacing: 0.08em; }
.shows__format-title { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; margin-bottom: 0.5rem; }
.shows__format-text { color: rgba(254, 250, 245, 0.75); font-size: 0.95rem; }

.shows__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem 0;
  max-width: 40rem;
}
.shows__empty p { color: rgba(254, 250, 245, 0.65); }

.shows__list { display: flex; flex-direction: column; gap: 1rem; }
.shows__item {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(45, 212, 194, 0.2);
  background: rgba(45, 212, 194, 0.03);
}
.shows__date { display: flex; flex-direction: column; align-items: center; width: 58px; flex-shrink: 0; color: var(--color-teal); }
.shows__date-day { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }
.shows__date-month { font-family: var(--font-pixel); font-size: 0.5rem; margin-top: 0.3rem; }
.shows__info { flex: 1; }
.shows__info h3 { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; margin-bottom: 0.2rem; }
.shows__info p { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: rgba(254, 250, 245, 0.65); }
.shows__info-icon { width: 14px; height: 14px; color: var(--color-sunset-pink); }

/* =====================================================================
   Booking / Contact
   ===================================================================== */
.booking { position: relative; padding: 6rem 0; background: var(--color-bg-dark); }

.arcade { position: relative; padding: 6rem 0; background: var(--color-bg-darker); }

.booking__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
}
@media (min-width: 940px) {
  .booking__grid { grid-template-columns: 1.4fr 1fr; }
}

.form-banner {
  padding: 1rem 1.2rem;
  margin-bottom: 1.6rem;
  font-size: 0.92rem;
  border-left: 3px solid;
}
.form-banner--success { background: rgba(45, 212, 194, 0.1); border-color: var(--color-teal); color: var(--color-cream); }
.form-banner--error { background: rgba(255, 77, 148, 0.1); border-color: var(--color-sunset-pink); color: var(--color-cream); }
.form-banner a { color: var(--color-teal); text-decoration: underline; }

.booking-form { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 2rem; }
.booking-form__row { display: flex; flex-direction: column; gap: 0.5rem; }
.booking-form__row--split { display: grid; grid-template-columns: 1fr; gap: 1.3rem; }
@media (min-width: 520px) { .booking-form__row--split { grid-template-columns: 1fr 1fr; } }

.booking-form label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-teal);
}
.booking-form input,
.booking-form select,
.booking-form textarea {
  background: rgba(254, 250, 245, 0.04);
  border: 1px solid rgba(254, 250, 245, 0.2);
  padding: 0.85rem 1rem;
  color: var(--color-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.booking-form input::placeholder,
.booking-form textarea::placeholder { color: rgba(254, 250, 245, 0.35); }
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(45, 212, 194, 0.18);
  outline: none;
}
.booking-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4c2' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
}
.booking-form textarea { resize: vertical; min-height: 120px; }

.booking-form__captcha input { max-width: 8rem; }
.booking-form__hint {
  font-size: 0.78rem;
  color: rgba(254, 250, 245, 0.5);
  text-transform: none;
  letter-spacing: normal;
}

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

.booking-form .btn { align-self: flex-start; margin-top: 0.4rem; }

.booking__contact-list { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2rem; }
.booking__contact-list li { display: flex; align-items: flex-start; gap: 1rem; }
.booking__contact-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
  border: 1px solid rgba(45, 212, 194, 0.35);
}
.booking__contact-icon svg { width: 18px; height: 18px; }
.booking__contact-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(254, 250, 245, 0.5);
  margin-bottom: 0.2rem;
}
.booking__contact-list a { display: inline-block; padding: 0.5rem 0; color: var(--color-cream); font-weight: 600; }
.booking__contact-list a:hover { color: var(--color-teal); }

.booking__map-badge {
  width: 150px;
  margin: 2.4rem auto 0;
  color: var(--color-teal);
  opacity: 0.9;
}
.booking__map-badge svg { width: 100%; height: auto; }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background: var(--color-bg-darker); border-top: 1px solid rgba(45, 212, 194, 0.15); padding: 4rem 0 1.6rem; }

.site-footer__grid {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding-bottom: 2.4rem;
}
@media (min-width: 760px) {
  .site-footer__grid { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}

.site-footer__brand p { margin-top: 0.9rem; color: rgba(254, 250, 245, 0.6); max-width: 26rem; font-size: 0.92rem; }
.site-footer__social { display: flex; gap: 0.2rem; margin-top: 1.2rem; margin-left: -0.6rem; }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 18px;
  color: var(--color-cream);
}
.site-footer__social a:hover { color: var(--color-teal); }

.site-footer__nav { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; }
.site-footer__nav a { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(254, 250, 245, 0.7); }
.site-footer__nav a:hover { color: var(--color-teal); }

.site-footer__bottom {
  border-top: 1px solid rgba(254, 250, 245, 0.1);
  padding-top: 1.6rem;
  font-size: 0.78rem;
  color: rgba(254, 250, 245, 0.45);
}

/* =====================================================================
   Logo (nav, footer) — SVG wordmark i.p.v. tekstuele "JD John Donson".
   ===================================================================== */
.nav__logo-img {
  flex-shrink: 0;
  max-width: none;
}
.nav__logo-img--full {
  display: none;
  height: 40px;
  width: auto;
  aspect-ratio: 706 / 190;
}
.nav__logo-img--compact {
  display: block;
  height: 34px;
  width: auto;
  aspect-ratio: 1 / 1;
}
@media (min-width: 1024px) {
  .nav__logo-img--full { display: block; height: 44px; }
  .nav__logo-img--compact { display: none; }
}
@media (min-width: 1024px) {
  .nav__links { gap: 2rem; }
}
.footer-logo-img {
  height: 46px;
  width: auto;
  flex-shrink: 0;
  max-width: none;
  aspect-ratio: 706 / 190;
}

/* =====================================================================
   Hero-foto van John — vervangt het oude pixel-mascotje. Neon-drop-shadow
   in plaats van een grijze slagschaduw, met een lichte chromatische
   randgloed (dubbele drop-shadow in roze + cyaan).
   ===================================================================== */
.hero__photo {
  position: relative;
  z-index: 5;
  margin: 0 auto;
  width: clamp(220px, 42vw, 420px);
  filter:
    drop-shadow(0 0 18px rgba(255, 77, 148, 0.55))
    drop-shadow(0 0 34px rgba(77, 227, 255, 0.3));
}
.hero__photo img { width: 100%; height: auto; display: block; }

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    text-align: left;
  }
  .hero__content { text-align: left; align-items: flex-start; padding-inline: clamp(1.5rem, 5vw, 5rem) 0; }
  .hero__cta { justify-content: flex-start; }
  .hero__photo { grid-column: 2; margin: 0 clamp(1.5rem, 6vw, 5rem) 0 0; width: clamp(260px, 24vw, 380px); }
}

/* =====================================================================
   Portretfoto in "Over John"
   ===================================================================== */
.about__portrait {
  max-width: 22rem;
  margin: 0 auto 4rem;
  filter: drop-shadow(0 0 22px rgba(255, 77, 148, 0.25));
}
.about__portrait img { width: 100%; height: auto; display: block; }

/* =====================================================================
   Discipline-stickers ("Wat John drijft") — pixel-icoontjes in losjes
   geroteerde badges, net als het checklistje uit het moodboard, in
   plaats van een strakke rij tekst-pills.
   ===================================================================== */
.discipline-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 0.8rem;
}

.discipline-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-pixel);
  font-size: 0.56rem;
  line-height: 1.4;
  color: var(--color-cream);
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-teal);
  background: rgba(45, 212, 194, 0.08);
  box-shadow: 4px 4px 0 0 rgba(12, 9, 32, 0.5);
  transform: rotate(-2deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.discipline-item:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 6px 6px 0 0 rgba(12, 9, 32, 0.6);
}
.discipline-item:nth-child(2n) { transform: rotate(2deg); border-color: var(--color-sunset-pink); background: rgba(255, 77, 148, 0.08); }
.discipline-item:nth-child(2n):hover { transform: rotate(0deg) translateY(-2px); }
.discipline-item:nth-child(3n) { transform: rotate(-3deg); border-color: var(--color-sunset-orange); background: rgba(255, 138, 76, 0.08); }
.discipline-item:nth-child(3n):hover { transform: rotate(0deg) translateY(-2px); }

.discipline-icon { width: 15px; height: 15px; color: var(--color-teal); flex-shrink: 0; }
.discipline-item:nth-child(2n) .discipline-icon { color: var(--color-sunset-pink); }
.discipline-item:nth-child(3n) .discipline-icon { color: var(--color-sunset-orange); }

/* ---------- Minder strak: lichte rotatie + hardere "sticker"-schaduw
   op een paar kaarten, zodat de grid niet te perfect/machinaal oogt. ---------- */
.badge-pixel { display: inline-block; transform: rotate(-2deg); }

.track-card { transform: rotate(-1deg); }
.track-card:nth-child(2n) { transform: rotate(1deg); }
.track-card:nth-child(3n) { transform: rotate(-0.5deg); }
.track-card:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: 6px 6px 0 0 rgba(12, 9, 32, 0.45), 0 0 20px rgba(45, 212, 194, 0.25);
}

.shows__format { transform: rotate(-1deg); }
.about__feature { transform: rotate(-0.6deg); }

/* =====================================================================
   Arcadehal — shell met tabs rond de drie speelgeld-spelletjes.
   ===================================================================== */
.arcade__marquee {
  max-width: 26rem;
  margin: 0 auto 1.6rem;
  padding: 0.6rem 1rem;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--color-bg-darker);
  background: linear-gradient(90deg, var(--color-sunset-pink), var(--color-sunset-orange), var(--color-neon-cyan));
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.arcade__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 32rem;
  margin: 0 auto 1.6rem;
}
.arcade__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(254, 250, 245, 0.6);
  border: 1px solid rgba(254, 250, 245, 0.2);
  background: rgba(254, 250, 245, 0.03);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.arcade__tab:hover { color: var(--color-cream); border-color: rgba(45, 212, 194, 0.5); }
.arcade__tab.is-active {
  color: var(--color-bg-darker);
  background: var(--color-teal);
  border-color: var(--color-teal);
}

.arcade__cabinet { max-width: 26rem; margin: 0 auto; }

.arcade__keyhint {
  text-align: center;
  margin-top: 0.9rem;
  font-size: 0.72rem;
  color: rgba(254, 250, 245, 0.45);
}

/* =====================================================================
   Gokkast (fictief, speelgeld — zie disclaimer onder de kast)
   ===================================================================== */
.slotmachine__cabinet {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  background: linear-gradient(160deg, #241a3e 0%, #14102b 70%);
  border: 2px solid rgba(45, 212, 194, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 77, 148, 0.15) inset, 6px 6px 0 0 rgba(12, 9, 32, 0.5);
  overflow: hidden;
}

.slotmachine__vice {
  position: absolute;
  right: -6px;
  bottom: -10px;
  width: 54px;
  color: var(--color-bg-darker);
  opacity: 0.5;
  pointer-events: none;
}
.slotmachine__vice svg { width: 100%; height: auto; display: block; }

.slotmachine__reels {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  padding: 1rem;
  margin-bottom: 1.6rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(45, 212, 194, 0.3);
}

.reel {
  width: 84px;
  height: 84px;
  overflow: hidden;
  background: rgba(254, 250, 245, 0.04);
  flex-shrink: 0;
}

.reel__strip {
  will-change: transform;
}
.reel__symbol {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal);
}
.reel__symbol svg { width: 52px; height: 52px; }
.reel__symbol[data-symbol="fatbike"] { color: var(--color-neon-cyan); }
.reel__symbol[data-symbol="statiegeld"] { color: var(--color-teal); }
.reel__symbol[data-symbol="palm"] { color: var(--color-teal-dark); }
.reel__symbol[data-symbol="flamingo"] { color: var(--color-sunset-pink); }
.reel__symbol[data-symbol="brug"] { color: var(--color-cream); }
.reel__symbol[data-symbol="vlaai"] { color: var(--color-sunset-orange); }
.reel__symbol[data-symbol="cocktail"] { color: var(--color-magenta); }
.reel__symbol[data-symbol="jd"] { color: var(--color-neon-cyan); }

.slotmachine__panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: space-between;
}

.slotmachine__credits {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.slotmachine__credits-label {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--color-neon-cyan);
}
.slotmachine__credits-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-white);
  line-height: 1;
}

.slotmachine__spin { min-height: 44px; }
.slotmachine__bet { font-weight: 500; opacity: 0.8; font-size: 0.85em; }

.slotmachine__mute {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-teal);
  color: var(--color-teal);
  flex-shrink: 0;
}
.slotmachine__mute[aria-pressed="true"] { color: var(--color-sunset-pink); border-color: var(--color-sunset-pink); }
.slotmachine__mute:hover { box-shadow: 0 0 10px rgba(45, 212, 194, 0.4); }

.slotmachine__status {
  margin-top: 1.4rem;
  min-height: 2.6em;
  font-size: 0.92rem;
  color: var(--color-cream);
}

.slotmachine__reset { margin-top: 1rem; }

.arcade__disclaimer {
  text-align: center;
  margin-top: 1.4rem;
  font-size: 0.78rem;
  color: rgba(254, 250, 245, 0.5);
}

.slotmachine__cabinet.is-jackpot {
  animation: jackpotFlash 0.5s ease-in-out 3;
}
@keyframes jackpotFlash {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 77, 148, 0.15) inset, 6px 6px 0 0 rgba(12, 9, 32, 0.5); }
  50% { box-shadow: 0 0 40px 6px rgba(77, 227, 255, 0.55), 0 0 70px 10px rgba(255, 77, 148, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .slotmachine__cabinet.is-jackpot { animation: none; }
}

@media (max-width: 420px) {
  .slotmachine__cabinet { padding: 1rem; }
  .slotmachine__reels { padding: 0.6rem; gap: 0.4rem; }
  .reel, .reel__symbol { width: 64px; height: 64px; }
  .reel__symbol svg { width: 40px; height: 40px; }
  .slotmachine__credits-value { font-size: 1.4rem; }
  .slotmachine__panel { gap: 0.6rem; }
}

/* =====================================================================
   Flipperkast (pinball) & Statiegeld Vangen — delen dezelfde
   kop/overlay/besturing-opmaak als de gokkast, andere kleuraccenten.
   ===================================================================== */
.pinball__cabinet,
.catchgame__cabinet {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 1.8rem);
  background: linear-gradient(160deg, #241a3e 0%, #14102b 70%);
  border: 2px solid rgba(255, 77, 148, 0.35);
  box-shadow: 0 0 0 1px rgba(45, 212, 194, 0.15) inset, 6px 6px 0 0 rgba(12, 9, 32, 0.5);
}
.catchgame__cabinet { border-color: rgba(255, 138, 76, 0.4); }

.pinball__head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.pinball__score-label {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--color-neon-cyan);
}
.pinball__score-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-white);
  line-height: 1;
}
.pinball__balls {
  margin-left: auto;
  color: var(--color-sunset-pink);
  letter-spacing: 0.2em;
  font-size: 0.9rem;
}

.pinball__table-wrap {
  position: relative;
  line-height: 0;
  background: #05030d;
  border: 1px solid rgba(45, 212, 194, 0.3);
}
.pinball__table-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
}
.pinball__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.85rem;
  color: rgba(254, 250, 245, 0.8);
  background: rgba(5, 3, 13, 0.78);
  transition: opacity 0.2s ease;
}
.pinball__overlay span {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 0 12px rgba(45, 212, 194, 0.5);
}
.pinball__overlay[hidden] { display: none; }

.pinball__status {
  margin-top: 0.9rem;
  min-height: 2.4em;
  font-size: 0.9rem;
  color: var(--color-cream);
}

.pinball__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.pinball__flipper-btn { min-height: 44px; }

@media (max-width: 420px) {
  .pinball__cabinet, .catchgame__cabinet { padding: 0.9rem; }
  .pinball__score-value { font-size: 1.3rem; }
}

/* =====================================================================
   Sectiescheiders — boogjes van de Sint Servaasbrug i.p.v. een rechte
   lijn tussen secties. Lichte knipoog, geen zware Maastricht-kleuren:
   de vorm verwijst naar de brug, de kleur blijft gewoon de sectie-bg.
   ===================================================================== */
.section-divider { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 22px; line-height: 0; }
.section-divider svg { display: block; width: 100%; height: 100%; }
.section-divider--to-darker { background: var(--color-bg-dark); }
.section-divider--to-darker path { fill: var(--color-bg-darker); }
.section-divider--to-dark { background: var(--color-bg-darker); }
.section-divider--to-dark path { fill: var(--color-bg-dark); }

/* =====================================================================
   Easter eggs (assets/js/easteregg.js) — puur progressive enhancement,
   nooit vereist voor een werkende site.
   ===================================================================== */
.vhs-scanlines {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  transition: opacity 0.3s ease;
}
html.vhs-mode .vhs-scanlines { opacity: 1; }
html.vhs-mode body { filter: url(#vhsAberration); }

.jd-toast {
  position: fixed;
  left: 50%;
  bottom: max(1.6rem, calc(env(safe-area-inset-bottom) + 1rem));
  transform: translate(-50%, 16px);
  z-index: 9999;
  max-width: min(90vw, 26rem);
  text-align: center;
  background: var(--color-bg-darker);
  color: var(--color-cream);
  border: 1px solid var(--color-teal);
  padding: 0.85rem 1.3rem;
  font-size: 0.88rem;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 4px 4px 0 0 rgba(12, 9, 32, 0.5);
}
.jd-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.fiod-flash {
  position: fixed;
  inset: 0;
  z-index: 9995;
  pointer-events: none;
  opacity: 0;
}
.fiod-flash.is-active {
  opacity: 1;
  animation: fiodBlink 0.4s steps(1, end) infinite;
}
@keyframes fiodBlink {
  0%, 100% { box-shadow: inset 0 0 0 10px #1e3fff; }
  50% { box-shadow: inset 0 0 0 10px #ff2a2a; }
}

.fatbike-rider {
  position: fixed;
  bottom: 6px;
  left: -140px;
  width: 90px;
  z-index: 9994;
  pointer-events: none;
  color: var(--color-bg-darker);
}
.fatbike-rider svg { width: 100%; height: auto; display: block; }
.fatbike-rider.is-riding { transition: transform 3.2s linear; transform: translateX(calc(100vw + 240px)); }

.jd-confetti-piece {
  position: fixed;
  top: -20px;
  z-index: 9996;
  pointer-events: none;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html.vhs-mode body { filter: none; }
  .fiod-flash.is-active { animation: none; opacity: 0.6; }
  .fatbike-rider.is-riding { transition: none; }
  .jd-confetti-piece { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__sun, .hero__scroll-cue { animation: none; }
  * { transition-duration: 0.01ms !important; }
}