/* Subtle motion layer. Loaded after the existing design; no geometry or branding changes. */
.js .reveal{transform:translateY(6px);transition:opacity var(--motion-reveal),transform var(--motion-reveal)}
.js .reveal.visible{transform:none}
/* Keep the main heading available on first paint. Supporting text fades without scaling. */
.hero h1,.hero h1 .line>*,.hero .kicker{animation:none}
.hero .lede,.hero .actions,.hero-note,.hero-facts,.hero-path,.steps li{animation:motion-fade var(--motion-reveal) both;animation-delay:0s}
@keyframes motion-fade{from{opacity:0}to{opacity:1}}
.btn{transition:transform var(--motion-press),background-color var(--motion-color),border-color var(--motion-color),color var(--motion-color)!important}
.btn:hover,.btn-ghost:hover,.btn-dark:hover{transform:none}
.btn:active{transform:scale(var(--motion-press-scale))}
.notes-rail button{transition:transform var(--motion-press),box-shadow var(--motion-color)}
.notes-rail button:hover{transform:none}
.notes-rail button:active{transform:scale(.985)}
.ex-ind{transition:transform var(--motion-selection),width var(--motion-selection)}
.ex.from-right,.ex.from-left{animation:motion-fade var(--motion-fade) both}
@supports (interpolate-size:allow-keywords){
  details::details-content{transition:block-size var(--motion-disclosure),content-visibility 350ms allow-discrete}
}
/* Fade only: native dialog preserves focus, Escape and the top layer. */
.viewer[open]{animation:motion-fade var(--motion-fade) both}
.viewer[open]::backdrop{animation:motion-fade var(--motion-fade) both}
@media (hover:hover) and (pointer:fine){
  .notes-rail button:hover{box-shadow:0 0 0 1px var(--mint-300),0 18px 36px -18px rgba(0,0,0,.7)}
}
@media (hover:none),(pointer:coarse){
  .notes-rail button:hover,.course:hover .cover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.btn:active,.notes-rail button,.notes-rail button:hover,.notes-rail button:active{transform:none!important}
  .js .reveal{opacity:1;transform:none;transition-delay:0s!important}
  .ex.from-right,.ex.from-left,.viewer[open],.viewer[open]::backdrop{animation:none!important}
}
/* Existing 320px overflow: let the course title wrap and keep the price on its own row. */
@media (max-width:360px){
  .course{grid-template-columns:60px minmax(0,1fr);grid-template-areas:"cv t" "cv p" "cv b" "cv g"}
  .course>*{min-width:0;overflow-wrap:anywhere}
}