/* Original TWELVE mascot and scenery. Namespaced to remain reusable. */
.hawk-journey{--hj-progress:0%;--hj-from:0%;margin:0;overflow:hidden;isolation:isolate;border:1px solid #cdd9c8;border-radius:18px;background:#e9edda;color:#17374c}
.hj-scene{height:214px;position:relative;overflow:hidden;background:#e9edda}
.hj-scenery{display:block;width:100%;height:100%;position:absolute;inset:0}
.hj-scene-label{position:absolute;left:16px;top:14px;display:flex;align-items:center;gap:6px;font:700 9px/1.2 var(--body,system-ui,sans-serif);letter-spacing:1.5px;color:#446f6b}
.hj-location-dot{width:5px;height:5px;display:inline-block;border-radius:50%;background:#5b8b6a}
.hj-track{position:absolute;left:7%;right:11%;bottom:16%;height:0}
.hj-runner{position:absolute;left:var(--hj-progress);bottom:0;width:108px;height:125px;transform:translateX(-50%);z-index:2}
.hj-mascot{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 0 #17374c0b)}
.hj-bird{transform-origin:65px 133px;animation:hj-idle 2.3s ease-in-out infinite}
.hj-head{transform-origin:65px 70px}
.hj-eye{transform-origin:76px 43px;animation:hj-blink 5.5s infinite}
.hj-happy-eye{display:none}
.hj-shadow{transform-origin:center;animation:hj-shadow 2.3s ease-in-out infinite}
.hj-wing-front{transform-origin:42px 83px;animation:hj-wing-rest 3.7s ease-in-out infinite}
.hj-wing-back{transform-origin:86px 83px}
.hj-scarf-tail{transform-origin:46px 77px;animation:hj-scarf 2.1s ease-in-out infinite}
.hj-tail{transform-origin:35px 103px}
.hj-sparks{opacity:0;transform-origin:66px 65px}
.hj-clouds{animation:hj-clouds 24s ease-in-out infinite alternate}
.hj-quip{position:absolute;left:50%;bottom:115px;transform:translateX(-50%);white-space:nowrap;border:1px solid #17374c1f;border-radius:11px 11px 11px 2px;padding:5px 9px;background:#fffdf0;color:#254f57;font:700 10px/1.3 var(--body,system-ui,sans-serif);box-shadow:0 2px 0 #17374c08}
.hj-quip:after{content:'';position:absolute;left:50%;bottom:-5px;width:7px;height:7px;background:#fffdf0;transform:rotate(45deg);border-right:1px solid #17374c1f;border-bottom:1px solid #17374c1f}
.hj-state-idle .hj-quip{animation:hj-quip-float 3s ease-in-out infinite}
.hj-gain{position:absolute;bottom:10px;right:0;z-index:3;font:800 19px/1 var(--body,system-ui,sans-serif);color:#17374c;background:#cfed89;padding:5px 7px;border:2px solid #17374c;border-radius:10px;transform:rotate(9deg);animation:hj-gain-pop .5s cubic-bezier(.2,1.6,.4,1) both,hj-gain-fade .35s ease 2s forwards}
.hj-advance{animation:hj-forward 1.1s cubic-bezier(.25,.7,.3,1) both}
.hj-mood-run .hj-bird,.hj-advance .hj-bird{animation:hj-run .28s ease-in-out 4}
.hj-mood-run .hj-leg-front,.hj-advance .hj-leg-front{transform-origin:53px 120px;animation:hj-step .28s ease-in-out 4 alternate}
.hj-mood-run .hj-leg-back,.hj-advance .hj-leg-back{transform-origin:76px 120px;animation:hj-step .28s ease-in-out 4 alternate-reverse}
.hj-mood-run .hj-wing-front,.hj-advance .hj-wing-front{animation:hj-wing-run .28s ease-in-out 4 alternate}
.hj-mood-celebrate .hj-bird{animation:hj-celebrate .7s cubic-bezier(.3,.1,.2,1) 2,hj-idle 2.3s ease-in-out 1.4s infinite}
.hj-mood-celebrate .hj-wing-front{animation:hj-cheer-left .7s ease-in-out 2}
.hj-mood-celebrate .hj-wing-back{animation:hj-cheer-right .7s ease-in-out 2}
.hj-mood-celebrate .hj-eye{display:none}
.hj-mood-celebrate .hj-happy-eye{display:block}
.hj-mood-celebrate .hj-sparks{animation:hj-sparkle 1.2s ease-in-out 2}
.hj-mood-close .hj-head{animation:hj-nod .7s ease-in-out 2}
.hj-mood-close .hj-wing-front{animation:hj-cheer-left .9s ease-in-out 1}
.hj-mood-miss .hj-head{animation:hj-head-shake .6s ease-in-out 1}
.hj-mood-miss .hj-bird{animation:hj-sigh .8s ease-in-out 1,hj-idle 2.3s ease-in-out .8s infinite}
.hj-endzone{position:absolute;right:2.7%;bottom:19%;height:61px;color:#17374c;transform:rotate(3deg)}
.hj-endzone span{position:relative;z-index:1;display:block;background:#cbe982;border:2px solid #17374c;padding:4px 9px 4px 7px;font:900 italic 18px/1 var(--body,system-ui,sans-serif);clip-path:polygon(0 0,100% 0,86% 50%,100% 100%,0 100%)}
.hj-endzone i{position:absolute;left:0;top:3px;display:block;width:3px;height:59px;background:#17374c;border-radius:2px}
.hj-caption{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f3f4e6;font:600 11px/1.2 var(--body,system-ui,sans-serif);letter-spacing:.1px}
.hj-caption>span:first-child{display:flex;align-items:center;gap:6px}
.hj-caption-dot{width:6px;height:6px;border-radius:50%;background:#4c8980;display:inline-block}
.hj-caption strong{font-weight:800}
.hj-meter{height:5px;background:#d8e1ce;position:relative;overflow:hidden}
.hj-meter>span{display:block;height:100%;background:#438a74;transition:width 1.1s ease}
.hj-meter>i{position:absolute;top:0;bottom:0;left:20%;width:2px;background:#f3f4e6}
.hj-meter>i:nth-of-type(2){left:40%}.hj-meter>i:nth-of-type(3){left:60%}.hj-meter>i:nth-of-type(4){left:80%}
.hj-compact .hj-scene{height:167px}.hj-compact .hj-runner{width:94px;height:108px}.hj-compact .hj-quip{bottom:100px}.hj-compact .hj-scene-label{display:none}
@keyframes hj-idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes hj-shadow{0%,100%{transform:scaleX(1);opacity:.15}50%{transform:scaleX(.87);opacity:.1}}
@keyframes hj-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes hj-wing-rest{0%,72%,100%{transform:rotate(0)}82%,90%{transform:rotate(-5deg)}}
@keyframes hj-scarf{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
@keyframes hj-clouds{from{transform:translateX(-7px)}to{transform:translateX(15px)}}
@keyframes hj-quip-float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
@keyframes hj-forward{from{left:var(--hj-from)}to{left:var(--hj-progress)}}
@keyframes hj-run{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes hj-step{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes hj-wing-run{from{transform:rotate(-12deg)}to{transform:rotate(10deg)}}
@keyframes hj-celebrate{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-16px) rotate(-6deg)}65%{transform:translateY(-8px) rotate(4deg)}}
@keyframes hj-cheer-left{0%,100%{transform:rotate(0)}45%{transform:rotate(110deg)}}
@keyframes hj-cheer-right{0%,100%{transform:rotate(0)}45%{transform:rotate(-90deg)}}
@keyframes hj-sparkle{0%,100%{opacity:0;transform:scale(.7)}40%,70%{opacity:1;transform:scale(1)}}
@keyframes hj-nod{0%,100%{transform:rotate(0)}40%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}}
@keyframes hj-head-shake{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-5deg)}40%,80%{transform:rotate(4deg)}}
@keyframes hj-sigh{0%,100%{transform:translateY(0)}50%{transform:translateY(3px) rotate(-2deg)}}
@keyframes hj-gain-pop{from{opacity:0;transform:translateY(12px) rotate(-10deg) scale(.4)}to{opacity:1;transform:translateY(0) rotate(9deg) scale(1)}}
@keyframes hj-gain-fade{from{opacity:1}to{opacity:0}}
@media(max-width:600px){.hj-scene{height:166px}.hj-runner{width:91px;height:105px}.hj-track{left:13%;right:15%;bottom:14%}.hj-quip{bottom:97px;font-size:9px;padding:4px 7px}.hj-scene-label{font-size:8px;left:12px;top:11px;letter-spacing:1.1px}.hj-endzone{right:3.5%;bottom:16%;transform:scale(.8) rotate(3deg);transform-origin:bottom right}.hj-caption{padding:9px 12px;font-size:10px}.hj-compact .hj-scene{height:154px}.hj-compact .hj-runner{width:85px;height:98px}.hj-compact .hj-quip{bottom:92px}.hj-gain{font-size:14px;bottom:8px;right:0;padding:4px 6px;border-width:1.5px}}
@media(max-width:360px){.hj-track{left:15%;right:17%}.hj-quip{font-size:8px}.hj-state-miss .hj-quip{white-space:nowrap}.hj-scene-label{font-size:7px}.hj-caption{font-size:9px}}
[data-reduced-motion="true"] .hawk-journey *, .hawk-journey[data-reduced-motion="true"] *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.hawk-journey *,.hj-mascot *{animation:none!important;transition:none!important}}