/* Gouden ticket voor elk duizendtal. */

.celebration[data-mode="golden"] { --c1: #3b1d00; --c2: #ca8a04; --c3: #fff1a8; --glow: rgb(250 204 21 / .9); }

.cel-golden-scene { position: absolute; inset: 0; perspective: 120vh; }
.cel-golden-curtain {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3;
  background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .25) 0 2vh, rgb(255 255 255 / .05) 2vh 4vh, rgb(0 0 0 / .25) 4vh 6vh),
    linear-gradient(180deg, #7f1d1d, #450a0a);
  box-shadow: inset 0 -6vh 6vh rgb(0 0 0 / .5);
}
.cel-golden-curtain.is-left { left: 0; }
.cel-golden-curtain.is-right { right: 0; }

.cel-golden {
  position: absolute; left: 50%; top: 50%; width: min(80vw, 120vh); height: min(40vw, 60vh); translate: -50% -50%;
  transform-style: preserve-3d; filter: drop-shadow(0 3vh 5vh rgb(0 0 0 / .6)) drop-shadow(0 0 5vh rgb(250 204 21 / .7));
}
.cel-golden-inside, .cel-golden-flap {
  position: absolute; left: 0; right: 0; border-radius: 1.6vh;
  background:
    repeating-linear-gradient(115deg, rgb(255 255 255 / .12) 0 .4vh, transparent .4vh 2vh),
    linear-gradient(120deg, #a16207, #fde047 30%, #fff7c2 45%, #facc15 60%, #a16207);
  box-shadow: inset 0 0 0 .8vh #fef3c7, inset 0 0 0 1.4vh #a16207;
}
.cel-golden-inside {
  inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vh; text-align: center; padding: 0 6vh;
  color: #451a03;
}
.cel-golden-kicker { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 4vh; }
.cel-golden-number {
  font-family: Georgia, "Times New Roman", serif; font-size: 11vh; font-weight: 700; line-height: 1;
  text-shadow: 0 .3vh 0 rgb(255 255 255 / .5), 0 -.2vh 0 rgb(0 0 0 / .3);
}
.cel-golden-title { font-size: 3.2vh; font-weight: 700; }
.cel-golden-by { font-family: Georgia, serif; font-style: italic; font-size: 2.4vh; }
.cel-golden-flap {
  height: 50%; display: flex; align-items: center; justify-content: center; backface-visibility: hidden;
  font-family: Georgia, "Times New Roman", serif; font-size: 7vh; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #451a03;
  text-shadow: 0 .3vh 0 rgb(255 255 255 / .5);
}
.cel-golden-flap.is-top { top: 0; transform-origin: 50% 0; border-radius: 1.6vh 1.6vh 0 0; }
.cel-golden-flap.is-bottom { bottom: 0; transform-origin: 50% 100%; border-radius: 0 0 1.6vh 1.6vh; font-size: 3.4vh; letter-spacing: .4em; }
.cel-golden.is-open { animation: cel-golden-float 3s ease-in-out infinite; }
@keyframes cel-golden-float { 50% { translate: -50% calc(-50% - 1.5vh); } }
