/* FRANSFOILS mockups · motion.css · the states motion.js moves between.
   Only applies when <html class="motion"> (set by the inline head script). */
:root{--ease:cubic-bezier(.16,1,.3,1);--t-micro:200ms;--t-el:600ms;--t-rev:1000ms;--t-orch:1400ms}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

.motion [data-rv="fade"]{opacity:0;transition:opacity var(--t-rev) var(--ease)}
.motion [data-rv="rise"]{opacity:0;transform:translateY(24px);transition:opacity var(--t-rev) var(--ease),transform var(--t-rev) var(--ease)}
.motion [data-rv="group"]>*{opacity:0;transform:translateY(22px);transition:opacity var(--t-rev) var(--ease),transform var(--t-rev) var(--ease)}
.motion [data-rv="line"]{transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-orch) var(--ease)}
.motion [data-rv="frame"]{overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path var(--t-orch) var(--ease)}
.motion [data-rv="frame"] img{transform:scale(1.14);transition:transform 1800ms var(--ease)}
.motion [data-rv="mask"]{clip-path:inset(0 0 100% 0);transition:clip-path var(--t-orch) var(--ease)}
.motion [data-rv="head"]{visibility:hidden}

.motion [data-rv].in{opacity:1;transform:none}
.motion [data-rv="group"].in>*{opacity:1;transform:none}
.motion [data-rv="frame"].in{clip-path:inset(0 0 0 0)}
.motion [data-rv="frame"].in img{transform:scale(1)}
.motion [data-rv="mask"].in{clip-path:inset(0 0 0 0)}
.motion [data-rv="head"].in{visibility:visible}

[data-rv="head"] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
[data-rv="head"] .wi{display:inline-block;transform:translateY(112%);transition:transform 1100ms var(--ease)}
[data-rv="head"].in .wi{transform:none}

[data-nav]{transition:transform var(--t-el) var(--ease),background-color var(--t-el) var(--ease),box-shadow var(--t-el) var(--ease),border-color var(--t-el) var(--ease)}
[data-nav].nav-hide{transform:translateY(-110%)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}