/* =========================================================
   Jeugdland 75 jaar · Zomerfeest — mobile-first stylesheet
   ========================================================= */

/* brand display font (matches the poster's "22 Aug 2026" / "en meer!") */
@font-face {
  font-family: "Block Berthold";
  src: url("../fonts/BlockBertholdCondensed.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand palette (from the Figma poster) */
  --purple:  #311F5C;
  --royal:   #384FA2;
  --blue:    #0092CA;
  --cyan:    #12BDD6;
  --green:   #00B289;
  --red:     #E54225;
  --coral:   #F27156;
  --orange:  #F27521;
  --yellow:  #FDC010;
  --pink:    #E44B67;
  --salmon:  #F4898A;
  --ink:     #231F20;
  --paper:   #FFFFFF;
  --cream:   #FFF7E6;

  --font-display: "Block Berthold", "Fredoka", system-ui, sans-serif;
  --font-body: "Barlow Semi Condensed", system-ui, sans-serif;

  --shell-max: 480px;        /* phone-width canvas, centered on desktop */
  --pad: clamp(20px, 6vw, 32px);
  --radius: 22px;

  /* spacing scale — 4px base, mobile-min → 480px-max. Every vertical gap
     references one of these so the rhythm stays consistent. */
  --space-1: 4px;                        /* hairline */
  --space-2: 8px;                        /* tight    */
  --space-3: clamp(12px, 3.5vw, 16px);   /* gap between sibling cards/grids */
  --space-4: clamp(16px, 5vw, 24px);     /* element → element within a block */
  --space-5: clamp(24px, 7vw, 36px);     /* sub-section gap inside a block  */
  --space-6: clamp(40px, 11vw, 64px);    /* outer section padding */
  --pad-card: clamp(20px, 6vw, 28px);    /* uniform card inner padding */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--cream);
  overflow-x: hidden;
  line-height: 1.35;
  /* same fade as the shell, in sync — so the iOS safe area behind the
     Dynamic Island matches the canvas instead of a static cream band */
  animation: bgfade 40s ease-in-out infinite;
}

img { display: block; max-width: 100%; }

/* ---------- shell / canvas ---------- */
.shell {
  position: relative;
  z-index: 1;
  max-width: var(--shell-max);
  margin-inline: auto;
  background-color: var(--cream); /* fallback */
  min-height: 100vh;
  /* clip sideways (diamonds bleed past the edge → no horizontal scroll)
     while still allowing them to drift vertically across section borders */
  overflow-x: clip;
  /* slow drift through soft brand tints behind the light sections */
  animation: bgfade 40s ease-in-out infinite;
}
@keyframes bgfade {
  0%,  100% { background-color: #FFF7E6; } /* warm cream  */
  20%       { background-color: #E9F6FB; } /* soft cyan   */
  40%       { background-color: #FCEBF0; } /* soft pink   */
  60%       { background-color: #E5F6EF; } /* soft green  */
  80%       { background-color: #FDEEE8; } /* soft coral  */
}

section, header, footer { padding: var(--space-6) var(--pad); }

/* ---------- shared bits ---------- */
.section-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(15px, 4.5vw, 19px);
  color: var(--royal);
  margin: 0 0 var(--space-4);
}
.section-eyebrow--center { text-align: center; }

.pill {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(15px, 4.6vw, 20px);
  padding: var(--space-2) var(--space-4);
  border-radius: 10px;
}
.pill--ink { background: var(--ink); color: #fff; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  z-index: 0; /* own stacking context: diamonds that bleed past the bottom
                 stay below the line-up layer (z-index:1) → behind its text */
  text-align: center;
  background: transparent; /* lets the shell's color-fade show through */
  padding-top: clamp(20px, 5vw, 36px);
  /* note: no overflow:hidden — lets the lowest diamonds drift across the
     boundary into the empty top of the line-up section (shell still clips
     horizontally, so nothing spills sideways out of the canvas) */
}
/* hero children sit above the diamonds */
.hero > *:not(.hero__diamonds) { position: relative; z-index: 1; }

/* ---------- scattered diamonds ---------- */
.hero__diamonds { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hd {
  position: absolute;
  width: 22%;
  max-width: 96px;
  opacity: .92;
  will-change: translate, scale, transform;
}
/* Four independent layers compose without conflict:
   translate (JS parallax) → rotate (rest angle) → scale (breathing) → transform (wobble).
   Each diamond gets its own keyframe mix + non-harmonic timing + offset delay,
   so they drift in and out of phase — never pulsing all together. */
/* ONE coordinated gesture per diamond: scale + rotation share a single
   timeline, so they swell and tilt together as one move and settle back
   together. Variety lives BETWEEN diamonds (different float-* variant +
   duration + delay), never within one — so nothing looks disjointed.
   Each keyframe rest-holds the first ~third, then floats out and eases home. */
.hd-1 { top: 4%;    left: -5%;  rotate: -14deg; animation: float-c 3.0s cubic-bezier(.2,.9,.3,1) -0.4s infinite; }
.hd-2 { top: 30%;   right: -6%; rotate: 12deg;  width: 26%; animation: float-b 2.6s cubic-bezier(.2,.9,.3,1) -1.3s infinite; }
.hd-3 { top: 52%;   left: -7%;  rotate: 8deg;   width: 28%; animation: float-a 3.4s cubic-bezier(.2,.9,.3,1) -2.1s infinite; }
.hd-4 { bottom: 16%; right: -4%; rotate: -10deg; animation: float-d 2.8s cubic-bezier(.2,.9,.3,1) -0.9s infinite; }
.hd-5 { bottom: 2%;  left: 4%;  rotate: 16deg;  width: 16%; opacity: .8; animation: float-e 3.2s cubic-bezier(.2,.9,.3,1) -1.7s infinite; }

/* badge: gentle scale-only pulse (no rotation, so nothing to sync) */
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.10; } }

/* Playful, never-the-same bounce: each variant is a little dance of varied
   hits — different height (scale), tilt and direction every beat — so no two
   bounces look alike. Scale + tilt move as one. Random variant/tempo/phase
   per diamond on top (JS) keeps them all out of sync. */
@keyframes float-a {
  0%, 100% { scale: 1;    transform: rotate(0deg); }
  14% { scale: 1.30; transform: rotate(10deg); }
  30% { scale: 1.06; transform: rotate(-3deg); }
  46% { scale: 1.34; transform: rotate(-9deg); }
  63% { scale: 1.12; transform: rotate(5deg); }
  80% { scale: 1;    transform: rotate(0deg); }
}
@keyframes float-b {
  0%, 100% { scale: 1;    transform: rotate(0deg); }
  12% { scale: 1.18; transform: rotate(-8deg); }
  27% { scale: 1.32; transform: rotate(6deg); }
  44% { scale: 1.08; transform: rotate(-2deg); }
  60% { scale: 1.26; transform: rotate(13deg); }
  78% { scale: 1;    transform: rotate(0deg); }
}
@keyframes float-c {
  0%, 100% { scale: 1;    transform: rotate(0deg); }
  16% { scale: 1.24; transform: rotate(7deg); }
  33% { scale: 1.02; transform: rotate(0deg); }
  50% { scale: 1.34; transform: rotate(-7deg); }
  68% { scale: 1.10; transform: rotate(3deg); }
  85% { scale: 1;    transform: rotate(0deg); }
}
@keyframes float-d {
  0%, 100% { scale: 1;    transform: rotate(0deg); }
  10% { scale: 1.28; transform: rotate(-10deg); }
  24% { scale: 1.04; transform: rotate(2deg); }
  40% { scale: 1.16; transform: rotate(9deg); }
  56% { scale: 1.30; transform: rotate(-5deg); }
  74% { scale: 1;    transform: rotate(0deg); }
}
@keyframes float-e {
  0%, 100% { scale: 1;    transform: rotate(0deg); }
  13% { scale: 1.20; transform: rotate(6deg); }
  26% { scale: 1.34; transform: rotate(-8deg); }
  42% { scale: 1.06; transform: rotate(3deg); }
  58% { scale: 1.22; transform: rotate(11deg); }
  75% { scale: 1;    transform: rotate(0deg); }
}
@keyframes float-f {
  0%, 100% { scale: 1;    transform: rotate(0deg); }
  15% { scale: 1.32; transform: rotate(-6deg); }
  32% { scale: 1.10; transform: rotate(4deg); }
  49% { scale: 1.26; transform: rotate(-11deg); }
  66% { scale: 1.04; transform: rotate(2deg); }
  82% { scale: 1;    transform: rotate(0deg); }
}

.hero__logo {
  width: min(66%, 270px);
  margin: 0 auto var(--space-4);
}
.hero__tagline {
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: .01em;
  font-size: clamp(15px, 4.6vw, 19px);
  color: var(--ink);
  margin: 0 auto var(--space-5); /* air above ZOMERFEEST */
  max-width: 34ch;
}

.hero__title {
  position: relative;
  margin-bottom: var(--space-4);
  will-change: translate;
}
.hero__zomerfeest { width: 100%; height: auto; } /* scale proportionally */
/* badge is locked to the title (moves with ZOMERFEEST on scroll) and dips a
   touch onto the artwork at its bottom edge */
.hero__badge {
  position: absolute;
  top: -15%;         /* high, like the poster — body above the word */
  right: -6%;        /* tucked to the top-right, just past the edge */
  width: 28%;        /* poster ratio (≈28% of the title) */
  max-width: 122px;
  height: auto;      /* keep the bubble's real proportions (was stretched tall) */
  rotate: 6deg;
  transform-origin: bottom center;
  filter: drop-shadow(0 6px 10px rgba(35, 31, 32, .25));
  will-change: scale;
  animation: breathe 5s ease-in-out infinite;
}
.hero__logo { will-change: translate; }

.when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .95;
}
.when__date { color: var(--purple); font-size: clamp(40px, 13vw, 64px); }
.when__time { color: var(--royal);  font-size: clamp(40px, 13vw, 64px); }

/* =========================================================
   COUNTDOWN (card in hero)
   ========================================================= */
.countdown {
  background: var(--purple);
  color: #fff;
  text-align: center;
  border-radius: var(--radius);
  padding: var(--pad-card) clamp(14px, 4vw, 22px);
  margin-top: var(--space-5); /* gap between time block and counter */
  box-shadow: 0 12px 28px rgba(49, 31, 92, .25);
}
.countdown__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(14px, 4.2vw, 18px);
  color: var(--yellow);
  margin: 0 0 var(--space-4);
}
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  max-width: 380px;
  margin: 0 auto;
}
.cd-cell {
  background: rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: var(--space-4) var(--space-1);
}
.cd-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 10vw, 46px);
  line-height: 1;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  display: block;
  margin-top: var(--space-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .8;
}
.countdown__done {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 6.5vw, 30px);
  color: var(--yellow);
  margin: 0;
}

/* =========================================================
   LINE-UP
   ========================================================= */
/* sits above the hero diamonds that drift across the boundary, so they
   show through the (transparent) background but stay BEHIND the typography */
.lineup { text-align: center; background: transparent; position: relative; z-index: 1; padding-inline: 16px; }
.lineup__list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
/* original poster word-art (SVG) for the artist names — like Figma 11:95 */
.artist-art { margin: 0 auto; }
/* SLodDe fills to the 16px gutters; Goochelaar keeps the Figma 11:95 ratio (×0.737) */
.artist-art--slodde     { width: 100%; }
.artist-art--goochelaar { width: 74%; }

/* =========================================================
   ACTIVITEITEN
   ========================================================= */
.acts { background: transparent; }
.acts__grid {
  display: grid;
  gap: var(--space-3);
}
.act {
  border-radius: var(--radius);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(49, 31, 92, .06);
  transition: box-shadow .25s ease;
}
.act:hover { box-shadow: 0 10px 24px rgba(49, 31, 92, .12); } /* subtle desktop nicety */
.act__title {
  margin: 0;
  font-family: var(--font-display); /* Block Berthold — matches the poster */
  font-weight: 700;
  line-height: 1;
  font-size: clamp(30px, 9vw, 42px);
  letter-spacing: .5px;
}
/* scroll-reveal: cards rise + fade in as they enter view (works on mobile).
   Class is added by JS, so without JS the cards are simply visible. */
.acts__grid .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.acts__grid .reveal.is-in { opacity: 1; transform: none; }
.act p {
  margin: 0;
  font-weight: 600;
  font-size: clamp(15px, 4.4vw, 18px);
}
.act--snackbar     { background: color-mix(in srgb, var(--yellow) 24%, white); }
.act--springkussen { background: color-mix(in srgb, var(--coral) 22%, white); }
.act--schminken    { background: color-mix(in srgb, var(--pink) 18%, white); }
.act--spelletjes   { background: color-mix(in srgb, var(--cyan) 20%, white); }
.act--snackbar     .act__title { color: var(--royal); }
.act--springkussen .act__title { color: var(--red); }
.act--schminken    .act__title { color: var(--pink); }
.act--spelletjes   .act__title { color: var(--blue); }

.acts__more {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 9vw, 44px);
  color: var(--ink);
  text-align: center;
  margin: var(--space-5) 0 0;
  rotate: -3deg;
}

/* =========================================================
   LOCATIE
   ========================================================= */
.venue { background: var(--royal); color: #fff; text-align: center; }
.venue .section-eyebrow { color: var(--yellow); text-align: center; }

.venue__card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border-radius: var(--radius);
  padding: var(--space-4) var(--pad-card);
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  transition: transform .15s ease;
}
.venue__card:active { transform: scale(.98); }
/* raw SVG comes in vertically mirrored (Figma applied rotate(180) scaleX(-1)) */
.venue__icon { height: 34px; width: auto; transform: scaleY(-1); }
.venue__addr { display: flex; flex-direction: column; line-height: 1.15; }
.venue__addr strong { font-size: 20px; }
.venue__addr span { font-size: 15px; opacity: .7; }
.venue__go {
  margin-left: auto;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--royal);
  white-space: nowrap;
}

.cal-btn {
  display: inline-block;
  margin-top: var(--space-5);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: clamp(15px, 4.4vw, 18px);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--yellow) 70%, black);
  transition: transform .1s ease, box-shadow .1s ease;
}
.cal-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--yellow) 70%, black);
}

/* =========================================================
   FOOTER
   ========================================================= */
/* light footer so every logo letter — incl. the dark-purple D — stays visible */
.foot {
  background: #EEE8F6;
  color: var(--purple);
  text-align: center;
  border-top: 3px solid rgba(49, 31, 92, .12);
}
.foot__logo { width: min(56%, 220px); margin: 0 auto var(--space-4); }
.foot__line {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
  opacity: .65;
  margin: 0 0 var(--space-3);
}
.foot__pitch {
  max-width: 32ch;
  margin: 0 auto var(--space-4);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: color-mix(in srgb, var(--purple) 72%, transparent);
}
/* blue button → Jeugdland website */
.foot__site {
  display: inline-block;
  margin: 0 0 var(--space-4);
  background: var(--royal);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
  font-size: clamp(13px, 3.8vw, 15px);
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--royal) 70%, black);
  transition: transform .1s ease, box-shadow .1s ease;
}
.foot__site span { display: inline-block; transition: transform .15s ease; }
.foot__site:hover span { transform: translateX(3px); }
.foot__site:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--royal) 70%, black);
}
.foot__top {
  display: block;
  color: var(--red);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .1em;
  text-decoration: none;
}

/* =========================================================
   Responsive niceties
   ========================================================= */
/* desktop: no phone-frame — the centered column blends into the page,
   background keeps fading edge-to-edge (no rounded card, shadow or margin) */

@media (prefers-reduced-motion: reduce) {
  .hd, .hero__badge, .shell, body { animation: none; }
  .act { transition: none; }
  .acts__grid .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}