/* Dagstand-segment "Waar ging het over": onderwerpbellen die opstijgen en daarna een ranglijst vormen. Schakelbordfamilie. */

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

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

.cel-show-topics-fizz { position: absolute; inset: 0; pointer-events: none; }
.cel-show-topics-fizzle {
  position: absolute; bottom: -5vh; border-radius: 50%;
  border: .2vh solid rgb(187 247 208 / .35);
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .45), transparent 40%);
  animation: cel-show-topics-fizz linear infinite;
}
@keyframes cel-show-topics-fizz {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(1.6vw, -55vh); }
  100% { transform: translate(-1vw, -112vh); opacity: 0; }
}

.cel-show-topics-head {
  position: absolute; left: 0; right: 0; top: 4vh; opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1vh; text-align: center;
}
.cel-show-topics-title { font-family: var(--font-brand); font-size: 9vh; line-height: 1; color: #fff; text-shadow: 0 .5vh 0 #052e16, 0 0 3vh rgb(45 212 191 / .6); }
.cel-show-topics-sub { font-size: 2.6vh; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #86efac; }

.cel-show-topics-field { position: absolute; left: 0; right: 0; top: 21vh; bottom: 2vh; }

/* Bellen */
.cel-show-topics-bubble { position: absolute; opacity: 0; container-type: size; }
.cel-show-topics-bubble, .cel-show-topics-row { --b1: #bbf7d0; --b2: #16a34a; }
.cel-show-topics-scene .is-c1 { --b1: #99f6e4; --b2: #0d9488; }
.cel-show-topics-scene .is-c2 { --b1: #bae6fd; --b2: #0284c7; }
.cel-show-topics-scene .is-c3 { --b1: #fef08a; --b2: #ca8a04; }
.cel-show-topics-scene .is-c4 { --b1: #fbcfe8; --b2: #db2777; }
.cel-show-topics-scene .is-c5 { --b1: #fed7aa; --b2: #ea580c; }

.cel-show-topics-inner {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center; padding: 12%;
  background:
    radial-gradient(circle at 32% 26%, rgb(255 255 255 / .6), transparent 16%),
    radial-gradient(circle at 50% 58%, color-mix(in oklab, var(--b2) 45%, #020617) 0%, color-mix(in oklab, var(--b2) 75%, #020617) 62%, var(--b2) 86%, var(--b1) 100%);
  box-shadow: 0 0 5vh color-mix(in oklab, var(--b2) 60%, transparent), inset 0 -1.4vh 3vh rgb(0 0 0 / .35);
  animation: cel-show-topics-bob 4s ease-in-out infinite;
}
.cel-show-topics-inner.is-still { animation-play-state: paused; }
@keyframes cel-show-topics-bob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  33% { translate: .8vh -1.6vh; rotate: 2deg; }
  66% { translate: -.8vh 1vh; rotate: -2deg; }
}
.cel-show-topics-word {
  max-width: 100%; text-align: center; font-weight: 800; line-height: 1.05; color: #fff;
  overflow-wrap: break-word; text-shadow: 0 .3vh 1vh rgb(0 0 0 / .7);
}
.cel-show-topics-badge {
  position: absolute; right: 2%; top: 2%; width: 30cqw; height: 30cqw; min-width: 6vh; min-height: 6vh; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-brand); font-size: max(3.4vh, 15cqw); line-height: 1; font-variant-numeric: tabular-nums;
  color: #052e16; background: radial-gradient(circle at 40% 35%, #fff, var(--b1) 70%);
  box-shadow: 0 .8vh 2vh rgb(0 0 0 / .5), 0 0 0 .4vh var(--b2);
}

/* Ranglijst */
/* Subgrid: alle balken beginnen op dezelfde lijn, de onderwerpkolom is zo breed als het langste woord. */
.cel-show-topics-list {
  position: absolute; left: 13vw; right: 13vw; top: 0; bottom: 4vh; visibility: hidden;
  display: grid; grid-template-columns: auto minmax(0, max-content) minmax(26vh, 1fr) auto;
  align-content: center; row-gap: 1.5vh;
}
.cel-show-topics-row {
  position: relative; visibility: hidden; grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid; align-items: center; column-gap: 2.4vh;
  height: 9.6vh; padding-right: 3vh; border-radius: 999px; isolation: isolate;
}
/* De pil rolt pas uit als de rij aan de beurt is. */
.cel-show-topics-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgb(15 23 42 / .85); border: .3vh solid rgb(148 163 184 / .35); box-shadow: 0 1vh 3vh rgb(0 0 0 / .45);
  transform: scaleX(0); transform-origin: 5vh 50%; transition: transform .45s cubic-bezier(.2,.9,.3,1.05);
}
.cel-show-topics-row.is-open::before { transform: scaleX(1); }
.cel-show-topics-row.is-shown { visibility: visible; }
.cel-show-topics-dot {
  width: 9.6vh; height: 9.6vh; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-brand); font-size: 4.8vh; color: #fff; text-shadow: 0 .3vh .8vh rgb(0 0 0 / .6);
  background:
    radial-gradient(circle at 32% 26%, rgb(255 255 255 / .55), transparent 18%),
    radial-gradient(circle at 50% 58%, color-mix(in oklab, var(--b2) 60%, #020617) 0%, var(--b2) 80%, var(--b1) 100%);
  box-shadow: 0 0 2.4vh color-mix(in oklab, var(--b2) 70%, transparent);
}
.cel-show-topics-term, .cel-show-topics-track, .cel-show-topics-count { opacity: 0; }
.cel-show-topics-term { font-size: 4.2vh; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-show-topics-track { height: 3vh; border-radius: 999px; background: rgb(255 255 255 / .08); overflow: hidden; }
.cel-show-topics-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--b2), var(--b1)); box-shadow: 0 0 1.4vh color-mix(in oklab, var(--b2) 70%, transparent); }
.cel-show-topics-count { justify-self: end; font-family: var(--font-brand); font-size: 6vh; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }

.cel-show-topics-dot { justify-self: center; }
.cel-show-topics-term { min-width: 0; }
.cel-show-topics-row.is-top { height: 12vh; }
.cel-show-topics-row.is-top::before { border-color: #facc15; background: linear-gradient(90deg, rgb(120 80 0 / .9), rgb(15 23 42 / .9) 70%); }
.cel-show-topics-row.is-top .cel-show-topics-dot { width: 12vh; height: 12vh; font-size: 6vh; box-shadow: 0 0 0 .45vh #facc15, 0 0 3vh rgb(250 204 21 / .6); }
.cel-show-topics-row.is-top .cel-show-topics-term { font-size: 5vh; color: #fef9c3; }
.cel-show-topics-row.is-top .cel-show-topics-fill { background: linear-gradient(90deg, #ca8a04, #fde047); box-shadow: 0 0 2vh rgb(250 204 21 / .8); }
.cel-show-topics-row.is-top .cel-show-topics-count { font-size: 7.6vh; color: #fde047; text-shadow: 0 0 3vh rgb(250 204 21 / .7); }
.cel-show-topics-crown { position: absolute; left: -2.6vh; top: -5vh; font-size: 6vh; line-height: 1; rotate: -14deg; filter: drop-shadow(0 .6vh 1vh rgb(0 0 0 / .5)); }
.cel-show-topics-row.is-crowned { box-shadow: 0 0 6vh rgb(250 204 21 / .55), 0 1vh 3vh rgb(0 0 0 / .5); animation: cel-show-topics-float 1.8s ease-in-out infinite; }
.cel-show-topics-row.is-crowned::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .25) 50%, transparent 60%) no-repeat;
  background-size: 200% 100%; animation: cel-show-topics-shine 2.6s ease-in-out infinite;
}
@keyframes cel-show-topics-float { 50% { translate: 0 -.9vh; } }
@keyframes cel-show-topics-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }