/* Website-only motion. Approved character masters remain unchanged. */
.motion-checkbox{position:relative;margin:0 8px 16px 12px;width:18px;height:18px;vertical-align:middle;accent-color:#715bac}
.motion-label{font-size:13px;color:#555b6d;cursor:pointer}
.motion-checkbox:checked ~ .running-stage *{animation-play-state:paused!important}
.hero-art{width:100%}
.hero-art:before{display:none}
.running-stage{height:510px;position:relative;overflow:hidden;border-radius:42% 45% 32% 34% / 34% 37% 24% 26%;background:radial-gradient(circle at 78% 8%,#fff4d8 0 8%,transparent 22%),linear-gradient(180deg,#a7ddff 0%,#d3ebfc 53%,#fff2d7 78%,#e5d4b5 100%);box-shadow:inset 0 -18px 30px #b88d5940,0 28px 50px #8b94a324}
.running-stage:after{content:'';position:absolute;left:-10%;bottom:-6%;width:120%;height:30%;background:radial-gradient(ellipse at 50% 0,#cceca3 0 22%,#91c890 70%);border-radius:55% 55% 0 0;z-index:0}
.running-stage .runner{position:absolute;z-index:2;display:block;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 18px 10px #46382946);max-height:none;border-radius:0}
.run-miso{height:78%!important;width:auto!important;left:5%;bottom:12%;animation:miso-bound 1.28s ease-in-out infinite}
.run-jasper{height:66%!important;width:auto!important;right:0;bottom:10%;animation:jasper-bound 1.03s ease-in-out infinite}
.running-stage .spark{z-index:3;animation:twinkle 3.5s ease-in-out infinite}
.running-stage .s2{animation-delay:-1.4s}
.sky-orb{position:absolute;border-radius:50%;background:#ffffffa8;box-shadow:0 0 24px #fff;animation:drift 8s ease-in-out infinite alternate}
.orb-one{width:70px;height:70px;left:18%;top:10%}.orb-two{width:46px;height:46px;right:12%;top:23%;animation-delay:-3s}.orb-three{width:20px;height:20px;left:56%;top:18%;animation-delay:-5s}
.ground-shadow{position:absolute;bottom:12%;height:25px;border-radius:50%;background:#53605046;filter:blur(9px);z-index:1;animation:shadow-pulse 1.28s ease-in-out infinite}
.shadow-miso{left:13%;width:35%}.shadow-jasper{right:9%;width:30%;animation-duration:1.03s}
.running-stage .art-caption{z-index:4;bottom:15px;right:25px}
.hero-copy .kicker{animation:rise-in .7s ease-out both}.hero-copy h1{animation:rise-in .9s .12s ease-out both}.hero-copy>p:not(.kicker){animation:rise-in .9s .24s ease-out both}.hero-actions{animation:rise-in .9s .36s ease-out both}
.story-card,.friend-grid article{transition:transform .25s ease,box-shadow .25s ease}.story-card:hover,.friend-grid article:hover{transform:translateY(-7px);box-shadow:0 20px 36px #3b3c3a20}
@keyframes miso-bound{0%,100%{transform:translate(0,0) rotate(-1deg)}46%{transform:translate(10px,-26px) rotate(2deg)}}
@keyframes jasper-bound{0%,100%{transform:translate(0,0) rotate(1deg)}50%{transform:translate(-8px,-34px) rotate(-2deg)}}
@keyframes shadow-pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(.77);opacity:.5}}
@keyframes twinkle{0%,100%{transform:rotate(-10deg) scale(1);opacity:.7}50%{transform:rotate(10deg) scale(1.2);opacity:1}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(18px,-16px)}}
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.running-stage{height:420px}.run-miso{height:71%!important;left:2%}.run-jasper{height:60%!important;right:-5%}}
@media(min-width:701px) and (max-width:1050px){.hero{grid-template-columns:1fr;gap:36px}.hero-art{max-width:650px;margin:auto}.hero-copy{max-width:700px}.hero h1{font-size:68px}}
@media(max-width:440px){.running-stage{height:330px}.run-miso{height:68%!important;left:-1%}.run-jasper{height:56%!important;right:-8%}.running-stage .art-caption{font-size:10px;right:10px}}
@media(prefers-reduced-motion:reduce){.run-miso,.run-jasper,.running-stage .spark,.sky-orb,.ground-shadow,.hero-copy .kicker,.hero-copy h1,.hero-copy>p:not(.kicker),.hero-actions{animation:none!important}.story-card,.friend-grid article{transition:none}}
/* Actual four-leg animation draft; keep full bodies visible at every screen size. */
.running-stage.video-stage{height:auto;aspect-ratio:20 / 11;border-radius:28px;isolation:isolate;background:#cee7cb}
.running-stage.video-stage:after{display:none}
.hero-video{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.video-stage .art-caption{bottom:52px;right:14px;pointer-events:none;font-size:11px}
@media(max-width:440px){.video-stage .art-caption{display:none}}
/* Floral scenery revision: preserve original character cutouts and jumping motion. */
.running-stage:not(.video-stage){background:#cce5be url('./assets/flower-meadow-3d-v1.png') center center / cover no-repeat}
.running-stage:not(.video-stage):after{display:none}
.running-stage:not(.video-stage) .sky-orb{display:none}
/* Friendly welcome plaque, with readable live text at every screen size. */
.running-stage .art-caption.welcome-badge{left:50%;right:auto;bottom:14px;transform:translateX(-50%) rotate(-2deg);display:flex;flex-direction:column;align-items:center;gap:2px;width:max-content;max-width:88%;padding:9px 24px 12px;border:2px solid #fff;border-radius:24px;background:linear-gradient(155deg,#fffdf7,#ffefd9);box-shadow:0 5px 0 #e7c7a2,0 12px 24px #4b443333;color:#514467;text-align:center;font-family:'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;line-height:1.1;white-space:normal}
.welcome-hello{font-size:13px;font-weight:800;letter-spacing:.06em;color:#685784}
.welcome-hello span{color:#b57828;margin:0 4px}
.welcome-names{display:block;font-size:clamp(22px,2.5vw,32px);font-weight:900;letter-spacing:-.035em;text-shadow:0 2px 0 #fff}
.welcome-jasper{color:#416fad}.welcome-and{color:#a46e26;font-size:.8em;padding:0 .12em}.welcome-miso{color:#92609c}
@media(max-width:440px){.running-stage .art-caption.welcome-badge{bottom:12px;padding:6px 17px 8px;border-radius:19px}.welcome-hello{font-size:11px}.welcome-names{font-size:23px}}
/* Local vector play icon stays crisp without external image requests. */
.youtube-button{gap:10px}
.youtube-icon{display:block;width:28px;height:20px;flex:0 0 28px;filter:drop-shadow(0 1px 1px #00000016)}