/* Shared motion: restrained depth, native document transitions, no click delay. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.2,.65,.3,1)}
html{scroll-behavior:smooth;scroll-padding-top:110px}
@view-transition{navigation:auto}
main{animation:page-arrive .52s var(--ease-out) backwards}
@keyframes page-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
::view-transition-old(root){animation:document-out .22s ease both}
::view-transition-new(root){animation:document-in .42s var(--ease-out) both}
@keyframes document-out{to{opacity:0}}
@keyframes document-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
html:active-view-transition main{animation:none}
body :is(.btn,.button,.header-cta,button,.service-card,.account-card,.clip-card,.hero-option,.executor-choice label,.role-choices label,.sidebar a,nav a,.social-link,.live-launcher,.site-preferences>summary,.compact-select select){transition:border-color .55s var(--ease-soft),box-shadow .55s var(--ease-soft),background-color .4s var(--ease-soft),color .3s ease,filter .4s ease,opacity .3s ease,transform .36s var(--ease-out)}
body :is(input,select,textarea){transition:border-color .45s var(--ease-soft),box-shadow .45s var(--ease-soft),background-color .35s ease}
body .clip-thumb img{transition:transform .7s var(--ease-out)}
@media(hover:hover) and (pointer:fine){
body :is(.btn,.button,.header-cta,button,.live-launcher):not(.social-link):not(.swatch):not(.preference-swatch):not(:disabled):not([aria-disabled=true]):hover{border-color:rgba(var(--accent-rgb),.5);box-shadow:0 3px 16px rgba(var(--accent-rgb),.085);transform:none;filter:none}
body :is(.service-card,.clip-card):hover{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 10px 30px #0003,0 0 20px rgba(var(--accent-rgb),.045);transform:translateY(-2px)}
body :is(.hero-option,.executor-choice label,.role-choices label):hover{border-color:rgba(var(--accent-rgb),.45)}
body :is(nav a,.sidebar a,.social-link):hover{box-shadow:none!important;transform:none;filter:none;color:var(--accent)}
body .social-links .social-link:hover{border-color:var(--line)}
}
body :is(.btn,.button,.header-cta,button):not(:disabled):active{transform:translateY(0);transition-duration:.14s}
:is(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
@view-transition{navigation:none}
html{scroll-behavior:auto}main{animation:none;transition:none}
::view-transition-old(root),::view-transition-new(root){animation:none}
body :is(.btn,.button,.header-cta,button,.service-card,.account-card,.clip-card,.clip-thumb img,.hero-option,.executor-choice label,.role-choices label,.sidebar a,nav a,.social-link,.live-launcher,.site-preferences>summary,input,select,textarea){transition:none;transform:none}
}
/* Gentle colour fades are kept even when spatial motion is reduced. */
body :is(.btn,.button,.header-cta,button,.service-card,.clip-card,.hero-option,.social-link,.sidebar a,nav a,.executor-choice label,.role-choices label){transition-property:border-color,box-shadow,background-color,color,filter,opacity,transform!important;transition-duration:.6s,.6s,.6s,.4s,.4s,.4s,.36s!important;transition-timing-function:ease,ease,ease,ease,ease,ease,var(--ease-out)!important}
@media(prefers-reduced-motion:reduce){body :is(.btn,.button,.header-cta,button,.service-card,.clip-card,.hero-option,.social-link,.sidebar a,nav a,.executor-choice label,.role-choices label){transition-property:border-color,box-shadow,background-color,color,opacity!important;transform:none!important}}

/* Calculator motion follows the supplied reference without delaying form values. */
#total{position:relative;font-variant-numeric:tabular-nums}
#total.price-counting{color:transparent!important}
#total.price-counting::after{content:attr(data-display-amount) / "";position:absolute;inset:0;color:var(--text);pointer-events:none;font:inherit;letter-spacing:inherit;line-height:inherit;white-space:nowrap}
.rank-medal{position:relative}.rank-spark{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:var(--medal,var(--accent));box-shadow:0 0 5px var(--medal,var(--accent));pointer-events:none}
.dual-range{transition:filter .25s ease}.dual-range.dragging{filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.3))}
@media(prefers-reduced-motion:reduce){.dual-range{transition:none}.dual-range.dragging{filter:none}.rank-spark{display:none}}

/* Keep the gift meter visibly fluid while dragging, rather than jumping per input. */
.calculator-gift .gift-track .gift-paid{transition:flex-basis .7s cubic-bezier(.22,1,.36,1),background-color .5s ease}
.calculator-gift .gift-free{transition:opacity .55s ease,background .55s ease,box-shadow .55s ease}
@media(prefers-reduced-motion:reduce){.calculator-gift .gift-track .gift-paid{transition:none}}