/* Motion layer (GSAP), loaded after site.css.
   Every rule here is switched on by a class that js/motion.js adds,
   so with no script, or with reduce motion on, the page is unchanged. */

/* --- Line reveal: room under each masked line so descenders aren't clipped --- */
.m-line-mask, .m-word-mask { padding-bottom: .14em; margin-bottom: -.14em; }

/* --- Homepage: stacked case-study cards (desktop) --- */
@media (min-width: 881px) and (min-height: 700px) {
  /* section overflow:hidden would stop sticky from working; clip keeps the edge tidy without that */
  #work.m-stack { overflow: clip; }
  #work.m-stack .work-feature {
    position: sticky;
    top: calc(96px + var(--i, 0) * 20px);
    transition: box-shadow .5s var(--ease-out);
    transform-origin: 50% 0;
  }
  #work.m-stack .work-feature:hover { transform: none; }
  #work.m-stack .work-feature::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: #000; opacity: var(--dim, 0);
  }
}

/* --- Homepage: studio break photo, moved by script on every screen size --- */
.parallax-band.m-px { background-image: none !important; overflow: hidden; }
.parallax-band .m-px-inner {
  position: absolute; left: 0; right: 0; top: -20%; height: 140%;
  background-size: cover; background-position: center; will-change: transform;
}

/* --- Case study: the live site scrolling inside a browser window (desktop) --- */
.frame.film.m-browser { position: relative; }
.frame.film.m-browser video { visibility: hidden; }
.m-browser-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* sits exactly over the window drawn in the film poster: 240,72 to 1680,1008 of 1920 x 1080 */
.m-browser-win {
  position: absolute; left: 12.5%; top: 6.667%; width: 75%; height: calc(86.667% + 3px);
  display: flex; flex-direction: column; background: #203A49;
}
.m-browser-bar {
  flex: 0 0 3.846%; background: #E9EAEE;
  display: flex; align-items: center; gap: .55%; padding-left: 1.2%;
}
.m-browser-bar i { width: .7%; aspect-ratio: 1; border-radius: 50%; background: #B9BBC1; }
.m-browser-view { position: relative; flex: 1; overflow: hidden; }
.frame .m-browser-view img {
  /* beats the page's own .store .frame img rule (height 100%, contain) */
  position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: initial; will-change: transform;
}
.frame .m-browser-view img.m-browser-sticky { z-index: 1; will-change: auto; }