/* v94 / ZENITH — the descent layer. Additive: remove the two links to revert. */
:root{--sv:0;--vel:0}
.z-aura,.z-streak,.z-cursor,.z-hud,.z-grain{position:fixed;pointer-events:none}
.z-aura{left:0;top:0;width:1040px;height:1040px;z-index:30;mix-blend-mode:soft-light;opacity:.9;
  background:radial-gradient(520px circle at 50% 50%,rgba(216,255,10,.34),rgba(216,255,10,.08) 45%,transparent 70%);transition:opacity .6s;will-change:transform;contain:paint;transform:translate3d(-520px,-520px,0)}
.z-grain{inset:-50%;z-index:31;opacity:.055;mix-blend-mode:overlay;animation:zgrain 1s steps(6) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes zgrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* velocity streaks: the faster you scroll, the more the world tears */
.z-streak{inset:0;z-index:32;opacity:calc(var(--vel)*.55);mix-blend-mode:screen;
  background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(216,255,10,.16) 46px 47px,transparent 47px 130px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 18%,transparent 82%,#000);mask-image:linear-gradient(90deg,#000,transparent 18%,transparent 82%,#000);
  transform:scaleY(calc(1 + var(--vel)*.6))}
/* cursor */
.z-cursor{left:0;top:0;z-index:6000;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(216,255,10,.85);border-radius:50%;
  mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,border-color .3s,opacity .3s;opacity:0;
  display:grid;place-items:center;font:600 9px/1 var(--mono);letter-spacing:.14em;color:#000;text-transform:uppercase}
.z-cursor.on{opacity:1}
.z-cursor.hot{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--lime);border-color:var(--lime)}
.z-cursor.down{width:26px;height:26px;margin:-13px 0 0 -13px}
.z-ripple{position:fixed;z-index:5999;width:10px;height:10px;margin:-5px 0 0 -5px;border:1px solid var(--lime);border-radius:50%;pointer-events:none;animation:zrip .9s var(--ease) forwards}
@keyframes zrip{to{transform:scale(22);opacity:0}}
/* kinetic headings */
html.z-on .zw{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .03em .1em;margin:-.06em -.03em -.1em;transform:skewY(calc(var(--sv)*1deg));transform-origin:0 100%}
html.z-on .zw>i{display:inline-block;font-style:normal;transform:translateY(112%) rotate(7deg);transform-origin:0 100%;opacity:0;
  transition:transform 1s var(--ease),opacity .5s;transition-delay:calc(var(--i)*55ms)}
html.z-on .zh.in .zw>i{transform:none;opacity:1}
/* HUD — full-height scroll depth rail. Flush to the viewport edge so it never covers copy. */
.z-hud{left:0;top:0;transform:none;z-index:900;height:100dvh;width:7px;display:block;padding:0;box-sizing:border-box;
  font:500 9px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .45s;isolation:isolate}
.z-hud.on{opacity:1}
.z-track{position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(255,255,255,.20)}
.z-fill{position:absolute;left:0;top:0;width:2px;height:calc(var(--p,0)*100%);background:var(--lime);box-shadow:none}
.z-tick{position:absolute;left:0;width:6px;height:1px;border:0;border-radius:0;background:rgba(255,255,255,.34);pointer-events:auto;
  transform:translateY(-50%);transition:width .25s var(--ease),background .25s}
.z-tick:hover,.z-tick:focus-visible,.z-tick.cur{width:7px;background:var(--lime);box-shadow:none;transform:translateY(-50%)}
.z-tick span{display:none}
.z-depth{display:none}
/* focus + accessibility */
.z-tick:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
html.intro-active .z-hud,html.intro-active .z-aura,html.intro-active .z-cursor{opacity:0!important}
body.modal-open .z-hud,body.menu-open .z-hud{opacity:0}
@media (max-width:960px),(hover:none){.z-cursor,.z-aura{display:none}.z-hud{display:block}.z-grain{opacity:.04}}
@media (prefers-reduced-motion:reduce){.z-grain,.z-streak,.z-aura,.z-cursor,.z-ripple{display:none}
  html.z-on .zw>i{transform:none!important;opacity:1!important;transition:none}html.z-on .zw{transform:none!important}}
