body{
margin:0;
text-align:center;
background:radial-gradient(circle,#ffb347,#ff0066,#3a003a);
color:white;
font-family:Segoe UI,sans-serif;
overflow-x:hidden;
}

.top-logo{
width:170px;
margin:25px auto 10px;
display:block;
filter:drop-shadow(0 0 20px gold);
animation:pulse 2s infinite alternate;
}

.led-banner{
background:black;color:gold;
padding:10px;font-weight:bold;
letter-spacing:2px;
text-shadow:0 0 15px gold;
}

.container{padding:15px}

.title{text-shadow:0 0 25px orange}
.sub{color:#ddd}

.welcome-msg{
font-size:20px;
margin:15px;
color:#ffe066;
animation:fade 2s infinite alternate;
}

.countdown-box{
border:2px solid gold;
border-radius:15px;
padding:15px;
margin:15px;
box-shadow:0 0 25px gold;
background:rgba(0,0,0,.3);
}

.music-btn{
position:fixed;
bottom:15px;
right:15px;
padding:10px 22px;
border:none;
border-radius:20px;
background:gold;
color:black;
font-weight:bold;
box-shadow:0 0 15px gold;
cursor:pointer;
z-index:100;
}



.reveal-btn{
padding:14px 30px;
border:none;border-radius:30px;
background:linear-gradient(45deg,orange,red);
color:white;font-size:18px;
box-shadow:0 0 25px orange;
cursor:pointer;
transition:.3s;
}
.reveal-btn:hover{transform:scale(1.1)}

.date-box{
margin:15px;
padding:15px;
border:2px solid gold;
border-radius:15px;
font-size:24px;
box-shadow:0 0 30px gold;
}
.hidden{display:none}

.dept-board{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
margin:15px;
}

.dept-board button{
background:#7a003a;
border:2px solid gold;
color:white;
padding:12px 22px;
border-radius:30px;
font-size:16px;
cursor:pointer;
box-shadow:0 0 15px gold;
transition:.5s;
}

.dept-board button.active{
background:gold;
color:#600;
transform:rotate(360deg) scale(1.2);
}

.pongal-art img{
width:260px;
margin:20px 0;
animation:float 2.5s infinite alternate;
}

.diya-area{
display:flex;
justify-content:center;
gap:15px;
}

.diya-area img{
width:60px;
animation:float 2s infinite alternate;
}

.kolam{
width:240px;
margin:20px auto;
display:block;
opacity:.4;
animation:spin 30s linear infinite;
}

/* Animations */
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes fade{from{opacity:.6}to{opacity:1}}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-15px)}}

/* DJ Beat Lights */
.beat-overlay{
position:fixed;
inset:0;
background:radial-gradient(circle at center,rgba(255,200,0,.2),transparent);
animation:beatflash 0.6s infinite alternate;
pointer-events:none;
z-index:1;
}

@keyframes beatflash{
from{opacity:.2}
to{opacity:.7}
}

/* Fire Sparks */
.spark{
position:fixed;
bottom:0;
width:4px;
height:10px;
background:gold;
animation:spark 1.2s linear infinite;
border-radius:5px;
}
@keyframes spark{
to{transform:translateY(-110vh);opacity:0}
}

/* Title Beat Bounce */
.title{
animation:beatBounce .6s infinite alternate;
}
@keyframes beatBounce{
from{transform:scale(1)}
to{transform:scale(1.05)}
}

/* Kolam glow */
.kolam{
filter:drop-shadow(0 0 20px gold);
}

@keyframes spin{to{transform:rotate(360deg)}}

/* Intro Screen */
.intro-screen{
position:fixed;
inset:0;
background:black;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:999;
animation:introFade 5s forwards;
}

.thalapathy-silhouette{
width:260px;
filter:drop-shadow(0 0 40px gold);
animation:silPulse 1.2s infinite alternate;
}

.fire-name{
margin-top:20px;
font-size:42px;
color:orange;
letter-spacing:6px;
font-weight:bold;
text-shadow:0 0 20px red,0 0 40px orange;
animation:fireGlow 1s infinite alternate;
}

@keyframes silPulse{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes fireGlow{from{opacity:.6}to{opacity:1}}
@keyframes introFade{0%{opacity:1}100%{opacity:0;pointer-events:none}}



/* Intro Screen */
.intro-screen{
position:fixed;
inset:0;
background:black;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:999;
animation:introFade 5s forwards;
}

.thalapathy-silhouette{
width:260px;
filter:drop-shadow(0 0 40px gold);
animation:silPulse 1.2s infinite alternate;
}

.fire-name{
margin-top:20px;
font-size:42px;
color:orange;
letter-spacing:6px;
font-weight:bold;
text-shadow:0 0 20px red,0 0 40px orange;
animation:fireGlow 1s infinite alternate;
}

@keyframes silPulse{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes fireGlow{from{opacity:.6}to{opacity:1}}
@keyframes introFade{0%{opacity:1}100%{opacity:0;pointer-events:none}}
@keyframes smokeFloat{
from{letter-spacing:2px;opacity:.5}
to{letter-spacing:6px;opacity:1}
}