/* Motion enhances visible content. Nothing depends on animation to become readable. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-quick:220ms}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform var(--motion-quick) var(--motion-ease),box-shadow var(--motion-quick),background-color var(--motion-quick);position:relative}
  .btn>span:last-child{transition:transform var(--motion-quick) var(--motion-ease)}
  .btn:active{transform:translateY(0) scale(.98)}
  header nav a{position:relative}
  header nav a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--motion-quick) var(--motion-ease)}
  header nav a:hover::after,header nav a:focus-visible::after{transform:scaleX(1)}
  .decision-card,.project-card,a.resource-card{transition:transform 300ms var(--motion-ease),box-shadow 300ms var(--motion-ease),border-color 300ms}
  .mini-report{transition:transform 550ms var(--motion-ease),box-shadow 550ms var(--motion-ease)}
  .studio-tabs button,[data-tab],.side-item{transition:background-color 180ms,color 180ms,box-shadow 180ms}
  .studio-tabs button:active,[data-tab]:active{transform:translateY(1px)}
  details summary::after{transition:transform 240ms var(--motion-ease)}
  .faq details[open] summary::after{transform:rotate(180deg)}
  .hero-visual.motion-intro .winner{position:relative;overflow:hidden}
  .hero-visual.motion-intro .winner>*{position:relative;z-index:1}
  .hero-visual.motion-intro .winner::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#ffffff65 48%,transparent 65%);transform:translateX(110%);animation:report-highlight 1100ms var(--motion-ease) 500ms backwards}
  .research-loading::before{content:'';display:inline-block;vertical-align:middle;width:16px;height:16px;margin-right:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:research-turn 900ms linear infinite}
  dialog[open]{animation:dialog-enter 240ms var(--motion-ease)}
  .mobile-nav[open]>div{animation:dialog-enter 220ms var(--motion-ease);transform-origin:top right}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-3px);box-shadow:0 7px 16px #24382f17;filter:none}
  .btn:hover>span:last-child{transform:translate(3px,-1px)}
  .decision-card:hover,.project-card:hover,a.resource-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px #24382f12;border-color:#9ba991}
  .decision-first:hover{border-color:#698173;box-shadow:0 18px 36px #24382f24}
  .hero-visual:hover .mini-report{transform:rotate(-1deg) translateY(-5px);box-shadow:0 28px 65px #24282024}
}
.project-card:focus-visible,a.resource-card:focus-visible{border-color:#6c8061}
@keyframes report-highlight{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes research-turn{to{transform:rotate(360deg)}}
@keyframes dialog-enter{from{translate:0 9px;scale:.985}to{translate:0 0;scale:1}}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.decision-card:hover,.project-card:hover,a.resource-card:hover,.hero-visual:hover .mini-report{transform:none}
  .hero-visual .mini-report{transform:rotate(-3deg)}
}