/* The real page remains visible. Scenery is crossfaded in the existing weather banner. */
.santae-medallion-fx{--mf-gold:#f4c772;--mf-light:#fff2c4;--mf-stage-y:43%;position:fixed;inset:0;z-index:2147482000;isolation:isolate;overflow:hidden;background:transparent;color:#fff;opacity:0;transition:opacity .55s ease;font-family:'National Park',sans-serif;text-align:center}
.santae-medallion-fx[data-phase=night]{--mf-gold:#9bc7ff;--mf-light:#d5e8ff}
.santae-medallion-fx.is-open{opacity:1}
.santae-medallion-fx .mf-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 52%,rgba(9,19,38,.22),rgba(9,19,38,.07) 45%,transparent 75%)}
.mf-close{position:absolute;z-index:8;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));border:1px solid #ffffff60;background:#102139ed;color:#fff;padding:10px 18px;border-radius:24px;font:400 18px 'Bangers',sans-serif;letter-spacing:.04em;cursor:pointer;box-shadow:0 3px 15px #0003}
.mf-close:focus-visible{outline:3px solid var(--mf-gold);outline-offset:4px}
.mf-stage{position:absolute;z-index:3;width:270px;height:270px;left:50%;top:var(--mf-stage-y);transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}
.mf-aura{position:absolute;inset:-25px;border-radius:50%;background:radial-gradient(circle,var(--mf-light) 0,transparent 65%);opacity:.13;transform:scale(.65);transition:transform 1.5s ease,opacity 1.5s ease;filter:blur(12px)}
.is-open .mf-aura{transform:scale(1);opacity:.38}
.is-changing .mf-aura{animation:mf-bloom 3s ease-out both}
.mf-rays{position:absolute;inset:-38px;border-radius:50%;background:repeating-conic-gradient(from 15deg,transparent 0deg 15deg,var(--mf-gold) 18deg 21deg,transparent 25deg 40deg);mask-image:radial-gradient(circle,transparent 15%,#0005 38%,transparent 67%);-webkit-mask-image:radial-gradient(circle,transparent 15%,#0005 38%,transparent 67%);opacity:.35;animation:mf-orbit 24s linear infinite}
.mf-ring{position:absolute;inset:18px;border:1px solid var(--mf-gold);border-radius:50%;opacity:.5;box-shadow:0 0 16px #b9daff20;animation:mf-orbit 12s linear infinite}
.mf-ring:after{content:'';position:absolute;top:18%;left:10%;width:6px;height:6px;border-radius:50%;background:var(--mf-light);box-shadow:0 0 10px var(--mf-light),0 0 18px var(--mf-gold)}
.mf-ring.mf-ring-two{inset:0;border-style:dashed;opacity:.25;animation-direction:reverse;animation-duration:22s}
/* Only rotate in the image plane. Never turn the artwork edge-on or hide it at release. */
.mf-art{position:relative;width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 0 17px var(--mf-gold));opacity:1;transform:translateY(12px) scale(.94) rotate(-4deg);transition:transform 1.1s cubic-bezier(.18,.8,.2,1);will-change:transform}
.is-open .mf-art{transform:translateY(0) scale(1) rotate(0);animation:mf-float 3.6s 1.1s ease-in-out infinite}
.is-changing .mf-art{animation:mf-release 3.8s ease-in-out both}
.mf-wave{position:absolute;inset:42px;border:1px solid var(--mf-light);border-radius:50%;opacity:0;box-shadow:0 0 18px var(--mf-gold)}
.is-changing .mf-wave{animation:mf-wave 2.7s ease-out both}
.is-changing .mf-wave-two{animation-delay:.35s}
.mf-sparks{position:absolute;inset:0}
.mf-spark{position:absolute;left:50%;top:50%;width:4px;height:4px;background:var(--mf-light);border-radius:50%;box-shadow:0 0 8px var(--mf-gold);opacity:0;transform:rotate(var(--angle)) translateX(55px)}
.mf-spark:nth-child(3n){width:9px;height:9px;border-radius:0;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.is-open .mf-spark{animation:mf-gather 1.5s var(--delay) ease-out both}
.is-changing .mf-spark{animation:mf-scatter 3s var(--delay) ease-out both}
.mf-copy{position:absolute;z-index:4;left:50%;top:calc(var(--mf-stage-y) + 138px);transform:translateX(-50%);width:min(420px,calc(100% - 36px));box-sizing:border-box;padding:15px 20px 16px;border:1px solid #ffffff30;border-radius:18px;background:rgba(12,27,47,.92);box-shadow:0 8px 30px #0003;pointer-events:none}
.mf-kicker{margin:0 0 8px;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#d7e4f4}
.mf-title{font:400 clamp(30px,4vw,44px)/1.1 'Bangers',sans-serif;letter-spacing:.025em;margin:0 0 9px;color:var(--mf-light)}
.mf-message{font-size:15px;line-height:1.4;margin:0 auto;max-width:370px}
.mf-duration{display:inline-block;margin-top:11px;font-size:13px;color:#e5edf7}
.mf-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#ffffff15}
.mf-progress:after{content:'';display:block;height:100%;width:0;background:var(--mf-gold)}
.is-open .mf-progress:after{width:100%;transition:width 5.8s linear}
.santae-medallion-fx.is-leaving{opacity:0;pointer-events:none}
.mf-banner-light{position:absolute!important;inset:0!important;z-index:15;pointer-events:none;overflow:hidden;border-radius:inherit;opacity:0;animation:mf-banner-glow 3.1s ease both;background:linear-gradient(110deg,transparent 32%,#f4c77260 49%,transparent 66%);background-size:260% 100%;background-repeat:no-repeat}
.mf-banner-light[data-phase=night]{background-image:linear-gradient(110deg,transparent 32%,#9bc7ff60 49%,transparent 66%)}
.mf-banner-light.mf-color-sensitive{filter:saturate(.2)}
body:not(.dark-mode) .mf-copy{background:rgba(249,251,255,.95);border-color:#b1c1d8;color:#142842}
body:not(.dark-mode) .mf-title{color:#644617}
body:not(.dark-mode) [data-phase=night] .mf-title{color:#204b82}
body:not(.dark-mode) .mf-kicker,body:not(.dark-mode) .mf-duration{color:#3f536d}
.santae-medallion-fx.mf-calm .mf-art{animation:none!important;transform:none!important;will-change:auto}
.santae-medallion-fx.mf-calm .mf-ring,.santae-medallion-fx.mf-calm .mf-rays,.santae-medallion-fx.mf-calm .mf-sparks,.santae-medallion-fx.mf-calm .mf-wave{display:none}
.santae-medallion-fx.mf-calm .mf-aura{animation:none;transition:none;transform:none;opacity:.2}
.santae-medallion-fx.mf-calm .mf-progress:after{transition-duration:1.9s}
.santae-medallion-fx.mf-color-sensitive{--mf-gold:#bbcedb;--mf-light:#e6eef5}
.santae-medallion-fx.mf-color-sensitive .mf-art{filter:saturate(.3) drop-shadow(0 0 14px #bbcedb)}
@keyframes mf-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(4deg)}}
@keyframes mf-release{0%{transform:translateY(-3px) scale(1) rotate(1deg)}25%{transform:translateY(-14px) scale(1.08) rotate(-4deg)}60%{transform:translateY(-7px) scale(1.03) rotate(3deg)}100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes mf-bloom{0%{opacity:.38;transform:scale(1)}35%{opacity:.5;transform:scale(1.23)}100%{opacity:.25;transform:scale(1)}}
@keyframes mf-orbit{to{transform:rotate(360deg)}}
@keyframes mf-wave{10%{opacity:.45}100%{opacity:0;transform:scale(4)}}
@keyframes mf-gather{0%{opacity:0;transform:rotate(var(--angle)) translateX(175px) scale(.5)}50%{opacity:.8}100%{opacity:.4;transform:rotate(var(--angle)) translateX(92px)}}
@keyframes mf-scatter{0%{opacity:.8;transform:rotate(var(--angle)) translateX(85px)}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--distance)) scale(.3)}}
@keyframes mf-banner-glow{0%{opacity:0;background-position:140% 50%}20%{opacity:.6}80%{opacity:.5}100%{opacity:0;background-position:-40% 50%}}
@media(max-width:600px){.santae-medallion-fx{--mf-stage-y:40%}.mf-stage{width:220px;height:220px}.mf-art{width:155px;height:155px}.mf-copy{top:calc(var(--mf-stage-y) + 117px);padding:13px 16px}.mf-title{font-size:32px}.mf-message{font-size:14px}.mf-close{padding:9px 15px;font-size:17px}.mf-kicker{font-size:10px}}
@media(max-height:600px){.santae-medallion-fx{--mf-stage-y:39%}.mf-stage{width:180px;height:180px}.mf-art{width:130px;height:130px}.mf-copy{top:calc(var(--mf-stage-y) + 95px);padding:10px 14px}.mf-title{font-size:27px}.mf-kicker{display:none}.mf-message{font-size:13px}.mf-duration{font-size:12px;margin-top:6px}}
@media(max-height:450px) and (min-width:600px){.mf-stage{left:28%;top:50%}.mf-copy{left:67%;top:50%;transform:translate(-50%,-50%);width:44%;max-width:380px}}
@media(prefers-reduced-motion:reduce){.mf-art,.mf-ring,.mf-rays,.mf-spark,.mf-wave,.mf-aura,.mf-banner-light{animation:none!important}}
