/* Motion layer. Everything here is decoration: the site works and reads the same with it off. */
@keyframes rise{to{transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes flick{0%,100%{opacity:1}46%{opacity:.92}48%{opacity:.5}50%{opacity:1}78%{opacity:.85}}
@keyframes wave{to{background-position-x:80px}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--amber) 60%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.94)}}
@keyframes bub{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-92px);opacity:0}}
@keyframes drip{0%{stroke-dashoffset:1}60%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

/* page-to-page crossfade (Chrome/Safari; ignored elsewhere) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.22s ease both fade-out}
::view-transition-new(root){animation:.32s var(--ease) both fade-in}
@keyframes fade-out{to{opacity:0}}@keyframes fade-in{from{opacity:0}}

/* scroll progress */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;background:var(--amber);transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none}

/* reveal system (hidden only while JS runs and the observer hasn't seen it) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js [data-split] .w>span{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease);transition-delay:calc(var(--i,0)*40ms + var(--d,0s))}
.js [data-split].in .w>span{transform:none}
.js .wipe img{clip-path:inset(0 0 100% 0);transform:scale(1.18);transition:clip-path 1.1s var(--ease),transform 1.6s var(--ease);transition-delay:var(--d,0s)}
.js .wipe.in img{clip-path:inset(0 0 0 0);transform:scale(1)}
.js .wipe.hz img{clip-path:inset(0 100% 0 0)}
.js .wipe.hz.in img{clip-path:inset(0)}
/* the wipe sits on the image, not the box: an observer treats a fully clipped element as invisible */
/* line-art icons draw themselves */
.ic *{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.js .ic *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.js .in .ic *,.js .ic.in *{stroke-dashoffset:0}
.ic .fillme{fill:currentColor;stroke:none;opacity:0;transition:opacity .6s .9s}
.js .in .ic .fillme{opacity:.9}
.no-js .ic .fillme,html:not(.js) .ic .fillme{opacity:.9}

/* liquid glass */
.glass .liq{transform:translateY(var(--liq-from,64px));transition:transform 2.6s var(--ease)}
.glass.in .liq{transform:translateY(var(--liq-to,0px))}
.glass .bb{fill:currentColor;opacity:0;animation:bub 3.2s ease-in infinite;animation-delay:var(--bd,0s);animation-play-state:paused}
.glass.in .bb{animation-play-state:running}
.pour .stream{stroke-dasharray:1;stroke-dashoffset:1}
.pour.in .stream{animation:drip 2.4s var(--ease) forwards}
.pour .liq{transform:translateY(40px);transition:transform 3s .6s var(--ease)}
.pour.in .liq{transform:translateY(0)}
.pour .bb{fill:var(--amber);opacity:0;animation:bub 3s ease-in infinite;animation-delay:var(--bd,0s);animation-play-state:paused}
.pour.in .bb{animation-play-state:running}

/* parallax + pointer tilt (driven by motion.js through custom properties) */
[data-par]{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.mosaic figure{transition:transform .8s var(--ease)}
.btn[data-mag]{transition:transform .25s var(--ease),color .3s,border-color .3s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js [data-split] .w>span,.js .wipe img,.js .ic *,.glass .liq,.pour .liq{opacity:1!important;transform:none!important;clip-path:none!important;stroke-dashoffset:0!important}
  .hero .h1 .ln>span{transform:none}
  .hero .h1 .wave path{stroke-dashoffset:0}
  .ic .fillme{opacity:.9}
  .bokeh,.progress{display:none}
  .vtrack__row,.strip__row{animation:none;flex-wrap:wrap;width:auto}
}
.no-rv .rv,.no-rv [data-split] .w>span,.no-rv .wipe img{opacity:1!important;transform:none!important;clip-path:none!important}
.no-rv .ic *{stroke-dashoffset:0!important}

/* cursor glow: a soft amber light that trails the pointer (desktop only; main.js drives --mx / --my) */
.glow{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;z-index:1;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--amber) 17%,transparent),transparent 62%);transform:translate3d(var(--mx,50vw),var(--my,30vh),0);opacity:0;transition:opacity .6s}
.glow.on{opacity:1}
@media(hover:none),(prefers-reduced-motion:reduce){.glow{display:none}}

/* label-pill cursor */
html.has-cur,html.has-cur *{cursor:none!important}
html.has-cur input,html.has-cur textarea,html.has-cur select,html.has-cur [contenteditable]{cursor:text!important}
.cpill{position:fixed;left:0;top:0;z-index:99999;pointer-events:none;height:14px;min-width:14px;margin:-7px 0 0 -7px;border-radius:99px;background:var(--amber);color:#0C0A08;font:600 .72rem/14px var(--font-body);letter-spacing:.08em;text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden;opacity:0;will-change:transform;
  transition:opacity .15s,height .16s var(--ease),min-width .16s var(--ease),margin .16s var(--ease),padding .16s,line-height .16s,background .16s}
.cpill.vis{opacity:1}
.cpill.on{height:46px;min-width:46px;margin:-23px 0 0 -23px;background:color-mix(in srgb,var(--amber) 22%,transparent);box-shadow:0 0 0 2px var(--amber) inset;color:transparent}
.cpill.on.lbl{height:34px;min-width:34px;margin:-17px 0 0 -30px;padding:0 16px;line-height:34px;background:var(--amber);color:#0C0A08;box-shadow:none}
.cpill.press{filter:brightness(.9)}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.cpill{display:none}}