/* Motion system. One vocabulary across the site:
   - lines: headings rise line by line out of a mask
   - fade: copy, controls and cards rise and fade in, staggered among siblings
   - media: images and films open from a clipped frame while settling from a slight zoom
   Everything runs once, on entry, with transform/opacity/clip-path only.
   Reduced motion: nothing is hidden or moved (motion.js never adds .motion). */
:root{
  --m-ease:cubic-bezier(.22,1,.36,1);
  --m-ease-in-out:cubic-bezier(.65,0,.35,1);
  /* A soft spring for hover and magnetic return. */
  --m-spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.09 23.7%,1.093 26.1%,1.08 29%,1.018 37.6%,.996 43.5%,.993 47.9%,1.001 61.5%,1);
}

/* lines */
.motion [data-reveal="lines"] .mw{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.motion [data-reveal="lines"] .mw>span{display:inline-block;translate:0 105%;transition:translate 1.05s var(--m-ease) calc(var(--d,0s) + var(--line,0)*90ms)}
.motion [data-reveal="lines"].is-in .mw>span{translate:0 0}

/* fade */
.motion [data-reveal="fade"]{opacity:0;translate:0 26px;transition:opacity .9s var(--m-ease) var(--d,0s),translate 1.1s var(--m-ease) var(--d,0s)}
.motion [data-reveal="fade"].is-in{opacity:1;translate:0 0}

/* media: the frame opens; the picture inside settles from a slight zoom */
.motion [data-reveal="media"]{clip-path:inset(18% 0 0 0);transition:clip-path 1.25s var(--m-ease) var(--d,0s)}
.motion [data-reveal="media"] :is(img,video){scale:1.14;transition:scale 1.7s var(--m-ease) var(--d,0s)}
.motion [data-reveal="media"].is-in{clip-path:inset(0 0 0 0)}
/* Once open, the frame stops clipping so shadows and overlaps show. */
.motion [data-reveal="media"].is-settled{clip-path:none}
.motion [data-reveal="media"].is-in :is(img,video){scale:1}

/* Hover: pictures in cards lean in; the spring brings them back. */
@media (hover:hover) and (pointer:fine){
  .motion :is(.work-card .work-image,.footer-card,.service-catalog-image) img{transition:scale 1.1s var(--m-ease)}
  .motion :is(.work-card:hover .work-image,.footer-card:hover,.service-catalog-image:hover) img{scale:1.05}
  .motion :is(.world-card,.studio-card,.experiments-card) img{transition:scale 1.1s var(--m-ease)}
  .motion :is(.world-card,.studio-card,.experiments-card):hover img{scale:1.17}
  .motion .split-cta{transition:translate .9s var(--m-spring)}
  .motion .split-cta i{transition:translate .9s var(--m-spring),background .3s,color .3s}
}

/* Scroll-linked depth, on the compositor where supported (CSS scroll-driven animations). */
@supports (animation-timeline:view()){
  /* Drift cards carry a little extra picture so the movement never shows an edge. */
  .motion :is(.world-card,.studio-card,.experiments-card) img{
    scale:1.12;animation:m-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%;
  }
  .motion .film-player video{animation:m-film linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes m-drift{from{translate:0 -5%}to{translate:0 5%}}
  @keyframes m-film{from{scale:.92;border-radius:28px}to{scale:1;border-radius:12px}}
}

/* Smooth scroll hint for the sticky stages: Lenis owns the wheel, CSS should not double-smooth. */
html.lenis{scroll-behavior:auto}

/* Page-to-page: the old page lifts away, the new one rises in; the header stays put and
   a project image morphs into its case cover (motion.js names it on click). */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:m-page-out .42s var(--m-ease-in-out) both}
::view-transition-new(root){animation:m-page-in .8s var(--m-ease) both}
::view-transition-group(case-media){animation-duration:.9s;animation-timing-function:var(--m-ease)}
::view-transition-old(case-media),::view-transition-new(case-media){height:100%;width:100%;object-fit:cover;animation-duration:.5s}
@keyframes m-page-out{to{opacity:0;translate:0 -28px}}
@keyframes m-page-in{from{opacity:0;translate:0 36px}}
.case-cover{view-transition-name:case-media}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}