/* Base styles for the real estate motion kit (re-fx.js). Each sample colours and shapes these in its own <style>. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:rx-vt-out .45s cubic-bezier(.7,0,.2,1) both}
::view-transition-new(root){animation:rx-vt-in .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rx-vt-out{to{opacity:0;scale:.97}}
@keyframes rx-vt-in{from{opacity:0;clip-path:inset(100% 0 0 0)}to{opacity:1;clip-path:inset(0)}}

/* preloader: hidden unless the head script asked for it */
.rx-load{display:none}
html.rx-pre .rx-load,.rx-load.out{display:grid;position:fixed;inset:0;z-index:200;place-items:center;align-content:center;gap:10px;text-align:center}
.rx-load.out{pointer-events:none}
html.rx-pre body{overflow:hidden}
.rx-n{font-variant-numeric:tabular-nums}

/* line mask reveal */
.lm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.lm > span{display:inline-block;translate:0 105%;transition:translate 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 45ms)}
.lm-in .lm > span{translate:0 0}

/* scroll-highlighted paragraph */
.hw{opacity:.18;transition:opacity .35s}
.hw.on{opacity:1}

/* clip-path image reveal */
.clip-on{clip-path:inset(50% 0 50% 0);transition:clip-path 1.3s cubic-bezier(.87,0,.13,1)}
.clip-in{clip-path:inset(0 0 0 0)}

/* parallax: the image is a little taller than its frame so it can drift */
.par-on{scale:1.18;will-change:translate}

/* marquee */
[data-mq]{overflow:hidden;white-space:nowrap}
.mq-t{display:inline-flex;will-change:translate}

/* pinned horizontal scroll */
[data-hs].hs-on{position:relative}
.hs-stick{overflow:hidden}
.hs-on .hs-stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
.hs-row{display:flex;width:max-content;will-change:translate}
[data-hs]:not(.hs-on) .hs-stick{overflow-x:auto}

/* hover image preview */
.rx-hp{position:fixed;left:0;top:0;z-index:80;width:240px;aspect-ratio:4/3;margin:-90px 0 0 26px;pointer-events:none;opacity:0;scale:.6;transition:opacity .3s,scale .4s cubic-bezier(.3,1.4,.5,1);overflow:hidden;border-radius:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.rx-hp.on{opacity:1;scale:1}
.rx-hp img{width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}