/* Oudste ticket dicht: prehistorisch decor, stampende dino, meteoor, fossiel. Dino links, tekst rechts. */

.celebration[data-mode="dino"] { --c1: #3b1a0a; --c2: #f97316; --c3: #fde68a; --glow: rgb(251 146 60 / .85); }

.cel-dino-scene { position: absolute; inset: 0; overflow: hidden; }
.cel-dino-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #2a1240 0%, #6b2148 35%, #c2410c 68%, #f59e0b 100%);
}
.cel-dino-sun {
  position: absolute; left: 52vw; top: 48vh; width: 34vh; height: 34vh; border-radius: 50%;
  background: radial-gradient(circle, #fff7d6, #fdba74 45%, rgb(251 146 60 / 0) 70%); opacity: .8;
}
.cel-dino-volcano {
  position: absolute; right: -4vw; bottom: 18vh; width: 46vh; height: 30vh;
  clip-path: polygon(0 100%, 38% 8%, 52% 14%, 62% 6%, 100% 100%);
  background: linear-gradient(180deg, #7c2d12 0 6%, #3f1d14 14%, #2a130c);
}
.cel-dino-volcano::after { content: ""; position: absolute; left: 38%; top: 6%; width: 24%; height: 10%; background: #fb923c; filter: blur(.6vh); }
.cel-dino-smoke { position: absolute; left: calc(104vw - 23vh); top: 54vh; width: 0; height: 0; }
.cel-dino-smoke span {
  position: absolute; left: -4vh; top: -4vh; width: 8vh; height: 8vh; border-radius: 50%;
  background: rgb(68 52 60 / .55); filter: blur(.6vh);
  animation: cel-dino-smoke 4s ease-out infinite;
}
.cel-dino-smoke span:nth-child(2) { animation-delay: -1.3s; }
.cel-dino-smoke span:nth-child(3) { animation-delay: -2.6s; }
@keyframes cel-dino-smoke { from { translate: 0 0; scale: .4; opacity: .9; } to { translate: -6vh -24vh; scale: 2.4; opacity: 0; } }

.cel-dino-palm { position: absolute; bottom: 20vh; width: 20vh; color: #2a0f24; transform-origin: 50% 100%; animation: cel-dino-sway 3.4s ease-in-out infinite alternate; }
.cel-dino-palm svg { display: block; width: 100%; height: auto; }
.cel-dino-palm:nth-child(1) { left: 1vw; width: 26vh; }
.cel-dino-palm:nth-child(2) { left: 38vw; width: 14vh; color: #4a1a35; animation-delay: -1s; }
.cel-dino-palm:nth-child(3) { left: 58vw; width: 11vh; color: #5a1f3a; animation-delay: -2s; }
.cel-dino-palm:nth-child(4) { right: 20vw; width: 18vh; color: #3a1430; animation-delay: -.5s; scale: -1 1; }
@keyframes cel-dino-sway { from { rotate: -3deg; } to { rotate: 3deg; } }

.cel-dino-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22vh;
  background:
    repeating-linear-gradient(180deg, transparent 0 3.6vh, rgb(0 0 0 / .14) 3.6vh 4.2vh),
    linear-gradient(180deg, #7c4a1e, #5b3414 40%, #3b210c);
  box-shadow: inset 0 1vh 0 #a16207;
}
.cel-dino-fossil { position: absolute; left: 8vw; bottom: 1.5vh; width: 42vh; visibility: hidden; }
.cel-dino-fossil-svg { display: block; width: 100%; height: auto; }
.cel-dino-fossil-out, .cel-dino-fossil-in { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cel-dino-fossil-out > * { stroke: #3b2a1a; stroke-width: 18; fill: #3b2a1a; }
.cel-dino-fossil-out > .is-line { fill: none; }
.cel-dino-fossil-in > * { stroke: #f5ecd7; stroke-width: 9; fill: #f5ecd7; }
.cel-dino-fossil-in > .is-line { fill: none; }

/* Dino */
.cel-dino-rex { position: absolute; left: 5vw; bottom: 18.5vh; width: 64vh; transform: translateX(100vw); }
.cel-dino-bob { position: relative; }
.cel-dino-rex.is-walking .cel-dino-bob { animation: cel-dino-bob .42s ease-in-out infinite; }
@keyframes cel-dino-bob { 50% { translate: 0 -2vh; rotate: -2deg; } }
.cel-dino-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1.4vh 1.4vh rgb(0 0 0 / .4)); }
.cel-dino-svg * { stroke-linejoin: round; stroke-linecap: round; }
.cel-dino-body, .cel-dino-tail, .cel-dino-neck, .cel-dino-skull, .cel-dino-leg rect { fill: #4ade80; stroke: #14532d; stroke-width: 5; }
.cel-dino-neck { stroke: none; }
.cel-dino-belly { fill: #bbf7d0; }
.cel-dino-jaw { fill: #22c55e; stroke: #14532d; stroke-width: 4; }
.cel-dino-teeth { fill: none; stroke: #fff; stroke-width: 4; }
.cel-dino-spikes path { fill: #f97316; stroke: #9a3412; stroke-width: 3; }
.cel-dino-spot { fill: #16a34a; }
.cel-dino-nostril { fill: #14532d; }
.cel-dino-brow { fill: none; stroke: #14532d; stroke-width: 5; }
.cel-dino-arm { fill: none; stroke: #14532d; stroke-width: 14; }
.cel-dino-leg { transform-box: fill-box; transform-origin: 50% 0; }
.cel-dino-rex.is-walking .cel-dino-leg.is-front { animation: cel-dino-step .42s ease-in-out infinite alternate; }
.cel-dino-rex.is-walking .cel-dino-leg.is-back { animation: cel-dino-step .42s ease-in-out infinite alternate-reverse; }
@keyframes cel-dino-step { from { rotate: -16deg; } to { rotate: 16deg; } }
.cel-dino-head { transform-box: fill-box; transform-origin: 90% 80%; transition: rotate .2s; }
.cel-dino-bob.is-roaring .cel-dino-head { rotate: 10deg; }
.cel-dino-bob.is-roaring .cel-dino-jaw { translate: 0 6px; }
.cel-dino-rex.is-scared .cel-dino-head { rotate: 18deg; }
.cel-dino-rex.is-scared .cel-dino-brow { translate: 0 -6px; }

.cel-dino-sign {
  position: absolute; left: 14%; top: 48%; padding: .8vh 1.4vh; border-radius: .8vh; rotate: -7deg; text-align: center;
  background: #fff7ed; color: #431407; border: .4vh dashed #c2410c;
  box-shadow: 0 .8vh 1.6vh rgb(0 0 0 / .45); white-space: nowrap;
}
.cel-dino-sign-ref { font-size: 2.4vh; font-weight: 700; color: #9a3412; }
.cel-dino-sign-age { font-family: var(--font-brand); font-size: 4.6vh; line-height: 1; }

.cel-dino-roar {
  position: absolute; left: -6%; top: -14%; visibility: hidden; padding: 1vh 2.4vh; border-radius: 3vh;
  font-family: var(--font-brand); font-size: 6vh; line-height: 1; color: #7c2d12; background: #fff;
  box-shadow: 0 1vh 2vh rgb(0 0 0 / .4);
}
.cel-dino-roar::after { content: ""; position: absolute; right: 22%; bottom: -1.8vh; border: 1vh solid transparent; border-top: 1.4vh solid #fff; }

/* Meteoor: de staart ligt achter de steen, in de vliegrichting gedraaid. */
.cel-dino-meteor { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; }
.cel-dino-meteor-rock {
  position: absolute; left: -5vh; top: -5vh; width: 10vh; height: 10vh; border-radius: 46% 54% 50% 50%;
  background: radial-gradient(circle at 60% 40%, #fde68a, #f97316 30%, #7c2d12 70%, #431407);
  box-shadow: 0 0 4vh 1vh rgb(251 146 60 / .9);
}
.cel-dino-meteor-tail {
  position: absolute; right: 0; top: -4vh; width: 46vh; height: 8vh; border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgb(251 146 60 / .5) 50%, #fde047);
  filter: blur(.8vh);
}

.cel-dino-stamp {
  position: absolute; visibility: hidden; padding: 1vh 4vh; border: 1.4vh solid #dc2626; border-radius: 2vh;
  font-family: var(--font-display); font-weight: 800; font-size: 13vh; line-height: 1; letter-spacing: .08em; color: #dc2626;
  background: rgb(255 247 237 / .9); box-shadow: 0 1vh 3vh rgb(0 0 0 / .4);
}

.cel-dino-puff { position: absolute; width: 60vh; height: 44vh; visibility: hidden; }
.cel-dino-puff span { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e7e5e4 60%, #a8a29e); }
.cel-dino-puff span:nth-child(1) { left: 20%; top: 20%; width: 45%; height: 60%; }
.cel-dino-puff span:nth-child(2) { left: 0; top: 40%; width: 38%; height: 50%; }
.cel-dino-puff span:nth-child(3) { right: 0; top: 35%; width: 40%; height: 52%; }
.cel-dino-puff span:nth-child(4) { left: 40%; top: 0; width: 36%; height: 50%; }
.cel-dino-puff span:nth-child(5) { left: 25%; bottom: 0; width: 50%; height: 40%; }

.cel-dino-bone { position: absolute; width: 8vh; height: 3.2vh; margin: -1.6vh 0 0 -4vh; filter: drop-shadow(0 .5vh .6vh rgb(0 0 0 / .4)); }
.cel-dino-bone svg { display: block; width: 100%; height: 100%; }

/* Verhaal */
.cel-dino-story {
  position: absolute; left: 47vw; right: 4vw; top: 12vh; visibility: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.6vh;
}
.cel-dino-kicker { font-size: 3vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #fde68a; }
.cel-dino-title {
  font-family: var(--font-brand); font-size: 8.4vh; line-height: 1.02; color: #fff;
  text-shadow: 0 .6vh 0 #7c2d12, 0 0 3vh rgb(251 146 60 / .7); transform-origin: 0 50%;
}
.cel-dino-ticket {
  max-width: 100%; padding: 1.4vh 2.4vh; border-radius: 1.2vh; font-size: 3.4vh; font-weight: 700; line-height: 1.2; color: #431407;
  background: #fff7ed; border-left: 1vh solid #f97316; box-shadow: 0 1vh 2.4vh rgb(0 0 0 / .4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cel-dino-company { font-size: 3.4vh; font-weight: 700; color: #fff7ed; text-shadow: 0 .3vh 1vh rgb(0 0 0 / .6); }
.cel-dino-by { font-size: 3.4vh; font-weight: 600; color: #fde68a; text-shadow: 0 .3vh 1vh rgb(0 0 0 / .6); }
.cel-dino-next {
  margin-top: 1vh; padding: 1vh 2.6vh; border-radius: 999px; font-size: 3.4vh; font-weight: 700; color: #052e16;
  background: linear-gradient(180deg, #86efac, #22c55e); box-shadow: 0 1vh 2.4vh rgb(0 0 0 / .4);
}