/* ==========================================================================
   D&B Festival
   Stijl volgt de rebranding: zwart, chroom, veel ruimte en dun gespatieerde
   caps. Kleur zit alleen in het accent en in de foto's bij hover.
   Alle waarden staan in :root, dus de hele look kan in een keer om.
   ========================================================================== */

/* ------------------------------------------------------------- tokens -- */
:root {
  --ink: #050506;
  --ink-2: #0a0a0c;
  --ink-3: #121215;
  --paper: #f4f4f6;
  --paper-2: #ffffff;

  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .28);
  --line-dark: rgba(5, 5, 6, .14);

  /* Eén accent, bewust spaarzaam. Groen, naar de aankleding van de zaal.
     Andere kleur nodig? Alleen deze twee regels om. */
  --accent: #3ddb8b;
  --accent-soft: rgba(61, 219, 139, .14);

  /* Duotone over alle fotografie, zodat het beeld bij het zwart en het groen past.
     Bij hover valt het weg en zie je de foto in kleur. */
  --duotone: grayscale(1) sepia(.16) hue-rotate(98deg) saturate(1.2) contrast(1.06) brightness(.9);

  /* Chroom, gebruikt op grote cijfers en losse woorden. */
  --chrome: linear-gradient(155deg, #ffffff 0%, #c9ccd3 22%, #74787f 46%, #ffffff 62%, #9aa0a8 82%, #e8eaee 100%);
  --glow: radial-gradient(60% 45% at 50% 0%, rgba(61, 219, 139, .10), transparent 70%);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-body: clamp(1rem, .95rem + .2vw, 1.0625rem);
  --fs-lead: clamp(1.05rem, .98rem + .4vw, 1.25rem);
  --fs-h2: clamp(1.9rem, 1.1rem + 2.9vw, 3.6rem);
  --fs-h3: clamp(1.1rem, .95rem + .7vw, 1.5rem);
  --fs-micro: .66rem;

  --marge: clamp(1.625rem, 5vw, 5rem);
  --maxw: 1360px;
  --readw: 58ch;
  --sec-pad: clamp(6rem, 11vw, 13rem);
  --ease: cubic-bezier(.22, .68, .16, 1);
}

/* -------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.72;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
/* De regel hierboven overrulet het hidden-attribuut van de browser: zonder dit
   bleef de vorige foto in de lightbox staan zodra de aftermovie startte. */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 100%;
  text-transform: uppercase;
  line-height: 1.06;
  letter-spacing: .12em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: .14em; }
p { margin: 0; }
h1 + p, h2 + p, h3 + p, h1 + .lead, h2 + .lead, h3 + .lead { margin-top: 22px; }
p + p { margin-top: 1.1em; }

[id] { scroll-margin-top: clamp(84px, 9vh, 112px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip { position: absolute; left: -9999px; z-index: 999; background: var(--paper); color: var(--ink); padding: 12px 20px; }
.skip:focus { left: 12px; top: 12px; }

::selection { background: var(--accent); color: #fff; }

/* -------------------------------------------------------------- scenes -- */
.scene { position: relative; isolation: isolate; }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.scene--noir { background: var(--ink); }


.scene--noir::before { background: var(--glow); }
.scene--deep { background: var(--ink-2); }
.scene--light { background: var(--paper); color: var(--ink); }

/* -------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--marge); }
.section { padding-block: var(--sec-pad); position: relative; }
.section--tight { padding-block: clamp(4rem, 7vw, 7rem); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.sec-head { max-width: 100%; }
.sec-head h2 { max-width: 20ch; }
.sec-head .lead { max-width: var(--readw); }
.sec-head--center { text-align: center; display: grid; justify-items: center; }
.sec-head--center h2, .sec-head--center .lead { margin-inline: auto; }

.kicker {
  display: inline-flex; align-items: center; gap: .8em;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 26px;
}
.kicker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.lead { font-size: var(--fs-lead); line-height: 1.68; max-width: var(--readw); color: rgba(244, 244, 246, .78); }
.scene--light .lead { color: rgba(5, 5, 6, .72); }
.muted { color: rgba(244, 244, 246, .56); }
.scene--light .muted { color: rgba(5, 5, 6, .58); }
.micro { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; }

.chrome {
  background-image: var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.pane { border: 1px solid var(--line); padding: clamp(24px, 3vw, 44px); background: rgba(255, 255, 255, .02); }
.scene--light .pane { border-color: var(--line-dark); background: rgba(255, 255, 255, .6); }

/* ------------------------------------------------------------- knoppen -- */
.btn {
  --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-line: var(--paper);
  display: inline-flex; align-items: center; gap: 1em;
  padding: 1.15em 2.2em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-line); border-radius: 0;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .26em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
.scene--light .btn:hover { color: var(--ink); border-color: var(--ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; --btn-line: var(--line-strong); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.scene--light .btn--ghost { --btn-line: var(--line-dark); }
.scene--light .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn__arrow { transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* ------------------------------------------------------- voortgangslijn -- */
.progress {
  position: fixed; top: 0; left: 0; z-index: 110;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), #9ff0c8);
  pointer-events: none;
}

/* -------------------------------------------------------------- header -- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px var(--marge);
  transition: padding .4s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  opacity: 0; transition: opacity .4s var(--ease);
  background: rgba(5, 5, 6, .78);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { padding-block: 14px; }
.site-header.is-stuck::before { opacity: 1; }

.brand { display: block; text-decoration: none; }
.brand img { width: auto; height: clamp(20px, 1.9vw, 26px); }
.site-footer .brand img { height: clamp(26px, 2.4vw, 34px); }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
.nav a {
  position: relative; text-decoration: none;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(244, 244, 246, .72); transition: color .3s var(--ease);
}
.nav a:hover { color: var(--paper); }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px;
  background: var(--accent); transition: right .4s var(--ease);
}
.nav a:not(.btn):hover::after { right: 0; }
.nav .btn { color: var(--ink); }

.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 1px; margin: 7px auto; background: currentColor; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav__meta, .nav__orb { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 0; padding: 96px clamp(28px, 8vw, 48px) 36px;
    overflow-y: auto;
    background:
      radial-gradient(90% 50% at 85% 100%, rgba(61, 219, 139, .12), transparent 60%),
      var(--ink);
    transform: translateY(-101%); transition: transform .6s var(--ease);
    counter-reset: navnr;
    overflow: hidden;
  }
  .nav.is-open { transform: translateY(0); }

  /* Grote letters met een klein volgnummer ervoor. */
  .nav a:not(.btn) {
    counter-increment: navnr;
    display: flex; align-items: baseline; gap: 16px;
    padding: 11px 0; width: 100%;
    font-family: var(--display); font-weight: 500;
    font-size: clamp(1.45rem, 6.4vw, 2.1rem);
    letter-spacing: .1em; color: var(--paper);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .nav a:not(.btn)::before {
    content: counter(navnr, decimal-leading-zero);
    font-family: var(--mono); font-size: .62rem; letter-spacing: .2em;
    color: var(--accent);
  }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 26px; }

  /* De regels schuiven een voor een binnen zodra het menu opent. */
  .nav a, .nav .nav__meta {
    opacity: 0; transform: translateY(26px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
  }
  .nav.is-open a, .nav.is-open .nav__meta { opacity: 1; transform: none; }
  .nav.is-open > *:nth-child(1) { transition-delay: .12s; }
  .nav.is-open > *:nth-child(2) { transition-delay: .18s; }
  .nav.is-open > *:nth-child(3) { transition-delay: .24s; }
  .nav.is-open > *:nth-child(4) { transition-delay: .3s; }
  .nav.is-open > *:nth-child(5) { transition-delay: .36s; }
  .nav.is-open > *:nth-child(6) { transition-delay: .42s; }
  .nav.is-open > *:nth-child(7) { transition-delay: .5s; }
  .nav.is-open > *:nth-child(8) { transition-delay: .58s; }

  .nav__meta { display: block; margin-top: 22px; color: rgba(244, 244, 246, .5); }
  .nav__orb { display: block; --orb-maat: 132px; --orb-alpha: .55; right: 26px; bottom: 96px; }
}

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden; text-align: center;
}
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--ink); }

/* De Vimeo-laag. Schuift over de lokale loop heen zodra de player draait. */
.hero__embed {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; transition: opacity 1.4s var(--ease);
  filter: var(--duotone) brightness(.5);
  pointer-events: none;
}
.hero__embed.is-in { opacity: 1; }
.hero__embed iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0;
}
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--duotone) brightness(.5);
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 50% 45%, rgba(5, 5, 6, .35), rgba(5, 5, 6, .88) 78%),
    linear-gradient(180deg, rgba(5, 5, 6, .9) 0%, transparent 30%, transparent 60%, var(--ink) 100%);
}
.hero__inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 150px var(--marge) 40px; width: 100%; max-width: var(--maxw); margin-inline: auto;
}
.hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; color: rgba(244, 244, 246, .66); }
.hero__meta span { display: inline-flex; align-items: center; gap: 12px; }
.hero__meta span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

.hero__title { display: grid; justify-items: center; gap: clamp(22px, 3vw, 40px); margin: clamp(28px, 4vw, 52px) 0 0; letter-spacing: 0; }
.hero__title img { width: min(58%, 520px); height: auto; }
.hero__title .outline {
  font-family: var(--display); font-weight: 400; font-size: clamp(.7rem, 1.5vw, 1.05rem);
  letter-spacing: .68em; text-indent: .68em; text-transform: uppercase;
  color: rgba(244, 244, 246, .82);
}
.hero__sub { max-width: 48ch; margin-top: 26px; font-size: var(--fs-lead); color: rgba(244, 244, 246, .74); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }

.hero__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 30px var(--marge) 36px; width: 100%; max-width: var(--maxw); margin-inline: auto;
}
.countdown { display: flex; gap: clamp(20px, 3vw, 46px); }
.countdown b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  background-image: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.countdown small { display: block; margin-top: 8px; font-family: var(--mono); font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 244, 246, .5); }

/* Rustige entree bij het laden: alles schuift na elkaar omhoog het beeld in. */
.hero__meta, .hero__title img, .hero__title .outline, .hero__sub, .hero__cta { animation: intro 1.1s var(--ease) backwards; }
.hero__meta { animation-delay: .1s; }
.hero__title img { animation-delay: .28s; }
.hero__title .outline { animation-delay: .5s; }
.hero__sub { animation-delay: .66s; }
.hero__cta { animation-delay: .82s; }
.hero__foot { animation: intro 1.1s var(--ease) 1s backwards; }
@keyframes intro { from { opacity: 0; transform: translateY(26px); } }

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

.scroll-cue { display: inline-flex; align-items: center; gap: 14px; color: rgba(244, 244, 246, .5); }
.scroll-cue i { display: block; width: 48px; height: 1px; background: currentColor; transform-origin: left; animation: cue 2.6s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: scaleX(.25); } 50% { transform: scaleX(1); } }


/* --------------------------------------------------------------- orbs --
   Bollen naar het chroomobject uit de rebranding. Een vaste lichtspot linksboven,
   een groene glans die er langzaam overheen draait (geanimeerde gradientpositie
   via geregistreerde properties) en een zachte topshine. Puur CSS.  */
@property --orb-x { syntax: "<percentage>"; inherits: false; initial-value: -50%; }
@property --orb-y { syntax: "<percentage>"; inherits: false; initial-value: 25%; }
@property --orb-gloed { syntax: "<percentage>"; inherits: false; initial-value: 10%; }

.orb {
  --clr-licht: #e9edf3;
  --clr-metaal: #596069;
  --clr-diep: #04050a;

  position: absolute; z-index: 0; pointer-events: none;
  width: var(--orb-maat, 320px); aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--orb-alpha, .9);
  background:
    /* vaste lichtspot */
    radial-gradient(at 25% 25%,
      rgba(255, 255, 255, .65) 0%,
      rgba(255, 255, 255, .5) 2%,
      rgba(255, 255, 255, 0) 9%),
    /* draaiende groene glans */
    radial-gradient(circle at var(--orb-x) var(--orb-y),
      rgb(61 219 139 / var(--orb-gloed)) 0%,
      transparent 32%),
    /* het metaal zelf */
    radial-gradient(circle at 40% 35%,
      var(--clr-licht) 0%,
      var(--clr-metaal) 55%,
      var(--clr-diep) 118%);
  box-shadow:
    inset -18px -12px 60px rgba(0, 0, 0, .95),
    inset 12px 8px 40px rgba(255, 255, 255, .22),
    0 18px 44px rgba(3, 8, 12, .45),
    0 0 90px 18px rgb(61 219 139 / .14);
  animation: orb-glans var(--orb-tijd, 9s) linear infinite, orb-halo 7s ease-in-out infinite alternate;
}
/* Topshine. */
.orb::after {
  content: ""; position: absolute;
  left: 52%; top: 18%; width: 34%; height: 34%;
  transform: translate(-50%, -45%) rotate(-10deg);
  border-radius: 50%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .6) 0%,
    rgba(255, 255, 255, .08) 40%,
    transparent 100%);
  filter: blur(8px);
  opacity: .95;
  mix-blend-mode: screen;
}
@keyframes orb-glans {
  15% { --orb-gloed: 20%; }
  50% { --orb-y: 46%; }
  100% { --orb-gloed: 5%; --orb-x: 150%; }
}
/* De groene halo achter de bol ademt langzaam mee. */
@keyframes orb-halo {
  from {
    box-shadow:
      inset -18px -12px 60px rgba(0, 0, 0, .95),
      inset 12px 8px 40px rgba(255, 255, 255, .22),
      0 18px 44px rgba(3, 8, 12, .45),
      0 0 90px 18px rgb(61 219 139 / .14);
  }
  to {
    box-shadow:
      inset -18px -12px 60px rgba(0, 0, 0, .95),
      inset 12px 8px 40px rgba(255, 255, 255, .22),
      0 18px 44px rgba(3, 8, 12, .45),
      0 0 150px 38px rgb(61 219 139 / .3);
  }
}

/* Plaatsing per sectie. De secties snijden af wat buiten beeld valt. */
.orb--hero { --orb-maat: clamp(130px, 15vw, 250px); --orb-tijd: 8s; --orb-alpha: .85; right: 7%; top: 16%; z-index: 0; }
.orb--zweef { animation: orb-glans var(--orb-tijd, 9s) linear infinite, orb-halo 7s ease-in-out infinite alternate, orb-zweef 11s ease-in-out infinite alternate; }
@keyframes orb-zweef { from { translate: 0 -2%; } to { translate: 0 3%; } }
.orb--tickets { --orb-maat: clamp(160px, 18vw, 300px); --orb-tijd: 14s; --orb-alpha: .9; right: clamp(24px, 4vw, 80px); top: clamp(70px, 9vw, 140px); }
.orb--geluid { --orb-maat: clamp(110px, 12vw, 190px); --orb-tijd: 7s; --orb-alpha: .95; right: clamp(24px, 4vw, 80px); top: clamp(80px, 10vw, 150px); }
.orb--outro { --orb-maat: clamp(130px, 15vw, 220px); --orb-tijd: 11s; --orb-alpha: 1; right: clamp(24px, 4vw, 80px); top: clamp(56px, 7vw, 110px); }
.orb--partners { --orb-maat: clamp(120px, 13vw, 200px); --orb-tijd: 9s; --orb-alpha: .85; right: clamp(24px, 4vw, 80px); top: clamp(60px, 8vw, 120px); }

/* De inhoud blijft altijd boven de bollen staan, maar de bollen zelf niet meepakken. */
.section > .wrap, .page-hero > :not(.orb) { position: relative; z-index: 1; }

@media (max-width: 640px) { .orb { display: none; } }

/* ------------------------------------------------------------- marquee -- */
.ticker {
  position: relative; overflow: hidden;
  padding-block: 22px;
  background: var(--accent);
  border-block: 1px solid rgba(5, 5, 6, .18);
}
.ticker--alt { background: var(--accent); }
.ticker__track { display: flex; width: max-content; animation: slide 55s linear infinite; }
.ticker--alt .ticker__track { animation-duration: 68s; animation-direction: reverse; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span {
  display: inline-flex; align-items: center; gap: 34px; padding-right: 34px;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .34em; text-transform: uppercase;
  color: rgba(5, 5, 6, .78); white-space: nowrap;
}
.ticker span::after { background: rgba(5, 5, 6, .55); }
.ticker span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }

/* De grote afsluiter: chroomletters op donker, met eigen randen. */
.ticker--groot { padding-block: clamp(26px, 4vw, 54px); background: var(--ink); border-block: 1px solid var(--line); }
.ticker--groot .ticker__track { animation-duration: 46s; }
.ticker--groot span {
  gap: clamp(28px, 4vw, 60px); padding-right: clamp(28px, 4vw, 60px);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 4.2rem); letter-spacing: .16em; text-transform: uppercase;
  background-image: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ticker--groot span::after { width: 9px; height: 9px; }

/* ---------------------------------------------------------------- over -- */
/* De tekstkolom staat verticaal gecentreerd tegenover de beeldkolom. Dat mag hier,
   want de titel staat in dezelfde kolom als de tekst eronder. */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about__body { max-width: 46ch; }

/* Feitenlijst onder de tekst, houdt de linkerkolom in evenwicht met het beeld. */
.details { margin: clamp(34px, 4vw, 52px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.scene--light .details { border-color: var(--line-dark); }
.details > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.scene--light .details > div { border-color: var(--line-dark); }
.details dt { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); padding-top: .25em; }
.details dd { margin: 0; font-size: .96rem; color: rgba(244, 244, 246, .8); }
.scene--light .details dd { color: rgba(5, 5, 6, .78); }

/* Beeldcompositie: een groot beeld links, twee kleinere rechts die exact
   uitlijnen met de boven- en onderkant van het grote beeld. */
.shots { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1.1fr 1fr; gap: 10px; }
.shots figure { margin: 0; overflow: hidden; background: var(--ink-3); }
.shots figure:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 3; aspect-ratio: 4 / 5; }
.shots figure:nth-child(2) { grid-column: 5 / 7; grid-row: 1; }
.shots figure:nth-child(3) { grid-column: 5 / 7; grid-row: 2; }
.shots img {
  width: 100%; height: 114%; object-fit: cover; object-position: 50% 18%; will-change: transform;
  filter: grayscale(calc(1 - var(--kleurmix, 0))) sepia(calc(.16 * (1 - var(--kleurmix, 0)))) hue-rotate(calc(98deg * (1 - var(--kleurmix, 0)))) saturate(calc(1.2 - .2 * var(--kleurmix, 0))) contrast(calc(1.06 - .06 * var(--kleurmix, 0))) brightness(calc(.9 + .1 * var(--kleurmix, 0)));
  transition: transform .9s var(--ease), filter .9s var(--ease);
}
.shots figure:hover img { filter: none; transform: scale(1.03); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); }
.facts div { padding: clamp(28px, 3.4vw, 48px) clamp(16px, 2vw, 30px); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.facts div:last-child { border-right: 0; }
.facts b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1; letter-spacing: .06em;
  background-image: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.facts small { display: block; margin-top: 14px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 244, 246, .5); }

/* ------------------------------------------------------------- line-up -- */
.lineup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: clamp(48px, 6vw, 80px); }
.act { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink-3); border: 1px solid var(--line); }
.act--wide { grid-column: span 1; }
.act img {
  width: 100%; height: 114%; object-fit: cover; object-position: 50% 18%; will-change: transform;
  filter: grayscale(calc(1 - var(--kleurmix, 0))) sepia(calc(.16 * (1 - var(--kleurmix, 0)))) hue-rotate(calc(98deg * (1 - var(--kleurmix, 0)))) saturate(calc(1.2 - .2 * var(--kleurmix, 0))) contrast(calc(1.06 - .06 * var(--kleurmix, 0))) brightness(calc(.86 + .14 * var(--kleurmix, 0)));
  transition: transform .9s var(--ease), filter .9s var(--ease);
}
.act:hover img { filter: none; transform: scale(1.04); }
.act::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5, 5, 6, .82)); }
.act__name {
  position: absolute; inset: auto 0 0; z-index: 2; padding: clamp(18px, 2vw, 28px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.act__nr {
  position: absolute; top: clamp(14px, 1.8vw, 22px); left: clamp(16px, 2vw, 26px); z-index: 2;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .3em; color: rgba(244, 244, 246, .85);
  padding: 6px 10px 6px 12px; background: rgba(5, 5, 6, .55); backdrop-filter: blur(4px);
}
/* De middelste kaart zakt iets, hetzelfde getrapte ritme als bij het over-blok. */
@media (min-width: 901px) {
  .lineup .act:nth-child(2) { margin-top: clamp(28px, 4vw, 64px); }
  .lineup .act:nth-child(3) { margin-top: clamp(14px, 2vw, 32px); }
}
.act__name strong { font-family: var(--display); font-weight: 500; font-size: clamp(.85rem, 1.1vw, 1.05rem); letter-spacing: .22em; text-transform: uppercase; }
.act__name em { font-family: var(--mono); font-style: normal; font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 244, 246, .55); white-space: nowrap; }

.act--tba {
  grid-column: 1 / -1; aspect-ratio: auto; display: grid; place-items: center;
  background: transparent; border-style: dashed; border-color: var(--line-strong);
  padding: clamp(36px, 5vw, 64px) 24px; text-align: center;
}
.act--tba::after { display: none; }
.act--tba p { font-family: var(--display); font-weight: 400; font-size: clamp(.9rem, 1.6vw, 1.3rem); letter-spacing: .34em; text-transform: uppercase; }
.act--tba span { display: block; margin-top: 16px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 244, 246, .5); }

/* ------------------------------------------------------------ fotoband -- */
.band { position: relative; overflow: hidden; height: clamp(300px, 44vw, 620px); background: var(--ink); }
.band img { width: 100%; height: 128%; object-fit: cover; filter: grayscale(calc(1 - var(--kleurmix, 0))) sepia(calc(.16 * (1 - var(--kleurmix, 0)))) hue-rotate(calc(98deg * (1 - var(--kleurmix, 0)))) saturate(calc(1.2 - .2 * var(--kleurmix, 0))) contrast(calc(1.06 - .06 * var(--kleurmix, 0))) brightness(calc(.62 + .26 * var(--kleurmix, 0))); transition: filter .9s var(--ease); will-change: transform; }

/* Bladerband: vijf beelden gestapeld, tijdens het scrollen wisselt het actieve
   beeld hard, als een flipboek. Het eerste beeld blijft als onderlaag staan. */
.band--flip img { position: absolute; inset: 0; top: -14%; opacity: 0; }
.band--flip img:first-child, .band--flip img.is-actief { opacity: 1; }
.band__caption {
  position: absolute; inset: auto 0 0; padding: var(--marge);
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .4em; text-transform: uppercase;
  color: rgba(244, 244, 246, .8);
}

/* ------------------------------------------------------------- tickets -- */
.tickets { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-top: clamp(48px, 6vw, 80px); }
.ticket { display: flex; flex-direction: column; gap: 26px; position: relative; }
.ticket--hot { border-color: var(--line-strong); }
.ticket h3 { font-size: clamp(1rem, 1.3vw, 1.2rem); }
.ticket__price { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1; letter-spacing: .16em; }
.ticket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticket li { display: flex; gap: 14px; font-size: .95rem; color: rgba(244, 244, 246, .74); }
.ticket li::before { content: ""; flex: 0 0 auto; width: 14px; height: 1px; margin-top: .85em; background: var(--accent); }
.ticket .btn { margin-top: auto; justify-content: center; }
.ticket__flag {
  position: absolute; top: 0; right: 0; padding: 8px 14px;
  background: var(--accent-soft); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-family: var(--mono); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase;
}

/* ------------------------------------------------------------- stappen -- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(48px, 6vw, 80px); padding: 0; }
.steps li { list-style: none; padding-top: 26px; border-top: 1px solid var(--line); }
.scene--light .steps li { border-color: var(--line-dark); }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 18px;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .3em; color: var(--accent);
}
.steps h3 { font-size: clamp(.95rem, 1.2vw, 1.1rem); }
.steps p { margin-top: 16px; color: rgba(244, 244, 246, .7); }
.scene--light .steps p { color: rgba(5, 5, 6, .7); }

/* ------------------------------------------------------------- edities -- */
.editions { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px, 4vw, 60px); margin-top: clamp(48px, 6vw, 80px); }
.aftermovie { position: relative; overflow: hidden; border: 1px solid var(--line); }
.aftermovie img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(calc(1 - var(--kleurmix, 0))) sepia(calc(.16 * (1 - var(--kleurmix, 0)))) hue-rotate(calc(98deg * (1 - var(--kleurmix, 0)))) saturate(calc(1.2 - .2 * var(--kleurmix, 0))) contrast(calc(1.06 - .06 * var(--kleurmix, 0))) brightness(calc(.62 + .24 * var(--kleurmix, 0))); transition: transform .9s var(--ease), filter .9s var(--ease); }
.aftermovie:hover img { filter: none; transform: scale(1.03); }
.aftermovie__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.aftermovie__play i {
  display: grid; place-items: center; width: clamp(64px, 6.5vw, 88px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(5, 5, 6, .35); backdrop-filter: blur(4px);
  color: var(--paper); font-style: normal; font-size: .85rem; padding-left: 4px;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.aftermovie__play:hover i { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: scale(1.05); }

.edition-list { display: grid; align-content: center; }
.edition-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: padding .4s var(--ease), color .4s var(--ease);
}
.edition-list a:first-child { border-top: 1px solid var(--line); }
.edition-list a:hover { padding-inline: 12px; color: var(--accent); }
.edition-list strong { font-family: var(--display); font-weight: 500; font-size: clamp(.9rem, 1.2vw, 1.1rem); letter-spacing: .22em; text-transform: uppercase; }
.edition-list span { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 244, 246, .5); }

/* ------------------------------------------------------------- galerij -- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery button { padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; overflow: hidden; aspect-ratio: 1; }
.gallery img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(calc(1 - var(--kleurmix, 0))) sepia(calc(.16 * (1 - var(--kleurmix, 0)))) hue-rotate(calc(98deg * (1 - var(--kleurmix, 0)))) saturate(calc(1.2 - .2 * var(--kleurmix, 0))) contrast(calc(1.06 - .06 * var(--kleurmix, 0))) brightness(calc(.88 + .12 * var(--kleurmix, 0))); transition: transform .9s var(--ease), filter .9s var(--ease); }
.gallery button:hover img { filter: none; transform: scale(1.05); }

.lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: 4vw; background: rgba(5, 5, 6, .96); }
.lightbox.is-open { display: grid; }
.lightbox img { max-width: 92vw; max-height: 86vh; width: auto; }
.lightbox button { position: absolute; top: 26px; right: 26px; width: 48px; height: 48px; background: none; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--paper); cursor: pointer; }

/* --------------------------------------------------------- subpagina -- */
/* Let op: padding-block, want een shorthand met 0 zou de zijmarges van de wrap wissen. */
.page-hero { position: relative; padding-block: clamp(150px, 18vh, 220px) clamp(60px, 8vw, 110px); }
.page-hero h1 { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.8rem); max-width: 18ch; }
.page-hero .lead { margin-top: 26px; }
.crumbs { margin-bottom: 26px; }
.crumbs a { text-decoration: none; color: rgba(244, 244, 246, .6); }
.crumbs a:hover { color: var(--accent); }

/* --------------------------------------------------------- pakketten -- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: clamp(44px, 5vw, 72px); align-items: stretch; }
.tier { display: flex; flex-direction: column; gap: 24px; position: relative; }
.tier--nu { border-color: var(--line-strong); background: rgba(61, 219, 139, .04); }
.tier--later { opacity: .72; }
.tier__prijs { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: .1em; }
.tier__prijs small { display: block; margin-top: 12px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 244, 246, .5); }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tier li { display: flex; gap: 14px; font-size: .95rem; color: rgba(244, 244, 246, .76); }
.tier li::before { content: ""; flex: 0 0 auto; width: 14px; height: 1px; margin-top: .85em; background: var(--accent); }
.tier li.leeg { color: rgba(244, 244, 246, .42); }
.tier li.leeg::before { background: var(--line-strong); }
.tier .btn { margin-top: auto; justify-content: center; }
.tier__flag {
  position: absolute; top: 0; right: 0; padding: 8px 14px;
  background: var(--accent-soft); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-family: var(--mono); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase;
}

/* Wat je precies krijgt, als genummerde lijst met ruimte. */
.voordelen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: clamp(44px, 5vw, 72px); background: var(--line); border: 1px solid var(--line); }
.voordelen div { background: var(--ink); padding: clamp(26px, 3vw, 44px); }
.scene--deep .voordelen div { background: var(--ink-2); }
.voordelen h3 { font-size: clamp(.9rem, 1.1vw, 1.05rem); }
.voordelen p { margin-top: 14px; color: rgba(244, 244, 246, .72); }
.voordelen i {
  display: block; margin-bottom: 16px; font-style: normal;
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .3em; color: var(--accent);
}

/* ------------------------------------------------------------ partners -- */
.partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: clamp(40px, 5vw, 64px); }
.partner {
  display: grid; place-items: center; padding: clamp(24px, 3vw, 40px) 20px; min-height: 118px;
  border: 1px solid var(--line);
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.partner:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .03); }
.partner img { max-height: 54px; width: auto; filter: grayscale(1) brightness(2); opacity: .8; transition: filter .4s var(--ease), opacity .4s var(--ease); }
.partner:hover img { filter: none; opacity: 1; }
.partner--leeg { border-style: dashed; }
.partner span { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 244, 246, .34); }
.partners__cta { margin-top: clamp(28px, 3vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }

/* ----------------------------------------------------------------- faq -- */
.faq { max-width: 900px; margin-top: clamp(40px, 5vw, 64px); }
.faq details { border-top: 1px solid var(--line-dark); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-dark); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 500; font-size: clamp(.85rem, 1.1vw, 1rem);
  letter-spacing: .18em; text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: linear-gradient(var(--ink), var(--ink)) center/12px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1px 12px no-repeat; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 30px; max-width: var(--readw); color: rgba(5, 5, 6, .72); }

/* --------------------------------------------------------------- outro -- */
.outro__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 6vw, 90px); align-items: end; }
.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.signup input {
  flex: 1 1 240px; padding: 1.15em 1.4em; border: 1px solid var(--line-dark); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit;
}
.signup input::placeholder { color: rgba(5, 5, 6, .45); }
.signup .btn { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-line: var(--ink); }
.signup__note { margin-top: 18px; font-size: .82rem; color: rgba(5, 5, 6, .55); }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-dark); text-decoration: none;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.socials a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* -------------------------------------------------------------- footer -- */
.site-footer { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 7vw, 90px) 32px; border-top: 1px solid var(--line); }
.footer__top { display: flex; flex-wrap: wrap; gap: 34px; justify-content: space-between; align-items: center; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 26px; }
.footer__nav a { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: rgba(244, 244, 246, .62); }
.footer__nav a:hover { color: var(--paper); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between;
  margin-top: clamp(48px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .14em; color: rgba(244, 244, 246, .45);
}
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--accent); }

/* -------------------------------------------------------------- cursor --
   Eigen cursor: een groene stip op de muis zelf, met een kleine chroombol die
   er met wat vertraging achteraan zweeft. De bol rekt uit op snelheid en groeit
   boven alles wat klikbaar is. Alleen op apparaten met een echte muis. */
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto !important; }

.cursor-dot, .cursor-bol {
  position: fixed; top: 0; left: 0; z-index: 400;
  pointer-events: none; opacity: 0;
  transition: opacity .35s var(--ease);
}
.cursor-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px rgb(61 219 139 / .8);
}
.cursor-bol {
  z-index: 399;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  background:
    radial-gradient(at 30% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 40% 35%, #e9edf3 0%, #596069 55%, #04050a 118%);
  box-shadow:
    inset -4px -3px 10px rgba(0, 0, 0, .85),
    inset 3px 2px 8px rgba(255, 255, 255, .3),
    0 0 28px 7px rgb(61 219 139 / .22);
}
.cursor-dot.is-zichtbaar, .cursor-bol.is-zichtbaar { opacity: 1; }
.cursor-bol.is-tekst { opacity: .25; }

/* ----------------------------------------------------------- animaties -- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Sectiekoppen komen uit een onzichtbare lijn omhoog. */
.sec-head.reveal h2 {
  clip-path: inset(-2% -3% 105% -3%);
  transform: translateY(46px);
  transition: clip-path 1.1s var(--ease) .08s, transform 1.1s var(--ease) .08s;
}
.sec-head.reveal.is-in h2 {
  clip-path: inset(-2% -3% -8% -3%);
  transform: none;
}
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

/* ---------------------------------------------------------- responsief -- */
@media (max-width: 1100px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts div:nth-child(2n) { border-right: 0; }
  .editions, .tickets { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .about, .outro__grid, .steps { grid-template-columns: 1fr; }
  .details > div { grid-template-columns: 1fr; gap: 6px; }
  .partners { grid-template-columns: repeat(2, 1fr); }
  .tiers, .voordelen { grid-template-columns: 1fr; }
  .lineup { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  .facts div { border-right: 0; }
  .hero__foot { flex-direction: column; align-items: center; text-align: center; }
  .scroll-cue { display: none; }
  .hero__title img { width: 76%; }
  /* Drie kolommen worden op telefoon een nette stapel van volle breedte. */
  .lineup { grid-template-columns: 1fr; }
  .lineup .act { aspect-ratio: 4 / 3; margin-top: 0 !important; }
  .lineup .act:nth-child(3) { grid-column: auto; }
  .act__name { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* De kaarttitel mag nooit onder het hoekvlaggetje schuiven. */
  .ticket h3 { padding-right: 96px; }
  .tier h3 { padding-right: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Zonder beweging en zonder muis komt de scriptlus nooit langs: dan staan de
   foto's meteen in kleur in plaats van voorgoed in duotone. */
@media (prefers-reduced-motion: reduce) and (hover: none) {
  .gallery img, .aftermovie img, .band img, .shots img, .act img { --kleurmix: 1; }
}