:root{
  
  --e-expo:cubic-bezier(.16,1,.3,1);
  --e-quart:cubic-bezier(.25,1,.5,1);
}


.ln{display:block;overflow:hidden;padding:.12em .06em .14em;margin:-.12em -.06em -.14em}
.ln>i{display:block;font-style:inherit;transform-origin:0 100%}

html.motion .mrv .ln>i{
  transform:translateY(112%) rotate(2.4deg);opacity:0;
  transition:transform 1.15s var(--e-expo),opacity .8s var(--e-expo);
  transition-delay:var(--d,0s);
}
html.motion .mrv.in .ln>i{transform:none;opacity:1}

html.motion .mrv{opacity:1;transform:none;transition:none}


html.motion [data-mask]{transform:scale(.955);opacity:0;
  transition:transform 1.25s var(--e-expo),opacity .85s var(--e-expo);transition-delay:var(--d,0s)}
html.motion [data-mask].in{transform:none;opacity:1}
html.motion [data-mask] img{transform:scale(1.14);transition:transform 1.5s var(--e-expo)}
html.motion [data-mask].in img{transform:none}


[data-speed]{will-change:auto}


.hero{--gy:0px;--go:1;--glow-y:0px;--glow-s:1}


html.motion .hero::before{transform:translate3d(0,var(--gy),0);opacity:calc(0.7*var(--go))}
html.motion .hero::after{
  transform:translate(-50%,-50%) translateY(var(--glow-y)) scale(var(--glow-s));
  
  animation:none;
}


.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-ink),var(--accent));opacity:0;transition:opacity .4s;pointer-events:none}
html.motion nav.scrolled .prog{opacity:1}


.mag{will-change:transform}


@media(min-width:901px){
  .split.pinned{align-items:start}
  .split.pinned .pin-l{position:sticky;top:clamp(104px,17vh,152px)}
  
  .split.pinned .features{display:flex;flex-direction:column;gap:20px;background:none;border:0;border-radius:0;overflow:visible}
  .split.pinned .feat{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:30px 28px;
    transition:border-color .3s,box-shadow .3s,background .3s}
  .split.pinned .feat.act{border-color:var(--accent-line);box-shadow:var(--shadow);background:var(--bg)}

  
  .split.pinned.mirror{grid-template-columns:minmax(0,7fr) minmax(0,4.4fr)}
  .split.pinned.mirror .pin-l{order:2}
  .split.pinned.mirror .features{order:1}
}

.pin-prog{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--dim);
  margin-top:30px;align-items:center;gap:12px}
@media(min-width:901px){html.motion .pin-prog{display:flex}}
.pin-prog b{color:var(--accent-ink);font-weight:600}
.pin-prog .bar{flex:1;max-width:120px;height:1px;background:var(--line);position:relative;overflow:hidden}
.pin-prog .bar i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);
  transition:transform .5s var(--e-quart)}


.wipe{position:fixed;inset:0;z-index:300;background:var(--ink);pointer-events:none;
  transform:translateY(101%);will-change:transform}
.wipe.go{transform:translateY(0);transition:transform .42s var(--e-expo)}


@media(prefers-reduced-motion:reduce){
  .ln>i{transform:none!important;opacity:1!important}
  html.motion [data-mask]{transform:none!important;opacity:1!important}
  html.motion [data-mask] img{transform:none!important}
  html.motion .hero::before,html.motion .hero::after{transform:none;filter:none}
  html.motion .hero::after{transform:translate(-50%,-50%)}
  .prog,.wipe{display:none!important}
}