/* motion.css · site-wide polish: staggered reveals, hover response, press give. Loaded last on every page. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  body{animation:pageIn .7s ease both}
  @keyframes pageIn{from{opacity:0}to{opacity:1}}

  /* items inside a section rise in one after another once the section is in view */
  .m-item{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
  .m-in .m-item{opacity:1;transform:none}

  /* buttons and links answer the hand */
  .btn{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .btn:active{transform:translateY(0) scale(.98);box-shadow:none;transition-duration:.1s}
  .ulink{position:relative;border-bottom-color:transparent}
  .ulink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .ulink:hover::after{transform:scaleX(0);transform-origin:right}
  .nav a{position:relative}
  .nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

  /* film posters breathe on hover, the play button answers */
  .film{overflow:hidden}
  .film>img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .6s ease}
  .film:hover>img{transform:scale(1.035)}
  .film__play{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
  .film:hover .film__play{transform:translate(-50%,-50%) scale(1.08)}
  .film__play:active{transform:translate(-50%,-50%) scale(.96)}

  /* cards and quotes lift a touch */
  .card,.col-card,.quote,.lp-col,.lp-quote{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .card:hover,.col-card:hover,.quote:hover,.lp-quote:hover{transform:translateY(-4px)}

  /* images settle into focus as they arrive */
  .m-in img.m-img{animation:imgIn 1.2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes imgIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
}