/* ===============================
   V15 ULTRA PREMIUM STYLE
================================= */

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:#050505;
  color:#fff;
  overflow-x:hidden;
  line-height:1.6;
}

/* CONTAINER */
.container{
  width:92%;
  max-width:1400px;
  margin:auto;
}

/* BACKGROUND */
#particles{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
  radial-gradient(circle at 20% 20%, rgba(255,190,60,.18), transparent 30%),
  radial-gradient(circle at 80% 10%, rgba(255,170,0,.12), transparent 30%),
  radial-gradient(circle at 50% 80%, rgba(255,220,120,.10), transparent 35%),
  linear-gradient(135deg,#040404,#0c0c0c,#050505);
  animation:bgmove 12s ease-in-out infinite alternate;
}

@keyframes bgmove{
  0%{transform:scale(1) translateY(0);}
  100%{transform:scale(1.06) translateY(-10px);}
}

/* LOADER */
#loader{
  position:fixed;
  inset:0;
  background:#000;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
}

.loader-ring{
  width:70px;
  height:70px;
  border:3px solid rgba(255,255,255,.15);
  border-top:3px solid gold;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

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

#loader h2{
  color:gold;
  letter-spacing:4px;
}

/* NAVBAR */
.navbar{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(12px);
  background:rgba(0,0,0,.55);
  border-bottom:1px solid rgba(255,215,0,.15);
}

.nav-wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
}

.logo{
  color:#fff;
  text-decoration:none;
  font-size:24px;
  font-weight:700;
  letter-spacing:2px;
}

.menu{
  display:flex;
  list-style:none;
  gap:30px;
}

.menu a{
  color:#ddd;
  text-decoration:none;
  transition:.3s;
  font-size:15px;
}

.menu a:hover,
.menu a.active{
  color:gold;
}

/* BUTTONS */
.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:50px;
  text-decoration:none;
  transition:.3s;
  font-weight:700;
}

.btn.gold{
  background:linear-gradient(135deg,#ffd54a,#ffb300);
  color:#000;
}

.btn.gold:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(255,180,0,.25);
}

.btn.dark{
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}

.btn.dark:hover{
  background:#111;
}

/* HERO */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:80px 0;
}

.hero-wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center;
}

.tagline{
  display:inline-block;
  color:gold;
  margin-bottom:15px;
  letter-spacing:1px;
}

.hero h1{
  font-size:72px;
  line-height:1.05;
  margin-bottom:10px;
}

.hero h1 span{
  color:gold;
}

.hero h3{
  font-size:28px;
  color:#ddd;
  margin-bottom:18px;
}

.hero p{
  color:#bbb;
  max-width:620px;
  margin-bottom:30px;
}

.hero-buttons{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin-bottom:35px;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.stat-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,215,0,.12);
  padding:20px;
  border-radius:18px;
  text-align:center;
}

.stat-box h2{
  color:gold;
  font-size:34px;
}

.hero-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,215,0,.15);
  border-radius:30px;
  padding:14px;
  box-shadow:0 25px 60px rgba(0,0,0,.45);
}

.hero-card img{
  width:100%;
  border-radius:22px;
  display:block;
}

/* SECTION */
.section{
  padding:100px 0;
}

.title-wrap{
  text-align:center;
  margin-bottom:50px;
}

.title-wrap h2{
  font-size:48px;
}

.title-wrap span{
  color:gold;
}

.title-wrap p{
  color:#aaa;
  margin-top:10px;
}

/* GRID */
.grid-2,
.grid-3{
  display:grid;
  gap:30px;
}

.grid-2{
  grid-template-columns:repeat(2,1fr);
}

.grid-3{
  grid-template-columns:repeat(3,1fr);
}

/* CARD */
.card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,215,0,.12);
  border-radius:22px;
  overflow:hidden;
  transition:.35s;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 35px rgba(0,0,0,.35);
}

.card-info{
  padding:24px;
}

.card-info h3{
  margin-bottom:10px;
}

.card-info p{
  color:#aaa;
}

/* VIDEO */
.video-box iframe,
.slide-card iframe{
  width:100%;
  height:260px;
  border:none;
}

/* WORK SLIDER */
.slider-wrap{
  position:relative;
}

.work-slider{
  display:flex;
  gap:25px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:10px 50px;
}

.work-slider::-webkit-scrollbar{
  display:none;
}

.slide-card{
  min-width:420px;
  background:#111;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,215,0,.1);
}

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:gold;
  color:#000;
  font-size:24px;
  cursor:pointer;
  z-index:5;
}

.arrow.left{left:0;}
.arrow.right{right:0;}

/* CTA */
.cta-box{
  text-align:center;
  padding:60px;
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,190,0,.10),rgba(255,255,255,.02));
  border:1px solid rgba(255,215,0,.12);
}

.cta-box h2{
  font-size:46px;
  margin-bottom:15px;
}

.cta-box p{
  color:#bbb;
  margin-bottom:25px;
}

/* FOOTER */
footer{
  text-align:center;
  padding:35px 15px;
  color:#777;
  border-top:1px solid rgba(255,255,255,.06);
}

/* MUSIC BUTTON */
#musicToggle{
  position:fixed;
  bottom:25px;
  right:25px;
  z-index:200;
  width:55px;
  height:55px;
  border:none;
  border-radius:50%;
  background:gold;
  cursor:pointer;
  font-size:20px;
}

/* RESPONSIVE */
@media(max-width:1100px){

.hero-wrap{
  grid-template-columns:1fr;
}

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

.grid-3{
  grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.menu{
  gap:14px;
  flex-wrap:wrap;
}

.hero{
  padding-top:50px;
}

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

.hero h3{
  font-size:22px;
}

.title-wrap h2{
  font-size:34px;
}

.grid-2,
.grid-3,
.stats{
  grid-template-columns:1fr;
}

.slide-card{
  min-width:90%;
}

.cta-box{
  padding:35px 20px;
}

.cta-box h2{
  font-size:30px;
}

}
.work-gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:40px;
}

.work-item{
background:#111;
border:1px solid rgba(255,196,0,.25);
border-radius:18px;
overflow:hidden;
box-shadow:0 0 25px rgba(255,196,0,.08);
transition:.35s ease;
}

.work-item:hover{
transform:translateY(-8px);
box-shadow:0 0 35px rgba(255,196,0,.18);
}

.work-item img{
width:100%;
height:260px;
object-fit:cover;
display:block;
}

@media(max-width:992px){
.work-gallery{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
.work-gallery{grid-template-columns:1fr;}
.work-item img{height:230px;}
}
/* ===============================
POSTER DESIGNS GRID ADD THIS AT END
================================= */

.poster-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
margin-top:40px;
}

.poster-item{
display:block;
background:#111;
border:1px solid rgba(255,196,0,.22);
border-radius:18px;
overflow:hidden;
box-shadow:0 0 24px rgba(255,196,0,.08);
transition:.35s ease;
}

.poster-item:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 0 38px rgba(255,196,0,.18);
border-color:rgba(255,215,0,.45);
}

.poster-item img{
width:100%;
height:430px;
object-fit:cover;
display:block;
}

/* tablet */
@media(max-width:1100px){
.poster-grid{
grid-template-columns:repeat(2,1fr);
}
}

/* mobile */
@media(max-width:600px){
.poster-grid{
grid-template-columns:1fr;
}
.poster-item img{
height:auto;
}
}
/* ===============================
V15.5 PREMIUM ANIMATION PACK
================================= */

/* Smooth Fade Up */
.reveal{
opacity:0;
transform:translateY(60px);
transition:1s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

/* Cards Hover Premium */
.card,
.work-item,
.poster-item,
.stat-box{
transition:.4s ease;
}

.card:hover,
.work-item:hover,
.poster-item:hover,
.stat-box:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(255,180,0,.14);
}

/* Button Glow */
.btn{
position:relative;
overflow:hidden;
}

.btn::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-25deg);
transition:.8s;
}

.btn:hover::after{
left:140%;
}

/* Logo pulse */
.logo{
animation:glowLogo 3s infinite ease-in-out;
}

@keyframes glowLogo{
0%,100%{text-shadow:0 0 0 transparent;}
50%{text-shadow:0 0 18px rgba(255,215,0,.45);}
}

/* Floating Hero Image */
.hero-card{
animation:floatHero 5s ease-in-out infinite;
}

@keyframes floatHero{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-12px);}
}

/* Section Title Animation */
.title-wrap h2{
animation:titleFade 1.2s ease;
}

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

/* Scrollbar Premium */
::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#050505;
}

::-webkit-scrollbar-thumb{
background:gold;
border-radius:20px;
}
/* ===============================
V16 GOD MODE STYLE
================================= */

/* Progress Bar */
#progressBar{
position:fixed;
top:0;
left:0;
height:3px;
width:0%;
background:linear-gradient(90deg,gold,#ffb300,#fff0a0);
z-index:9999;
box-shadow:0 0 18px gold;
}

/* Hero Text Shine */
.hero h1{
background:linear-gradient(90deg,#fff,#ffd54a,#fff,#ffb300,#fff);
background-size:300% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:textShine 6s linear infinite;
}

@keyframes textShine{
0%{background-position:0%;}
100%{background-position:300%;}
}

/* Cursor Trail */
.cursor-dot{
position:fixed;
width:10px;
height:10px;
border-radius:50%;
background:rgba(255,215,0,.75);
pointer-events:none;
z-index:9999;
filter:blur(2px);
}

/* Card 3D */
.card,
.poster-item,
.work-item{
transform-style:preserve-3d;
transition:transform .25s ease, box-shadow .25s ease;
}

/* Ambient Glow Orb */
#ambientGlow{
position:fixed;
width:420px;
height:420px;
border-radius:50%;
background:radial-gradient(circle, rgba(255,200,0,.12), transparent 70%);
top:10%;
left:5%;
filter:blur(20px);
z-index:-1;
animation:orbMove 12s ease-in-out infinite alternate;
}

@keyframes orbMove{
0%{transform:translate(0,0);}
100%{transform:translate(70vw,55vh);}
}

/* Page Fade */
body{
animation:pageIn .8s ease;
}

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