/* Shared pieces for the three home versions (motion.js effects). Reduced motion: the kit turns all animation off. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ver main{overflow-x:clip}
.ver-small{margin:14px 0 0;font-size:.85rem;color:inherit}

/* headline words rise in with a blur */
.m-on [data-words] .w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.4em);transition:opacity .8s ease,filter .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 75ms + 200ms)}
.m-on [data-words].in .w{opacity:1;filter:none;transform:none}
.m-still [data-words] .w{opacity:1;filter:none;transform:none}

/* words light up while scrolling */
[data-light] .w{opacity:.16;transition:opacity .4s ease}
[data-light] .w.lit{opacity:1}

/* a picture follows the cursor over list rows */
.m-reveal-list{position:relative}
.m-float{position:absolute;left:0;top:0;width:300px;aspect-ratio:4/3;border-radius:16px;background:center/cover no-repeat;pointer-events:none;opacity:0;scale:.5;rotate:-4deg;transition:opacity .25s ease,scale .45s cubic-bezier(.2,.7,.2,1),rotate .45s ease;z-index:5;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.m-float.on{opacity:1;scale:1;rotate:0deg}
.m-magnet{transition:transform .3s cubic-bezier(.2,.7,.2,1),background .2s,box-shadow .2s}
.m-tilt{transition:transform .35s ease;will-change:transform}
.btn-ink{background:#000;color:#fff;border-color:#000}
.btn-ink:hover{background:#1a1a1a;transform:translateY(-2px)}

/* zoom gallery: the middle picture grows to fill the screen */
.v2-zoom{position:relative;height:300svh;background:#000;padding:0}
.v2-zoom-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.v2-z{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:scale(calc(1 + var(--p,0) * var(--k)));will-change:transform}
.v2-z div{position:relative;width:25vw;height:25svh;border-radius:8px;background:center/cover}
.v2-z:nth-child(1){--k:3}
.v2-z:nth-child(2){--k:4}.v2-z:nth-child(2) div{top:-30svh;left:5vw;width:35vw;height:30svh}
.v2-z:nth-child(3){--k:5}.v2-z:nth-child(3) div{top:-10svh;left:-25vw;width:20vw;height:45svh}
.v2-z:nth-child(4){--k:4}.v2-z:nth-child(4) div{left:27.5vw;width:25vw;height:25svh}
.v2-z:nth-child(5){--k:5}.v2-z:nth-child(5) div{top:27.5svh;left:5vw;width:20vw;height:25svh}
.v2-z:nth-child(6){--k:6}.v2-z:nth-child(6) div{top:27.5svh;left:-22.5vw;width:30vw;height:25svh}
.v2-z:nth-child(7){--k:7}.v2-z:nth-child(7) div{top:22.5svh;left:25vw;width:15vw;height:15svh}
.v2-zoom-copy{position:absolute;left:0;right:0;bottom:0;padding:120px 0 clamp(40px,6vw,72px);background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);opacity:clamp(0,calc((var(--p,0) - .62) * 4),1);color:#fff}
.v2-zoom-copy h2{color:#fff;font-size:clamp(2.6rem,6vw,5.4rem);margin:0 0 12px;max-width:900px}
.v2-zoom-copy p{color:#fff;max-width:560px;margin:0 0 20px}
:root:not(.m-on) .v2-zoom,.m-still .v2-zoom{height:100svh}
:root:not(.m-on) .v2-z:not(:first-child),.m-still .v2-z:not(:first-child){display:none}
:root:not(.m-on) .v2-z:first-child,.m-still .v2-z:first-child{transform:scale(4)}
:root:not(.m-on) .v2-zoom-copy,.m-still .v2-zoom-copy{opacity:1}