:root{--motion-ease:cubic-bezier(.2,.7,.2,1);--motion-short:180ms;--motion-long:420ms}
.motion-control{font-size:12px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);cursor:pointer}
.primary{position:relative;overflow:hidden;isolation:isolate}
.primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 20%,#ffffff16 50%,transparent 80%);transform:translateX(120%);opacity:0}
/* Motion never hides content or changes its layout. */
button,.primary,.secondary,.year-button,.sample-links a,.review-card,.trophy-card,#navigation a,.paragraph-card{transition:background-color var(--motion-short),border-color var(--motion-short),box-shadow var(--motion-short),transform var(--motion-short) var(--motion-ease)}
@media(hover:hover) and (pointer:fine){
 button:not(:disabled):hover,.primary:hover,.secondary:hover{transform:translateY(-2px)}
 .sample-links a:hover,.review-card:hover,.trophy-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #153b2910;text-decoration:none}
 #navigation a:hover{transform:translateX(-2px)}
 .paragraph-card:hover{border-color:var(--gold)}
 .brand-mark:hover{transform:rotate(8deg)}
 .primary:not(:disabled):hover::after{opacity:1;animation:button-glint 550ms var(--motion-ease)}
}
button:not(:disabled):active,.primary:active,.secondary:active,.year-button:active,.trophy-card:active{transform:translateY(1px)}
.brand-mark{transition:transform 320ms var(--motion-ease)}
.paragraph-card>summary,.detail-group>summary{transition:background-color var(--motion-short),color var(--motion-short)}
.card-symbol{display:inline-block;transition:transform 240ms var(--motion-ease)}
.paragraph-card[open]>summary .card-symbol{transform:rotate(180deg)}
.paragraph-card[open]>.paragraph-body,.references[open]>.reference-text,.detail-group[open]>.detail-body{animation:content-unfold 240ms var(--motion-ease)}
.motion-in{animation:quiet-arrival var(--motion-long) var(--motion-ease) var(--motion-delay,0ms) backwards}
.intro .rule{transform-origin:center;animation:gold-line 650ms var(--motion-ease)}
dialog[open]{animation:dialog-arrival 220ms var(--motion-ease)}
dialog[open]::backdrop{animation:veil-arrival 180ms ease-out}
.year-dialog[open]{animation:drawer-arrival 260ms var(--motion-ease)}
#account-status:not([hidden]),#message.visible{animation:notice-arrival 220ms var(--motion-ease)}
.complete-button.is-complete{animation:saved-arrival 320ms var(--motion-ease)}
.trophy-progress>span{transition:width 350ms var(--motion-ease)}
.chart-block[aria-pressed=true]{box-shadow:0 4px 16px #153b2920}
@media(max-width:650px){#navigation.menu-open{animation:content-unfold 220ms var(--motion-ease)}}
@keyframes quiet-arrival{from{opacity:.65;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes content-unfold{from{opacity:.8;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes dialog-arrival{from{opacity:.75;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes drawer-arrival{from{opacity:.85;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes veil-arrival{from{opacity:.4}to{opacity:1}}
@keyframes gold-line{from{opacity:.6;transform:scaleX(.4)}to{opacity:1;transform:scaleX(1)}}
@keyframes notice-arrival{from{opacity:.8;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes saved-arrival{from{opacity:.65}to{opacity:1}}
@keyframes button-glint{from{transform:translateX(120%)}to{transform:translateX(-120%)}}
html.motion-disabled{scroll-behavior:auto!important}
html.motion-disabled *,html.motion-disabled *::before,html.motion-disabled *::after{animation:none!important;transition:none!important}
html.motion-disabled .primary::after{display:none}
html.motion-disabled :is(button,.primary,.secondary,.sample-links a,.review-card,.trophy-card,#navigation a,.brand-mark,.year-button):is(:hover,:active){transform:none!important}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled){scroll-behavior:auto!important}html:not(.motion-enabled) *,html:not(.motion-enabled) *::before,html:not(.motion-enabled) *::after{animation:none!important;transition:none!important}}