:root{
    --bg:        #0b0d0d;
    --black:     #000000;
    --ink:       #050607;

    --ikb:       #002fa7;
    --ikb-lift:  #1c47cc;
    --ikb-glow:  #3a63ff;
    --ikb-pale:  #8ea6ff;
    --ikb-mist:  #c9d6ff;

    --gold:      #c9a96e;
    --gold-lt:   #e8d5a0;
    --gold-hi:   #f6e7bb;
    --gold-line: rgba(201,169,110,.46);
    --gold-soft: rgba(201,169,110,.24);

    --line:      rgba(0,47,167,.46);
    --line-soft: rgba(142,166,255,.20);
    --line-hard: rgba(0,47,167,.74);

    --txt:       #e9eefc;
    --txt-2:     #adb6d4;
    --txt-3:     #828dae;
    --txt-4:     #5d6788;

    --sans: 'Noto Sans SC','Inter',-apple-system,sans-serif;
    --mono: 'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;

    --ease-out: cubic-bezier(.16,1,.3,1);
    --ease-io:  cubic-bezier(.76,0,.24,1);
    --ease-soft:cubic-bezier(.33,0,.2,1);

    --pad: clamp(1.2rem,4.5vw,4.5rem);

    --cur-line: rgba(255,255,255,.62);
    --cur-dot:  #ffffff;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

html{background:var(--bg);-webkit-text-size-adjust:100%;}
body{
    background:var(--bg);
    color:var(--txt);
    font-family:var(--sans);
    font-weight:300;
    line-height:1.8;
    overflow-x:clip;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

.sfx-noscroll{scrollbar-width:none;-ms-overflow-style:none;}
.sfx-noscroll::-webkit-scrollbar{width:0;height:0;display:none;}
html.sfx-noscroll,html.sfx-noscroll body{scrollbar-width:none;-ms-overflow-style:none;}
html.sfx-noscroll::-webkit-scrollbar,
html.sfx-noscroll body::-webkit-scrollbar{width:0;height:0;display:none;}

::selection{background:var(--ikb);color:#fff;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
img{max-width:100%;display:block;}

.sfx-gl{
    position:fixed;inset:0;width:100%;height:100%;
    display:block;z-index:0;pointer-events:none;
    opacity:0;transition:opacity 2s ease;
}
.sfx-gl.ready{opacity:1;}

.sfx-fluid{
    position:fixed;inset:0;width:100%;height:100%;
    display:block;z-index:1;pointer-events:none;
    opacity:0;transition:opacity 1.4s ease;
    mix-blend-mode:screen;
}
.sfx-fluid.ready{opacity:.92;}
.sfx-fluid.faded{opacity:0;}

.sfx-gl-fallback{
    position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
    background:
        radial-gradient(58vw 58vw at 78% 8%, rgba(0,47,167,.30), transparent 62%),
        radial-gradient(46vw 40vw at 12% 88%, rgba(201,169,110,.08), transparent 62%),
        radial-gradient(66vw 48vw at 8% 92%, rgba(0,47,167,.14), transparent 60%),
        var(--bg);
    animation:sfxDrift 24s ease-in-out infinite alternate;
    transition:opacity 1.6s ease;
}
.sfx-gl-fallback.ready{opacity:1;}
@keyframes sfxDrift{
    0%{transform:scale(1) translate3d(0,0,0);}
    100%{transform:scale(1.12) translate3d(-2%,-2%,0);}
}

.sfx-grain{
    position:fixed;inset:-50%;z-index:4;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:sfxGrain .7s steps(3) infinite;
}
@keyframes sfxGrain{
    0%{transform:translate3d(0,0,0);}
    33%{transform:translate3d(-3%,2%,0);}
    66%{transform:translate3d(2%,-3%,0);}
    100%{transform:translate3d(0,0,0);}
}

.sfx-scan{
    position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.4;
    background:repeating-linear-gradient(to bottom,rgba(142,166,255,.026) 0 1px,transparent 1px 3px);
    mix-blend-mode:screen;
}
.sfx-scan::after{
    content:'';position:absolute;left:0;right:0;height:30vh;
    background:linear-gradient(to bottom,transparent,rgba(0,47,167,.055),rgba(201,169,110,.025),transparent);
    animation:sfxScanSweep 9s linear infinite;
}
@keyframes sfxScanSweep{
    0%{transform:translateY(-34vh);}
    100%{transform:translateY(134vh);}
}

.sfx-vignette{
    position:fixed;inset:0;z-index:6;pointer-events:none;
    background:radial-gradient(122vw 92vw at 50% 46%,transparent 42%,rgba(0,0,0,.76) 100%);
}

.sfx-cur-dot{
    position:fixed;left:0;top:0;z-index:9999;
    width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
    background:var(--cur-dot);
    mix-blend-mode:difference;
    pointer-events:none;
    opacity:0;transition:opacity .35s ease,width .3s var(--ease-out),height .3s var(--ease-out);
}
.sfx-cur-move{
    position:fixed;left:0;top:0;z-index:9998;
    pointer-events:none;opacity:0;
    transition:opacity .35s ease;
    will-change:transform;
}
.sfx-cur-ring{
    position:absolute;left:0;top:0;
    width:38px;height:38px;margin:-19px 0 0 -19px;
    border-radius:50%;
    border:1px solid var(--cur-line);
    mix-blend-mode:difference;
    transition:width .4s var(--ease-out),height .4s var(--ease-out),
               margin .4s var(--ease-out),border-color .4s ease,
               background .4s ease,opacity .3s ease;
    will-change:transform;
}
.sfx-cur-ring::after{
    content:'';position:absolute;inset:34%;border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    opacity:0;transition:opacity .35s ease;
}
.sfx-cur-label{
    position:absolute;left:0;top:0;
    transform:translate(-50%,-50%) scale(.8);
    font-family:var(--mono);font-size:.5rem;letter-spacing:.24em;
    color:#fff;white-space:nowrap;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    padding:.14rem .5rem;
    opacity:0;pointer-events:none;
    transition:opacity .32s ease,transform .32s var(--ease-out);
}
body.sfx-cur-on .sfx-cur-dot,body.sfx-cur-on .sfx-cur-move{opacity:1;}
body.sfx-cur-hot .sfx-cur-ring{
    width:76px;height:76px;margin:-38px 0 0 -38px;
    border-color:rgba(255,255,255,.85);
    background:rgba(255,255,255,.05);
}
body.sfx-cur-hot .sfx-cur-ring::after{opacity:1;}
body.sfx-cur-hot .sfx-cur-label{opacity:1;transform:translate(-50%,-50%) scale(1);}
body.sfx-cur-tap .sfx-cur-ring{width:26px;height:26px;margin:-13px 0 0 -13px;}
@media (hover:none),(pointer:coarse){
    .sfx-cur-dot,.sfx-cur-move{display:none !important;}
}

.btn-core{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    gap:.8rem;overflow:hidden;
    border:1px solid var(--gold-line);
    padding:1rem 3rem;
    font-family:var(--mono);font-size:.82rem;letter-spacing:.5em;
    color:var(--txt);
    background:rgba(255,255,255,0);
    transition:border-color .7s var(--ease-soft),
               color .6s var(--ease-soft),
               background-color .7s var(--ease-soft),
               box-shadow .8s var(--ease-soft),
               letter-spacing .8s var(--ease-soft);
}
.btn-core::before{
    content:'';position:absolute;inset:-40% -10%;
    background:radial-gradient(60% 120% at 50% 130%, rgba(0,47,167,.42), transparent 70%);
    opacity:0;transition:opacity .8s var(--ease-soft);
    pointer-events:none;
}
.btn-core > span{position:relative;z-index:1;}
.btn-core:hover{
    border-color:var(--gold);
    color:#fff;
    background-color:rgba(0,47,167,.10);
    box-shadow:0 0 30px rgba(201,169,110,.14);
    letter-spacing:.56em;
}
.btn-core:hover::before{opacity:1;}
.btn-core:disabled{opacity:.45;pointer-events:none;}

.mono{font-family:var(--mono);}
.mask{overflow:hidden;display:block;}
.mask > *{display:block;}

.hair-gold{
    height:1px;border:0;
    background:linear-gradient(90deg,transparent,var(--gold-line) 18%,var(--gold) 50%,var(--gold-line) 82%,transparent);
    opacity:.75;
}
.hair-blue{
    height:1px;border:0;
    background:linear-gradient(90deg,transparent,var(--line) 20%,var(--ikb-glow) 50%,var(--line) 80%,transparent);
}

.tag-mono{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:var(--mono);font-size:.56rem;letter-spacing:.28em;
    color:var(--ikb-pale);
    border:1px solid var(--line-soft);border-radius:999px;
    padding:.16rem .7rem;
}
.tag-mono.gold{color:var(--gold-lt);border-color:var(--gold-soft);}

.blink-cursor{
    display:inline-block;width:.55em;height:1em;
    background:var(--gold);vertical-align:-.12em;margin-left:.12em;
    animation:sfxBlink 1s steps(2,start) infinite;
}
@keyframes sfxBlink{0%,100%{opacity:1;}50%{opacity:0;}}

.reveal-clip{
    clip-path:inset(0 0 100% 0);
    transition:clip-path 1.1s var(--ease-out),opacity .9s ease;
    opacity:0;
}
.reveal-clip.on{clip-path:inset(0 0 0 0);opacity:1;}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
    .sfx-grain,.sfx-scan::after,.sfx-gl-fallback{animation:none !important;}
    .reveal-clip{clip-path:none !important;opacity:1 !important;}
}
