/* ============================================================
   CROTONA - disco mode easter egg
   Activates when body has class .cr-disco-mode.
   Reduced-motion: ingetogen variant zonder strobe / hue-rotate.
   ============================================================ */

/* hue-rotate over alle gekleurde elements */
@keyframes cr-disco-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
body.cr-disco-mode .cr-hero,
body.cr-disco-mode .cr-agenda,
body.cr-disco-mode .cr-manifesto,
body.cr-disco-mode .cr-photos,
body.cr-disco-mode .cr-spotify,
body.cr-disco-mode .cr-community,
body.cr-disco-mode .cr-propaganda,
body.cr-disco-mode .cr-faq,
body.cr-disco-mode .cr-footer {
  animation: cr-disco-hue 4s linear infinite;
}

/* strobe overlay - default OFF in disco-mode, opt-in via toggle.
   Bij ON: 250ms cycle (4Hz) ipv 80ms (12.5Hz) - nog steeds intens maar
   minder ver over WCAG 2.3.1 limiet (3 flashes/sec). */
.cr-disco-strobe {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #fff;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
  display: none;
}
body.cr-disco-mode .cr-disco-strobe { display: block; }
body.cr-disco-mode.cr-disco-strobe-on .cr-disco-strobe {
  animation: cr-disco-strobe 250ms linear infinite;
}
@keyframes cr-disco-strobe {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 0.4; }
}

/* strobe toggle - alleen zichtbaar in disco-mode, paste-up sticker stijl */
.cr-disco-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1002;
  display: none;
  background: var(--crotona-paper);
  color: var(--crotona-ink);
  border: 2.5px solid var(--crotona-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 16px;
  box-shadow: 4px 4px 0 var(--crotona-ink);
  transform: rotate(-2deg);
  white-space: nowrap;
  pointer-events: auto;
}
body.cr-disco-mode .cr-disco-toggle { display: inline-block; }
.cr-disco-toggle:hover { transform: rotate(-2deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--crotona-ink); }
.cr-disco-toggle:active { transform: rotate(-2deg) translate(2px, 2px); box-shadow: 2px 2px 0 var(--crotona-ink); }
body.cr-disco-mode.cr-disco-strobe-on .cr-disco-toggle {
  background: var(--crotona-bolt);
}

/* polaroids zweven via random translate + rotate keyframes.
   Iedere polaroid krijgt --cr-disco-rot via JS voor variatie. */
@keyframes cr-disco-float {
  0%   { transform: rotate(var(--cr-rot, 0deg)) translate(0, 0); }
  25%  { transform: rotate(calc(var(--cr-rot, 0deg) + 8deg)) translate(20px, -15px); }
  50%  { transform: rotate(calc(var(--cr-rot, 0deg) - 6deg)) translate(-15px, 10px); }
  75%  { transform: rotate(calc(var(--cr-rot, 0deg) + 4deg)) translate(10px, 12px); }
  100% { transform: rotate(var(--cr-rot, 0deg)) translate(0, 0); }
}
body.cr-disco-mode .cr-polaroid {
  animation: cr-disco-float 3s ease-in-out infinite;
}

/* marquee tempo x3 */
body.cr-disco-mode .cr-marquee__track {
  animation-duration: 11s !important;
}

/* confetti raining - 30 sticker-divs, posities + delays via :nth-child */
.cr-disco-confetti {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  display: none;
}
body.cr-disco-mode .cr-disco-confetti { display: block; }
.cr-disco-confetti__piece {
  position: absolute;
  top: -40px;
  width: 14px;
  height: 14px;
  background: var(--crotona-bolt);
  border: 1.5px solid var(--crotona-ink);
  animation: cr-disco-fall 6s linear infinite;
}
@keyframes cr-disco-fall {
  to { transform: translateY(110vh) rotate(720deg); }
}
/* spread + variation - 30 pieces */
.cr-disco-confetti__piece:nth-child(1)  { left:  3%; animation-delay: 0s;     background: var(--crotona-bolt); }
.cr-disco-confetti__piece:nth-child(2)  { left:  8%; animation-delay: -1s;    background: var(--crotona-sky); }
.cr-disco-confetti__piece:nth-child(3)  { left: 14%; animation-delay: -2.5s;  background: var(--crotona-blush); }
.cr-disco-confetti__piece:nth-child(4)  { left: 19%; animation-delay: -3s;    background: var(--crotona-lilac); }
.cr-disco-confetti__piece:nth-child(5)  { left: 24%; animation-delay: -0.5s;  background: var(--crotona-bolt); }
.cr-disco-confetti__piece:nth-child(6)  { left: 30%; animation-delay: -4s;    background: var(--crotona-sky); }
.cr-disco-confetti__piece:nth-child(7)  { left: 36%; animation-delay: -2s;    background: var(--crotona-blush); }
.cr-disco-confetti__piece:nth-child(8)  { left: 42%; animation-delay: -5s;    background: var(--crotona-lilac); }
.cr-disco-confetti__piece:nth-child(9)  { left: 48%; animation-delay: -1.2s;  background: var(--crotona-bolt); }
.cr-disco-confetti__piece:nth-child(10) { left: 54%; animation-delay: -3.5s;  background: var(--crotona-sky); }
.cr-disco-confetti__piece:nth-child(11) { left: 60%; animation-delay: -0.8s;  background: var(--crotona-blush); }
.cr-disco-confetti__piece:nth-child(12) { left: 66%; animation-delay: -4.5s;  background: var(--crotona-lilac); }
.cr-disco-confetti__piece:nth-child(13) { left: 72%; animation-delay: -2.2s;  background: var(--crotona-bolt); }
.cr-disco-confetti__piece:nth-child(14) { left: 78%; animation-delay: -1.5s;  background: var(--crotona-sky); }
.cr-disco-confetti__piece:nth-child(15) { left: 84%; animation-delay: -3.8s;  background: var(--crotona-blush); }
.cr-disco-confetti__piece:nth-child(16) { left: 90%; animation-delay: -0.3s;  background: var(--crotona-lilac); }
.cr-disco-confetti__piece:nth-child(17) { left: 96%; animation-delay: -4.7s;  background: var(--crotona-bolt); }
.cr-disco-confetti__piece:nth-child(18) { left:  6%; animation-delay: -2.7s;  background: var(--crotona-sky); }
.cr-disco-confetti__piece:nth-child(19) { left: 12%; animation-delay: -5.2s;  background: var(--crotona-blush); }
.cr-disco-confetti__piece:nth-child(20) { left: 22%; animation-delay: -1.7s;  background: var(--crotona-lilac); }
.cr-disco-confetti__piece:nth-child(21) { left: 32%; animation-delay: -3.2s;  background: var(--crotona-bolt); }
.cr-disco-confetti__piece:nth-child(22) { left: 44%; animation-delay: -0.6s;  background: var(--crotona-sky); }
.cr-disco-confetti__piece:nth-child(23) { left: 56%; animation-delay: -2.1s;  background: var(--crotona-blush); }
.cr-disco-confetti__piece:nth-child(24) { left: 64%; animation-delay: -4.2s;  background: var(--crotona-lilac); }
.cr-disco-confetti__piece:nth-child(25) { left: 76%; animation-delay: -1.1s;  background: var(--crotona-bolt); }
.cr-disco-confetti__piece:nth-child(26) { left: 86%; animation-delay: -3.6s;  background: var(--crotona-sky); }
.cr-disco-confetti__piece:nth-child(27) { left: 16%; animation-delay: -4.9s;  background: var(--crotona-blush); }
.cr-disco-confetti__piece:nth-child(28) { left: 38%; animation-delay: -2.4s;  background: var(--crotona-lilac); }
.cr-disco-confetti__piece:nth-child(29) { left: 50%; animation-delay: -1.9s;  background: var(--crotona-bolt); }
.cr-disco-confetti__piece:nth-child(30) { left: 70%; animation-delay: -3.1s;  background: var(--crotona-sky); }

/* "we gaan los" tape pop-up */
.cr-disco-tape {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1001;
  background: var(--crotona-bolt);
  color: var(--crotona-ink);
  border: 3px solid var(--crotona-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 9vw, 92px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  padding: 18px 36px;
  box-shadow: 8px 8px 0 var(--crotona-ink);
  white-space: nowrap;
  display: none;
}
body.cr-disco-mode .cr-disco-tape {
  display: block;
  animation: cr-disco-tape-pop 4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes cr-disco-tape-pop {
  0%   { transform: translate(-50%, -50%) rotate(-4deg) scale(0); opacity: 0; }
  20%  { transform: translate(-50%, -50%) rotate(-4deg) scale(1.2); opacity: 1; }
  35%  { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
  85%  { transform: translate(-50%, -50%) rotate(-4deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-4deg) scale(0.95); opacity: 0; }
}

/* cursor: bolt SVG (desktop only). Inline data-uri. */
@media (hover: hover) {
  body.cr-disco-mode {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32"><path fill="%23ffd461" stroke="%23232522" stroke-width="2" d="M14 0 L0 18 L9 18 L7 32 L24 12 L14 12 Z"/></svg>') 12 16, auto;
  }
}

/* REDUCED-MOTION variant - kill strobe + hue-rotate, behoud confetti + tape */
@media (prefers-reduced-motion: reduce) {
  body.cr-disco-mode .cr-hero,
  body.cr-disco-mode .cr-agenda,
  body.cr-disco-mode .cr-manifesto,
  body.cr-disco-mode .cr-photos,
  body.cr-disco-mode .cr-spotify,
  body.cr-disco-mode .cr-community,
  body.cr-disco-mode .cr-propaganda,
  body.cr-disco-mode .cr-faq,
  body.cr-disco-mode .cr-footer { animation: none; }
  body.cr-disco-mode .cr-disco-strobe { display: none; }
  body.cr-disco-mode .cr-polaroid { animation: none; }
  body.cr-disco-mode .cr-marquee__track { animation-duration: revert !important; }
  /* confetti vertraagd ipv weg */
  body.cr-disco-mode .cr-disco-confetti__piece { animation-duration: 14s; }
  /* tape: gewone fade ipv pop */
  body.cr-disco-mode .cr-disco-tape {
    animation: cr-disco-tape-fade 4s ease-out forwards;
  }
  @keyframes cr-disco-tape-fade {
    0%, 90% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg); }
    100%    { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg); }
  }
}