/* The ceremony a badge gets when it warrants more than a toast (badge-ceremony.js, #906): the page under velvet,
   a spotlight, the medal hung large before the collector on the tilt stage with its words under it, until they take
   it. The medal's own styles, its tones and the light that keeps to it are badge-medal.css; the dialog takes the
   medal's tone for every light here. What follows is the ceremony at rest: badge-ceremony.js sets it in motion. */
.badge-ceremony { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff6e3; overflow: hidden; }
.badge-ceremony::backdrop { background: radial-gradient(ellipse at 50% 42%, #1c1126f2, #06030afc 72%); animation: badge-ceremony-dim .45s ease-out both; }
@keyframes badge-ceremony-dim { from { opacity: 0; } }
/* The spotlight: a cone of the medal's shine from above, and a vignette closing the corners. */
.badge-ceremony-veil { position: absolute; inset: 0; background: radial-gradient(ellipse 36% 70% at 50% 8%, color-mix(in srgb, var(--shine), transparent 78%), transparent 70%), radial-gradient(ellipse 70% 60% at 50% 50%, transparent 55%, #04020799 100%); pointer-events: none; }
/* Glory rays behind the medal, in the medal's own shine, two layers turning against each other; they fade to
   nothing well before the edges. */
.badge-ceremony-rays { position: absolute; left: 50%; top: 42%; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, var(--shine) 0deg 2.5deg, transparent 2.5deg 14deg); opacity: .055; -webkit-mask: radial-gradient(circle, #000 0, #0008 14%, transparent 31%); mask: radial-gradient(circle, #000 0, #0008 14%, transparent 31%); animation: badge-ceremony-turn 70s linear infinite; pointer-events: none; }
.badge-ceremony-rays.is-counter { background: repeating-conic-gradient(from 7deg, var(--metal) 0deg 2deg, transparent 2deg 23deg); opacity: .05; animation: badge-ceremony-turn 110s linear infinite reverse; }
@keyframes badge-ceremony-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Embers in the medal's metal drifting up through the dark, each at its own pace and sway, already in flight. */
.badge-ceremony-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.badge-ceremony-embers > i { position: absolute; left: var(--x); bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--shine); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--metal), transparent 30%); opacity: 0; animation: badge-ceremony-ember var(--d) linear var(--t) infinite; }
@keyframes badge-ceremony-ember {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: .9; }
    50% { transform: translate(var(--w), -55vh); opacity: .7; }
    90% { opacity: .5; }
    100% { transform: translate(calc(var(--w) * -.6), -108vh); opacity: 0; }
}
/* The burst of light as the medal lands, and the shockwave ring that leaves it: there only while they last. */
.badge-ceremony-flash { position: absolute; left: 50%; top: 44%; width: 80vmin; height: 80vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #fff 0, var(--shine) 12%, color-mix(in srgb, var(--metal), transparent 35%) 30%, transparent 66%); opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.badge-ceremony-shockwave { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; border: 3px solid var(--shine); border-radius: 50%; box-shadow: 0 0 24px 4px color-mix(in srgb, var(--shine), transparent 40%), inset 0 0 18px color-mix(in srgb, var(--shine), transparent 50%); transform: translate(-50%, -50%) scale(.25); opacity: 0; pointer-events: none; }
.badge-ceremony-sparks { position: absolute; inset: 0; pointer-events: none; }
.badge-ceremony-spark { position: absolute; border-radius: 50%; background: var(--shine); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--shine), transparent 40%); transform: translate(-50%, -50%); }
.badge-ceremony-spark.is-metal { background: var(--metal); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--metal), transparent 40%); }
.badge-ceremony-spark.is-star { border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); background: #fff; box-shadow: none; }
.badge-ceremony-stage { position: relative; display: grid; width: min(100vw - 32px, 560px); height: 100%; margin: 0 auto; padding: 24px 0; align-content: center; text-align: center; cursor: default; }
.badge-ceremony-jolt { display: grid; justify-items: center; gap: 18px; }
/* The medal, nearly three times its size on the rack, lowered from above and hung from the top of its stage so it
   swings from its ribbon; under the pointer it tilts as it does up close (card-inspector.css). */
.badge-ceremony-medal { position: relative; will-change: transform; }
.badge-ceremony-swing { transform-origin: 50% 0; will-change: transform; }
.badge-ceremony-tilt { padding: 12px 40px; }
.badge-ceremony .card-tilt-stage:focus-visible { outline: none; }
/* The glow the medal hangs in, breathing slowly. */
.badge-ceremony-halo { position: absolute; left: 50%; top: 58%; width: 420px; height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--metal), transparent 35%) 0, color-mix(in srgb, var(--metal), transparent 70%) 28%, transparent 62%); mix-blend-mode: screen; pointer-events: none; animation: badge-ceremony-breathe 3.6s ease-in-out infinite; }
@keyframes badge-ceremony-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .7; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }
.badge-ceremony .inspector-object.is-badge { zoom: 2.8; border-radius: 50%; }
.badge-ceremony .badge-mount { --mount-shadow: drop-shadow(0 6px 4px #0009) drop-shadow(0 0 16px color-mix(in srgb, var(--metal), transparent 55%)); }
.badge-ceremony .card-tilt-stage.is-tilting .card-inspector-glare { opacity: .55; }
/* The glint that sweeps the medal after it lands, and now and then after that: a band of light crossing the
   decoration, kept to it like the glare. */
.badge-ceremony-glint { position: absolute; inset: 0; z-index: 9; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 38%, #fff9 47%, #fff 50%, #fff9 53%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat; mask: var(--glare-mask) center / 100% 100% no-repeat; -webkit-mask: var(--glare-mask) center / 100% 100% no-repeat; animation: badge-ceremony-glint 6s linear 1.25s infinite; }
@keyframes badge-ceremony-glint { 0% { background-position: 130% 0; } 14% { background-position: -130% 0; } 100% { background-position: -130% 0; } }
.badge-ceremony-words { display: grid; gap: 8px; max-width: 100%; }
.badge-ceremony-kind { color: var(--shine); font-size: .66rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.badge-ceremony-name { margin: 0; color: #fffaf0; font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.1; text-shadow: 0 2px 0 #0008, 0 0 28px color-mix(in srgb, var(--metal), transparent 35%); overflow-wrap: anywhere; }
.badge-ceremony-letter { display: inline-block; will-change: transform, opacity; }
.badge-ceremony-flavor { margin: 0; color: #e9ddc7; font-size: 1.02rem; font-style: italic; }
.badge-ceremony-worth { display: flex; justify-content: center; gap: 8px; margin: 4px 0 0; }
.badge-ceremony-worth > span { padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--shine), transparent 45%); border-radius: 999px; background: #ffffff14; color: var(--shine); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.badge-ceremony form { margin: 6px 0 0; }
.badge-ceremony-take { padding: 9px 26px; border-color: var(--edge); background: var(--metal); color: #1b1220; box-shadow: 4px 4px 0 var(--edge); }
.badge-ceremony-take:hover { background: var(--shine); }
/* With motion reduced nothing turns, drifts, sweeps or fades: the ceremony is there at once (badge-ceremony.js). */
.motion-reduced .badge-ceremony::backdrop, .motion-reduced .badge-ceremony-rays, .motion-reduced .badge-ceremony-glint, .motion-reduced .badge-ceremony-halo, .motion-reduced .badge-ceremony-embers > i { animation: none; }
.motion-reduced .badge-ceremony-glint { display: none; }
.motion-reduced .badge-ceremony-embers > i { opacity: .5; bottom: auto; top: calc(var(--x) * .8); }
@media (max-width: 700px), (max-height: 640px) { .badge-ceremony .inspector-object.is-badge { zoom: 2.1; } .badge-ceremony-jolt { gap: 12px; } .badge-ceremony-tilt { padding: 8px 24px; } }