/* Cascaderun: de laatste minuut voor de opening (zie start.js). */

.cr-finale { display: none; }
.cr-finale-aan .cr-finale,
.cr-start-open .cr-finale--module { display: flex; }
.cr-finale {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.cr-finale__kop {
  margin: 0;
  font-family: 'Dosis', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cr-finale__ring {
  position: relative;
  width: clamp(130px, 32vw, 176px);
  aspect-ratio: 1;
}
.cr-finale__ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.cr-finale__baan { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 7; }
.cr-finale__rest {
  fill: none;
  stroke: #de6339;
  stroke-width: 7;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(222, 99, 57, .6));
}
.cr-finale__getal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 10%;
  font-family: 'Dosis', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(54px, 13vw, 76px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cr-finale__getal.is-woord {
  font-size: clamp(19px, 4.6vw, 24px);
  line-height: 1.1;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.cr-finale__getal.is-tik { animation: cr-tik .45s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes cr-tik {
  0% { transform: scale(1.35); opacity: .2; }
  100% { transform: scale(1); opacity: 1; }
}

/* START!: de ring loopt in een klap vol en het woord springt groot in beeld. */
.cr-start-nu .cr-finale__rest { stroke-dashoffset: 0 !important; transition: stroke-dashoffset .35s ease-out; }
.cr-start-nu .cr-finale__getal { color: #de6339; font-size: clamp(26px, 6vw, 34px); }
.cr-start-nu .cr-finale__getal.is-tik { animation: cr-knal .6s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes cr-knal {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---- in de aftelklok ---- */
.crdn.cr-finale-aan .crdn-units,
.crdn.cr-finale-aan .crdn-sub { display: none; }
.crdn .cr-finale { margin: 6px 0 4px; color: #fff; }
.crdn.crdn-licht .cr-finale { color: #084b8f; }
.crdn.crdn-licht .cr-finale__baan { stroke: rgba(8, 75, 143, .14); }
/* Tijdens START! nog geen knop; die springt daarna tevoorschijn. */
.crdn.cr-start-nu .crdn-open { display: none !important; }
.crdn.cr-start-open .crdn-btn { animation: cr-sprong .7s cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes cr-sprong {
  0% { transform: scale(.3); opacity: 0; }
  55% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 0 10px rgba(222, 99, 57, .25), 0 14px 30px -10px rgba(222, 99, 57, 1); }
  100% { transform: scale(1); }
}

/* ---- in de inschrijfmodule ---- */
#crx-inschrijven .cr-finale--module {
  margin: 0 0 18px;
  padding: 18px 16px 20px;
  border-radius: 16px;
  background: radial-gradient(120% 140% at 50% 0%, #0d5fae 0%, #084b8f 55%, #063a6f 100%);
  color: #fff;
  overflow: hidden;
}
#crx-inschrijven .cr-finale--module .cr-finale__ring { width: clamp(120px, 28vw, 150px); }
#crx-inschrijven.cr-start-nu .cr-finale--module { animation: cr-gloed .9s ease-out; }
@keyframes cr-gloed {
  0% { box-shadow: 0 0 0 0 rgba(222, 99, 57, .7); }
  100% { box-shadow: 0 0 0 22px rgba(222, 99, 57, 0); }
}
/* Daarna klapt de banner dicht en gaan de tegels een voor een open. */
#crx-inschrijven.cr-start-open .cr-finale--module { animation: cr-dicht .55s ease-in forwards; }
@keyframes cr-dicht {
  0% { max-height: 320px; opacity: 1; }
  100% { max-height: 0; opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}
#crx-inschrijven.cr-start-open .crx-tegel {
  animation: cr-vak .6s cubic-bezier(.2, .9, .3, 1.35) both;
  animation-delay: calc(var(--cr-start-i, 0) * 110ms + 250ms);
}
@keyframes cr-vak {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 3px #de6339, 0 16px 30px -12px rgba(222, 99, 57, .8); }
  100% { transform: none; }
}

/* ---- confetti ---- */
.cr-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2147483000;
}

/* ---- de knop voor het geluid ---- */
.cr-geluid {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 2147482000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #de6339;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(8, 75, 143, .28), 0 2px 18px rgba(222, 99, 57, .35);
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity .3s, transform .3s, background .2s;
}
.cr-geluid.is-zichtbaar { opacity: 1; transform: translate(-50%, 0); }
.cr-geluid.is-aan { background: #084b8f; }
.cr-geluid:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cr-geluid__icoon {
  width: 20px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 576 512%22%3E%3Cpath d=%22M301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM425 167l55 55 55-55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z%22/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 576 512%22%3E%3Cpath d=%22M301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM425 167l55 55 55-55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z%22/%3E%3C/svg%3E") no-repeat center / contain;
}
.cr-geluid.is-aan .cr-geluid__icoon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 512%22%3E%3Cpath d=%22M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z%22/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 512%22%3E%3Cpath d=%22M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z%22/%3E%3C/svg%3E");
}
.cr-geluid:not(.is-aan) { animation: cr-roep 2.2s ease-in-out infinite; }
@keyframes cr-roep {
  0%, 100% { box-shadow: 0 8px 28px rgba(8, 75, 143, .28), 0 0 0 0 rgba(222, 99, 57, .5); }
  50% { box-shadow: 0 8px 28px rgba(8, 75, 143, .28), 0 0 0 10px rgba(222, 99, 57, 0); }
}
/* Op de telefoon boven de menubalk. */
@media (max-width: 980px) {
  .cr-geluid { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* Minder beweging: alleen de tekst, zonder sprongen. */
@media (prefers-reduced-motion: reduce) {
  .cr-finale__getal.is-tik,
  .cr-start-nu .cr-finale__getal.is-tik,
  #crx-inschrijven.cr-start-nu .cr-finale--module,
  #crx-inschrijven.cr-start-open .crx-tegel,
  .crdn.cr-start-open .crdn-btn { animation: none; }
  #crx-inschrijven.cr-start-open .cr-finale--module { animation: none; display: none; }
  .cr-start-nu .cr-finale__rest { transition: none; }
  .cr-geluid:not(.is-aan) { animation: none; }
}