/* Dagstand-segment "Wist je dat…": feitkaarten die groot omdraaien en dan in een raster landen. Schakelbordfamilie. */

.celebration[data-mode="show-facts"] { --c1: #0b1f33; --c2: #22c55e; --c3: #e0f2fe; --glow: rgb(250 204 21 / .7); }

.cel-show-facts-scene {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 58%, rgb(34 197 94 / .13), transparent 70%),
    linear-gradient(180deg, #06121f, #0a1a2b 55%, #050b14);
}

.cel-show-facts-marks { position: absolute; inset: 0; pointer-events: none; }
.cel-show-facts-mark {
  position: absolute; bottom: -14vh; font-family: var(--font-brand); line-height: 1;
  color: rgb(134 239 172 / .1); animation: cel-show-facts-drift linear infinite;
}
@keyframes cel-show-facts-drift {
  from { transform: translateY(0) rotate(-12deg); }
  50% { transform: translateY(-60vh) rotate(12deg); }
  to { transform: translateY(-125vh) rotate(-12deg); }
}

.cel-show-facts-head { position: absolute; left: 0; right: 0; top: 4vh; opacity: 0; display: flex; justify-content: center; }
.cel-show-facts-title {
  min-height: 10vh; font-family: var(--font-brand); font-size: 10vh; line-height: 1; color: #fff; white-space: nowrap;
  text-shadow: 0 .5vh 0 #052e16, 0 0 3vh rgb(250 204 21 / .55);
}

.cel-show-facts-grid {
  position: absolute; left: 5vw; right: 5vw; top: 19vh; bottom: 5vh;
  display: grid; grid-auto-rows: minmax(0, 1fr); gap: 2.6vh;
}
.cel-show-facts-grid.is-cols-1 { left: 32vw; right: 32vw; }
.cel-show-facts-grid.is-cols-2 { left: 18vw; right: 18vw; }
.cel-show-facts-grid.is-one-row { top: 32vh; bottom: auto; grid-auto-rows: 42vh; }

.cel-show-facts-card { --a1: #bbf7d0; --a2: #22c55e; position: relative; opacity: 0; perspective: 140vh; }
.cel-show-facts-card.is-c1 { --a1: #99f6e4; --a2: #14b8a6; }
.cel-show-facts-card.is-c2 { --a1: #bae6fd; --a2: #0ea5e9; }
.cel-show-facts-card.is-c3 { --a1: #fef08a; --a2: #eab308; }
.cel-show-facts-card.is-c4 { --a1: #fbcfe8; --a2: #ec4899; }
.cel-show-facts-card.is-c5 { --a1: #fed7aa; --a2: #f97316; }
.cel-show-facts-card.is-live { z-index: 5; }

.cel-show-facts-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
.cel-show-facts-back, .cel-show-facts-front {
  position: absolute; inset: 0; border-radius: 2.4vh; backface-visibility: hidden; overflow: hidden;
  box-shadow: 0 1.6vh 4vh rgb(0 0 0 / .55);
}
.cel-show-facts-back {
  transform: rotateY(180deg); display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .04) 0 1.4vh, transparent 1.4vh 2.8vh),
    linear-gradient(160deg, #14532d, #052e16);
  border: .4vh solid #ca8a04; box-shadow: 0 1.6vh 4vh rgb(0 0 0 / .55), inset 0 0 0 .8vh rgb(0 0 0 / .25);
}
.cel-show-facts-back span {
  font-family: var(--font-brand); font-size: 18vh; line-height: 1; color: #fde047;
  text-shadow: 0 0 3vh rgb(250 204 21 / .7); animation: cel-show-facts-wobble 2.2s ease-in-out infinite;
}
.cel-show-facts-card:nth-child(2n) .cel-show-facts-back span { animation-delay: -.7s; }
.cel-show-facts-card:nth-child(3n) .cel-show-facts-back span { animation-delay: -1.4s; }
@keyframes cel-show-facts-wobble { 50% { rotate: 10deg; scale: 1.08; } }

.cel-show-facts-front {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vh; padding: 2vh 2.4vh; text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--a2) 28%, transparent), transparent 70%),
    linear-gradient(180deg, #0f2a1d, #0b1626);
  border: .3vh solid color-mix(in oklab, var(--a1) 55%, transparent);
}
.cel-show-facts-icon {
  width: 10vh; height: 10vh; border-radius: 50%; display: grid; place-items: center; font-size: 5.6vh; line-height: 1;
  background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--a1) 40%, #0b1626), #0b1626 75%);
  box-shadow: 0 0 0 .35vh var(--a2), 0 0 3vh color-mix(in oklab, var(--a2) 60%, transparent);
}
.cel-show-facts-value {
  display: flex; align-items: baseline; justify-content: center; gap: .6vh; white-space: nowrap;
  font-family: var(--font-brand); line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3vh color-mix(in oklab, var(--a2) 70%, transparent);
}
.cel-show-facts-value .is-num { font-size: 10vh; }
.cel-show-facts-value .is-unit { font-size: 4.4vh; color: var(--a1); margin-right: .8vh; }
.cel-show-facts-value .is-unit:last-child { margin-right: 0; }
.cel-show-facts-label { font-size: 2.8vh; font-weight: 700; line-height: 1.15; color: #e2e8f0; }
.cel-show-facts-punch { min-height: 3.6vh; font-family: var(--font-brand); font-size: 3.2vh; line-height: 1.1; color: #fde68a; }

.cel-show-facts-dim { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; background: rgb(2 6 15 / .78); }

/* Eindbeeld: kaarten dobberen en een glans loopt langs. */
.cel-show-facts-scene.is-done .cel-show-facts-card { animation: cel-show-facts-bob 3.2s ease-in-out infinite; }
.cel-show-facts-scene.is-done .cel-show-facts-card:nth-child(2n) { animation-delay: -1.1s; }
.cel-show-facts-scene.is-done .cel-show-facts-card:nth-child(3n) { animation-delay: -2.2s; }
@keyframes cel-show-facts-bob { 50% { translate: 0 -1.2vh; } }
.cel-show-facts-front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .3) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
}
.cel-show-facts-card.is-glint .cel-show-facts-front::after { animation: cel-show-facts-glint .9s ease-out; }
@keyframes cel-show-facts-glint {
  from { opacity: 1; background-position: 150% 0; }
  to { opacity: 1; background-position: -50% 0; }
}