:root{
    --noir:     #0A0A0A;
    --graphite: #1C1C1C;
    --ivory:    #F0EDE6;
    /* Was #7A7570, dat haalde op noir 4,34:1 en WCAG AA vraagt 4,5:1 voor
       kleine tekst. Dit is de kleinst mogelijke ophoging, 4,53:1, met dezelfde
       tint en verzadiging. Met het blote oog niet te onderscheiden. */
    --mist:     #7D7872;
    --gold:     #B8965A;
    --espresso: #241710;

    --display: "Anton", "Arial Narrow", system-ui, sans-serif;
    --meta: "Space Grotesk", ui-monospace, system-ui, sans-serif;

    --cube: 64px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html,body{ height:100%; background:var(--noir); overflow:hidden; }
  body{
    font-family:var(--meta);
    color:var(--ivory);
    -webkit-font-smoothing:antialiased;
  }

  .meta{
    font-family:var(--meta);
    text-transform:uppercase;
    letter-spacing:0.12em;
    font-size:11px;
    line-height:1.1;
    font-weight:500;
  }

  /* ---------- HERO (onder de loader) ---------- */
  .hero{
    position:fixed; inset:0; z-index:1;
    background:var(--noir);
    padding: clamp(28px, 6vw, 72px);
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center;
  }
  .hero-tag{ margin-left:auto; margin-right:auto; }

  .hero-badge-mask{ position:absolute; bottom:clamp(24px,5vw,40px); left:50%; transform:translateX(-50%); z-index:2; }
  .hero-badge{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--meta); text-transform:uppercase;
    letter-spacing:0.14em; font-size:9.5px; font-weight:500;
    /* Stond op opacity:.5, waardoor deze tekst effectief rond 2:1 uitkwam.
       De zachte indruk zit nu in de kleur zelf, die wel leesbaar blijft. */
    color:var(--mist);
  }
  .hero-badge .dot{ width:4px; height:4px; background:var(--mist); transform:rotate(45deg); }

  .hero-socials-mask > .hero-socials.line{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap: clamp(14px, 2.4vw, 30px);
    margin-top: clamp(22px, 3.4vw, 38px);
  }
  .hero-socials-mask{ overflow:visible; }
  .social{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--mist); text-decoration:none;
    transition:color .25s ease, transform .25s ease;
  }
  .social svg{ width:22px; height:22px; display:block; }
  .social:hover{ color:var(--ivory); transform:translateY(-2px); }
  .social-mail{ color:var(--gold); }
  .social-mail:hover{ color:var(--ivory); }
  .hero-word{
    font-family:var(--display);
    font-weight:400;
    color:var(--ivory);
    font-size: clamp(84px, 20vw, 300px);
    line-height:0.86;
    letter-spacing:-0.01em;
    text-transform:none;
    text-shadow:
      0 2px 1px rgba(0,0,0,.55),
      0 8px 16px rgba(0,0,0,.6),
      0 20px 42px rgba(0,0,0,.7),
      0 36px 80px rgba(0,0,0,.55);
  }
  /* ---------- Knipvlak van de reveal-mask ----------
     line-height 0.86 maakt het letterkader krapper dan de letters zelf; met
     overflow:hidden op de mask sneed dat de onderkant van de J en de contour
     van MUSIC af. Padding vergroot het knipvlak, de negatieve marge houdt de
     opmaak identiek. De font-size staat er alleen zodat de em's meeschalen met
     het woordmerk. De starttransform gaat mee omhoog, anders piept de tekst
     door de extra ruimte heen voordat de reveal begint. */
  .hero-word-mask{
    font-size: clamp(84px, 20vw, 300px);
    padding-block:.12em;
    margin-block:-.12em;
  }
  .wordmark-mask{
    font-size: clamp(64px, 15vw, 200px);
    padding-block:.12em;
    margin-block:-.12em;
  }
  /* Twee klassen diep, want de oorspronkelijke regels staan verderop in dit
     bestand en zouden bij gelijke specificiteit winnen. Blijft bewust lichter
     dan de is-in-regels, zodat de reveal zelf ongewijzigd werkt. */
  .mask.hero-word-mask > .line{ transform:translateY(145%); }
  .wordmark-mask .wordmark{ transform:translateY(145%); }

  /* ---------- Woordmerk: JER massief, MUSIC contour ----------
     Vastgesteld 24-08-2026. De lijndikte 0.042em is dezelfde verhouding als in
     het logopakket (5 pt op 120 pt), zodat site en bestand identiek zijn.
     De contourkleur staat per context apart, want -webkit-text-stroke kan geen
     currentColor gebruiken als de vulling transparant is. */
  .wm-music{
    color:transparent;
    -webkit-text-stroke-width:0.042em;
    text-shadow:none;   /* de slagschaduw van .hero-word maakt een holle letter dicht */
  }
  .hero-word .wm-music{ -webkit-text-stroke-color:var(--ivory); }
  .wordmark  .wm-music{ -webkit-text-stroke-color:var(--noir); }

  /* Terugval: zonder text-stroke-ondersteuning blijft MUSIC gewoon massief
     leesbaar in plaats van onzichtbaar. */
  @supports not (-webkit-text-stroke-width:1px){
    .wm-music{ color:inherit; }
  }

  /* warme cinematische gloed achter de wordmark (subtiel) */
  .hero-glow{
    position:absolute; left:50%; top:44%;
    width:min(120vw, 1200px); height:min(70vh, 520px);
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse at center,
      rgba(184,150,90,.12) 0%,
      rgba(120,80,30,.06) 36%,
      transparent 66%);
    pointer-events:none; z-index:0;
    opacity:0; transition:opacity 1s ease .2s;
  }
  .hero-glow.is-in{ opacity:1; }
  .hero-tag{
    font-family:var(--meta);
    color:var(--ivory);
    opacity:0.6;
    text-transform:uppercase;
    letter-spacing:0.12em;
    font-size: clamp(11px, 1.4vw, 13px);
    margin-top: clamp(16px, 2.5vw, 28px);
    max-width:34ch;
  }
  .hero-listen{
    position:absolute;
    right: clamp(28px, 6vw, 72px);
    bottom: clamp(28px, 6vw, 72px);
    display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  }
  .gold-line{
    width:64px; height:1px; background:var(--gold);
    transform:scaleX(0); transform-origin:right;
    transition:transform .8s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .gold-line.is-in{ transform:scaleX(1); }
  .hero-listen .meta{ color:var(--gold); }

  .replay{
    position:absolute;
    left: clamp(28px, 6vw, 72px);
    bottom: clamp(28px, 6vw, 72px);
    display:inline-flex; align-items:center; gap:10px;
    background:none; border:none; cursor:pointer;
    color:var(--mist);
    font-family:var(--meta); text-transform:uppercase;
    letter-spacing:0.12em; font-size:11px; font-weight:500;
    padding:6px 0;
    opacity:0; pointer-events:none;
    transition:opacity .5s ease, color .25s ease;
  }
  .replay.show{ opacity:1; pointer-events:auto; }
  .replay:hover{ color:var(--ivory); }
  .replay .dot{ width:5px; height:5px; background:var(--gold); transform:rotate(45deg); }

  /* ---------- STAGE / LOADER ---------- */
  .stage{
    position:fixed; inset:0; z-index:5;
    -webkit-clip-path:url(#revealClip);
    clip-path:url(#revealClip);
  }
  .bg{ position:absolute; inset:0; background:var(--noir); overflow:hidden; }
  .grain{
    position:absolute; inset:-60%;
    width:220%; height:220%;
    opacity:0.045;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
    animation:grain 0.6s steps(5) infinite;
    will-change:transform;
    pointer-events:none;
  }
  @keyframes grain{ from{ transform:translate(0,0);} to{ transform:translate(-7%,5%);} }

  /* Scrim: verduistert de onderrand zodat de difference-tekst leesbaar blijft */
  .scrim{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 16%, transparent 34%);
  }
  /* Verdonkert het midden zodra de wordmark JERMUSIC over shot 4 verschijnt */
  .center-scrim{
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 80% 46% at 50% 48%, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 42%, transparent 72%);
    opacity:0; transition:opacity .55s ease;
  }
  .center-scrim.on{ opacity:1; }

  /* Laag 0: action-shot montage (achter grain + tekst) */
  .shots{ position:absolute; inset:0; overflow:hidden; }
  .shot{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    filter:grayscale(1) contrast(1.06) brightness(0.92);
    opacity:0; transform:scale(1.14);
    will-change:transform, opacity;
  }
  .shot.on{
    opacity:1; transform:scale(1);
    transition:opacity .13s linear, transform 1.6s cubic-bezier(.2,.6,.2,1);
  }
  .shot.placeholder{
    display:grid; place-items:center;
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
      linear-gradient(150deg, #2a2a2a, #101010 60%, #050505);
  }
  .shot .ph{
    font-family:var(--meta); text-transform:uppercase;
    letter-spacing:0.12em; font-size:11px; font-weight:500;
    color:var(--mist); text-align:center; line-height:1.7;
  }
  .shot .ph b{
    display:block; font-family:var(--display); font-weight:400;
    font-size:64px; letter-spacing:0.02em; color:var(--ivory); opacity:0.4;
  }

  .loader{
    position:absolute; inset:0;
    mix-blend-mode:difference;
    color:var(--ivory);
  }

  /* Center: letterkubus + wordmark */
  .center{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    display:grid; place-items:center;
  }
  .cube-wrap{
    grid-area:1/1;
    width:var(--cube); height:var(--cube);
    perspective:600px;
  }
  .cube-box{
    position:relative;
    width:100%; height:100%;
    transform-style:preserve-3d;
    transform:scaleY(1);
    transform-origin:center;
    transition:transform .75s cubic-bezier(.7,0,.24,1);
    will-change:transform;
  }
  .cube-box.open{ transform:scaleY(0); }
  .face{
    position:absolute; inset:0;
    display:grid; place-items:center;
    font-family:var(--display);
    font-size: calc(var(--cube) * 0.72);
    color:var(--ivory);
    background:var(--ivory);
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
    transform:none; opacity:1;
    transition:transform .34s cubic-bezier(.6,0,.2,1), opacity .34s ease;
    will-change:transform;
    mix-blend-mode:difference; /* letter donker op ivoren vlak */
  }

  .wordmark-layer{
    position:absolute; inset:0; z-index:3;
    display:grid; place-items:center;
    pointer-events:none;
  }
  .wordmark-mask{ overflow:hidden; }
  .wordmark{
    display:block;
    font-family:var(--display);
    font-size: clamp(64px, 15vw, 200px);
    line-height:0.9;
    letter-spacing:-0.01em;
    color:var(--noir);
    white-space:nowrap;
    transform:translateY(112%);
    transition:transform .8s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .wordmark-mask.is-in .wordmark{ transform:translateY(0); }

  /* Percentage */
  .percent{
    position:absolute; right:clamp(24px,5vw,60px); bottom:clamp(24px,5vw,56px);
    font-family:var(--display);
    color:var(--ivory);
    font-size: clamp(60px, 12vw, 150px);
    line-height:0.82;
    letter-spacing:0.01em;
    display:flex; align-items:flex-end;
  }
  .percent .sym{
    font-family:var(--meta); font-weight:500;
    font-size:0.16em; letter-spacing:0.12em;
    color:var(--gold);
    margin-left:0.15em; margin-bottom:0.35em;
  }

  .subtext .meta{ font-weight:700; }
  .subtext-right .meta{ font-weight:500; }
  /* Ondertekst */
  .subtext{
    position:absolute; left:clamp(24px,5vw,60px); bottom:clamp(24px,5vw,56px);
    display:flex; flex-direction:column; gap:9px;
  }
  .subtext-right{
    left:auto; right:clamp(24px,5vw,60px);
    bottom:auto; top:clamp(24px,5vw,56px);
  }
  .mask{ overflow:hidden; }
  .mask > .line{
    display:flex; align-items:center; gap:0;
    transform:translateY(115%);
    transition:transform .85s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .mask.is-in > .line{ transform:translateY(0); }
  .mask.out > .line{
    transform:translateY(-120%);
    transition:transform .6s cubic-bezier(.7,0,.84,0);
  }
  .diamond{ width:5px; height:5px; background:var(--gold); transform:rotate(45deg); }
  .row-diamond{ padding:2px 0; }

  /* SKIP */
  .skip{
    position:fixed; top:clamp(20px,4vw,32px); right:clamp(20px,4vw,32px);
    z-index:20;
    background:none; border:none; cursor:pointer;
    color:var(--mist);
    font-family:var(--meta); text-transform:uppercase;
    letter-spacing:0.12em; font-size:11px; font-weight:500;
    padding:6px 4px;
    transition:color .25s ease, opacity .4s ease;
    mix-blend-mode:difference;
  }
  .skip:hover{ color:var(--ivory); }
  .skip.hide{ opacity:0; pointer-events:none; }

  .reveal-svg{ position:absolute; width:0; height:0; }

  /* ---------- Tap-targets (a11y: hit-area >=44x44px) ----------
     Alleen het KLIKVLAK groeit via een onzichtbare ::before hit-area,
     gecentreerd op het element. Icoon, label en plaatsing blijven exact
     gelijk (de look verandert niet). CSS-only, geen script/handler.
     Doelen: 5 social-icons (22x22), Skip (36x26), Replay.
     Alle drie zijn al gepositioneerd (.social relative, .skip fixed,
     .replay absolute), dus de ::before ankert correct zonder extra reset. */
  .social::before, .skip::before, .replay::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:44px; height:44px;
    transform:translate(-50%,-50%);
    /* transparant: puur vergroot klikgebied, geen visuele wijziging */
  }

  /* ---------- Responsive ---------- */
  @media (max-width:768px){
    :root{ --cube:44px; }
    .percent{ left:auto; right:clamp(20px,5vw,28px); bottom:clamp(24px,6vw,40px); }
    .subtext{ bottom:clamp(24px,6vw,32px); }
    .subtext-right{ top:clamp(20px,5vw,28px); }
    .hero-badge-mask{ bottom:clamp(66px,17vw,92px); }
    .hero-word{ font-size: clamp(64px, 22vw, 140px); }
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion:reduce){
    .grain{ animation:none; }
  }