/* experience layer for the example sites */
.curtain{position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);transform:translateY(0);transition:transform 1.1s var(--ease)}
.curtain__word{font-family:var(--font-display);font-weight:var(--display-weight);font-size:3rem;line-height:1;letter-spacing:var(--display-track);opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.curtain.in .curtain__word{opacity:1;transform:none}
.curtain.out{transform:translateY(-101%)}
.curtain.out .curtain__word{opacity:0;transform:translateY(-24px)}
.progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:80;background:var(--accent);transform-origin:left;transform:scaleX(0);pointer-events:none}
.kcursor{position:fixed;left:0;top:0;z-index:390;pointer-events:none;mix-blend-mode:difference}
.kcursor i{position:absolute;left:0;top:0;border-radius:9999px;will-change:transform}
.kcursor__dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff}
.kcursor__ring{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid #fff;display:grid;place-items:center;transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),background-color .3s var(--ease)}
.kcursor.is-hover .kcursor__ring{width:60px;height:60px;margin:-30px 0 0 -30px}
.kcursor.has-label .kcursor__ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:#fff}
.kcursor__label{font:600 .75rem/1rem "Geist",system-ui,sans-serif;color:#000;opacity:0;white-space:nowrap;transition:opacity .3s var(--ease)}
.kcursor.has-label .kcursor__label{opacity:1}
@media (hover:hover) and (pointer:fine){.kcursor-on,.kcursor-on a,.kcursor-on button,.kcursor-on label,.kcursor-on summary{cursor:none}.kcursor-on input,.kcursor-on textarea,.kcursor-on select{cursor:auto}}
.ksplit .kw{display:inline-block;white-space:nowrap}
.ksplit .kc{display:inline-block}
.js .ksplit:not(.kin) .kc{opacity:0;transform:translateY(60%)}
.ksplit.kin .kc{animation:kc 1s var(--ease) both;animation-delay:calc(var(--ci) * 18ms)}
@keyframes kc{0%{opacity:0;transform:translateY(60%) rotate(5deg);filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}}
.kwipe{overflow:hidden}
.js .kwipe>img{clip-path:inset(100% 0 0 0);transform:scale(1.18);transition:clip-path 1.2s var(--ease),transform 1.6s var(--ease)}
.js .kwipe.kin>img{clip-path:inset(0 0 0 0);transform:scale(1)}
.kwipe.kin>img.kpar{transform:translateY(var(--py,0%)) scale(1.12);transition:clip-path 1.2s var(--ease),transform .2s linear}
.js .ktilt.ktilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease);position:relative}
.ktilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 45%);opacity:0;transition:opacity .4s var(--ease);mix-blend-mode:soft-light}
.ktilt:hover::after{opacity:1}
.has-liquid{position:relative}
.kliquid{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s var(--ease);pointer-events:none}
.kliquid.is-on{opacity:1}
.media>.kliquid{z-index:1}
.has-liquid>.caption{z-index:2}
@media (prefers-reduced-motion:reduce){.curtain,.kcursor,.kliquid,.progress{display:none}}