*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
background:#000;
color:#fff;
font-family:'Cinzel', serif;
overflow-x:hidden;
animation:pageFade 1.2s ease;
}

@keyframes pageFade{
from{
opacity:0;
}
to{
opacity:1;
}
}

/* LOADER */

#loader{
position:fixed;
inset:0;
background:#000;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
transition:opacity 1s ease, visibility 1s ease;
}

#loader.hide{
opacity:0;
visibility:hidden;
}

.loader-logo{
font-size:4rem;
letter-spacing:10px;
color:#fff;
animation:loaderReveal 1.8s ease;
}

@keyframes loaderReveal{
from{
opacity:0;
transform:scale(0.95);
letter-spacing:2px;
}
to{
opacity:1;
transform:scale(1);
letter-spacing:10px;
}
}

/* HERO SECTION */

.hero{
position:relative;
height:100vh;
width:100%;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

/* BACKGROUND VIDEO */

.bg-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
opacity:0.48;
filter:brightness(0.8) contrast(1.08);
pointer-events:none;
}

/* HERO OVERLAY */

.hero-overlay{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0.45) 100%);
}

/* PARTICLES */

#particles-js{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
opacity:0.16;
pointer-events:auto;
}

/* HERO CONTENT */

.hero-content{
position:relative;
z-index:5;
width:100%;
max-width:1100px;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px 20px;
}

/* SMALL TOP TEXT */

.eyebrow{
margin:0 0 18px;
font-size:0.85rem;
letter-spacing:5px;
opacity:0.7;
text-transform:uppercase;
}

/* LOGO */

.logo{
margin:0;
font-size:clamp(4rem,11vw,9rem);
letter-spacing:8px;
line-height:0.95;
color:#fff;
position:relative;
display:inline-block;
text-shadow:
0 0 10px rgba(255,255,255,0.12),
0 0 24px rgba(255,255,255,0.06);
transition:
text-shadow .35s ease,
transform .35s ease,
filter .35s ease,
letter-spacing .35s ease;
animation:logoReveal 1.4s ease, logoBreath 6s ease-in-out 1.4s infinite;
will-change:transform, filter;
overflow:visible;
}

.logo:hover{
text-shadow:
0 0 16px rgba(255,255,255,0.24),
0 0 34px rgba(255,255,255,0.10);
transform:scale(1.02);
filter:brightness(1.06);
letter-spacing:9px;
}

.logo:active{
transform:scale(1.01);
}

@keyframes logoReveal{
0%{
opacity:0;
transform:translateY(24px) scale(.97);
letter-spacing:2px;
filter:blur(8px);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
letter-spacing:8px;
filter:blur(0);
}
}

@keyframes logoBreath{
0%{
transform:scale(1);
filter:brightness(1);
}
50%{
transform:scale(1.008);
filter:brightness(1.03);
}
100%{
transform:scale(1);
filter:brightness(1);
}
}

/* HOVER SHIMMER */

.logo::before{
content:"";
position:absolute;
top:0;
left:45%;
width:12%;
height:100%;

background:linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.18) 50%,
rgba(255,255,255,0) 100%
);

transform:skewX(-18deg) scaleX(0);
opacity:0;
pointer-events:none;
}

.logo.shimmer::before{
opacity:1;
animation:hoverSweep 0.9s ease;
}

@keyframes hoverSweep{
0%{
transform:skewX(-18deg) scaleX(0);
opacity:0;
}

40%{
opacity:1;
}

100%{
transform:skewX(-18deg) scaleX(3.5);
opacity:0;
}
}
/* RANDOM AMBIENT SWEEP */

.logo::after{
content:"";
position:absolute;
top:0;
left:-28%;
width:28%;
height:100%;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.05) 40%,
rgba(255,255,255,0.14) 50%,
rgba(255,255,255,0.05) 60%,
rgba(255,255,255,0) 100%
);
transform:skewX(-18deg);
opacity:0;
pointer-events:none;
}

.logo.sweep::after{
opacity:1;
animation:ambientSweep 1.8s ease;
}

@keyframes ambientSweep{
0%{
left:-28%;
opacity:0;
}
10%{
opacity:1;
}
90%{
opacity:1;
}
100%{
left:108%;
opacity:0;
}
}

/* GLITCH */

/* subtle flicker glitch */
.glitch.active{
animation:logoGlitchFlash .22s ease;
}

@keyframes logoGlitchFlash{
0%{
filter:brightness(1) blur(0);
transform:scale(1);
}
20%{
filter:brightness(1.12) blur(.3px);
transform:scale(1.002);
}
40%{
filter:brightness(.96) blur(.15px);
transform:scale(.999);
}
60%{
filter:brightness(1.08) blur(.25px);
transform:scale(1.001);
}
100%{
filter:brightness(1) blur(0);
transform:scale(1);
}
}

@keyframes glitchTop{
0%{transform:translate(0);clip-path:inset(0 0 76% 0);}
20%{transform:translate(-2px,1px);clip-path:inset(8% 0 58% 0);}
45%{transform:translate(2px,-1px);clip-path:inset(16% 0 42% 0);}
70%{transform:translate(-1px,1px);clip-path:inset(10% 0 54% 0);}
100%{transform:translate(0);clip-path:inset(0 0 76% 0);}
}

@keyframes glitchBottom{
0%{transform:translate(0);clip-path:inset(76% 0 0 0);}
20%{transform:translate(2px,-1px);clip-path:inset(58% 0 8% 0);}
45%{transform:translate(-2px,1px);clip-path:inset(42% 0 16% 0);}
70%{transform:translate(1px,-1px);clip-path:inset(54% 0 10% 0);}
100%{transform:translate(0);clip-path:inset(76% 0 0 0);}
}

/* TAGLINE */

.tagline{
margin:22px auto 0;
max-width:700px;
font-size:0.95rem;
letter-spacing:2px;
line-height:1.7;
opacity:0.78;
text-transform:uppercase;
}

/* MENU */

.menu{
margin-top:40px;
display:flex;
justify-content:space-between;
width:100%;
max-width:1000px;
border-top:1px solid rgba(255,255,255,0.15);
border-bottom:1px solid rgba(255,255,255,0.15);
padding:32px 0;
}

.menu a{
flex:1;
text-align:center;
color:#fff;
text-decoration:none;
font-size:2rem;
letter-spacing:6px;
transition:
color .3s ease,
transform .3s ease,
text-shadow .3s ease,
opacity .3s ease;
opacity:.92;
}

.menu a:hover{
color:#ffffff;
transform:translateY(-6px) scale(1.02);
opacity:1;
text-shadow:
0 0 8px rgba(255,255,255,0.35),
0 0 18px rgba(255,255,255,0.25),
0 0 35px rgba(255,255,255,0.15);
}

/* FLOATING NAV */

.floating-nav{
position:fixed;
top:18px;
left:50%;
transform:translateX(-50%) translateY(-20px);
display:flex;
gap:12px;
padding:10px 14px;
background:rgba(0,0,0,0.45);
border:1px solid rgba(255,255,255,0.1);
border-radius:999px;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 0 30px rgba(0,0,0,0.22);
opacity:0;
pointer-events:none;
z-index:1000;
transition:
opacity .35s ease,
transform .35s ease,
border-color .35s ease;
}

.floating-nav.show{
opacity:1;
pointer-events:auto;
transform:translateX(-50%) translateY(0);
}

.floating-nav a{
color:#fff;
text-decoration:none;
font-size:0.78rem;
letter-spacing:3px;
text-transform:uppercase;
padding:10px 14px;
border-radius:999px;
transition:
background .3s ease,
border-color .3s ease,
transform .3s ease,
text-shadow .3s ease,
opacity .3s ease;
opacity:.92;
}

.floating-nav a:hover{
background:rgba(255,255,255,0.08);
transform:translateY(-2px);
text-shadow:
0 0 8px rgba(255,255,255,0.18),
0 0 16px rgba(255,255,255,0.08);
opacity:1;
}

.floating-nav a.active{
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.18);
text-shadow:
0 0 8px rgba(255,255,255,0.25),
0 0 18px rgba(255,255,255,0.12);
}

/* SECTIONS */

.section{
min-height:100vh;
padding:120px 24px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
opacity:0;
transform:translateY(60px) scale(.985);
filter:blur(4px);
transition:
opacity 1s ease,
transform 1s ease,
filter 1s ease;
}

.section.show{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}

.section h2{
font-size:2.5rem;
letter-spacing:6px;
margin-bottom:20px;
text-shadow:
0 0 8px rgba(255,255,255,0.10),
0 0 18px rgba(255,255,255,0.05);
}

.section-subtext{
margin:0 0 40px;
opacity:0.7;
text-transform:uppercase;
letter-spacing:3px;
font-size:0.9rem;
}

.section iframe{
width:100%;
max-width:700px;
margin-top:30px;
}

/* CARD GRID */

.release-grid{
width:100%;
max-width:1100px;
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:30px;
margin-top:10px;
}

.release-card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
padding:24px;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
box-shadow:0 0 30px rgba(0,0,0,0.18);
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease,
background .35s ease;
}

.release-card:hover{
transform:translateY(-10px) scale(1.01);
border-color:rgba(255,255,255,0.16);
box-shadow:0 0 40px rgba(255,255,255,0.06);
background:rgba(255,255,255,0.045);
}

.release-card h3{
margin:0 0 18px;
font-size:1.1rem;
letter-spacing:4px;
text-transform:uppercase;
font-weight:600;
opacity:0.9;
}

.release-card iframe{
width:100%;
max-width:none;
margin-top:0;
border-radius:12px;
aspect-ratio:16/9;
height:auto;
transition:
transform .35s ease,
filter .35s ease,
box-shadow .35s ease;
}

.release-card:hover iframe{
transform:scale(1.01);
filter:brightness(1.04);
box-shadow:0 0 25px rgba(255,255,255,0.08);
}

.card-text{
margin:0 0 18px;
opacity:0.72;
font-size:0.9rem;
line-height:1.7;
letter-spacing:1.5px;
text-transform:uppercase;
}

.card-links{
margin-top:18px;
display:flex;
justify-content:center;
}

.card-links a{
display:inline-block;
padding:12px 18px;
border:1px solid rgba(255,255,255,0.14);
border-radius:999px;
color:#fff;
text-decoration:none;
font-size:0.8rem;
letter-spacing:3px;
text-transform:uppercase;
transition:
background .3s ease,
border-color .3s ease,
transform .3s ease,
text-shadow .3s ease;
}

.card-links a:hover{
background:rgba(255,255,255,0.06);
border-color:rgba(255,255,255,0.22);
transform:translateY(-3px);
text-shadow:
0 0 8px rgba(255,255,255,0.2),
0 0 18px rgba(255,255,255,0.08);
}

/* INFO BLOCKS */

.info-block{
width:100%;
max-width:760px;
padding:30px;
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
background:rgba(255,255,255,0.03);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
box-shadow:0 0 30px rgba(0,0,0,0.18);
}

.info-block p{
margin:0;
opacity:0.78;
line-height:1.9;
letter-spacing:1.5px;
text-transform:uppercase;
}

/* GRAIN OVERLAY */

.grain{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url("https://grainy-gradients.vercel.app/noise.svg");
opacity:.07;
pointer-events:none;
z-index:8;
}

/* CURSOR */

.cursor{
position:fixed;
left:0;
top:0;

width:14px;
height:14px;

border-radius:50%;
background:#fff;

transform:translate(-50%,-50%);
pointer-events:none;

mix-blend-mode:difference;

z-index:999;

box-shadow:
0 0 12px rgba(255,255,255,0.8),
0 0 30px rgba(255,255,255,0.4);

transition:
width .25s ease,
height .25s ease,
box-shadow .25s ease;
}

/* TRANSITION HELPERS */

.hero-content,
.menu,
#particles-js,
.bg-video{
transition:opacity .25s ease-out;
will-change:transform, opacity;
}

/* MOBILE */

@media(max-width:768px){

.hero-content{
padding:28px 16px;
}

.eyebrow{
font-size:0.72rem;
letter-spacing:3px;
}

.logo{
font-size:clamp(3.2rem,16vw,5.4rem);
letter-spacing:5px;
}

.tagline{
font-size:0.8rem;
letter-spacing:1.4px;
line-height:1.6;
max-width:90%;
}

.menu{
flex-wrap:wrap;
gap:18px;
padding:22px 0;
}

.menu a{
flex:1 1 40%;
font-size:1.35rem;
letter-spacing:4px;
}

.release-grid{
grid-template-columns:1fr;
}

.release-card{
padding:18px;
}

.floating-nav{
top:12px;
gap:8px;
padding:8px 10px;
max-width:94vw;
overflow-x:auto;
}

.floating-nav a{
font-size:0.68rem;
letter-spacing:2px;
padding:8px 10px;
white-space:nowrap;
}

.section{
padding:100px 18px;
}

.section h2{
font-size:2rem;
letter-spacing:4px;
}

.card-text,
.info-block p{
font-size:0.82rem;
letter-spacing:1px;
line-height:1.7;
}

.cursor{
display:none;
}

}