/* Motion layer for the interior-studio template.
   Everything here is inert until assets/motion.js runs: entrance "from" states live in
   site.css under `.js`, which motion.js adds. Without JS (or with reduced motion) the
   page stays static and fully visible. */

/* Lenis 1.1.13 */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Preloader: only shown when the head snippet set `.pl` (JS on, motion allowed).
   CSS failsafe lifts it after 4.5s even if the motion script never arrives. */
.preloader { display: none; }
.pl .preloader { display: grid; animation: pl-failsafe .01s linear 4.5s forwards; }
@keyframes pl-failsafe { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.preloader__logo.wordmark { display: block; width: auto; font-size: clamp(2rem, 4vw, 2.6rem); }

/* Hero "film": scroll-scrubbed sequence of the template's own photos. */
.hx__film { display: none; }
.hx--live .hx__film { display: block; position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; will-change: transform; }
.hx__film img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; visibility: hidden; will-change: transform, opacity; transform: scale(1.14);
}
.hx__film img:first-child { opacity: 1; visibility: visible; }

/* Header goes light while it sits over the dark film. */
.site-header.is-dark:not(.is-scrolled) .wordmark { color: #fff; }
.site-header.is-dark:not(.is-scrolled) .wordmark em { color: var(--gold-soft); }

/* Horizontal services: pinned track (desktop, motion only). */
.hs.is-pinned .hs__track { overflow: visible; }

/* Static page (no JS / reduced motion): the process line shows in full. */
html:not(.js) .proc__line span { transform: scaleY(1); }

/* The outro card only exists inside the live film. */
.hx:not(.hx--live) .hx__outro { display: none; }

/* Live hero fits the viewport under the preview bar. */
.hx--live .hx__pin { height: calc(100vh - var(--pv, 0px)); height: calc(100svh - var(--pv, 0px)); }
.hs.is-pinned .hs__pin { min-height: calc(100vh - var(--pv, 0px)); }