/* 100% bereikbaar: gouden medaille aan een oranje lint, met lauwerkrans en glans. Rechts is plek voor Octie. */

.celebration[data-mode="medal"] { --c1: #5a3a00; --c2: #f5b301; --c3: #fff4c2; --glow: rgb(255 200 40 / .9); }

.cel-medal-scene {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 55% at 36% 45%, rgb(250 204 21 / .22), transparent 70%),
    rgb(18 10 0 / .6);
}
.cel-medal-glow {
  position: absolute; left: 36vw; top: 51vh; width: 70vh; height: 70vh; margin: -35vh 0 0 -35vh; border-radius: 50%;
  background: radial-gradient(circle, rgb(253 224 71 / .45), transparent 65%); opacity: .4; transition: opacity .6s;
}
.cel-medal-scene.is-won .cel-medal-glow { opacity: 1; animation: cel-medal-pulse 1.6s ease-in-out infinite; }
@keyframes cel-medal-pulse { 50% { scale: 1.12; } }

/* Lint en medaille hangen aan één draaipunt bovenin. */
.cel-medal-hang { position: absolute; left: calc(36vw - 20vh); top: -4vh; width: 40vh; height: 74vh; transform-origin: 50% 0; }
.cel-medal-sway { position: absolute; inset: 0; transform-origin: 50% 0; }
.cel-medal-sway.is-idle { animation: cel-medal-sway 3.2s ease-in-out infinite; }
@keyframes cel-medal-sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }

.cel-medal-strap {
  position: absolute; left: 50%; top: 0; width: 11vh; height: 42vh; margin-left: -5.5vh; transform-origin: 50% 100%;
  background: linear-gradient(90deg, #9a3412 0 7%, #ff7800 7% 36%, #fff7ed 36% 64%, #ff7800 64% 93%, #9a3412 93%);
  box-shadow: 0 1vh 2vh rgb(0 0 0 / .45);
}
.cel-medal-strap.is-back { rotate: 19deg; filter: brightness(.72); }
.cel-medal-strap.is-front { rotate: -19deg; }
.cel-medal-clasp {
  position: absolute; left: 50%; top: 39vh; width: 15vh; height: 5vh; margin-left: -7.5vh; border-radius: 1.2vh;
  background: linear-gradient(180deg, #fff7cc, #f59e0b 50%, #92400e);
  box-shadow: 0 .8vh 1.4vh rgb(0 0 0 / .45), inset 0 .3vh 0 rgb(255 255 255 / .7);
}
.cel-medal-disc {
  position: absolute; left: 50%; top: 42vh; width: 36vh; height: 36vh; margin-left: -18vh; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / .75), transparent 22%),
    repeating-conic-gradient(from 0deg, #b45309 0 2.5deg, #f59e0b 2.5deg 5deg);
  box-shadow: 0 2.4vh 4vh rgb(0 0 0 / .55), 0 0 6vh rgb(250 204 21 / .55);
}
.cel-medal-scene.is-won .cel-medal-disc { box-shadow: 0 2.4vh 4vh rgb(0 0 0 / .55), 0 0 12vh rgb(250 204 21 / .95); }
.cel-medal-face {
  position: absolute; inset: 2vh; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 36% 30%, #fffbe6, #fde047 30%, #f59e0b 68%, #b45309);
  box-shadow: inset 0 0 0 .7vh rgb(146 64 14 / .55), inset 0 -1.6vh 2.4vh rgb(146 64 14 / .5), inset 0 1.4vh 2vh rgb(255 255 255 / .6);
}
.cel-medal-laurel { position: absolute; inset: 0; }
.cel-medal-leaf {
  position: absolute; width: 2.2vh; height: 4.6vh; border-radius: 50%;
  background: linear-gradient(90deg, #92400e, #d97706 60%, #fcd34d);
  box-shadow: 0 .2vh 0 rgb(255 255 255 / .45);
}
.cel-medal-icon { position: relative; width: 12vh; height: 12vh; }
.cel-medal-icon svg { width: 100%; height: 100%; fill: #92400e; filter: drop-shadow(0 .3vh 0 rgb(255 255 255 / .7)) drop-shadow(0 -.2vh 0 rgb(120 53 15 / .5)); }
.cel-medal-check {
  position: absolute; right: -1.4vh; top: -1vh; width: 5.4vh; height: 5.4vh; border-radius: 50%;
  background: #16a34a; box-shadow: 0 0 0 .5vh #fffbe6;
}
.cel-medal-check::after {
  content: ""; position: absolute; left: 1.7vh; top: .9vh; width: 1.4vh; height: 2.6vh;
  border: solid #fff; border-width: 0 .6vh .6vh 0; rotate: 45deg;
}
.cel-medal-word { margin-top: .6vh; font-size: 2.1vh; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #78350f; text-shadow: 0 .2vh 0 rgb(255 255 255 / .6); }
.cel-medal-shine { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.cel-medal-shine span {
  position: absolute; top: -20%; bottom: -20%; left: 25%; width: 50%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .85) 50%, transparent);
  transform: translateX(-120%) rotate(25deg); mix-blend-mode: screen;
}

/* Tekst onder de medaille */
.cel-medal-text { position: absolute; left: 2vw; width: 68vw; top: 79vh; display: flex; flex-direction: column; align-items: center; text-align: center; visibility: hidden; }
.cel-medal-title {
  font-family: var(--font-brand); font-size: 10vh; line-height: 1; color: #fff; white-space: nowrap; opacity: 0;
  text-shadow: 0 .6vh 0 #78350f, 0 0 4vh rgb(250 204 21 / .8);
}
.cel-medal-pct { display: inline-block; min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; color: #fde047; }
.cel-medal-sub { margin-top: 1vh; font-size: 3.8vh; font-weight: 500; color: #fef3c7; opacity: 0; font-variant-numeric: tabular-nums; }