/* Het doek: alles is getekend op 1920×1080 en wordt geschaald. */
.stage-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; color: #fff; font-family: "Inter","Segoe UI",Arial,sans-serif; }
.st-layer, .st-bg, .st-full, .st-dim { position: absolute; inset: 0; }
.st-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-dim { background: #000; }
.st-pad { position: absolute; inset: 80px 100px; display: flex; flex-direction: column; }
.st-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.st-lyrics { white-space: pre-wrap; line-height: 1.28; font-weight: 600; max-height: 920px; width: 100%; overflow: hidden; text-wrap: balance; }
.shadow { text-shadow: 0 3px 16px rgba(0,0,0,.8), 0 0 3px rgba(0,0,0,.65); }
.st-title { font-weight: 800; line-height: 1.1; padding-bottom: .08em; max-height: 520px; width: 100%; overflow: hidden; text-align: center; text-wrap: balance; }
.st-sub { margin-top: 36px; font-weight: 600; letter-spacing: .02em; }
.st-footer { position: absolute; bottom: -52px; left: 0; right: 0; text-align: center; font-size: 26px; opacity: .6; }
.st-seclabel { position: absolute; top: -52px; left: 0; font-size: 30px; opacity: .55; text-transform: uppercase; letter-spacing: .1em; }
.st-contain, .st-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.st-cover { object-fit: cover; }
.st-logo { width: 520px; }
.st-overlay { opacity: 0; transition: opacity .5s; pointer-events: none; }
.st-overlay.on { opacity: 1; }
.st-hidden { opacity: 0; transition: opacity .4s; }
.st-layer { transition: opacity .4s; }
.st-play { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(0,0,0,.55); font-size: 110px; line-height: 220px; text-align: center; padding-left: 16px; }
.st-note { font-size: 220px; opacity: .8; }

/* ---------- overgangen ---------- */
.fx-in, .fx-out { animation-duration: var(--ms, 500ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.fx-out.fx-none { display: none; }
.fx-in.fx-fade { animation-name: fxFadeIn; } .fx-out.fx-fade { animation-name: fxFadeOut; }
.fx-in.fx-slide-left { animation-name: fxSlideLeftIn; } .fx-out.fx-slide-left { animation-name: fxSlideLeftOut; }
.fx-in.fx-slide-up { animation-name: fxSlideUpIn; } .fx-out.fx-slide-up { animation-name: fxSlideUpOut; }
.fx-in.fx-zoom { animation-name: fxZoomIn; } .fx-out.fx-zoom { animation-name: fxZoomOut; }
.fx-in.fx-blur { animation-name: fxBlurIn; } .fx-out.fx-blur { animation-name: fxBlurOut; }
.fx-in.fx-flip { animation-name: fxFlipIn; } .fx-out.fx-flip { animation-name: fxFlipOut; }
@keyframes fxFadeIn { from { opacity: 0; } } @keyframes fxFadeOut { to { opacity: 0; } }
@keyframes fxSlideLeftIn { from { transform: translateX(100%); } } @keyframes fxSlideLeftOut { to { transform: translateX(-100%); } }
@keyframes fxSlideUpIn { from { transform: translateY(14%); opacity: 0; } } @keyframes fxSlideUpOut { to { transform: translateY(-14%); opacity: 0; } }
@keyframes fxZoomIn { from { transform: scale(.88); opacity: 0; } } @keyframes fxZoomOut { to { transform: scale(1.1); opacity: 0; } }
@keyframes fxBlurIn { from { filter: blur(40px); opacity: 0; } } @keyframes fxBlurOut { to { filter: blur(40px); opacity: 0; } }
@keyframes fxFlipIn { from { transform: perspective(2400px) rotateX(-80deg); opacity: 0; } } @keyframes fxFlipOut { to { transform: perspective(2400px) rotateX(80deg); opacity: 0; } }

/* ---------- countdown ---------- */
.cd { position: absolute; inset: 0; --o: 0; --p: 0; --cross: #ffd98a; }
.kenburns { animation: kenburns 15s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.16) translate(-2.5%, -2%); } }
.cd-label { position: absolute; top: 58px; left: 0; right: 0; text-align: center; font-size: 62px; font-weight: 600; letter-spacing: .01em; transition: opacity 1s; }
.cd-emblem { position: absolute; left: 50%; top: 57%; width: 900px; height: 900px; margin: -450px 0 0 -450px; perspective: 1500px; }
.cd-body, .cd-wing, .cd-wing img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cd-body { transform: translateY(calc(var(--zw, 0) * 1150px)); filter: drop-shadow(0 12px 30px rgba(0,0,0,.45)); }
.cd-wing { transform-origin: 51.3% 46.9%; will-change: transform; filter: drop-shadow(0 12px 30px rgba(0,0,0,.45)); }
/* dicht (--o:0): vleugels tegen elkaar, cijfers rechtop. open (--o:1): uitgeslagen en naar achteren gekanteld. */
.cd-wing-l { transform: translate(calc(var(--zw, 0) * -1350px), calc(var(--zw, 0) * -1050px)) rotateZ(calc(var(--zw, 0) * -25deg)) rotateZ(var(--f, 0deg)) rotateZ(calc((1 - var(--o)) * 13deg + var(--o) * -24deg)) rotateY(calc(var(--o) * -40deg)); }
.cd-wing-r { transform: translate(calc(var(--zw, 0) * 1350px), calc(var(--zw, 0) * -1050px)) rotateZ(calc(var(--zw, 0) * 25deg)) rotateZ(calc(var(--f, 0deg) * -1)) rotateZ(calc((1 - var(--o)) * -13deg + var(--o) * 24deg)) rotateY(calc(var(--o) * 40deg)); }
.cd-digits { position: absolute; font-size: 176px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,.65), 0 0 4px rgba(0,0,0,.6); opacity: calc(1 - var(--o) * .72); }
.cd-wing-l .cd-digits { left: 30%; top: 30%; transform: translate(-50%, -50%) rotate(-13deg); }
.cd-wing-r .cd-digits { left: 72.5%; top: 30%; transform: translate(-50%, -50%) rotate(13deg); }
.cd-colon { position: absolute; left: 51.3%; top: 25.6%; width: 0; height: 0; opacity: calc(1 - var(--o) * 4); }
.cd-colon i { position: absolute; left: -17px; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.65), 0 0 4px rgba(0,0,0,.6); }
.cd-colon i:first-child { top: -45px; } .cd-colon i:last-child { top: 27px; }
.cd-cross { position: absolute; left: 51.3%; top: 9%; width: 22%; margin-left: -11%; transform-origin: 50% 82%;
  /* dicht: klein en verstopt achter de vleugels (midden van het logo); open: groeit naar voren en omhoog */
  transform: translateY(calc((1 - var(--o)) * 30%)) scale(calc((.18 + var(--o) * .82 + var(--p) * .08) * var(--g, 1)));
  opacity: clamp(0, calc(var(--o) * 3 - var(--zm, 0) * 10), 1); animation: crossGlow 2.6s ease-in-out infinite alternate; }
.cd-cross svg { display: block; width: 100%; fill: var(--cross); }
@keyframes crossGlow {
  from { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 22px var(--cross)) drop-shadow(0 0 60px var(--cross)); }
  to { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 40px var(--cross)) drop-shadow(0 0 130px var(--cross)) brightness(1.2); }
}
/* gloed achter het kruis en een zachte lichtbundel over het hele beeld, alleen als de vleugels open zijn */
.cd-rays { position: absolute; left: 51.3%; top: 28%; width: 70%; height: 70%; margin: -35% 0 0 -35%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cross) 85%, #fff), color-mix(in srgb, var(--cross) 40%, transparent) 45%, transparent);
  opacity: calc(var(--o) * .95); transform: scale(calc(.3 + var(--o) * .9)); filter: blur(6px); }
.cd-halo { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--o) * .75);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cross) 55%, transparent), transparent 52%); mix-blend-mode: screen; }
.cd-endbg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; } .cd-endbg.on { opacity: 1; } .cd-endbg.zoomed { transition-duration: .15s; } /* na het inzoomen zit hij al onder het gele scherm klaar */
.cd-endbg img { width: 100%; height: 100%; object-fit: cover; }
.cd-frozen img { animation-play-state: paused !important; }
.kenburns.kb1 { animation-direction: alternate-reverse; } .kenburns.kb2 { animation-name: kenburns2; } .kenburns.kb3 { animation-name: kenburns2; animation-direction: alternate-reverse; }
@keyframes kenburns2 { from { transform: scale(1.14) translate(2%, 1.5%); } to { transform: scale(1) translate(0, 0); } }

.cd-plain { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 380px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cd-end { position: absolute; left: 0; right: 0; bottom: 96px; text-align: center; font-size: 110px; font-weight: 800; opacity: 0; transform: translateY(30px); transition: opacity 1.5s .8s, transform 1.5s .8s; }
.cd-done .cd-end { opacity: 1; transform: none; }
.cd-done .cd-label, .cd-done .cd-digits, .cd-done .cd-colon, .cd-done .cd-plain { opacity: 0; transition: opacity 1s; }
.cd-foot { position: absolute; left: 60px; right: 60px; bottom: 36px; display: flex; justify-content: space-between; font-size: 36px; opacity: .8; font-variant-numeric: tabular-nums; }
.cd-done .cd-foot { opacity: 0; transition: opacity 1s; }

/* Carousel (liedteksten): de volgende regel staat klein onderin en groeit via een bocht naar voren; de oude draait via een bocht naar boven weg */
.st-peek { position: absolute; left: 0; right: 0; bottom: -10px; font-size: 40px; font-weight: 600; opacity: .5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 12px rgba(0,0,0,.6); pointer-events: none; }
.fx-in.fx-carousel, .fx-out.fx-carousel { animation: none; } /* beweging zit in stage.js */
.fx-in.fx-carousel-old { animation-name: fxCarIn; transform-origin: 50% 100%; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
.fx-out.fx-carousel-old { animation-name: fxCarOut; transform-origin: 50% 0%; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
/* één vloeiende beweging (geen tussenstap halverwege: die gaf een "hapering") */
@keyframes fxCarIn {
  from { transform: perspective(1600px) translate(0, 480px) rotateX(-14deg) scale(.42); opacity: .5; }
  to { transform: perspective(1600px) translate(0, 0) rotateX(0) scale(1); opacity: 1; }
}
@keyframes fxCarOut {
  from { transform: perspective(1600px) translate(0, 0) rotateX(0) scale(1); opacity: 1; }
  to { transform: perspective(1600px) translate(0, -420px) rotateX(48deg) scale(.6); opacity: 0; }
}

/* laatste 10 seconden: meer aandacht — warme gloed op de cijfers en een kloppende lichtkrans */
.cd-final .cd-halo { opacity: calc(.55 + .4 * var(--pk, 0)); transform: scale(calc(1 + .06 * var(--pk, 0))); filter: brightness(calc(.9 + .55 * var(--pk, 0))); animation: haloIn .9s ease-out; }
@keyframes haloIn { from { opacity: 0; } }

/* inzoomen op het kruis na afloop van de countdown */
.cd-zc { position: absolute; left: 872.7px; top: 246.6px; width: 198px; height: 297px; transform-origin: 99px 55px; transform: scale(var(--zs, 1)); opacity: calc(clamp(0, calc(var(--zm, 0) * 10), 1) * var(--zv, 1)); pointer-events: none; }
.cd-zc-in { position: absolute; inset: 0; transform-origin: 50% 82%; transform: scale(calc(1.06 * var(--g, 1))); }
/* de gloed (zwaar om te tekenen als hij heel groot wordt) vervaagt zacht en wordt pas weggehaald als hij onzichtbaar is; de halo neemt het over */
.cd-zc-glow { animation: crossGlow 2.6s ease-in-out infinite alternate; opacity: clamp(0, calc(1 - (var(--zm, 0) - .35) / .35), 1); } .cd-zfar .cd-zc-glow { visibility: hidden; animation: none; }
.cd-zc svg { display: block; width: 100%; fill: var(--cross); }
.cd-zoomfill { position: absolute; inset: 0; background: var(--cross); opacity: var(--zf, 0); pointer-events: none; }
.cd-zooming .cd-end { opacity: 0; transition: opacity .4s; } .cd-zooming .cd-halo { transform-origin: 50.6% 27.9%; transform: scale(min(var(--zs, 1), 40)); opacity: calc(.8 * var(--zv, 1)); } /* gloed blijft en groeit mee met het inzoomen */

/* laatste 10 seconden: de flits volgt exact de seconde (--pk wordt per beeld uit de resterende tijd berekend, dus altijd gelijk met de tik) */
.cd-final .cd-digits, .cd-final.cd-nologo .cd-plain { animation: none; color: #fff3d6;
  text-shadow: 0 0 calc(18px + 52px * var(--pk, 0)) rgba(255, 255, 255, calc(.3 + .7 * var(--pk, 0))), 0 0 calc(30px + 60px * var(--pk, 0)) rgba(255, 150, 40, calc(.45 + .45 * var(--pk, 0))), 0 4px 18px rgba(0, 0, 0, .65); }
.cd-final .cd-colon i { background: #fff3d6; box-shadow: 0 0 calc(14px + 44px * var(--pk, 0)) rgba(255, 255, 255, calc(.35 + .65 * var(--pk, 0))), 0 0 calc(26px + 56px * var(--pk, 0)) rgba(255, 150, 40, calc(.5 + .45 * var(--pk, 0))), 0 4px 18px rgba(0, 0, 0, .5); }
/* eigen teksten: die bij dichte vleugels vervagen en een seconde later komt de andere (--tc/--to uit de berekening van de beweging) */
.cd-txt { position: absolute; transform: translate(-50%, -50%); text-align: center; font-weight: 700; white-space: pre-line; max-width: 90%; line-height: 1.15; pointer-events: none; --zz: clamp(0, calc(1 - var(--zm, 0) * 10), 1); }
.cd-txt.t-closed { opacity: calc(var(--tc, 1) * var(--zz)); } .cd-txt.t-open { opacity: calc(var(--to, 0) * var(--zz)); }
.cd-done .cd-txt { opacity: 0 !important; transition: opacity 1s; } /* bij 0:00 maken de eigen teksten plaats voor de eindtekst */
.cd-blackfill { position: absolute; inset: 0; background: #000; opacity: var(--zk, 0); pointer-events: none; }

/* bij het inzoomen: de stralen en de dubbele punt verdwijnen, vleugels en onderstuk schieten weg (--zw) */
.cd-zooming .cd-rays, .cd-zooming .cd-colon { opacity: clamp(0, calc(1 - var(--zw, 0) * 4), 1) !important; }
.cd-zfar .cd-emblem { visibility: hidden; }

.st-copy { margin-top: 30px; opacity: .7; font-weight: 500; text-align: center; max-width: 1500px; }
.st-music { font-size: 380px; line-height: 1; font-family: "Segoe UI Symbol","Noto Music","DejaVu Sans",sans-serif; opacity: .92; }
.st-copy.at-bottom { position: absolute; left: 0; right: 0; bottom: -44px; margin: 0; max-width: none; }
.cd-crop { position: absolute; inset: 0; overflow: hidden; }
.cd-crop img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scrollen (liedteksten, zoals Proclaim): animatie in stage.js; hier alleen de gedimde volgende regel */
.fx-in.fx-scroll, .fx-out.fx-scroll { animation: none; }
.st-next { opacity: .4; }
.st-gone { display: none; }

/* Optie "tijd zakt naar de vlag": een losse kopie van de tijd op het logo (niet op de vleugels), die in 5 stappen naar het lint onder de vleugels zakt */
.cd-low { position: absolute; inset: 0; pointer-events: none; display: none; }
.cd-drop .cd-low { display: block; } .cd-drop .cd-wing .cd-digits, .cd-drop .cd-colon:not(.cd-lcol) { visibility: hidden; }
.cd-low .cd-digits { transform: translate(-50%, -50%) scale(calc(1 - .38 * var(--dd, 0))); top: calc(25.6% + 36.4% * var(--dd, 0)); }
.cd-lmm { left: calc(34.3% + 9.2% * var(--dd, 0)); } .cd-lss { left: calc(68.2% - 8.9% * var(--dd, 0)); }
.cd-low .cd-lcol { top: calc(25.6% + 36.4% * var(--dd, 0)); opacity: 1; transform: scale(calc(1 - .38 * var(--dd, 0))); }
.cd-low .cd-digits { opacity: 1; } .cd-done .cd-low { opacity: 0; transition: opacity 1s; } .cd-zooming .cd-low { opacity: 0; }

/* vleugels al open bij 0:00 en meteen inzoomen: geen eindtekst (die flitste anders heel even op vlak voor het inzoomen) */
.cd-noend .cd-end { display: none; }