@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

:root {
    --bg: #0a0800; 
    --accent: #ffcc00; 
    --accent-glow: rgba(255, 204, 0, 0.4);
    --glass: rgba(255, 204, 0, 0.05);
    --border: rgba(255, 204, 0, 0.15);
    --text: #ffffff;
}

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background: var(--bg); font-family: 'Inter', sans-serif;
    color: var(--text); overflow-x: hidden;
}

/* --- ANIMATED GOLDEN NEON SKY --- */
body::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: 
        radial-gradient(circle at 15% 30%, rgba(255, 170, 0, 0.12), transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(255, 204, 0, 0.08), transparent 45%);
    z-index: -2; animation: skyShift 15s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes skyShift {
    0% { transform: scale(1); filter: hue-rotate(0deg); }
    100% { transform: scale(1.1); filter: hue-rotate(-10deg); }
}

/* --- LIQUID CANVAS & POPUP --- */
#waterCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.popup-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 9999; backdrop-filter: blur(10px);
    justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease;
}
.popup-content {
    background: rgba(10, 8, 0, 0.95); border: 2px solid #ffcc00; padding: 40px; 
    border-radius: 20px; max-width: 450px; text-align: center; 
    box-shadow: 0 15px 50px rgba(255,204,0,0.3); position: relative; 
    transform: translateY(50px); transition: transform 0.5s ease; width: 90%;
}
.popup-close {
    position: absolute; top: 15px; right: 20px; background: transparent; 
    border: none; color: #ffcc00; font-size: 2rem; cursor: pointer; line-height: 1;
}
.popup-close:hover { color: #fff; transform: scale(1.1); }

/* --- HEADER & MARQUEE --- */
header {
    padding: 20px 5%; display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(20px); 
    background: rgba(10, 8, 0, 0.7); border-bottom: 1px solid var(--border);
}
.logo {
    font-size: 2.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px;
    background: linear-gradient(90deg, #ffaa00, #ffea00, #ffaa00);
    background-size: 200%; -webkit-background-clip: text; color: transparent;
    animation: flow 3s linear infinite; text-decoration: none;
    filter: drop-shadow(0 0 10px var(--accent-glow));
}
@keyframes flow { 0% { background-position: 0%; } 100% { background-position: 200%; } }
@keyframes tickerMove { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* --- SLIDER --- */
.slider-container { width: 100%; height: 65vh; min-height: 450px; position: relative; overflow: hidden; background: #000; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s; display: flex; align-items: flex-end; }
.slide.active { opacity: 1; visibility: visible; z-index: 5; }
.slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.5; transform: scale(1); transition: transform 10s linear; }
.slide.active .slide-bg { transform: scale(1.15); }
.slide-content { position: relative; z-index: 10; padding: 80px 5%; background: linear-gradient(to top, var(--bg), transparent); width: 100%; transform: translateY(30px); opacity: 0; transition: 0.8s ease-out 0.4s; }
.slide.active .slide-content { transform: translateY(0); opacity: 1; }

/* --- GRIDS & CARDS --- */
.category-section { padding: 0 5%; margin-top: 50px; }
.category-title { border-left: 5px solid var(--accent); padding-left: 15px; margin-bottom: 25px; text-transform: uppercase; font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 10px var(--accent-glow); }
.small-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }

.movie-card {
    background: var(--glass); border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; transition: 0.4s; text-decoration: none; position: relative;
    opacity: 0; transform: translateY(20px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); display: flex; flex-direction: column;
}
.movie-card.show { opacity: 1; transform: translateY(0); }
.movie-card:hover { transform: scale(1.05) translateY(-5px); border-color: var(--accent); box-shadow: 0 10px 30px var(--accent-glow); z-index: 10; }
.movie-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; flex-grow: 1; }
.card-info { padding: 12px 10px; text-align: center; background: rgba(10, 8, 0, 0.95); border-top: 1px solid rgba(255, 204, 0, 0.2); }

/* --- UI BUTTONS & BANNER --- */
.nav-btn { padding: 12px 24px; border-radius: 30px; background: var(--glass); border: 1px solid var(--border); color: #fff; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.3s; outline: none; text-decoration: none; display: inline-block; }
.nav-btn.active, .nav-btn:hover { background: var(--accent); color: #000; box-shadow: 0 0 15px var(--accent-glow); }
.dl-btn-gold {
    background: linear-gradient(90deg, #ffcc00, #ffaa00); color: #000 !important;
    padding: 20px 50px; border-radius: 50px; font-weight: 900; font-size: 1.2rem;
    text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 10px 30px rgba(255, 204, 0, 0.3);
    border: 2px solid #ffea00; display: inline-block; text-decoration: none; transition: 0.3s;
}
.dl-btn-gold:hover { transform: scale(1.05) translateY(-5px); box-shadow: 0 15px 40px rgba(255, 204, 0, 0.6); }

@media (max-width: 768px) {
    .banner-flex { flex-direction: column; align-items: center; text-align: center; }
    .banner-flex img { margin-bottom: 20px; }
    header { flex-direction: column; gap: 15px; }
}