/* Weekafsluiting: aftiteling met filmkorrel, daarna zonsondergang. Slot gecentreerd op 38vw; rechts de octopus. */

.celebration[data-mode="credits"] { --c1: #1a1206; --c2: #e9a800; --c3: #fff1a8; --glow: rgb(255 190 60 / .8); }

.cel-credits-scene { position: absolute; inset: 0; overflow: hidden; background: rgb(4 3 2 / .82); }
.cel-credits-scene::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(ellipse 38% 55% at 50% 52%, rgb(255 230 160 / .16), transparent 70%), radial-gradient(ellipse at 50% 50%, transparent 40%, rgb(0 0 0 / .7));
}
.cel-credits-scene.is-spot::before, .cel-credits-scene.is-stars::before { opacity: 1; }

.cel-credits-bar { position: absolute; left: 0; right: 0; height: 8vh; background: #000; z-index: 5; }
.cel-credits-bar.is-top { top: 0; }
.cel-credits-bar.is-bottom { bottom: 0; }

.cel-credits-beam {
  position: absolute; left: 50%; top: -10vh; width: 120vh; height: 120vh; translate: -50% 0; opacity: 0;
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgb(255 240 200 / .09) 14deg, rgb(255 240 200 / .14) 20deg, rgb(255 240 200 / .09) 26deg, transparent 40deg);
  animation: cel-credits-flicker .18s steps(2) infinite;
}
.cel-credits-scene.is-sunset .cel-credits-beam { display: none; }
@keyframes cel-credits-flicker { 50% { filter: brightness(1.25); } }

.cel-credits-grain {
  position: absolute; inset: -10%; pointer-events: none; z-index: 4; opacity: .12; mix-blend-mode: screen;
  background:
    radial-gradient(circle at 20% 30%, #fff .08vh, transparent .2vh) 0 0 / 7vh 9vh,
    radial-gradient(circle at 70% 60%, #fff .06vh, transparent .18vh) 0 0 / 11vh 6vh,
    radial-gradient(circle at 40% 80%, #fff .1vh, transparent .25vh) 0 0 / 13vh 15vh,
    linear-gradient(90deg, transparent 49.8%, rgb(255 255 255 / .4) 50%, transparent 50.2%) 0 0 / 61vw 100%;
  animation: cel-credits-grain .4s steps(4) infinite;
}
@keyframes cel-credits-grain {
  0% { translate: 0 0; } 25% { translate: -3vh 2vh; } 50% { translate: 2vh -4vh; } 75% { translate: -1vh 3vh; } 100% { translate: 3vh 1vh; }
}

/* Intro */
.cel-credits-intro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cel-credits-leader {
  position: absolute; width: 44vh; height: 44vh; border-radius: 50%;
  border: .6vh solid rgb(255 255 255 / .7); box-shadow: 0 0 0 2vh rgb(255 255 255 / .08), inset 0 0 0 5vh rgb(255 255 255 / .05);
  background: linear-gradient(90deg, transparent 49.6%, rgb(255 255 255 / .5) 49.6% 50.4%, transparent 50.4%), linear-gradient(0deg, transparent 49.6%, rgb(255 255 255 / .5) 49.6% 50.4%, transparent 50.4%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cel-credits-leader-hand { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgb(255 255 255 / .35) 0deg 60deg, transparent 60deg); }
.cel-credits-leader-num { position: relative; font-size: 26vh; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 3vh rgb(255 255 255 / .6); }

.cel-credits-card { visibility: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cel-credits-card-kicker { font-size: 3vh; font-weight: 700; letter-spacing: .5em; text-transform: uppercase; color: #fde68a; }
.cel-credits-card-title {
  margin-top: 1vh; font-family: var(--font-brand); font-size: 17vh; line-height: 1;
  background: linear-gradient(180deg, #fff 20%, #fde68a 55%, #d97706);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .6vh 0 #451a03) drop-shadow(0 0 4vh rgb(255 190 60 / .7));
}
.cel-credits-card-sub { margin-top: 1vh; font-size: 3.4vh; font-weight: 500; letter-spacing: .2em; color: #fff; opacity: .85; }

/* Aftiteling */
.cel-credits-roll { position: absolute; left: 50%; top: 0; width: min(64vw, 120vh); translate: -50% 0; visibility: hidden; }
.cel-credits-head {
  margin: 5vh 0 2vh; text-align: center; font-family: var(--font-brand); font-size: 7vh; line-height: 1.1;
  color: #fde68a; text-shadow: 0 0 3vh rgb(255 190 60 / .6);
}
.cel-credits-row { display: flex; align-items: baseline; gap: 2vh; padding: 1.4vh 0; opacity: .55; transition: opacity .3s; }
.cel-credits-row.is-lit { opacity: 1; }
.cel-credits-row-icon { font-size: 4.4vh; }
.cel-credits-row-label { font-size: 5vh; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.cel-credits-row-dots { flex: 1; border-bottom: .5vh dotted rgb(253 230 138 / .45); translate: 0 -1vh; }
.cel-credits-row-num {
  min-width: 14vh; text-align: right; font-size: 8vh; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: #fde68a; text-shadow: 0 0 2vh rgb(255 190 60 / .5);
}
.cel-credits-row.is-lit .cel-credits-row-num { text-shadow: 0 0 3vh rgb(255 200 80 / .95), 0 0 1vh #fff; }
.cel-credits-project { display: flex; justify-content: center; align-items: center; gap: 2vh; padding: 1.4vh 0; opacity: .6; transition: opacity .3s; }
.cel-credits-project.is-lit { opacity: 1; }
.cel-credits-project-cup { font-size: 6vh; }
.cel-credits-project-name { font-size: 6vh; font-weight: 700; color: #fff; text-shadow: 0 0 3vh rgb(255 190 60 / .8); }

/* Zwaarste kaart */
.cel-credits-heavy { position: absolute; inset: 0; visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; }
.cel-credits-heavy-kicker { font-size: 3.4vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #fde68a; text-align: center; }
.cel-credits-heavy-card {
  width: min(84vh, 80vw); padding: 4vh 5vh; border-radius: 2vh; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / .03) 0 1vh, transparent 1vh 2.4vh),
    linear-gradient(160deg, #3f3f46, #18181b 70%);
  border: .5vh solid #e9a800;
  box-shadow: 0 3vh 6vh rgb(0 0 0 / .7), 0 0 6vh rgb(255 190 60 / .45), inset 0 .4vh 0 rgb(255 255 255 / .15);
}
.cel-credits-heavy-weight { display: flex; justify-content: center; align-items: baseline; gap: 1vh; line-height: 1; }
.cel-credits-heavy-num { font-size: 16vh; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 .8vh 0 #713f12, 0 0 4vh rgb(255 190 60 / .8); }
.cel-credits-heavy-pt { font-size: 6vh; font-weight: 700; color: #fde68a; }
.cel-credits-heavy-title {
  margin-top: 2vh; font-size: 4.2vh; font-weight: 700; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Met dank aan: iedereen even groot, op alfabet */
.cel-credits-cast { position: absolute; inset: 10vh 0; visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vh; }
.cel-credits-cast-kicker {
  font-family: var(--font-brand); font-size: 9vh; line-height: 1; color: #fde68a;
  text-shadow: 0 .5vh 0 #451a03, 0 0 4vh rgb(255 190 60 / .8);
}
.cel-credits-cast-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4vh 5vh; max-width: min(92vw, 170vh); }
.cel-credits-star { width: 24vh; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; }
.cel-credits-star-face { width: 16vh; height: 16vh; font-size: 5.8vh; box-shadow: 0 0 0 .5vh rgb(253 230 138 / .7); }
.cel-credits-star-name {
  margin-top: 1.8vh; font-size: 3.2vh; font-weight: 700; line-height: 1.15; letter-spacing: .04em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cel-credits-cast.is-many .cel-credits-cast-row { gap: 3vh 3.5vh; }
.cel-credits-cast.is-many .cel-credits-star { width: 19vh; }
.cel-credits-cast.is-many .cel-credits-star-face { width: 11vh; height: 11vh; font-size: 4vh; }
.cel-credits-cast.is-many .cel-credits-star-name { font-size: 2.6vh; }
.cel-credits-cast-row.is-thanked .cel-credits-star-face { box-shadow: 0 0 0 .5vh #fde68a, 0 0 4vh rgb(250 204 21 / .6); transition: box-shadow .6s; }

/* Zonsondergang */
.cel-credits-sunset {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, #1e1b4b 0%, #5b2169 28%, #c2416e 48%, #f97316 60%, #fbbf24 66%, #fbbf24 66%);
}
.cel-credits-sun {
  position: absolute; left: calc(38vw - 15vh); top: 51vh; width: 30vh; height: 30vh; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fffbe6, #ffe066 40%, #ff9a1f 75%, #ff5e3a);
  box-shadow: 0 0 8vh 3vh rgb(255 170 60 / .8), 0 0 24vh 8vh rgb(255 110 60 / .5);
  transform: translateY(-22vh);
}
.cel-credits-scene.is-sunset .cel-credits-sun { opacity: 1; transition: opacity .8s; }
.cel-credits-sea {
  position: absolute; left: 0; right: 0; top: 66vh; bottom: 0; opacity: 0;
  background: linear-gradient(180deg, #7c2d5b, #2e1065 40%, #0f0a2e);
  box-shadow: 0 -.3vh 2vh rgb(255 200 120 / .6);
}
.cel-credits-sea span {
  position: absolute; left: calc(38vw - 12vh); width: 24vh; height: .8vh; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffd27a, transparent);
  animation: cel-credits-glint 1.6s ease-in-out infinite;
}
.cel-credits-sea span:nth-child(1) { top: 2vh; }
.cel-credits-sea span:nth-child(2) { top: 5vh; scale: .8 1; animation-delay: -.4s; }
.cel-credits-sea span:nth-child(3) { top: 9vh; scale: .65 1; animation-delay: -.8s; }
.cel-credits-sea span:nth-child(4) { top: 14vh; scale: .5 1; animation-delay: -1.1s; }
.cel-credits-sea span:nth-child(5) { top: 20vh; scale: .35 1; animation-delay: -.2s; }
@keyframes cel-credits-glint { 50% { opacity: .35; translate: 2vh 0; } }

.cel-credits-end { position: absolute; left: 38vw; top: 13vh; translate: -50% 0; visibility: hidden; display: flex; flex-direction: column; align-items: center; white-space: nowrap; }
.cel-credits-end-title {
  font-family: var(--font-brand); font-size: 16vh; line-height: 1; opacity: 0;
  background: linear-gradient(180deg, #fff 25%, #ffe0b0 55%, #ff9a3c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .7vh 0 #5b2169) drop-shadow(0 0 4vh rgb(255 150 60 / .9));
}
.cel-credits-end-sub { margin-top: 1vh; font-size: 4vh; font-weight: 700; letter-spacing: .1em; color: #fff; opacity: 0; text-shadow: 0 .3vh 1.5vh rgb(60 10 60 / .9); }