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

body{
background:#0F0B0A;
color:#E8E2D9;
font-family:Inter, sans-serif;
overflow-x:hidden;
}



/* LOADER */

#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#050505;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.loader-content{
text-align:center;
}

.loader-logo{
width:500px;
animation:logoIntro 4s ease forwards;
}

.loader-tagline{
margin-top:30px;
font-size:16px;
letter-spacing:4px;
color:#777;
text-transform:uppercase;
opacity:0;
animation:taglineFade 3s ease forwards;
animation-delay:1s;
}

@keyframes logoIntro{

0%{opacity:0; transform:scale(.85);}
20%{opacity:1; transform:scale(1.08);}
40%{transform:scale(1);}
70%{transform:scale(1.03);}
100%{transform:scale(1);}

}

@keyframes taglineFade{
from{opacity:0}
to{opacity:.7}
}



/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
position:fixed;
top:0;
width:100%;
background:transparent;
z-index:100;
}

.nav-logo{
width:60px;
}

nav a{
margin-left:30px;
text-decoration:none;
color:#E8E2D9;
font-size:14px;
letter-spacing:1px;
transition:.3s;
}

nav a:hover{
color:#49D4D0;
}



/* HERO */

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

.hero-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}

.hero-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
z-index:1;
}

.hero-center{
position:relative;
z-index:2;
text-align:center;
margin-top:-40px;
}

.hero-logo{
width:484px;
opacity:0.9;
animation:logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat{
0%{transform:translateY(0px);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0px);}
}



/* SCROLL DOWN BUTTON */

.scroll-down{
position:absolute;
bottom:40px;
right:40px;
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:white;
border-radius:12px;
background:rgba(0,0,0,0.55);
box-shadow:
0 8px 20px rgba(0,0,0,0.6),
0 0 10px rgba(255,255,255,0.05);
cursor:pointer;
transition:all .25s ease;
z-index:5;

}

.scroll-down:hover{
transform:translateY(4px);
background:rgba(0,0,0,0.75);
}

.scroll-down{
animation:scrollGlow 2s infinite alternate;
}

@keyframes scrollGlow{
from{box-shadow:0 6px 14px rgba(0,0,0,0.6);}
to{box-shadow:0 10px 26px rgba(0,0,0,0.7),0 0 12px rgba(255,255,255,0.1);}
}

/* GENERAL SECTION SPACING */

section{
padding:160px 12%;
}



/* ABOUT */

.about{
text-align:center;
}

.about h2{
font-family:Cinzel, serif;
color:#B88A4A;
margin-bottom:20px;
}

.about p{
max-width:700px;
margin:auto;
line-height:1.7;
}



/* FILMS */

.films{
padding:120px 10%;
}

.films h2{
text-align:center;
font-family:Cinzel, serif;
margin-bottom:50px;
color:#B88A4A;
}

#film-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:40px;
}

.film-card{
position:relative;
cursor:pointer;
overflow:hidden;
border-radius:6px;
}

.film-card img{
width:100%;
height:420px;
object-fit:cover;
transition:transform .6s ease;
}

.film-card:hover img{
transform:scale(1.12);
}

.film-info{
position:absolute;
bottom:0;
padding:24px;
width:100%;
background:linear-gradient(transparent, rgba(0,0,0,.9));
}



/* TRAILER MODAL */

#trailer-modal{
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.95);
display:none;
justify-content:center;
align-items:center;
z-index:999;
}

.trailer-container{
width:80%;
max-width:900px;
position:relative;
}

#closeTrailer{
position:absolute;
right:10px;
top:-30px;
cursor:pointer;
font-size:28px;
color:white;
}

video{
width:100%;
border-radius:6px;
}



/* AWARDS */

.awards{
text-align:center;
padding:120px;
}

.awards h2{
font-family:Cinzel, serif;
color:#B88A4A;
margin-bottom:40px;
}

.award-grid{
display:flex;
justify-content:center;
gap:60px;
flex-wrap:wrap;
}

.award-grid img{
width:120px;
opacity:0.8;
transition:.3s;
}

.award-grid img:hover{
opacity:1;
transform:scale(1.05);
}



/* CONTACT */

.contact{
padding:120px;
text-align:center;
}

.contact h2{
font-family:Cinzel;
margin-bottom:20px;
}



/* FOOTER */

footer{
padding:40px;
text-align:center;
color:#B88A4A;
font-size:14px;
}