/* Small, tactile movements for the classic desktop interface. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .studio-cta,.work-tab,.film-filters button,.language-switch button,.privacy-action,.ai-work-thumb{transition:transform .22s var(--motion-ease),background-color .22s,color .22s,border-color .22s,box-shadow .22s}
  .studio-cta .cta-label{transition:background .22s,color .22s,border-color .22s,box-shadow .22s}
  .studio-cta:active,.film-filters button:active,.language-switch button:active,.privacy-action:active{transform:translateY(1px)}
  .site,.project-card,.film-card,.ai-card,.package-card{transition:transform .32s var(--motion-ease),border-color .25s,box-shadow .32s var(--motion-ease)}
  .preview img,.project-photo,.film-cover>img,.ai-cover-image{transition:transform .65s var(--motion-ease),filter .45s}
  .about-content{transition:grid-template-rows .48s var(--motion-ease),opacity .3s}
  .about-inner{transition:transform .48s var(--motion-ease)}
  .about-panel,.contacts-row a,footer a{transition:background-color .22s,color .22s,border-color .22s}
  .motion-details{overflow:hidden}
  .motion-details>summary{cursor:pointer}
  dialog[open]{animation:desktop-window-in .26s var(--motion-ease)}
  dialog::backdrop{animation:desktop-backdrop-in .22s ease-out;backdrop-filter:none}
  @keyframes desktop-window-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes desktop-backdrop-in{from{opacity:0}to{opacity:1}}
  @supports(transition-behavior:allow-discrete){
    dialog{opacity:0;transform:translateY(8px) scale(.99);transition:opacity .18s ease,transform .22s var(--motion-ease),display .22s allow-discrete,overlay .22s allow-discrete}
    dialog[open]{animation:none!important;opacity:1;transform:none}
    dialog::backdrop{animation:none!important;background-color:#0000!important;transition:background-color .22s ease,display .22s allow-discrete,overlay .22s allow-discrete}
    dialog[open]::backdrop{background-color:#0007!important}
    @starting-style{dialog[open]{opacity:0;transform:translateY(10px) scale(.985)}dialog[open]::backdrop{background-color:#0000!important}}
  }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .site:hover,.project-card:hover,.film-card:hover,.ai-card:hover,.package-card:hover{transform:translateY(-3px)}
  .project-card:hover,.film-card:hover,.ai-card:hover,.package-card:hover{box-shadow:3px 4px 0 #00000012}
  .site:hover .preview img,.film-cover:hover>img,.ai-cover:hover .ai-cover-image{transform:scale(1.025)}
  .work-tab:hover{box-shadow:inset 3px 0 0 #000080}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}