:root{
--bg:#05070b;
--text:#edf2f7;
--muted:rgba(255,255,255,.55);
--green:#7dffb3;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html{
height:100%;
overflow:hidden;
-webkit-text-size-adjust:100%;
}

body{
height:100%;
overflow:hidden;
background:#05070b;
color:var(--text);
font-family:'IBM Plex Sans',sans-serif;
overscroll-behavior:none;
}

.grain{
position:fixed;
inset:0;
pointer-events:none;
opacity:.04;
mix-blend-mode:soft-light;
background-image:url("https://grainy-gradients.vercel.app/noise.svg");
z-index:2;
}

.mono{
font-family:'IBM Plex Mono', monospace;
letter-spacing:.22em;
}

.hero{
height:100svh;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:max(26px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
overflow:hidden;
position:relative;

background:
linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.88)),
url('assets/hero.jpg')
center center / cover no-repeat;
}

.nav,
.center,
.footer{
position:relative;
z-index:3;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:14px;
}

.links{
display:flex;
gap:18px;
}

.links button,
.access,
.close-btn,
.enter-btn{
background:none;
border:none;
color:white;
cursor:pointer;
transition:opacity .4s ease;
}

.links button:hover,
.access:hover,
.close-btn:hover,
.enter-btn:hover{
opacity:.7;
}

.links button{
color:rgba(255,255,255,.58);
font-size:11px;
}

.center{
margin:auto 0;
max-width:720px;
}

.label{
display:flex;
align-items:center;
gap:16px;
margin-bottom:30px;
}

.label span{
width:58px;
height:1px;
background:rgba(255,255,255,.28);
}

.label p{
font-size:10px;
opacity:.6;
}

h1{
font-weight:200;
line-height:.9;
letter-spacing:-.05em;
font-size:clamp(52px,7vw,110px);
max-width:900px;
}

.desc{
margin-top:26px;
max-width:540px;
line-height:1.6;
font-size:17px;
color:var(--muted);
}

.access{
margin-top:38px;
border-bottom:1px solid rgba(255,255,255,.32);
padding-bottom:10px;
font-size:13px;
}

.footer{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
font-size:10px;
opacity:.72;
z-index:3;
}

.dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 12px var(--green);
}

.overlay{
position:fixed;
inset:0;
z-index:200;
background:#05070b;
opacity:0;
pointer-events:none;
transition:opacity .6s ease;
display:flex;
flex-direction:column;
}

.overlay.active{
opacity:1;
pointer-events:auto;
}

.overlay-top{
display:flex;
justify-content:space-between;
align-items:center;
padding:max(26px, env(safe-area-inset-top)) 24px 18px;
}

.cards{
flex:1;
display:flex;
align-items:center;
gap:18px;
overflow-x:auto;
overflow-y:hidden;
padding:0 24px 24px;
scroll-snap-type:x mandatory;
}

.cards::-webkit-scrollbar{
display:none;
}

.card{
position:relative;
flex:0 0 86vw;
height:68svh;
overflow:hidden;
scroll-snap-align:center;
border:1px solid rgba(255,255,255,.05);
}

.card img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
filter:
brightness(.48)
contrast(1.12)
saturate(1.35)
hue-rotate(-4deg);
}

.card::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(to top,
rgba(0,0,0,.9),
rgba(0,0,0,.15));
}

.card-content{
position:absolute;
left:24px;
bottom:24px;
z-index:2;
max-width:78%;
}

.card-content h2{
font-weight:300;
font-size:40px;
margin-bottom:14px;
}

.card-content p{
font-size:15px;
line-height:1.6;
color:var(--muted);
}

.enter-btn{
margin-top:22px;
font-size:12px;
border-bottom:1px solid rgba(255,255,255,.24);
padding-bottom:8px;
}

.legal{
position:fixed;
inset:0;
z-index:300;
background:rgba(5,7,11,.82);
backdrop-filter:blur(12px);
display:none;
align-items:center;
justify-content:center;
padding:24px;
}

.legal.active{
display:flex;
}

.legal-box{
width:min(760px,100%);
max-height:min(760px,82svh);
border:1px solid rgba(255,255,255,.05);
background:rgba(8,10,14,.92);
box-shadow:0 40px 120px rgba(0,0,0,.6);
padding:24px;
overflow:auto;
}

.legal-top{
display:flex;
justify-content:space-between;
margin-bottom:28px;
}

pre{
white-space:pre-wrap;
font-family:'IBM Plex Mono';
line-height:1.8;
font-size:13px;
color:rgba(255,255,255,.58);
}

@media screen and (orientation:landscape){

.hero{
padding-top:18px;
padding-bottom:14px;
}

.center{
max-width:520px;
}

h1{
font-size:42px;
line-height:.88;
}

.desc{
font-size:12px;
line-height:1.45;
margin-top:14px;
max-width:380px;
}

.access{
margin-top:20px;
font-size:11px;
}

.logo{
font-size:12px;
}

.links button{
font-size:9px;
}

.footer{
font-size:8px;
}

.label{
margin-bottom:18px;
}

.label p{
font-size:8px;
}

.card{
height:82svh;
}

.card-content h2{
font-size:28px;
}

.card-content p{
font-size:12px;
}

}


/* TRUE CENTER FIX */

.legal{
display:none;
position:fixed;
inset:0;
z-index:300;
background:rgba(5,7,11,.82);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
align-items:center !important;
justify-content:center !important;
}

.legal.active{
display:flex !important;
}

.legal-box{
position:relative;
margin:auto !important;
width:min(760px, calc(100vw - 48px));
max-width:760px;
max-height:82svh;
overflow:auto;
}


/* EXTRA CINEMATIC COLOR DEPTH */

.card::before{
content:'';
position:absolute;
inset:0;
z-index:1;
background:
radial-gradient(circle at top,
rgba(120,160,255,.08),
transparent 55%),
radial-gradient(circle at bottom,
rgba(0,120,255,.06),
transparent 60%);
mix-blend-mode:screen;
pointer-events:none;
}


/* LEGAL BOX FADE */

.legal-box{
transform:translateY(18px);
opacity:0;

transition:
opacity .6s cubic-bezier(.16,.84,.44,1),
transform .6s cubic-bezier(.16,.84,.44,1);
}

.legal.active .legal-box{
opacity:1;
transform:translateY(0);
}


/* REAL FADE FIX */

.legal{
display:flex !important;

visibility:hidden;
opacity:0;
pointer-events:none;

transition:
opacity .65s cubic-bezier(.16,.84,.44,1),
visibility .65s ease,
background .65s ease,
backdrop-filter .65s ease,
-webkit-backdrop-filter .65s ease;
}

.legal.active{
visibility:visible;
opacity:1;
pointer-events:auto;
}

.legal-box{
opacity:0;
transform:translateY(24px) scale(.985);

transition:
opacity .7s cubic-bezier(.16,.84,.44,1),
transform .7s cubic-bezier(.16,.84,.44,1);
}

.legal.active .legal-box{
opacity:1;
transform:translateY(0) scale(1);
}


/* =========================================
ROTATE DEVICE SCREEN
========================================= */

.rotate-screen{
position:fixed;
inset:0;
z-index:9999;

display:flex;
align-items:center;
justify-content:center;
flex-direction:column;

background:#05070b;

opacity:0;
visibility:hidden;
pointer-events:none;

transition:
opacity .8s cubic-bezier(.16,.84,.44,1),
visibility .8s ease;
}

.rotate-screen::before{
content:'';
position:absolute;
inset:0;
opacity:.05;
mix-blend-mode:soft-light;
background-image:url("https://grainy-gradients.vercel.app/noise.svg");
}

.rotate-inner{
position:relative;
z-index:2;
text-align:center;
padding:40px;
}

.rotate-label{
font-size:11px;
opacity:.42;
margin-bottom:28px;
}

.rotate-title{
font-size:62px;
font-weight:200;
letter-spacing:-.04em;
line-height:.95;
margin-bottom:24px;
color:#edf2f7;
}

.rotate-sub{
font-size:13px;
line-height:1.9;
color:rgba(255,255,255,.38);
}

.rotate-line{
width:90px;
height:1px;
background:rgba(255,255,255,.14);
margin:0 auto 32px;
}

@media (orientation:landscape) and (max-width:1100px){

.rotate-screen{
opacity:1;
visibility:visible;
pointer-events:auto;
}

}


/* GUMROAD LINK FIX */

.enter-btn{
display:inline-block;
text-decoration:none;
color:white;
}


/* =========================================
PROCEDURAL GLASS LAYERS
========================================= */

/* NAVBAR */

.nav{
background:rgba(8,10,14,.32);
backdrop-filter:blur(18px) saturate(110%);
-webkit-backdrop-filter:blur(18px) saturate(110%);

border:1px solid rgba(255,255,255,.035);

box-shadow:
0 10px 40px rgba(0,0,0,.22);

padding:14px 18px;

border-radius:18px;
}

/* OVERLAY TOPBAR */

.overlay-top{
background:rgba(8,10,14,.26);

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

border-bottom:
1px solid rgba(255,255,255,.035);
}

/* LEGAL PANEL */

.legal-box{
background:rgba(8,10,14,.58) !important;

backdrop-filter:
blur(24px)
saturate(115%);

-webkit-backdrop-filter:
blur(24px)
saturate(115%);

border:
1px solid rgba(255,255,255,.045);

box-shadow:
0 40px 120px rgba(0,0,0,.48);
}


/* =========================================
STATUS DOT PULSE
========================================= */

.dot{
animation:statusPulse 2.4s ease-in-out infinite;
}

@keyframes statusPulse{

0%{
opacity:.35;
transform:scale(.9);
box-shadow:0 0 4px #7dffb3;
}

50%{
opacity:1;
transform:scale(1);
box-shadow:0 0 18px #7dffb3;
}

100%{
opacity:.35;
transform:scale(.9);
box-shadow:0 0 4px #7dffb3;
}

}


/* =========================================
SIGNAL INSTABILITY EASTER EGG
========================================= */

.signal-message{
position:fixed;
left:50%;
bottom:38px;
transform:translateX(-50%);

font-size:10px;
letter-spacing:.24em;
font-family:'IBM Plex Mono', monospace;

color:rgba(255,255,255,.48);

opacity:0;
pointer-events:none;

z-index:9999;

transition:
opacity .45s ease,
transform .45s ease;
}

.signal-message.active{
opacity:1;
transform:translateX(-50%) translateY(-4px);
}

body.signal-flicker::before{
opacity:.11 !important;
transition:opacity .12s ease;
}

.dot.alert{
background:#ff6b6b !important;
box-shadow:0 0 16px #ff6b6b !important;
}


/* =========================================
iPAD / TOUCH FIX
========================================= */

.dot{
cursor:pointer;
pointer-events:auto;
position:relative;
z-index:50;

/* bigger invisible tap area */
}

.dot::after{
content:'';
position:absolute;
left:50%;
top:50%;
width:34px;
height:34px;
transform:translate(-50%,-50%);
border-radius:50%;
}


/* =========================================
SIGNAL STATUS EFFECT FIX
========================================= */

.footer{
position:relative;
}

.system-status{
transition:
opacity .35s ease,
color .35s ease;
}

.system-status.alert{
color:#ff6b6b;
opacity:1;
}

.hero.signal-flicker{
animation:signalFlicker .22s linear;
}

@keyframes signalFlicker{

0%{ filter:brightness(1); }
50%{ filter:brightness(1.08); }
100%{ filter:brightness(1); }

}


/* =========================================
PROCEDURAL SIGNAL SEQUENCE
========================================= */

.signal-feed{
position:fixed;
left:50%;
bottom:72px;

transform:translateX(-50%);

display:flex;
flex-direction:column;
align-items:center;
gap:10px;

pointer-events:none;
z-index:9999;
}

.signal-line{
font-family:'IBM Plex Mono', monospace;
font-size:10px;
letter-spacing:.24em;

color:rgba(255,255,255,.48);

opacity:0;
transform:translateY(6px);

transition:
opacity .55s ease,
transform .55s ease;
}

.signal-line.active{
opacity:1;
transform:translateY(0);
}

.signal-line.hello{
color:rgba(255,255,255,.82);
}

.hero.signal-flicker{
animation:signalPulse .28s linear;
}

@keyframes signalPulse{

0%{ filter:brightness(1); }
50%{ filter:brightness(1.06); }
100%{ filter:brightness(1); }

}


/* =========================================
VISIBLE SIGNAL FEED FIX
========================================= */

.signal-feed{
position:fixed;
left:50%;
bottom:92px;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
z-index:99999;
pointer-events:none;
width:100%;
}

.signal-line{
font-family:'IBM Plex Mono', monospace;
font-size:11px;
letter-spacing:.22em;
color:rgba(255,255,255,.78);

opacity:0;
transform:translateY(8px);

transition:
opacity .6s ease,
transform .6s ease;
}

.signal-line.active{
opacity:1 !important;
transform:translateY(0) !important;
}

.signal-line.hello{
color:#ffffff;
}


/* HARD SIGNAL FIX */

.signal-feed{
position:fixed !important;
left:50% !important;
bottom:110px !important;
transform:translateX(-50%) !important;
z-index:999999 !important;

display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:14px !important;

pointer-events:none !important;
width:100% !important;
}

.signal-line{
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:.22em !important;

color:rgba(255,255,255,.92) !important;

opacity:0 !important;
visibility:hidden !important;

transition:
opacity .7s ease,
transform .7s ease !important;

transform:translateY(10px) !important;
}

.signal-line.active{
opacity:1 !important;
visibility:visible !important;
transform:translateY(0) !important;
}

.signal-line.hello{
color:#ffffff !important;
}


/* =========================================
FINAL SIGNAL SYSTEM
========================================= */

.signal-feed{
position:fixed;
left:50%;
bottom:110px;
transform:translateX(-50%);
z-index:999999;

display:flex;
flex-direction:column;
align-items:center;
gap:14px;

pointer-events:none;
width:100%;
}

.signal-line{
font-family:'IBM Plex Mono', monospace;
font-size:11px;
letter-spacing:.22em;

color:rgba(255,255,255,.88);

opacity:0;
transform:translateY(8px);

transition:
opacity .6s ease,
transform .6s ease;
}

.signal-line.hello{
color:#ffffff;
}

#statusDot{
cursor:pointer;
pointer-events:auto;
position:relative;
z-index:9999;
}

#statusDot::after{
content:'';
position:absolute;
left:50%;
top:50%;
width:36px;
height:36px;
transform:translate(-50%,-50%);
}

#statusDot.alert{
background:#ff6b6b !important;
box-shadow:0 0 18px #ff6b6b !important;
}

.system-status{
transition:color .4s ease;
}

.system-status.alert{
color:#ff6b6b;
}


/* =========================================
SAFARI / iPAD DARK UI FIX
========================================= */

html,
body{
background:#05070b !important;
}