/* ================= ROOT COLORS ================= */
:root{
--bg-main:#020a1a;
--neon-main:#00d4ff;
--neon-soft:#7df9ff;
--text-main:#e6f7ff;
}

/* ================= RESET ================= */
html, body{
margin:0;
padding:0;
}

/* ================= GLOBAL BODY ================= */
body{
font-family:Segoe UI, Arial, sans-serif;
color:var(--text-main);
overflow-x:hidden;

background:
linear-gradient(rgba(0,0,40,0.85), rgba(0,0,60,0.9)),
url("../images/disco.jpg");

background-size:cover;
background-position:center;
background-attachment:fixed;
}

/* ================= HEADER ================= */
.top-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 50px;
background:rgba(0,0,20,0.7);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(0,212,255,0.2);
animation: headerSlideDown 0.9s ease-out;
}

@keyframes headerSlideDown{
from{ transform:translateY(-100%); opacity:0; }
to{ transform:translateY(0); opacity:1; }
}

.clg-logo{
height:60px;
animation:logoSlide 1.4s ease forwards;
opacity:0;
}

@keyframes logoSlide{
from{ transform:translateX(-60px); opacity:0; }
to{ transform:translateX(0); opacity:1; }
}

.sparsh-title{
font-size:32px;
font-weight:700;
color:var(--neon-main);
text-shadow:0 0 10px var(--neon-main),0 0 25px var(--neon-main);
animation:titleSlide 1.5s ease forwards;
opacity:0;
}

@keyframes titleSlide{
from{ transform:translateX(60px); opacity:0; }
to{ transform:translateX(0); opacity:1; }
}

/* ================= FLOAT DATE ================= */
.float-date{
position:fixed;
right:40px;
bottom:100px;
background:linear-gradient(45deg,#001f3f,#003566);
border:1px solid var(--neon-main);
padding:18px 22px;
border-radius:16px;
box-shadow:0 0 25px rgba(0,212,255,0.4);
z-index:1000;
animation:floatFade 2s ease forwards;
opacity:0;
}

@keyframes floatFade{
from{ opacity:0; transform:translateY(40px);}
to{ opacity:1; transform:translateY(0);}
}

/* ================= DESKTOP FLOAT AUDITION ================= */
.float-audition{
position:fixed;
left:25px;
top:60%;
transform:translateY(-50%);
background:rgba(0,15,40,0.75);
backdrop-filter:blur(12px);
border:1px solid var(--neon-main);
border-radius:16px;
padding:20px 22px;
width:220px;
box-shadow:0 0 20px rgba(0,212,255,0.4), inset 0 0 10px rgba(0,212,255,0.15);
z-index:1000;
animation: auditionFadeIn 1.5s ease forwards;
opacity:0;
}

@keyframes auditionFadeIn{
from{ opacity:0; transform:translate(-20px,-50%);}
to{ opacity:1; transform:translate(0,-50%);}
}

/* ================= HERO ================= */
.hero{
min-height:70vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px 20px 50px 20px;
}

.hero h1{
font-size:60px;
color:var(--neon-soft);
text-shadow:0 0 15px var(--neon-main),0 0 40px var(--neon-main);
}

.hero p{
max-width:700px;
opacity:0.9;
line-height:1.6;
}

/* ================= EVENTS HERO ================= */
.events-hero{
min-height:28vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px 20px 30px 20px;
}

.events-hero h1{
font-size:48px;
color:var(--neon-soft);
text-shadow:0 0 12px var(--neon-main),0 0 30px var(--neon-main);
}

/* ================= BUTTON ================= */
.main-btn{
display:inline-block;
margin-top:25px;
padding:14px 40px;
background:transparent;
border:2px solid var(--neon-main);
color:var(--neon-main);
text-decoration:none;
font-weight:bold;
border-radius:40px;
transition:0.3s;
}

.main-btn:hover{
background:var(--neon-main);
color:#001020;
box-shadow:0 0 25px var(--neon-main);
}

/* ================= EVENTS GRID ================= */
.events-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px;
padding:80px 40px;
}

/* ================= EVENT CARD ================= */
.event-card{
background:rgba(0,15,40,0.65);
backdrop-filter:blur(14px);
border:1px solid rgba(0,212,255,0.35);
border-radius:18px;
overflow:hidden;
text-decoration:none;
color:white;
transition:0.35s;
}

.event-card img{
width:100%;
height:220px;
object-fit:cover;
}

.event-card h3{
padding:18px;
font-size:20px;
color:var(--neon-soft);
text-shadow:0 0 10px var(--neon-main);
}

.event-card:hover{
transform:translateY(-12px) scale(1.02);
border:1px solid var(--neon-main);
box-shadow:
0 0 25px rgba(0,212,255,0.6),
0 0 50px rgba(0,212,255,0.3);
}

/* ================= EVENT PAGE ================= */
.event-page{
min-height:80vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:60px 20px 40px 20px;
}

/* ================= QR ================= */
.qr-img{
display:block;
margin:25px auto;
width:220px;
border-radius:12px;
box-shadow:0 0 20px rgba(0,212,255,0.4);
}

/* ================= FOOTER ================= */
.main-footer{
background:rgba(0,0,20,0.85);
backdrop-filter:blur(12px);
padding:70px 40px 20px;
border-top:1px solid rgba(0,212,255,0.2);
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:40px;
}

.footer-grid h3{
color:var(--neon-main);
}

.footer-bottom{
text-align:center;
margin-top:40px;
opacity:0.6;
font-size:14px;
}

/* ================= MOBILE AUDITION SYSTEM ================= */

#auditionToggle{ display:none; }

.audition-btn{
display:none;   /* hidden by default (desktop) */
position:fixed;
left:15px;
bottom:10px;
background:rgba(0,15,40,0.9);
border:1px solid var(--neon-main);
color:var(--neon-soft);
padding:12px 18px;
border-radius:30px;
font-weight:600;
cursor:pointer;
box-shadow:0 0 18px rgba(0,212,255,0.4);
z-index:3000;
}

.audition-panel{
display:none;   /* hidden by default (desktop) */
position:fixed;
left:-320px;
top:-25px;
width:250px;
height:100vh;
background:rgba(0,10,30,0.95);
backdrop-filter:blur(15px);
border-right:1px solid var(--neon-main);
padding:80px 25px;
transition:0.45s ease;
z-index:3001;
}

#auditionToggle:checked ~ .audition-panel{
left:0;
}

/* ================= MOBILE ================= */
@media(max-width:768px){

.top-header{
flex-direction:column;
gap:10px;
padding:15px 20px;
}

.clg-logo{ height:50px; }
.sparsh-title{ font-size:24px; }

.hero h1{ font-size:36px; }

.events-grid{
grid-template-columns:1fr;
padding:40px 20px;
}

.footer-grid{
grid-template-columns:1fr;
text-align:center;
}

.float-date{
right:15px;
bottom:80px;
padding:12px 14px;
}

/* MOBILE SWITCH */
.float-audition{ display:none; }

.audition-btn{ display:block; }
.audition-panel{ display:block; }

}