/* MatchPoint · motion round 2 (12 Nov, Joshua: "more premium"), with motion.js. Quick, physical, and only where something happened. */

/* stars flying into the counter, embers off the streak flame */
.mo-star{position:absolute;z-index:40;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(150,100,0,.35))}
.mo-ember{position:absolute;z-index:40;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FFB020;box-shadow:0 0 6px #FF8A00;pointer-events:none;
  animation:mo-ember .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes mo-ember{0%{transform:none;opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}}
.mo-lit img{animation:mo-lit 1.3s cubic-bezier(.3,1.4,.5,1) both}
@keyframes mo-lit{0%{scale:.6;filter:grayscale(1);opacity:.5}30%{scale:1.45;filter:none;opacity:1}45%{rotate:-8deg}60%{scale:1.05;rotate:6deg}75%{rotate:-3deg}100%{scale:1;rotate:0deg}}
.mo-lit{animation:mo-glow 1.3s ease-out}
@keyframes mo-glow{30%{box-shadow:0 0 0 6px rgba(255,140,0,.18),0 0 18px rgba(255,140,0,.45)}100%{box-shadow:none}}

/* the Journey's dots filling in to the next stop */
.mo-jd{position:absolute;left:0;top:0;width:100%;height:0;z-index:3;pointer-events:none;transition:opacity .6s}
.mo-jd.out{opacity:0}
.mo-jd i{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;box-shadow:0 2px 0 rgba(0,0,0,.12);animation:mo-dot .38s cubic-bezier(.3,1.7,.5,1) both}
@keyframes mo-dot{from{scale:0}to{scale:1}}
.mo-arrive .js-c,.mo-arrive.slam3d{animation:mo-ring 1.2s ease-out 2}
@keyframes mo-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9),0 0 0 0 rgba(88,204,2,.45)}100%{box-shadow:0 0 0 4px rgba(255,255,255,0),0 0 0 22px rgba(88,204,2,0)}}

/* press feel: solid buttons sink, cards give a little */
:is(.b3,.su-go,.va-cta,.hf-btn,.fd-cta,.pw-go).pressing{translate:0 3px;scale:1!important;transition:translate .06s ease-out!important}
:is(.hf-card,.fd-p,.su-o,.prf-card,.jn-fc,.hf-chip,.hf-bell,.su-g button,.su-av button,.who-l button,.who-add,.bl-i).pressing{scale:.975!important;transition:scale .08s ease-out!important}

/* sheets: a little spring on the way up, follow your finger when dragged, and the screen behind steps back */
.sheet{transition:transform .5s cubic-bezier(.2,1.18,.35,1)!important}
.sheet:not(.on){transition:transform .32s cubic-bezier(.4,0,.8,.4)!important}
.sheet.mo-drag{transition:none!important}
#app .scroll{transition:scale .45s cubic-bezier(.2,.9,.3,1),border-radius .45s;transform-origin:50% 0}
#app:has(#veil.on) .scroll{scale:.955;border-radius:22px;overflow:hidden}
@media (prefers-reduced-motion:reduce){#app:has(#veil.on) .scroll{scale:1;border-radius:0}}

/* lesson answers: the right one fills green from the left, the result panel springs up */
.mo-sweep{position:relative;overflow:hidden;isolation:isolate}
.mo-sweep::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(88,204,2,.28),rgba(88,204,2,.12));transform-origin:0 50%;animation:mo-sweep .5s cubic-bezier(.3,.8,.3,1) both}
@keyframes mo-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.flow .fban{animation:mo-ban .55s cubic-bezier(.2,1.25,.35,1) both!important}
@keyframes mo-ban{from{transform:translateY(100%)}to{transform:none}}

/* characters breathe, and now and then tilt their head */
.su-host img,.qh-pic,.fb-car,.sh-h .shc img,.pw-c,.hf-ocp{transform-origin:50% 100%;animation:mo-breathe 3.8s ease-in-out infinite,mo-tilt 9s ease-in-out infinite}
@keyframes mo-breathe{0%,100%{scale:1 1}50%{scale:1.012 1.03}}
@keyframes mo-tilt{0%,84%,100%{rotate:0deg}88%{rotate:-3deg}93%{rotate:2deg}97%{rotate:-.5deg}}
.su-host img.cheer{animation:mo-cheer .5s cubic-bezier(.3,1.6,.5,1),mo-breathe 3.8s ease-in-out .5s infinite}
@keyframes mo-cheer{0%{scale:.85;translate:0 6px}60%{scale:1.08 .96;translate:0 -6px}100%{scale:1;translate:0}}

/* On Court: shutter flash, then the frame strip slides up */
.mo-shut{position:absolute;inset:0;z-index:95;background:#fff;pointer-events:none;animation:mo-shut .6s ease-out both}
@keyframes mo-shut{0%{opacity:0}12%{opacity:.85}100%{opacity:0}}
.ocf-new .ocf-strip{animation:mo-up .55s cubic-bezier(.2,1.2,.35,1) .25s both}
.ocf-new .ocf-foot{animation:mo-up .55s cubic-bezier(.2,1.2,.35,1) .35s both}
@keyframes mo-up{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}

/* Weekly Focus: the "Done ✓" stamp */
.hf-oc{position:relative}
.mo-done{position:absolute;bottom:22px;left:132px;z-index:2;padding:5px 11px;border:2.5px solid #58A700;border-radius:10px;background:rgba(255,255,255,.92);color:#58A700;
  font:900 14px/1 Nunito,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;rotate:-8deg;pointer-events:none}
.mo-done.mo-land{animation:mo-stamp .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes mo-stamp{0%{scale:2.6;opacity:0;rotate:-22deg}55%{scale:.92;opacity:1;rotate:-6deg}100%{scale:1;rotate:-8deg}}
/* Weekly Focus buttons sit above Bruno so a tap never lands on the picture; "Change" moved up beside the label */
.hf-oc .hf-ocp{pointer-events:none}
.hf-ocb{position:relative;z-index:1;gap:8px}
.hf-oc .hf-lab{display:flex;align-items:baseline;gap:8px}
.hf-occ2{font-size:12.5px;letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:2px;opacity:.85}
.hf-ocdid{display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 12px;border:2px solid #9ED77A;border-radius:12px;background:#fff;box-shadow:0 3px 0 #9ED77A;
  font:800 14.5px Nunito,system-ui,sans-serif;color:#3D9A12;cursor:pointer;white-space:nowrap}
.hf-ocdid svg{width:16px;height:16px}
.hf-ocdid:active{transform:translateY(3px);box-shadow:none}
.hf-ocb .hf-ocgo{padding:0 14px;white-space:nowrap}

@media (prefers-reduced-motion:reduce){.mo-jd i,.mo-done.mo-land,.mo-lit img,.mo-sweep::after,.su-host img,.qh-pic,.fb-car,.sh-h .shc img,.pw-c,.hf-ocp{animation:none!important}}