/* Harabe V3 experience layer */
:root{--hx-ink:#172436;--hx-blue:#2549e9;--hx-ease:cubic-bezier(.76,0,.24,1)}

/* Characters of split titles */
.hx-word{display:inline-block;white-space:nowrap}
.hx-ch{display:inline-block;transform-origin:0 100%;will-change:transform}
.journey-static .hx-ch{transform:none!important;opacity:1!important}

/* Loader */
.hx-loader{position:fixed;inset:0;z-index:100;background:#0f1a2c;color:#eef1f5;display:grid;place-items:center;pointer-events:none;
 clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--hx-ease)}
.hx-loader.hx-out{clip-path:inset(0 0 100% 0)}
.hx-loader-mark{font:600 clamp(120px,22vw,300px)/1 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.08em;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:.04em}
.hx-loader-mark span{display:block;animation:hx-rise 1s var(--hx-ease) both}
.hx-loader-mark i{width:.2em;height:.2em;border-radius:50%;background:var(--hx-blue);margin:0 0 .09em .06em;animation:hx-drop 1.1s .45s cubic-bezier(.3,1.6,.5,1) both}
.hx-loader.hx-out .hx-loader-mark{transform:translateY(-12vh);opacity:0;transition:transform 1s var(--hx-ease),opacity .6s}
.hx-loader-meta{position:absolute;left:7vw;right:7vw;bottom:9vh;display:flex;justify-content:space-between;font:500 12px/1.4 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.hx-loader-count{font-variant-numeric:tabular-nums}
.hx-loader-line{position:absolute;left:7vw;right:7vw;bottom:calc(9vh - 18px);height:1px;background:#ffffff22}
.hx-loader-line b{display:block;height:100%;background:#eef1f5;transform:scaleX(0);transform-origin:left}
@keyframes hx-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes hx-drop{from{transform:translateY(-3em) scale(.6);opacity:0}to{transform:none;opacity:1}}

/* Page transition curtain */
.hx-curtain{position:fixed;inset:0;z-index:99;background:var(--hx-blue);display:grid;place-items:center;pointer-events:none;transform:translateY(100%);border-radius:40% 40% 0 0/12% 12% 0 0}
.hx-curtain span{font:600 clamp(60px,9vw,120px)/1 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.07em;color:#fff;opacity:0;transform:translateY(30px)}
.hx-leaving .hx-curtain{transform:none;border-radius:0;transition:transform .55s var(--hx-ease),border-radius .55s var(--hx-ease)}
.hx-leaving .hx-curtain span{opacity:1;transform:none;transition:opacity .3s .2s,transform .4s .15s var(--hx-ease)}
html.hx-arriving::after{content:"h.";position:fixed;inset:0;z-index:99;background:var(--hx-blue);color:#fff;display:grid;place-items:center;
 font:600 clamp(60px,9vw,120px)/1 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.07em;pointer-events:none}
html.hx-arrived::after{transform:translateY(-100%);border-radius:0 0 40% 40%/0 0 12% 12%;transition:transform .8s var(--hx-ease),border-radius .8s var(--hx-ease)}

/* Cursor */
.hx-has-cursor:not(.menu-is-open),.hx-has-cursor:not(.menu-is-open) a,.hx-has-cursor:not(.menu-is-open) button{cursor:none}
.hx-has-cursor input,.hx-has-cursor textarea{cursor:text}
.hx-cursor{position:fixed;inset:0;z-index:98;pointer-events:none;color:var(--journey-ink,#172436);transition:opacity .3s}
.menu-is-open .hx-cursor{display:none}
.hx-cursor i{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.hx-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:currentColor;transition:opacity .2s}
.hx-ring{width:38px;height:38px;margin:-19px 0 0 -19px;display:grid;place-items:center}
.hx-ring::before{content:"";position:absolute;inset:0;border:1px solid currentColor;opacity:.55;border-radius:50%;transition:transform .35s var(--hx-ease),background .25s,border-radius .3s}
.hx-ring b{position:relative;font:600 15px/1 Manrope,system-ui,sans-serif;color:#fff;opacity:0;transition:opacity .2s}
.hx-hover .hx-ring::before{transform:scale(1.7);background:var(--journey-accent,#2549e9);border-color:transparent;opacity:.92}
.hx-hover .hx-ring b{opacity:1}
.hx-hover .hx-dot{opacity:0}
.hx-text .hx-ring::before{transform:scale(.25,.9);border-radius:3px}
.hx-press .hx-ring::before{transform:scale(.75)}
.hx-hover.hx-press .hx-ring::before{transform:scale(1.6)}
.hx-gone{opacity:0}
/* Lenis */
html.lenis,html.lenis body{height:auto}
html.lenis,.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
/* GSAP magnetic buttons */
.hx-magnet{translate:calc(var(--mx,0)*1px) calc(var(--my,0)*1px)}
.hx-gsap-hero .page-hero h1{animation:none!important}
.pill:not(.hx-magnet),.menu-button:not(.hx-magnet),.chapter-nav a:not(.hx-magnet),.nav-dock a:not(.hx-magnet),.motion-switch:not(.hx-magnet),.hx-sound:not(.hx-magnet){transition:translate .45s cubic-bezier(.2,.9,.3,1.3),background .2s,transform .2s}

/* Film grain */
.hx-grain{position:fixed;inset:-50%;z-index:97;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 animation:hx-grain .9s steps(6) infinite}
@keyframes hx-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* Sound toggle */
.hx-sound{position:fixed;bottom:15px;right:150px;z-index:25;display:flex;align-items:center;gap:8px;background:#eef1f5d9;color:#172436;backdrop-filter:blur(6px);border:1px solid #a5b4c755;border-radius:30px;padding:8px 13px;font-size:11px}
.hx-sound i{display:flex;align-items:center;gap:2px;height:12px}
.hx-sound b{display:block;width:2px;height:3px;background:currentColor;border-radius:2px;transition:height .3s}
.hx-sound[aria-pressed="true"] b{animation:hx-eq .9s ease-in-out infinite alternate}
.hx-sound[aria-pressed="true"] b:nth-child(2){animation-delay:-.3s}.hx-sound[aria-pressed="true"] b:nth-child(3){animation-delay:-.6s}.hx-sound[aria-pressed="true"] b:nth-child(4){animation-delay:-.45s}
@keyframes hx-eq{from{height:3px}to{height:12px}}

@media(max-width:600px){.hx-sound{display:none}.hx-loader-meta{font-size:9px;flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){.hx-grain{animation:none}.hx-loader,.hx-curtain,html.hx-arriving::after{display:none}.hx-ch{transform:none!important;opacity:1!important}}
.journey-static .hx-grain{animation:none}