/* Finite, compositor-driven stories. No timers or rendering loop survive the ceremony. */
.preview-story-caption{font-size:14px;color:#d6e6ff;margin:-4px 0 17px;line-height:1.4}
.badge-story{position:absolute;inset:0;z-index:6;perspective:800px;pointer-events:none;display:none;transform-style:preserve-3d;--scene-size:min(70vw,290px,34svh)}
.story-actor{position:absolute;left:50%;top:50%;width:var(--scene-size);height:var(--scene-size);margin-left:calc(var(--scene-size)*-.5);margin-top:calc(var(--scene-size)*-.5);transform-style:preserve-3d;animation-fill-mode:both!important}
.story-art{position:absolute;inset:0;background-image:url('./images/reward-story-atlas.png');background-repeat:no-repeat;background-size:400% 400%;filter:drop-shadow(0 10px 7px #0007);clip-path:inset(3%)}
.story-glyph,.prop-fallback{width:100%;height:100%;display:grid;place-items:center;font-size:calc(var(--scene-size)*.58);line-height:1;filter:drop-shadow(0 5px 4px #0006)}
.prop-fallback{display:none}.badge-narrative[data-art=missing] .story-art{display:none}.badge-narrative[data-art=missing] .prop-fallback{display:grid}
.story-floor{position:absolute;width:64%;height:12%;left:18%;top:77%;border-radius:50%;background:radial-gradient(ellipse,var(--energy),transparent 65%);opacity:.17;transform:rotateX(65deg)}
.platinum-only{display:none}.celebration-rank-platinum .platinum-only{display:block}
.badge-narrative{--story-power:.55}.badge-narrative.celebration-rank-silver{--story-power:.72}.badge-narrative:is(.celebration-rank-gold,.celebration-rank-complete){--story-power:.9}.badge-narrative.celebration-rank-platinum{--story-power:1}
.badge-narrative .medal-rays{opacity:.05}.badge-narrative .medal-orbit{opacity:.08}
/* Every actor selects a distinct finite motion below. */
.star-born{--move:star-born}.star-born .story-art{clip-path:polygon(50% 7%,64% 34%,94% 39%,72% 62%,77% 91%,50% 78%,20% 91%,26% 61%,6% 39%,36% 34%)}
.star-trail{--move:star-trail;width:66%;height:4px;margin:0;left:0;top:49%;background:linear-gradient(90deg,transparent,#fff7bc);box-shadow:0 0 16px #ffce32;transform-origin:right}
.star-dust{--move:star-dust;color:var(--energy);font-size:25px;width:24px;height:24px;margin:-12px;--speed:var(--action)}.star-dust .story-glyph{font-size:24px}
.star-crown{--move:star-crown;color:#fff295;text-shadow:0 0 20px #ffe600}
.fire-bed{--move:fire-bed;width:44%;height:13%;left:28%;top:68%;margin:0;background:radial-gradient(ellipse,#fff8b2,#ff6818 37%,transparent 72%);filter:blur(8px)}
.fire-tongue{--move:fire-rise;--speed:.8s;--repeat:4;--wait:calc(var(--phase)*.65s);left:calc(35% + var(--phase)*30%);top:69%;width:calc(19px + var(--phase)*30px);height:80px;margin:0;border-radius:55% 45% 30% 40%;background:radial-gradient(ellipse at 50% 86%,#fffbd7 0%,#ffcf35 22%,#ff6910 54%,#c5120900 74%);filter:blur(2px);mix-blend-mode:screen;transform-origin:bottom;opacity:0}
.celebration-rank-platinum .fire-tongue{--repeat:6}
.fire-ember{--move:ember-rise;--speed:1s;--repeat:3;--wait:calc(var(--phase)*.8s);left:calc(25% + var(--phase)*50%);top:70%;width:4px;height:7px;margin:0;background:#ffe4aa;box-shadow:0 0 8px #ff6900;border-radius:50%;opacity:0}
.fire-vortex{--move:fire-vortex;border:8px solid transparent;border-left-color:#ff7b17;border-top-color:#ffd250;border-radius:50%;filter:drop-shadow(0 0 13px #ff6f00);width:65%;height:60%;margin:0;left:18%;top:20%}.vortex-two{rotate:70deg;scale:.78}
.compass-dial{--move:compass-hunt}.compass-dial .story-art{clip-path:circle(43% at 50% 50%)}
.compass-needle{--move:needle-hunt;width:18px;height:44%;left:50%;top:50%;margin:-22% 0 0 -9px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(#e74032 0 49%,#fff1c8 50%);filter:drop-shadow(2px 3px 2px #0008)}
.compass-north{--move:north-lock;width:32px;height:32px;margin:-16px;top:15%;color:#fff4be}.compass-north .story-glyph{font-size:23px;font-weight:900}
.compass-ring{--move:compass-gimbal;width:80%;height:80%;left:10%;top:10%;margin:0;border:4px double var(--alloy-light);border-radius:50%;box-shadow:0 0 15px var(--energy)}.ring-cross{--move:compass-gimbal-cross}
.book-open{--move:book-open}.book-open .story-art{clip-path:inset(17% 3% 15%)}
.book-page{--move:page-turn;--speed:.68s;--repeat:3;--wait:calc(var(--i)*.1s);width:28%;height:37%;left:50%;top:34%;margin:0;border-radius:0 12% 9% 0;background:linear-gradient(90deg,#b29766,#fff5d4 22%,#fffbe6);box-shadow:0 1px 2px #422b1770;transform-origin:left;opacity:0}
.celebration-rank-platinum .book-page{--repeat:5}
.book-letter{--move:letter-flight;--wait:calc(var(--i)*.06s);width:25px;height:25px;margin:-12px;color:#ffedaa}.book-letter .story-glyph{font-size:25px;font-family:Georgia,serif}
.book-halo{--move:book-halo;border:1px solid #ffe894;border-radius:50%;box-shadow:0 0 20px #ffe60044}.book-constellation{--move:book-constellation;height:45px;margin-top:-22px;color:#fff4cb}.book-constellation .story-glyph{font-size:36px}
.graduate-cap{--move:cap-toss}.graduate-cap .story-art{clip-path:inset(13% 2% 9%)}
.cap-tassel{--move:tassel-swing;left:69%;top:50%;width:5px;height:45px;margin:0;background:linear-gradient(#fff7a7,#bf831b);border-radius:4px;transform-origin:top}
.cap-scroll{--move:cap-scroll;scale:.65;translate:0 50px}.cap-glint{--move:cap-glint;width:12px;height:12px;margin:-6px;color:var(--energy)}.cap-glint .story-glyph{font-size:22px}
.trophy-rise{--move:trophy-rise}.trophy-rise .story-art{clip-path:inset(10% 1% 6%)}
.trophy-plinth{--move:plinth-rise;width:44%;height:13%;left:28%;top:78%;margin:0;border-radius:50% 50% 10% 10%;background:linear-gradient(var(--alloy-light),var(--alloy-dark) 30%,#121729 33%);box-shadow:0 8px 18px #0008}
.trophy-spot{--move:spot-open;width:50%;height:105%;margin:0;left:0;top:0;background:linear-gradient(transparent,#fff5c640);clip-path:polygon(0 0,12% 0,100% 100%,40% 100%);transform-origin:top}.spot-right{left:50%;scale:-1 1}
.trophy-crown{--move:trophy-crown;width:60px;height:60px;margin:-30px;top:15%;color:#ffeb6e}.trophy-crown .story-glyph{font-size:64px}
.trophy-laurels{--move:laurel-turn;color:var(--energy);scale:1.4}
.perfect-writing{--move:write-hundred;width:70%;left:15%;height:44%;top:23%;margin:0}.perfect-writing .story-glyph{font:bold italic clamp(95px,28vw,150px)/1 Georgia,serif;color:#ff6541;-webkit-text-stroke:2px #fff1b2;text-shadow:0 6px 0 #8b2509,0 12px 18px #0008}
.perfect-stroke{--move:write-stroke;width:54%;height:9px;margin:0;left:22%;top:64%;background:#ff7940;box-shadow:0 2px #ffc96c,0 5px #842207;border-radius:50%;transform-origin:left}.stroke-two{top:69%;--wait:.1s}
.perfect-check{--move:perfect-check;width:70px;height:70px;margin:0;left:68%;top:18%;color:#90ffce}.perfect-check .story-glyph{font-size:70px}
.perfect-ring{--move:perfect-ring;border:3px solid #89ffd0;border-radius:50%;box-shadow:0 0 24px #73ffc470}
.strength-arm{--move:arm-lift}.strength-arm .story-art{clip-path:inset(7% 4% 9%)}
.strength-weight{--move:weight-lift;width:51%;height:24%;margin:0;left:25%;top:27%;border:4px solid var(--alloy);border-radius:14px;background:linear-gradient(110deg,var(--alloy-dark),var(--alloy-light),var(--alloy-dark));box-shadow:0 6px 0 var(--alloy-dark),0 9px 17px #0007;z-index:-1}
.strength-dust,.arch-dust{--move:stone-dust;width:5px;height:7px;margin:0;left:calc(25% + var(--i)*10%);top:72%;background:var(--alloy);border-radius:2px}
.strength-ripple{--move:strength-ripple;border:4px solid var(--energy);border-radius:50%;box-shadow:0 0 14px var(--energy)}.ripple-two{--wait:.16s}
.bulb-main{--move:bulb-flicker}.bulb-main .story-glyph{font-size:calc(var(--scene-size)*.78)}
.bulb-glow{--move:bulb-glow;background:radial-gradient(circle,#fffbc7 0,#ffe44570 24%,#ffab061a 48%,transparent 66%);scale:1.6}
.bulb-filament{--move:filament-warm;width:25px;height:15px;margin:0;left:calc(50% - 12px);top:43%;border:3px solid #fffaba;border-top:0;border-radius:0 0 50% 50%;box-shadow:0 0 16px #ffd832}
.bulb-ray{--move:bulb-ray;width:4px;height:24px;margin:-12px -2px;background:linear-gradient(#fffbc1,transparent);border-radius:5px;rotate:var(--angle);transform-origin:2px 100px;top:calc(50% - 88px);box-shadow:0 0 10px #ffe748}
.bulb-circuit{--move:bulb-circuit;width:35%;height:25%;left:2%;top:42%;margin:0;border:3px solid #ffdf3d;border-right:0;border-bottom:0;border-radius:12px 0 0 0;box-shadow:-5px -5px 22px #ffe00033}.circuit-right{left:auto;right:2%;scale:-1 1}
.target-main{--move:target-focus}.target-main .story-glyph{font-size:calc(var(--scene-size)*.77)}
.target-theme{--move:theme-target;width:42px;height:42px;margin:-21px;rotate:var(--angle)}.target-theme .story-glyph{font-size:38px;rotate:calc(var(--angle)*-1)}
.target-lock{--move:target-lock;border:3px dashed #ffe881;border-radius:50%;scale:1.16}.target-arrow{--move:target-arrow;color:#fff4b0;scale:.8}
.lightning-core{--move:bolt-strike;color:#fffcc1;text-shadow:0 0 10px #fff,0 0 22px #ffc800,0 0 45px #ffb000}.lightning-core .story-glyph{font-size:calc(var(--scene-size)*1.15);font-family:Arial,sans-serif;font-weight:900}
.lightning-branch{--move:bolt-branch;--wait:calc(var(--i)*.035s);color:#ffe666;rotate:var(--angle);scale:.65;mix-blend-mode:screen}.lightning-branch .story-glyph{font-family:Arial,sans-serif;font-size:90px}
.lightning-charge{--move:bolt-charge;border:5px dotted #fff4aa;border-radius:50%;box-shadow:0 0 35px #ffe600}.lightning-cross{--move:bolt-cross;color:#fff;rotate:90deg;scale:1.3;text-shadow:0 0 20px #ffe600}
.history-scroll{--move:scroll-unroll}.history-scroll .story-art{clip-path:inset(5% 6% 9%)}
.history-date{--move:history-date;width:40%;height:40%;margin:0;left:30%;top:31%;color:#54351b}.history-date .story-glyph{font:bold 44px Georgia,serif;filter:none}
.history-seal{--move:history-stamp;width:52px;height:52px;margin:0;left:56%;top:57%;background:radial-gradient(circle,#ee5e43,#9d1e20 65%,#61201b);border:5px double #f47d62;border-radius:50%;box-shadow:0 3px 0 #601513}
.history-epoch{--move:history-epoch;width:70px;height:40px;margin:0;top:17%;left:10%;color:#fff4cf}.history-epoch .story-glyph{font:26px Georgia,serif}.epoch-two{left:72%;top:73%;--wait:.18s}
.globe-turn{--move:globe-turn}.globe-turn .story-art{clip-path:circle(45% at 50% 50%)}
.globe-pin{--move:globe-pin;width:45px;height:70px;margin:0;left:53%;top:23%}.globe-pin .story-glyph{font-size:55px}
.globe-latitude{--move:globe-latitude;border:1px solid #b5ecff;border-radius:50%;rotate:25deg;transform:rotateX(65deg);box-shadow:0 0 14px #5bc3ff55}
.globe-flight{--move:globe-flight;width:35px;height:35px;margin:-17px;color:#fffbc5}.globe-flight .story-glyph{font-size:35px}.globe-route{--move:globe-route;border:3px dashed #ffe77a;border-radius:50%;rotate:-20deg}
.arch-stone{--move:arch-build}.arch-stone .story-art{clip-path:inset(3%)}.stone-0{clip-path:polygon(0 0,46% 0,46% 100%,0 100%)}.stone-1{clip-path:polygon(54% 0,100% 0,100% 100%,54% 100%)}.stone-2{clip-path:polygon(46% 0,54% 0,54% 100%,46% 100%);--move:arch-keystone}
.arch-key{--move:arch-keyglow;width:8%;height:10%;left:46%;top:19%;margin:0;border:2px solid #fff4c1;box-shadow:0 0 22px #ffe07b;background:#ffe98e55}
.arch-doorlight{--move:arch-doorlight;width:35%;height:62%;left:32.5%;top:29%;margin:0;border-radius:50% 50% 0 0;background:linear-gradient(#fffbe9bb,#ffd94411);box-shadow:0 0 30px #ffea6d70;z-index:-1}
.paint-band{--move:paint-stroke;width:64%;height:12%;margin:0;left:18%;top:calc(24% + var(--i)*11%);border-radius:45% 14% 35% 12%;rotate:calc(-9deg + var(--i)*4deg);background:#2bafff;transform-origin:left;--wait:calc(var(--i)*.1s);box-shadow:inset 0 4px 0 #fff4}
.paint-band:nth-of-type(3n){background:#fbd139}.paint-band:nth-of-type(3n+1){background:#f35972}
.paint-brush{--move:paint-brush;scale:.78}.paint-brush .story-art{clip-path:inset(4% 3% 3%)}
.paint-splash{--move:paint-splash;background:conic-gradient(#fb5083,#ffd954,#50d8f5,#ac8bff,#fb5083);border-radius:37% 63% 57% 43%;mix-blend-mode:screen;scale:.8}.paint-signature{--move:paint-signature;color:#fff4c7;scale:.8}
.music-staff{--move:staff-draw;width:82%;height:2px;left:9%;top:calc(35% + var(--i)*8%);margin:0;background:linear-gradient(90deg,transparent,#aecfff,transparent);transform-origin:left;--wait:calc(var(--i)*.04s)}
.music-note{--move:note-bounce;width:45px;height:65px;margin:0;left:calc(8% + var(--i)*14%);top:calc(34% + var(--i)*3%);color:#fff0b6;--wait:calc(var(--i)*.045s)}.music-note .story-glyph{font:bold 65px Georgia,serif;text-shadow:0 3px #967413,0 0 15px #ffe17b88}
.music-clef{--move:music-clef;color:#ffe983}.music-clef .story-glyph{font-size:calc(var(--scene-size)*.8);font-family:Georgia,serif}.music-harmony{--move:music-harmony;border:4px solid #a9e6ff;border-radius:50%;box-shadow:0 0 16px #a9e6ff}
.cinema-board{--move:clap-board}.cinema-board .story-art{clip-path:inset(36% 6% 10% 10%)}
.cinema-hinge{--move:clap-hinge;width:51%;height:8%;margin:0;left:25%;top:33%;background:repeating-linear-gradient(135deg,#f5f5f5 0 15px,#19202e 15px 30px);border:2px solid #ced2d8;transform-origin:0 100%;border-radius:3px}
.cinema-beam{--move:cinema-beam;width:100%;height:80%;margin:0;left:0;top:10%;background:linear-gradient(90deg,#fff8dbbb,#fff8db09);clip-path:polygon(0 48%,100% 0,100% 100%);mix-blend-mode:screen}
.cinema-film{--move:cinema-film;width:80%;height:40%;left:10%;top:30%;margin:0;border-top:9px dashed #fff1b3;border-bottom:9px dashed #fff1b3;background:repeating-linear-gradient(90deg,#060d2980 0 23%,#dce9ff80 23% 25%);rotate:-12deg;z-index:-1}.cinema-frame{--move:cinema-frame;border:4px solid #fff8c4;border-radius:18px;scale:1.12}
.football-pitch{--move:pitch-in;width:88%;height:44%;margin:0;left:6%;top:53%;background:repeating-linear-gradient(90deg,#13724d70 0 10%,#1e8d6070 10% 20%);border:2px solid #b6ffdd70;transform:rotateX(65deg);border-radius:12px}
.football-goal{--move:goal-in;scale:1.08;translate:0 -26px}.football-goal .story-art{clip-path:inset(19% 3% 16%)}
.football-net{--move:net-hit;width:52%;height:27%;margin:0;left:24%;top:35%;background:repeating-linear-gradient(0deg,transparent 0 10px,#f2f7ffbb 10px 11px),repeating-linear-gradient(90deg,transparent 0 13px,#f2f7ffbb 13px 14px);transform-origin:55% 55%;opacity:0}
.football-ball{--move:ball-kick;--ball-scale:1}.football-ball .story-art{clip-path:circle(41% at 50% 50%)}
.football-shadow{--move:ball-shadow;width:25%;height:6%;left:37.5%;top:80%;margin:0;background:#0008;filter:blur(5px);border-radius:50%}
.football-speed{--move:ball-speed;width:13%;height:42%;left:39%;top:38%;margin:0;background:linear-gradient(transparent,#ffe876);filter:blur(7px);transform:rotate(25deg);opacity:0}
.football-netwave{--move:netwave;width:56%;height:35%;left:22%;top:30%;margin:0;border:2px solid #fff3a1;box-shadow:0 0 14px #ffe785;opacity:0}
.tradition-ribbon{--move:ribbon-wrap;width:80%;height:12%;margin:0;left:10%;top:calc(32% + var(--i)*14%);border-radius:50%;box-shadow:inset 0 6px 4px #fff5,0 5px 5px #0006;rotate:calc(var(--i)*20deg - 20deg);transform-origin:center}
.ribbon-blue{background:linear-gradient(#2d92f3,#1146a9)}.ribbon-white{background:linear-gradient(#fff,#b8d2ea)}.ribbon-red{background:linear-gradient(#ff5f73,#a50a27)}
.tradition-symbol{--move:ribbon-knot}.tradition-symbol .story-glyph{font-size:calc(var(--scene-size)*.5)}.tradition-rosette{--move:rosette-open;color:var(--alloy-light);text-shadow:0 0 18px #ffd336}
.cloche-plate{--move:plate-in;translate:0 60px}.cloche-plate .story-art{clip-path:ellipse(46% 25% at 50% 49%)}
.cloche-lid{--move:cloche-lift;translate:0 16px}.cloche-lid .story-art{clip-path:ellipse(48% 37% at 50% 46%)}
.cloche-food{--move:food-reveal;scale:.5;translate:0 34px}
.cloche-steam{--move:steam-rise;--speed:1.1s;--repeat:3;--wait:calc(var(--i)*.12s);width:12%;height:32%;left:calc(31% + var(--i)*8%);top:46%;margin:0;border-radius:50%;background:linear-gradient(transparent,#fffb,transparent);filter:blur(7px);opacity:0}
.cloche-spice{--move:spice-spin;color:#ffe38c;scale:.22;translate:-70px -30px}.spice-two{translate:70px -10px;--wait:.14s}
.atom-nucleus{--move:atom-core;width:19%;height:22%;margin:0;left:40.5%;top:39%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fffbd1,#ffc037 35%,#dc5411);box-shadow:0 0 25px #ffb93666,inset -5px -5px 10px #9c3316;z-index:2}
.atom-orbit{--move:atom-orbit;width:75%;height:75%;left:12.5%;top:12.5%;margin:0;border:2px solid #85d5ff;border-radius:50%;box-shadow:0 0 10px #55bfff50;rotate:var(--orbit)}
.atom-electron{position:absolute;left:50%;top:-7px;width:13px;height:13px;border-radius:50%;background:#ecffff;box-shadow:0 0 12px #67d1ff}
.atom-split{--move:atom-split;width:15%;height:18%;left:42.5%;top:41%;margin:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#60bdff,#216ab6);box-shadow:0 0 20px #82deff}.atom-wave{--move:atom-wave;border:3px solid #a6faff;border-radius:50%;box-shadow:0 0 18px #80ecff}
.city-houses{--move:city-rise;scale:1.13}.city-houses .story-art{clip-path:inset(5% 1% 19%)}
.city-window{--move:window-light;--wait:calc(var(--i)*.055s);width:8px;height:12px;left:var(--wx);top:var(--wy);margin:0;background:#ffea83;box-shadow:0 0 12px #ffcf3f;opacity:0}
.city-connections{--move:city-connect;width:75%;height:45%;left:12.5%;top:35%;margin:0;border:3px dotted #b3e6ff;border-radius:50%;box-shadow:0 0 14px #94d9ff70}
.city-message{--move:city-message;scale:.36;translate:0 -100px}
/* Static/reduced motion shows the completed medal immediately. All animated rules are gated. */
@media(prefers-reduced-motion:no-preference){
 body:not(.no-motion) .badge-narrative[data-motion=on][data-ready=loading] .medal-camera{visibility:hidden}
 body:not(.no-motion) .badge-narrative[data-motion=on][data-ready=ready] .badge-story{display:block;animation:story-retire var(--ceremony) linear both}
 body:not(.no-motion) .badge-narrative[data-motion=on][data-ready=ready] .story-actor{animation:var(--move,actor-reveal) var(--speed,var(--action)) var(--wait,0s) var(--repeat,1) cubic-bezier(.22,.7,.28,1) both}
 body:not(.no-motion) .badge-narrative[data-motion=on][data-ready=ready] .medal-assembly{animation:story-medal-camera var(--ceremony) ease-in-out both}
 body:not(.no-motion) .badge-narrative[data-motion=on][data-ready=ready] :is(.medal-face,.medal-depth){animation:story-medal-body var(--ceremony) ease-out both}
 body:not(.no-motion) .badge-narrative[data-motion=on][data-ready=ready] .medal-symbol{animation:story-medal-symbol var(--ceremony) ease-out both}
 body:not(.no-motion) .badge-narrative[data-motion=on][data-ready=ready] .medal-seal{animation:story-medal-seal var(--ceremony) ease-out both}
 body:not(.no-motion) .badge-narrative[data-motion=on][data-ready=ready] .medal-sheen{animation:story-medal-polish var(--ceremony) ease-in-out both}
 body:not(.no-motion) .badge-narrative[data-motion=on][data-ready=ready] .medal-rank-label{animation:story-caption var(--ceremony) ease-out both}
 body:not(.no-motion) .badge-narrative.celebration-rank-platinum[data-motion=on][data-ready=ready] .badge-story{animation-name:story-retire-platinum}
 body:not(.no-motion) .badge-narrative.celebration-rank-platinum[data-motion=on][data-ready=ready] .medal-seal{animation-name:story-platinum-seal}
 body:not(.no-motion) .badge-narrative.celebration-rank-platinum[data-motion=on][data-ready=ready] .football-ball{animation-name:ball-kick-platinum}
 body:not(.no-motion) .badge-narrative.celebration-rank-platinum[data-motion=on][data-ready=ready] .compass-dial{animation-name:compass-platinum}
 body:not(.no-motion) .badge-narrative.celebration-rank-platinum[data-motion=on][data-ready=ready] .globe-turn{animation-name:globe-platinum}
}
@keyframes story-retire{0%{opacity:0;transform:scale(.85)}5%,56%{opacity:1;transform:scale(1)}68%{opacity:0;transform:scale(.38) translateY(-5px)}100%{opacity:0;visibility:hidden;transform:scale(.38)}}
@keyframes story-retire-platinum{0%{opacity:0;transform:scale(.85)}4%,64%{opacity:1;transform:scale(1)}74%{opacity:0;transform:scale(.38) rotateY(15deg)}100%{opacity:0;visibility:hidden;transform:scale(.38)}}
@keyframes story-medal-camera{0%,50%{transform:rotateY(-40deg) rotateX(16deg) scale(.65)}74%{transform:rotateY(8deg) rotateX(-4deg) scale(1.06)}82%{transform:rotateY(-13deg) rotateX(-9deg) scale(.98)}100%{transform:none}}
@keyframes story-medal-body{0%,48%{opacity:0;transform:translateZ(calc(var(--depth,1px) - 160px)) translateY(100px) rotateX(65deg)}66%{opacity:1;transform:translateZ(var(--depth,1px)) translateY(0) rotateX(0)}100%{opacity:1;transform:translateZ(var(--depth,1px))}}
@keyframes story-medal-symbol{0%,58%{opacity:0;transform:translateZ(110px) scale(1.3)}69%{opacity:1;transform:translateZ(34px) scale(1.05)}75%,100%{opacity:1;transform:translateZ(28px) scale(1)}}
@keyframes story-medal-seal{0%,59%{opacity:0;transform:translateZ(260px) rotateZ(-55deg) scale(1.35)}64%{opacity:1}73.333%{transform:translateZ(20px) rotateZ(0) scale(1)}77%{transform:translateZ(28px) rotateZ(1deg) scale(1.015)}85%,100%{opacity:1;transform:translateZ(20px)}}
@keyframes story-platinum-seal{0%,65%{opacity:0;transform:translateZ(260px) rotateZ(-90deg) scale(1.55)}69%{opacity:1}78%{transform:translateZ(20px) rotateZ(0) scale(1)}81%{transform:translateZ(32px) rotateZ(3deg) scale(1.04)}89%,100%{opacity:1;transform:translateZ(20px)}}
@keyframes story-medal-polish{0%,75%{transform:translateX(-65%)}100%{transform:translateX(65%)}}
@keyframes story-caption{0%,68%{opacity:0;transform:translateY(8px)}88%,100%{opacity:1;transform:none}}
@keyframes actor-reveal{0%{opacity:0;transform:scale(.4)}30%,100%{opacity:1;transform:none}}
/* Journey: eleven independent actions. */
@keyframes star-born{0%{opacity:0;transform:translate(-150px,-80px) rotate(-140deg) scale(.06)}25%{opacity:1;transform:translate(25px,0) rotate(20deg) scale(.4)}62%{transform:rotateY(35deg) rotate(-8deg) scale(1.08)}100%{transform:rotateY(0) rotate(0) scale(1)}}
@keyframes star-trail{0%{opacity:0;transform:translate(-100px,-50px) rotate(25deg) scaleX(0)}20%{opacity:1;transform:translate(0,0) rotate(12deg) scaleX(1)}42%,100%{opacity:0;transform:translate(50px,10px) scaleX(.1)}}
@keyframes star-dust{0%,15%{opacity:0;transform:rotate(var(--angle)) translateY(120px) scale(.2)}42%{opacity:1}76%,100%{opacity:0;transform:rotate(var(--angle)) translateY(0) scale(.8)}}
@keyframes star-crown{0%,47%{opacity:0;transform:scale(.1) rotate(-50deg)}73%{opacity:.8;transform:scale(1.4) rotate(30deg)}100%{opacity:0;transform:scale(1.8) rotate(80deg)}}
@keyframes fire-bed{0%{opacity:0;transform:scale(.05)}25%{opacity:.9;transform:scale(.7)}68%,100%{opacity:1;transform:scale(1)}}
@keyframes fire-rise{0%{opacity:0;transform:translateY(0) scale(.3,.3) rotate(0)}20%{opacity:.88}65%{opacity:.65;transform:translate(calc(var(--side)*12px),-55px) scale(.8,1.55) rotate(calc(var(--side)*13deg))}100%{opacity:0;transform:translate(calc(var(--side)*-15px),-115px) scale(.12,1.1) rotate(calc(var(--side)*-12deg))}}
@keyframes ember-rise{0%{opacity:0;transform:translateY(0)}18%{opacity:1}100%{opacity:0;transform:translate(calc(var(--side)*38px),-210px) scale(.1)}}
@keyframes fire-vortex{0%,43%{opacity:0;transform:rotateX(60deg) rotateZ(-170deg) scale(.3)}62%{opacity:.9}100%{opacity:0;transform:rotateX(68deg) rotateZ(350deg) scale(1.2)}}
@keyframes compass-hunt{0%{opacity:0;transform:rotate(-190deg) rotateY(35deg) scale(.35)}28%{opacity:1;transform:rotate(35deg) rotateY(-20deg)}50%{transform:rotate(-24deg) rotateY(10deg)}70%{transform:rotate(8deg)}88%,100%{transform:rotate(0)}}
@keyframes needle-hunt{0%{opacity:0;transform:rotate(0) scale(.3)}24%{opacity:1;transform:rotate(510deg)}48%{transform:rotate(265deg)}67%{transform:rotate(390deg)}84%{transform:rotate(347deg)}95%,100%{transform:rotate(360deg)}}
@keyframes compass-platinum{0%{opacity:0;transform:rotate(-190deg) scale(.35)}20%{opacity:1;transform:rotate(35deg)}36%{transform:rotate(-24deg)}50%{transform:rotate(0)}68%{transform:rotateY(48deg) rotateX(15deg)}84%,100%{transform:rotateY(0) rotateX(0)}}
@keyframes north-lock{0%,67%{opacity:0;transform:translateY(-20px) scale(.6)}87%,100%{opacity:1;transform:none;text-shadow:0 0 18px #ffe96b}}
@keyframes compass-gimbal{0%,44%{opacity:0;transform:rotateX(0) rotateY(0) scale(.75)}62%{opacity:1;transform:rotateX(65deg) rotateY(15deg) scale(1.1)}88%,100%{opacity:0;transform:rotateX(0) rotateY(0) scale(.78)}}
@keyframes compass-gimbal-cross{0%,44%{opacity:0;transform:rotateY(0) scale(.75)}62%{opacity:1;transform:rotateY(68deg) rotateX(-15deg) scale(1.1)}88%,100%{opacity:0;transform:rotateY(0) scale(.78)}}
@keyframes book-open{0%{opacity:0;transform:rotateY(-85deg) rotateX(25deg) scale(.5)}28%{opacity:1;transform:rotateY(12deg) rotateX(10deg)}72%,100%{transform:rotateY(0) rotateX(0)}}
@keyframes page-turn{0%{opacity:0;transform:rotateY(0)}20%{opacity:.9}70%{opacity:.8;transform:rotateY(-165deg)}100%{opacity:0;transform:rotateY(-180deg)}}
@keyframes letter-flight{0%,25%{opacity:0;transform:translate(0,40px) scale(.15)}48%{opacity:1;transform:translate(calc(var(--side)*40px),-10px)}100%{opacity:0;transform:translate(calc(var(--side)*(60px + var(--i)*10px)),-130px) rotate(calc(var(--side)*35deg))}}
@keyframes book-halo{0%,48%{opacity:0;transform:rotateX(65deg) scale(.1)}72%{opacity:.9;transform:rotateX(65deg) scale(1.2)}100%{opacity:0;transform:rotateX(65deg) scale(1.6)}}
@keyframes book-constellation{0%,50%{opacity:0;transform:translateY(0) scale(.3)}70%{opacity:1;transform:translateY(-95px) scale(1)}100%{opacity:0;transform:translateY(-115px) scale(1.2)}}
@keyframes cap-toss{0%{opacity:0;transform:translateY(120px) rotate(-35deg) scale(.45)}22%{opacity:1;transform:translateY(-55px) rotateY(150deg) rotate(-15deg) scale(.8)}48%{transform:translateY(-70px) rotateY(330deg) rotate(10deg)}78%{transform:translateY(12px) rotateY(360deg) rotate(-4deg)}91%,100%{transform:translateY(0) rotateY(360deg)}}
@keyframes tassel-swing{0%,68%{opacity:0;transform:rotate(-40deg)}74%{opacity:1;transform:rotate(38deg)}86%{transform:rotate(-23deg)}100%{opacity:1;transform:rotate(8deg)}}
@keyframes cap-scroll{0%,48%{opacity:0;transform:scaleX(.1) translateY(40px)}72%{opacity:1;transform:scaleX(1) translateY(0)}100%{opacity:0;transform:scale(.5)}}
@keyframes cap-glint{0%,45%{opacity:0;transform:rotate(var(--angle)) translateY(30px)}65%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(150px) scale(.2)}}
@keyframes trophy-rise{0%{opacity:0;transform:translateY(100px) rotateY(-45deg) scale(.65)}40%{opacity:1;transform:translateY(0) rotateY(18deg)}74%{transform:rotateY(-16deg) translateY(-8px)}100%{transform:rotateY(0)}}
@keyframes plinth-rise{0%{opacity:0;transform:translateY(50px)}35%,100%{opacity:1;transform:none}}
@keyframes spot-open{0%,20%{opacity:0;transform:rotate(-20deg)}45%{opacity:var(--story-power);transform:rotate(5deg)}100%{opacity:var(--story-power);transform:rotate(-5deg)}}
@keyframes trophy-crown{0%,52%{opacity:0;transform:translateY(-70px) scale(.2)}76%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:scale(.6)}}
@keyframes laurel-turn{0%,45%{opacity:0;transform:rotateY(80deg)}75%{opacity:.7;transform:rotateY(0)}100%{opacity:0;transform:scale(1.2)}}
@keyframes write-hundred{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:rotate(-9deg) scale(.75)}15%{opacity:1}63%{clip-path:inset(0);transform:rotate(-9deg) scale(1.04)}100%{clip-path:inset(0);transform:rotate(-9deg) scale(1)}}
@keyframes write-stroke{0%,55%{opacity:0;transform:rotate(-9deg) scaleX(0)}76%,100%{opacity:1;transform:rotate(-9deg) scaleX(1)}}
@keyframes perfect-check{0%,56%{opacity:0;transform:scale(.1) rotate(-40deg)}75%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
@keyframes perfect-ring{0%,55%{opacity:0;transform:rotateX(60deg) scale(.3)}75%{opacity:.8}100%{opacity:0;transform:rotateX(60deg) scale(1.8)}}
@keyframes arm-lift{0%{opacity:0;transform:translateY(55px) rotate(-20deg) scale(.7)}25%{opacity:1;transform:translateY(20px) rotate(-10deg)}42%{transform:translateY(24px) rotate(-12deg)}65%{transform:translateY(-12px) rotate(4deg) scale(1.04)}100%{transform:translateY(0) rotate(0)}}
@keyframes weight-lift{0%{opacity:0;transform:translateY(65px)}25%{opacity:1;transform:translateY(34px)}42%{transform:translateY(38px)}68%{opacity:1;transform:translateY(-25px) rotateX(20deg)}100%{opacity:0;transform:translateY(-50px) rotateY(70deg) scale(.5)}}
@keyframes stone-dust{0%,55%{opacity:0;transform:none}65%{opacity:.8}100%{opacity:0;transform:translate(calc(var(--side)*50px),40px) rotate(90deg)}}
@keyframes strength-ripple{0%,58%{opacity:0;transform:scale(.5) rotateX(65deg)}74%{opacity:.8}100%{opacity:0;transform:scale(1.7) rotateX(65deg)}}
@keyframes bulb-flicker{0%{opacity:0;transform:scale(.5);filter:grayscale(1) brightness(.3)}18%{opacity:1;transform:scale(.95);filter:grayscale(1) brightness(.4)}34%{filter:grayscale(.8) brightness(.65)}44%{filter:grayscale(.6) brightness(.85)}62%{filter:grayscale(0) brightness(1.3) drop-shadow(0 0 18px #ffe335)}100%{transform:scale(1);filter:drop-shadow(0 0 13px #ffcc35)}}
@keyframes bulb-glow{0%,40%{opacity:0;transform:scale(.3)}65%{opacity:var(--story-power);transform:scale(1.1)}100%{opacity:var(--story-power);transform:scale(1)}}
@keyframes filament-warm{0%,35%{opacity:0;filter:brightness(.2)}58%{opacity:1;filter:brightness(1)}100%{opacity:1;filter:brightness(1.3)}}
@keyframes bulb-ray{0%,57%{opacity:0;transform:scaleY(.1)}80%,100%{opacity:.85;transform:scaleY(1)}}
@keyframes bulb-circuit{0%,48%{opacity:0;clip-path:inset(0 100% 0 0)}74%{opacity:1;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}}
@keyframes target-focus{0%{opacity:0;transform:rotateY(75deg) scale(.45)}25%{opacity:1;transform:rotateY(-15deg)}68%{transform:scale(.94)}82%{transform:scale(1.05)}100%{transform:none}}
@keyframes theme-target{0%{opacity:0;transform:translateY(-130px) scale(.5)}24%{opacity:1;transform:translateY(-120px)}63%{opacity:1;transform:translateY(-85px) scale(.75)}88%,100%{opacity:0;transform:translateY(0) scale(.05)}}
@keyframes target-lock{0%,51%{opacity:0;transform:rotate(-45deg) scale(1.3)}77%{opacity:1;transform:rotate(35deg) scale(.65)}100%{opacity:0;transform:rotate(65deg) scale(.2)}}
@keyframes target-arrow{0%,56%{opacity:0;transform:translate(-130px,90px) rotate(-25deg)}76%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:scale(.5)}}
@keyframes bolt-strike{0%,10%{opacity:0;transform:translateY(-130px) scale(.1,.9)}32%{opacity:1;transform:translateY(0) scale(.8,1.1)}50%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes bolt-branch{0%,20%{opacity:0;transform:translateY(-100px) scale(.1)}43%{opacity:.7;transform:translateY(-65px) scale(.8)}72%,100%{opacity:0;transform:translateY(0) scale(.1)}}
@keyframes bolt-charge{0%,44%{opacity:0;transform:rotate(0) scale(1.3)}68%{opacity:1;transform:rotate(160deg) scale(.6)}100%{opacity:0;transform:rotate(260deg) scale(.1)}}
@keyframes bolt-cross{0%,56%{opacity:0;transform:scaleX(.05)}70%{opacity:.8;transform:scaleX(1.3)}100%{opacity:0;transform:scaleX(1.8)}}
/* Themes: action first, then the existing theme emblem docks in the medal. */
@keyframes scroll-unroll{0%{opacity:0;transform:scaleY(.05) rotate(-8deg)}25%{opacity:1;transform:scaleY(.45) rotate(-5deg)}53%,100%{transform:scaleY(1) rotate(0)}}
@keyframes history-date{0%,35%{opacity:0;clip-path:inset(0 100% 0 0)}60%,100%{opacity:1;clip-path:inset(0)}}
@keyframes history-stamp{0%,53%{opacity:0;transform:translate(70px,-90px) scale(2)}62%{opacity:1}77%{transform:translate(0,0) scale(.9)}88%,100%{opacity:1;transform:scale(1)}}
@keyframes history-epoch{0%,50%{opacity:0;transform:translateY(30px) rotate(-15deg)}74%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}
@keyframes globe-turn{0%{opacity:0;transform:rotateY(-130deg) rotate(-35deg) scale(.45)}26%{opacity:1;transform:rotateY(-50deg) rotate(-20deg) scale(.9)}65%{transform:rotateY(12deg) rotate(5deg)}100%{transform:rotateY(0) rotate(0)}}
@keyframes globe-platinum{0%{opacity:0;transform:rotateY(-130deg) rotate(-35deg) scale(.45)}23%{opacity:1;transform:rotateY(-20deg)}45%{transform:rotateY(0)}66%{transform:rotateY(30deg) rotate(-10deg) scale(.9)}91%,100%{transform:none}}
@keyframes globe-pin{0%,62%{opacity:0;transform:translateY(-60px) scale(.5)}80%{opacity:1;transform:translateY(8px) scale(1.1)}92%,100%{opacity:1;transform:translateY(0)}}
@keyframes globe-latitude{0%,15%{opacity:0;transform:rotateX(65deg) rotateZ(-100deg) scale(.3)}50%{opacity:.7}100%{opacity:.2;transform:rotateX(65deg) rotateZ(80deg) scale(1.1)}}
@keyframes globe-flight{0%,45%{opacity:0;transform:rotate(-140deg) translateX(130px)}57%{opacity:1}90%{opacity:1;transform:rotate(170deg) translateX(130px)}100%{opacity:0;transform:rotate(200deg) translateX(130px)}}
@keyframes globe-route{0%,45%{opacity:0;transform:rotateX(60deg) scale(.8)}70%{opacity:.7;transform:rotateX(60deg) scale(1.15)}100%{opacity:0;transform:rotateX(60deg) scale(1.15)}}
@keyframes arch-build{0%{opacity:0;transform:translate(calc((var(--piece)*2 - 1)*130px),70px) rotate(calc((var(--piece)*2 - 1)*16deg))}35%{opacity:1;transform:translate(calc((var(--piece)*2 - 1)*15px),10px)}57%,100%{transform:none}}
@keyframes arch-keystone{0%,34%{opacity:0;transform:translateY(-120px)}50%{opacity:1;transform:translateY(-45px)}71%{transform:translateY(4px)}84%,100%{transform:none}}
@keyframes arch-keyglow{0%,63%{opacity:0;transform:scale(.7)}78%{opacity:.9;transform:scale(1.15)}100%{opacity:0;transform:scale(1.3)}}
@keyframes arch-doorlight{0%,60%{opacity:0;transform:scaleX(.1)}84%{opacity:.9;transform:scaleX(1)}100%{opacity:.4;transform:scaleX(1)}}
@keyframes paint-stroke{0%,15%{opacity:0;transform:scaleX(0)}65%{opacity:1;transform:scaleX(1.04)}100%{opacity:1;transform:scaleX(1)}}
@keyframes paint-brush{0%{opacity:0;transform:translate(-95px,-45px) rotate(15deg)}17%{opacity:1;transform:translate(-60px,-35px) rotate(20deg)}38%{transform:translate(80px,-10px) rotate(-10deg)}56%{transform:translate(-50px,30px) rotate(18deg)}76%{opacity:1;transform:translate(95px,65px) rotate(-10deg)}100%{opacity:0;transform:translate(150px,95px) rotate(-35deg)}}
@keyframes paint-splash{0%,52%{opacity:0;transform:scale(.05) rotate(-40deg)}72%{opacity:.8;transform:scale(.9) rotate(15deg)}100%{opacity:0;transform:scale(1.3) rotate(45deg)}}
@keyframes paint-signature{0%,64%{opacity:0;transform:scale(.2) rotate(-25deg)}85%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes staff-draw{0%{opacity:0;transform:scaleX(0)}32%,100%{opacity:.65;transform:scaleX(1)}}
@keyframes note-bounce{0%,10%{opacity:0;transform:translate(-45px,-55px) rotate(-20deg) scale(.3)}35%{opacity:1;transform:translate(0,12px) rotate(10deg) scale(1)}52%{transform:translate(12px,-35px) rotate(-10deg)}75%{transform:translate(20px,5px) rotate(7deg)}100%{opacity:0;transform:translate(calc(130px - var(--i)*45px),calc(15px - var(--i)*12px)) scale(.2)}}
@keyframes music-clef{0%,48%{opacity:0;transform:rotateY(-70deg) scale(.1)}73%{opacity:1;transform:rotateY(15deg) scale(1)}100%{opacity:0;transform:rotateY(0) scale(.65)}}
@keyframes music-harmony{0%,57%{opacity:0;transform:scale(.2) rotateX(55deg)}73%{opacity:.8}100%{opacity:0;transform:scale(1.6) rotateX(55deg)}}
@keyframes clap-board{0%{opacity:0;transform:translateY(70px) rotate(-16deg) scale(.5)}27%{opacity:1;transform:translateY(0) rotate(-5deg)}58%{transform:translateY(0) rotate(0)}65%{transform:translateY(5px) rotate(2deg)}78%,100%{transform:none}}
@keyframes clap-hinge{0%,27%{opacity:0;transform:rotate(-25deg)}32%,49%{opacity:1;transform:rotate(-25deg)}62%{opacity:1;transform:rotate(0)}72%,100%{opacity:0;transform:rotate(0)}}
@keyframes cinema-beam{0%,61%{opacity:0;transform:scaleX(.3)}73%{opacity:var(--story-power);transform:scaleX(1)}100%{opacity:.25;transform:scaleX(1)}}
@keyframes cinema-film{0%,43%{opacity:0;transform:translateX(200px) rotateY(55deg)}60%{opacity:.6;transform:translateX(-80px) rotateY(-15deg)}81%{opacity:.5;transform:translateX(0) rotateY(0)}100%{opacity:0;transform:scale(.7)}}
@keyframes cinema-frame{0%,65%{opacity:0;transform:scale(1.5) rotate(-20deg)}83%{opacity:.85;transform:scale(.8) rotate(0)}100%{opacity:0;transform:scale(.5)}}
@keyframes pitch-in{0%{opacity:0;transform:rotateX(70deg) translateY(60px)}25%,100%{opacity:.7;transform:rotateX(65deg)}}
@keyframes goal-in{0%{opacity:0;transform:translateY(-35px) scale(.75)}25%,100%{opacity:1;transform:none}}
@keyframes ball-kick{0%{opacity:0;transform:translate(-85px,100px) scale(.5) rotate(-30deg)}18%{opacity:1;transform:translate(-85px,100px) scale(.5) rotate(-30deg)}48%{transform:translate(10px,-25px) scale(.22) rotate(270deg)}62%{transform:translate(38px,-19px) scale(.13) rotate(360deg)}75%{transform:translate(33px,-7px) scale(.15) rotate(380deg)}100%{transform:translate(28px,11px) scale(.14) rotate(390deg)}}
@keyframes ball-kick-platinum{0%{opacity:0;transform:translate(-85px,100px) scale(.5) rotate(-30deg)}13%{opacity:1;transform:translate(-85px,100px) scale(.5) rotate(-30deg)}36%{transform:translate(-12px,-3px) scale(.32) rotate(160deg)}58%{transform:translate(10px,-25px) scale(.24) rotate(220deg)}74%{transform:translate(38px,-19px) scale(.13) rotate(360deg)}86%{transform:translate(33px,-7px) scale(.15) rotate(380deg)}100%{transform:translate(28px,11px) scale(.14) rotate(390deg)}}
@keyframes ball-shadow{0%{opacity:0;transform:translateX(-85px) scale(1)}18%{opacity:.65}62%,100%{opacity:.25;transform:translate(28px,-55px) scale(.35)}}
@keyframes net-hit{0%,59%{opacity:0;transform:none}64%{opacity:.7;transform:perspective(300px) rotateY(-8deg) scale(1.08,.91)}73%{opacity:.4;transform:scale(.97,1.03)}88%,100%{opacity:0;transform:none}}
.celebration-rank-platinum .football-net{--move:net-hit-platinum}
@keyframes net-hit-platinum{0%,73%{opacity:0;transform:none}79%{opacity:.75;transform:perspective(300px) rotateY(-12deg) scale(1.1,.88)}88%{opacity:.45;transform:scale(.96,1.04)}100%{opacity:0;transform:none}}
@keyframes ball-speed{0%,26%{opacity:0;transform:rotate(35deg) scaleY(.1)}43%{opacity:.65;transform:rotate(35deg) scaleY(1)}65%,100%{opacity:0;transform:translate(18px,-35px) rotate(35deg) scaleY(.2)}}
@keyframes netwave{0%,73%{opacity:0;transform:scale(.4)}84%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
@keyframes ribbon-wrap{0%{opacity:0;transform:translateX(calc((var(--i) - 1)*150px)) rotateY(75deg) scaleX(.2)}28%{opacity:1;transform:rotateY(-25deg) rotateX(15deg)}65%{transform:rotateY(20deg) rotateX(55deg)}100%{opacity:.4;transform:rotateY(0) rotateX(0) scale(.25) translateY(-100px)}}
@keyframes ribbon-knot{0%,45%{opacity:0;transform:translateY(-50px) scale(.15)}74%{opacity:1;transform:translateY(0) scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes rosette-open{0%,55%{opacity:0;transform:rotate(-100deg) scale(.05)}80%{opacity:.8;transform:rotate(15deg) scale(1.2)}100%{opacity:0;transform:rotate(35deg) scale(.7)}}
@keyframes plate-in{0%{opacity:0;transform:translateX(-80px) scale(.6)}26%,100%{opacity:1;transform:none}}
@keyframes cloche-lift{0%{opacity:0;transform:translateY(25px) scale(.85)}22%{opacity:1;transform:none}40%{transform:translateY(-10px) rotate(-4deg)}77%{opacity:1;transform:translate(50px,-115px) rotate(18deg)}100%{opacity:0;transform:translate(90px,-160px) rotate(30deg)}}
@keyframes food-reveal{0%,35%{opacity:0;transform:scale(.5)}60%,100%{opacity:1;transform:scale(1)}}
@keyframes steam-rise{0%,20%{opacity:0;transform:translateY(0) scale(.4)}45%{opacity:.45;transform:translateY(-25px) scale(.8)}100%{opacity:0;transform:translate(calc(var(--side)*20px),-100px) scale(1.2)}}
@keyframes spice-spin{0%,50%{opacity:0;transform:rotate(-80deg) translateY(45px)}75%{opacity:1;transform:rotate(110deg) translateY(-35px)}100%{opacity:0;transform:rotate(180deg) translateY(-70px)}}
@keyframes atom-core{0%{opacity:0;transform:scale(.1)}28%{opacity:1;transform:scale(1.15)}55%{transform:scale(.93)}100%{transform:scale(1)}}
@keyframes atom-orbit{0%{opacity:0;transform:rotateX(68deg) rotateZ(-180deg) scale(.15)}25%{opacity:1;transform:rotateX(65deg) rotateZ(90deg) scale(.9)}72%{transform:rotateX(65deg) rotateZ(460deg) scale(1)}100%{transform:rotateX(65deg) rotateZ(480deg)}}
@keyframes atom-split{0%,48%{opacity:0;transform:translateX(0) scale(.2)}66%{opacity:1;transform:translateX(75px) scale(.8)}83%{opacity:1;transform:translateX(-35px) scale(.6)}100%{opacity:0;transform:translateX(0) scale(.2)}}
@keyframes atom-wave{0%,78%{opacity:0;transform:scale(.2)}86%{opacity:.8}100%{opacity:0;transform:scale(1.5)}}
@keyframes city-rise{0%{opacity:0;transform:translateY(90px) rotateY(-18deg) scale(.65);filter:brightness(.35)}25%{opacity:1;transform:translateY(0) rotateY(5deg) scale(1);filter:brightness(.45)}65%{transform:none;filter:brightness(.85)}100%{transform:none;filter:brightness(1)}}
@keyframes window-light{0%,30%{opacity:0;transform:scale(.6)}60%,100%{opacity:.9;transform:scale(1)}}
@keyframes city-connect{0%,50%{opacity:0;transform:rotateX(60deg) scale(.2)}75%{opacity:.9;transform:rotateX(60deg) scale(1)}100%{opacity:0;transform:rotateX(60deg) scale(1.25)}}
@keyframes city-message{0%,56%{opacity:0;transform:translateY(50px) scale(.1)}79%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:translateY(-20px) scale(.8)}}
@media(max-width:360px){.badge-story{--scene-size:min(70vw,245px,33svh)}.perfect-writing .story-glyph{font-size:95px}.story-actor.compass-north{top:13%}}
@media(max-height:650px){.badge-story{--scene-size:200px}.medal-stage{height:245px}}
/* A shaped flame anchors the moving embers; the compass needle remains independent of its dial. */
.fire-shape{--move:fire-shape;--speed:.65s;--repeat:4;width:48%;height:71%;left:26%;top:16%;margin:0;background:url('./images/feedback-flame.png') center/contain no-repeat;transform-origin:50% 90%;filter:drop-shadow(0 0 18px #ff680070)}
.celebration-rank-platinum .fire-shape{--repeat:6}
.fire-inner{--move:fire-inner;--wait:.15s;scale:.68;translate:0 23px;filter:brightness(1.4);mix-blend-mode:screen}
.fire-tongue{left:calc(42% + var(--phase)*16%);height:55px;width:calc(12px + var(--phase)*22px);--repeat:3;opacity:.6}
.celebration-rank-platinum .fire-tongue{--repeat:4}
.compass-dial .story-art::after{content:'';position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle at 40% 25%,#fff3d4,#d5bd8c);box-shadow:inset 0 0 6px #9a793c55}
.compass-dial .compass-needle{z-index:2;top:50%;height:55%;margin-top:-27.5%;width:16px;margin-left:-8px}
@keyframes fire-shape{0%{opacity:.8;transform:skewX(-4deg) scale(.91,.95)}34%{opacity:1;transform:skewX(5deg) scale(1.03,1.07)}68%{transform:skewX(-3deg) scale(.95,1.03)}100%{opacity:.9;transform:skewX(-4deg) scale(.91,.95)}}
@keyframes fire-inner{0%{opacity:.4;transform:skewX(5deg) scale(.85,1.08)}40%{opacity:.8;transform:skewX(-6deg) scale(1.1,.92)}100%{opacity:.4;transform:skewX(5deg) scale(.85,1.08)}}

.cinema-board .cinema-hinge{width:77%;height:9%;left:12%;top:27%;margin:0}
.city-houses .city-window{width:2.5%;height:4%;box-shadow:0 0 6px #ffcf3f}
.story-loading{position:absolute;inset:0;display:grid;place-content:center;margin:0;font-size:14px;color:#d7e6ff;z-index:8}
.badge-narrative[data-ready=ready] .story-loading{display:none}
.badge-narrative[data-motion=off] .story-loading{display:none}