/* Vinayak Studio Website Styles */

:root {
    /* ===== COLOR SYSTEM (KnotsbyAMP-Inspired) ===== */
    --primary-text: #2c2c2c;
    --accent-gold: #c5a059;
    --bg-cream: #EBE6E1;
    /* Cooler, more editorial cream */
    --bg-white: #ffffff;
    --bg-beige: #f0ebe3;
    --bg-taupe: #A89B8D;
    /* KnotsbyAMP taupe band */
    --coffee-light: #a89f91;
    --coffee-dark: #1a1512;
    --bg-dark: #222222;
    /* Charcoal for buttons/footer */
    --btn-dark: #222222;
    --btn-pill-radius: 50px;
    --text-muted: #6b6b6b;

    /* ===== TYPOGRAPHY ===== */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-editorial: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Montserrat', sans-serif;
    --font-display: 'Great Vibes', cursive;

    /* --- Z-INDEX SCALE --- */
    --z-base: 1;
    --z-hero-ui: 10;
    --z-nav: 1000;
    --z-nav-mob: 1100;
    --z-float: 2000;
    --z-modal: 3000;
    --z-modal-content: 3100;
    --z-lightbox: 11000;
    --z-lightbox-ui: 11100;
    --z-img-lightbox: 12000;
    /* highest priority - above Netflix modal (10000) */
}

/* =========================================
   🔘 GLOBAL LUXURY BUTTON SYSTEM
========================================= */

/* 1. THE PRIMARY BUTTON (Solid Dark) 
   Used for: Narrative Section (.btn-pill), Contact Form (.c-btn) */
.btn-pill,
.c-btn {
    background: var(--coffee-dark);
    color: #ffffff;
    border: 1px solid var(--coffee-dark);
    padding: 15px 44px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: auto;
}

/* Contact form specific fix */
.contact-form .c-btn {
    width: 100%;
}

.btn-pill:hover,
.c-btn:hover {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #050505;
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(197, 160, 89, 0.3);
}

/* 2. THE SECONDARY BUTTON (Glass & Gold)
   Used for: Hero Section (.cta-button), Cinematic Films (.film-btn) */
.cta-button,
.film-btn {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(197, 160, 89, 0.6);
    color: #ffffff;
    padding: 14px 38px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s ease;
    text-decoration: none;
    display: inline-block;
}

.cta-button:hover,
.film-btn:hover {
    background: var(--accent-gold);
    color: #050505 !important;
    border-color: var(--accent-gold);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(197, 160, 89, 0.4);
}


html {
    height: 100%;
    scroll-behavior: smooth;
}

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

body {
    font-family: var(--font-editorial);
    font-size: 1.05rem;
    background: var(--bg-cream);
    color: var(--primary-text);
    overflow-x: hidden;
    letter-spacing: 0.01em;

    /* Layout structure */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* --- NAVIGATION --- */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: var(--z-nav);
    transition: all 0.4s ease;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    --nav-color: #fff;
}

nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 10px 5%;
    --nav-color: var(--coffee-dark);
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    pointer-events: auto;
}

.logo-badge {
    width: 55px;
    height: 55px;
    border: 2px solid var(--nav-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: 0.4s;
    background: rgba(255, 255, 255, 0.05);
}

.logo-main-char {
    font-family: 'Great Vibes', cursive;
    font-size: 2.2rem;
    color: var(--nav-color);
    margin-top: 5px;
    transition: 0.4s;
}

.logo-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--nav-color);
    letter-spacing: 1px;
    line-height: 1;
    transition: 0.4s;
}

.logo-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    color: var(--accent-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 3px;
    font-weight: 600;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
}

.nav-links li a {
    text-decoration: none;
    color: var(--nav-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: 0.3s;
}

.nav-links li a:hover {
    color: var(--accent-gold);
}

.nav-btn {
    border: 1px solid var(--accent-gold);
    padding: 8px 20px;
    color: var(--accent-gold) !important;
    transition: 0.3s;
    background: transparent;
    font-weight: bold;
    font-size: 0.75rem;
}

.nav-btn:hover {
    background: var(--accent-gold);
    color: white !important;
}

/* --- UPDATED HERO SECTION --- */
.hero {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 🤎 Luxury Brown Gradient (Fallback when video loads) */
    background: radial-gradient(circle, #2c1e16 0%, #050505 100%);
}

/* Background Video Styling */
.hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ye important hai */
    z-index: 1;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

/* Dark Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
}

/* Content on top of video */
.hero-content {
    position: relative;
    z-index: 20;
    /* Increased to be safely above video and overlay */
    text-align: center;
}

/* Hero eyebrow + tagline */
.hero-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 12px !important;
    margin-top: 0 !important;
}

.hero-tagline {
    font-family: var(--font-editorial);
    font-size: 1.05rem;
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 0.80);
    letter-spacing: 1px;
    margin-top: 6px !important;
    margin-bottom: 28px !important;
}

.hero h1 {
    font-family: var(--font-serif);
    font-size: 5rem;
    font-style: normal;
    margin-top: 10px;
    color: #ffffff;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    font-weight: 500;
    line-height: 1.1;
}

.hero h1 em {
    font-style: italic;
    font-weight: 400;
}

.hero p {
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-gold);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    margin-bottom: 5px;
}

.hero-curve {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: calc(var(--z-hero-ui) + 1);
    background: var(--bg-cream);
    clip-path: ellipse(60% 100% at 50% 100%);
}

/* ===== SECTION-HEAD EM UNDERLINE (KnotsbyAMP accent) ===== */
.section-head em {
    font-style: italic;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-color: var(--accent-gold);
}

/* ===== SCROLL FADE-UP ANIMATION ===== */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ===== NARRATIVE ABOUT SECTION (KnotsbyAMP-style editorial) ===== */
.narrative-section {
    background: var(--bg-cream);
    padding: 100px 10%;
    text-align: center;
}

.narrative-section .section-sub {
    display: block;
    margin-bottom: 30px;
}

.narrative-body {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 2;
    color: var(--text-muted);
    max-width: 860px;
    margin: 0 auto 20px auto;
}


/* Keep about-section for backward compat but hide it if narrative-section used */
.about-section {
    padding: 80px 10%;
    background: var(--bg-cream);
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.about-text {
    flex: 1;
    min-width: 300px;
}

/* =========================================
   📸 THE LUXURY ARTIST PORTRAIT
========================================= */
.about-image {
    flex: 1;
    min-width: 300px;
    height: 500px;
    /* Thoda lamba (tall) kiya taaki portrait elegant lage */
    background: url('assets/images/about-me.jpg') center/cover no-repeat;
    border-radius: 250px 250px 0 0;
    /* Perfect Dome/Arch shape */

    /* Soft Cinematic Shadow instead of hard block */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);

    /* Ek bohot hi patla golden border frame ke liye */
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-bottom: none;

    filter: grayscale(100%);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-image:hover {
    filter: grayscale(0%);
    transform: translateY(-10px);
    /* Hover par golden glow aur deep shadow */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), 0 0 40px rgba(197, 160, 89, 0.15);
    border-color: rgba(197, 160, 89, 0.6);
}


.section-sub {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-gold);
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 15px;
    display: block;
}

.section-head {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--primary-text);
    margin-bottom: 25px;
    line-height: 1.2;
}

.section-desc {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

.coffee-band {
    background: var(--bg-taupe);
    color: white;
    padding: 70px 5%;
    text-align: center;
    position: relative;
    margin-top: 0;
}

.coffee-band h2 {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-style: normal;
    font-weight: 400;
    margin: 0;
    letter-spacing: -0.3px;
    color: #fff;
}

.coffee-band h2 em {
    font-style: italic;
    font-weight: 300;
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.coffee-curve-top {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 41px;
    background: var(--bg-taupe);
    clip-path: ellipse(50% 100% at 50% 100%);
}

.motion-section {
    background: var(--bg-white);
    padding: 80px 5%;
}

.films-grid {
    display: flex;
    overflow-x: auto;
    gap: 25px;
    padding-bottom: 20px;
    scrollbar-width: none;
}

/* ===== FULL-BLEED PORTRAIT FILM CARDS (KnotsbyAMP style) ===== */
.film-card {
    flex: 0 0 340px;
    height: 510px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    background: #000;
}

.film-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.22);
    z-index: 10;
}

.film-card .film-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.65s ease;
    display: block;
}

.film-card:hover .film-thumb {
    transform: scale(1.04);
}

.film-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.72) 100%);
    z-index: 1;
    transition: opacity 0.4s ease;
}

.film-couple-name {
    position: absolute;
    bottom: 90px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: white;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
    z-index: 2;
    pointer-events: none;
}

.film-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    z-index: 3;
}

.film-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    z-index: 3;
}


.reels-strip {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    margin-top: 40px;
    scrollbar-width: none;
}

/* preview-vid: hidden video that auto-plays on hover for film/reel cards */
.preview-vid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 4;
    pointer-events: none;
}

.film-card:hover .preview-vid,
.reel-frame:hover .preview-vid {
    opacity: 1;
}

.reel-frame {
    flex: 0 0 220px;
    height: 390px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.reel-frame:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* =========================================
   🌊 STYLISH CURVY DIVIDER FOR INVITES
========================================= */
.invite-curve-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 5;
}

.invite-curve-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
    /* Curve ki height yahan se adjust karein */
}

.invite-curve-top .shape-fill {
    fill: #ffffff;
    /* Yeh upar wale section ka white color hai, isse blending perfect hogi */
}

.invite-section {
    background: var(--bg-cream);
    /* Light cream background */
    padding: 100px 5%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Update section text colors for the light background */
#invites .section-head {
    color: var(--primary-text);
}

#invites .section-desc {
    color: var(--text-muted);
}

/* Subtle star-field ambient glow behind the invite section */
.invite-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(197, 160, 89, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

/* Override section-head color inside dark invite section */
#invites .section-head {
    color: #fff;
}

#invites .section-desc {
    color: #999;
}


.invite-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    margin-top: 50px;
}

.phone-mockup {
    width: 250px;
    height: 500px;
    border: 10px solid #d1d1d1;
    border-radius: 35px;
    background: #000;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s ease;
    cursor: pointer;
}

.phone-mockup:hover {
    transform: translateY(-10px) scale(1.02);
}

.phone-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    color: white;
    background-size: cover;
    background-position: center;
    position: relative;
}

.screen-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    width: 100%;
    padding: 20px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 20px;
    background: #111;
    border-radius: 0 0 10px 10px;
    z-index: 10;
}

.invite-title {
    margin-top: 20px;
    font-family: 'Playfair Display';
    font-size: 1.1rem;
    color: var(--primary-text);
    font-weight: bold;
}

.gallery-section {
    background: var(--bg-white);
    padding: 80px 5%;
}

/* ===== GALLERY GRID: PINTEREST MASONRY (CLEAN & NO CROPPING) ===== */
.masonry-grid {
    display: block;
    columns: 3;
    column-gap: 16px;
    padding: 20px 0;
}

.m-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 16px;
    break-inside: avoid;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.m-item img {
    width: 100%;
    height: auto !important;
    /* 👈 Force natural height */
    display: block;
    object-fit: contain;
    /* 👈 Full image visible, no cropping */
    transition: transform 0.5s ease;
}

/* Mobile: 2 columns instead of 3 */
@media (max-width: 768px) {
    .masonry-grid {
        display: block;
        columns: 2;
        column-gap: 12px;
    }

    .m-item {
        margin-bottom: 12px;
    }
}


.m-item.selected-active {
    border: 3px solid #c5a059 !important;
    /* Royal Gold */
    /* Double shadow for a cinematic neon glow effect */
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.6), inset 0 0 10px rgba(197, 160, 89, 0.3);
    transform: scale(0.98);
    /* Select hone par photo thodi si andar dabegi */
    transition: all 0.3s ease;
}

.contact-section {
    display: flex;
    flex-wrap: wrap;
    background: var(--bg-cream);
    /* 🔥 FIX: Changed from bg-white to bg-cream to remove sharp edges */
    margin-top: 50px;
}

.contact-img {
    flex: 1;
    min-width: 400px;
    background: url('assets/images/contact-bg.jpg') center/cover;
    min-height: 500px;
    border-radius: 250px 250px 0 0;
    /* Arched dome shape */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    overflow: hidden;
    /* Ensures no bleed */
}

.contact-form {
    flex: 1;
    min-width: 400px;
    padding: 80px 8%;
    background: var(--bg-cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c-input {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    background: transparent;
    font-family: 'Montserrat';
    font-size: 0.95rem;
    margin-bottom: 30px;
    outline: none;
    transition: 0.3s;
}

.c-input:focus {
    border-bottom-color: var(--accent-gold);
}


/* --- CINEMATIC FOOTER STYLE --- */
footer {
    margin-top: auto;
    position: relative;
    padding: 80px 5% 30px 5%;
    color: #fff;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.95)), url('assets/images/about-me.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    footer {
        background-attachment: scroll;
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.footer-brand h2 {
    font-family: 'Great Vibes', cursive;
    font-size: 2.5rem;
    color: var(--accent-gold);
    margin: 0;
}

.footer-brand p {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: #888;
    text-transform: uppercase;
}

.footer-links-inline {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
}

.footer-links-inline a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.3s;
}

.footer-links-inline a:hover {
    color: var(--accent-gold);
}

.footer-contact a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    margin: 5px 0;
}

.footer-socials a {
    color: var(--accent-gold);
    font-size: 1.4rem;
    margin: 0 15px;
    transition: 0.3s;
}

.footer-socials a:hover {
    color: #fff;
    transform: translateY(-3px);
}

.copyright {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    color: #666;
    letter-spacing: 1px;
}

/* --- GHOST HAMBURGER & MOBILE NAV --- */
.hamburger {
    display: none;
}

.menu-close-btn {
    display: none;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 3rem;
    }

    .hamburger {
        display: block;
        position: fixed;
        top: 25px;
        right: 25px;
        z-index: var(--z-nav-mob);
        color: white;
        font-size: 1.8rem;
        background: transparent;
        padding: 10px;
        cursor: pointer;
        transition: opacity 0.5s ease, transform 0.3s ease;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        pointer-events: auto;
    }

    .hamburger.hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-20px);
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 80%;
        background: rgba(15, 12, 10, 0.98);
        background: rgba(15, 12, 10, 0.95);
        /* Fallback */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 35px;
        transform: translateX(100%);
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: calc(var(--z-nav-mob) - 1);
        border-left: 1px solid var(--accent-gold);
    }

    .nav-links.active {
        transform: translateX(0);
        pointer-events: auto;
    }

    .nav-links li a {
        color: #e0e0e0 !important;
        font-size: 1.4rem;
        font-family: 'Playfair Display';
    }

    .menu-close-btn {
        display: block;
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 2.5rem;
        color: white;
        cursor: pointer;
    }

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

    .footer-brand,
    .footer-contact {
        text-align: center;
    }

    .footer-contact a {
        display: inline-block;
        margin: 0 10px;
    }

    nav {
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    .logo-wrapper {
        pointer-events: auto;
    }
}

/* --- UTILS --- */
/* Luxury WhatsApp Float */
.whatsapp-float {
    position: fixed;
    width: 55px;
    height: 55px;
    bottom: 25px;
    right: 25px;
    background-color: #1a1a1a;
    /* Dark background matching footer */
    color: var(--accent-gold);
    /* Golden icon */
    border: 1px solid rgba(197, 160, 89, 0.4);
    /* Golden rim */
    border-radius: 50%;
    text-align: center;
    font-size: 28px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    z-index: var(--z-float);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.4s ease;
}

.whatsapp-float:hover {
    background-color: #25d366;
    /* Turns original green on hover */
    color: #ffffff;
    border-color: #25d366;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 15px 25px rgba(37, 211, 102, 0.4);
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.98);
    z-index: var(--z-lightbox);
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-lb {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    z-index: var(--z-lightbox-ui);
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 15px;
    border-radius: 50%;
}

#lbImg {
    max-width: 95%;
    max-height: 90vh;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 40px;
    cursor: pointer;
    padding: 20px;
    z-index: 6001;
    opacity: 0.7;
    transition: 0.3s;
}

.lb-arrow:hover {
    opacity: 1;
    color: var(--accent-gold);
}

.lb-prev {
    left: 0;
}

.lb-next {
    right: 0;
}

.lb-actions {
    position: absolute;
    bottom: 30px;
    display: flex;
    gap: 15px;
    z-index: var(--z-lightbox-ui);
}

.lb-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid white;
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    /* Fallback */
    backdrop-filter: blur(5px);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.lb-btn.selected {
    background: #e91e63;
    border-color: #e91e63;
}

.lb-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

#sendFloat {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: #e91e63;
    color: white;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 10px 30px rgba(233, 30, 99, 0.4);
    z-index: calc(var(--z-float) + 1);
    display: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}

/* ==========================================================
   🎬 THE VIP LOUNGE (Royal Vault – Premium Redesign)
   ========================================================== */

#client-lounge-section {
    background-color: var(--bg-cream);
    color: var(--primary-text);
    padding: 60px 20px;
}

/* 🏰 The Royal Lounge Header */
.lounge-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
    margin-bottom: 50px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    padding-bottom: 30px;
    animation: slideUp 0.8s ease forwards;
}

.lounge-welcome {
    flex: 1;
}

.logout-vault-btn {
    background: transparent;
    border: 1px solid #777;
    color: #777;
    padding: 10px 20px;
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.logout-vault-btn:hover {
    border-color: #e91e63;
    color: #e91e63;
    transform: translateY(-2px);
}

/* Grid Layout */
#client-lounge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 35px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 🃏 The Netflix Card Base - ENHANCED */
.event-card {
    position: relative;
    height: 450px;
    border-radius: 16px;
    background-size: 100%;
    /* Start slightly zoomed for hover effect */
    background-position: center;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(197, 160, 89, 0.1);
    animation: fadeIn 1s ease forwards;
    opacity: 0;
}

.event-card:hover {
    transform: translateY(-10px) scale(1.02);
    background-size: 110%;
    /* Zoom out slightly on hover for cinematic feel */
    z-index: 10;
    box-shadow: 0 20px 40px rgba(197, 160, 89, 0.25);
    border: 1px solid rgba(197, 160, 89, 1);
}

/* Entrance Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-out {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s ease;
    pointer-events: none;
}

.entrance-animate {
    animation: slideUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 25px 25px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: translateY(15px);
    transition: transform 0.4s ease;
}

.event-card:hover .card-content {
    transform: translateY(0);
}

.card-content h3 {
    color: #f9d77e;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin: 0;
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.photo-count {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
    /* Fallback */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Share Button – elegant */
.event-card .share-btn {
    background: rgba(255, 255, 255, 0.95);
    color: #128C7E;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin-top: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.event-card:hover .share-btn {
    opacity: 1;
    transform: translateY(0);
}

.event-card .share-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

@media (max-width: 768px) {
    #client-lounge-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }

    .card-content h3 {
        font-size: 1.4rem;
    }
}

#folderGrid {
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
}

/* Invitation Banner */
.invitation-banner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--coffee-dark), #2a1e18);
    padding: 15px 30px;
    border-radius: 50px;
    cursor: pointer;
    margin: 20px auto 30px auto;
    transition: all 0.3s ease;
    border: 1px solid var(--accent-gold);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* optional centered styling */
    margin-left: auto;
    margin-right: auto;
}


.invitation-banner:hover {
    transform: scale(1.02);
    background: var(--accent-gold);
    color: var(--coffee-dark);
    border-color: var(--coffee-dark);
}

.invitation-banner i {
    font-size: 2rem;
    color: var(--accent-gold);
}

.invitation-banner:hover i {
    color: var(--coffee-dark);
}

.invitation-banner span {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Ensure image lightbox appears above the folder gallery */
#imgLB {
    z-index: var(--z-img-lightbox) !important;
}

/* =========================================
   🎨 PREMIUM INVITATIONS: ASYMMETRIC BENTO GRID
========================================= */

/* 1. Light & Airy Background */
.invite-section {
    background: var(--bg-cream);
    padding: 100px 5%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.invite-section::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(197, 160, 89, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

#invites .section-head {
    color: var(--primary-text);
    position: relative;
    z-index: 2;
}

#invites .section-desc {
    color: var(--text-muted);
    position: relative;
    z-index: 2;
}

/* 2. THE BENTO GRID (The Ultimate Symmetry Fix) */
.premium-invites-grid {
    display: grid;
    /* Desktop: 2 perfect columns */
    grid-template-columns: repeat(2, 320px);
    justify-content: center;
    gap: 40px;
    padding: 20px 20px 50px 20px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    perspective: 1200px;
}

/* 3. Base Card Styling */
.premium-invite-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(197, 160, 89, 0.2);
    box-shadow: 0 10px 30px rgba(168, 155, 141, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    width: 100%;
    /* Adapts to grid column */
}

/* 4. Perfect Edge-to-Edge Image Fix (Kills Black Bars) */
.invite-card-image-wrapper {
    width: 100%;
    aspect-ratio: 9 / 16;
    /* Perfect Portrait lock */
    position: relative;
    overflow: hidden;
    background: #f5f2eb;
    /* Fallback color */
}

.invite-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    /* 🔥 Yeh line image ko bina khinche fit karti hai */
    object-position: center;
    transition: transform 0.8s ease;
}

/* 5. Teaser Card: Full Width Landscape */
.teaser-card {
    grid-column: 1 / -1;
    /* 🔥 Teaser card dono columns ke barabar failega */
    border: 1px solid rgba(168, 155, 141, 0.4);
    padding: 8px;
    /* Inner frame look for premium feel */
    border-radius: 16px;
}

.teaser-card .invite-card-image-wrapper {
    aspect-ratio: 21 / 9;
    /* Cinematic Ultra-wide ratio for teasers */
    border-radius: 8px;
}

/* =========================================
   ✨ HOVER EFFECTS & IDENTITIES
========================================= */

/* A. 2D Cinematic */
.premium-invite-card:nth-child(1) {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.premium-invite-card:nth-child(1):hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(197, 160, 89, 0.25);
}

/* B. 3D Immersive (Glass Shimmer & Tilt) */
.premium-invite-card:nth-child(2) {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
    transform-style: preserve-3d;
}

.premium-invite-card:nth-child(2):hover {
    transform: translateY(-10px) rotateX(8deg) rotateY(-6deg);
    box-shadow: 15px 25px 40px rgba(197, 160, 89, 0.2);
}

.premium-invite-card:nth-child(2)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: 0s;
    z-index: 10;
    pointer-events: none;
}

.premium-invite-card:nth-child(2):hover::after {
    left: 200%;
    transition: 0.8s ease-in-out;
}

/* C. Teaser Hover */
.teaser-card:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 35px rgba(26, 21, 18, 0.15);
}

/* Play Button & Overlays */
.invite-card-image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 21, 18, 0.15);
    opacity: 0;
    transition: 0.4s;
    z-index: 2;
}

.premium-invite-card:hover .invite-card-img {
    transform: scale(1.05);
}

.premium-invite-card:hover .invite-card-image-overlay {
    opacity: 1;
}

.invite-card-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    padding-left: 4px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 5;
}

.premium-invite-card:hover .invite-card-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(197, 160, 89, 0.4);
}

/* Text & Typography */
.invite-card-content {
    padding: 20px 15px;
    background: #ffffff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.invite-card-badge {
    background: rgba(197, 160, 89, 0.08);
    color: var(--accent-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
    border: 1px solid rgba(197, 160, 89, 0.2);
}

.invite-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--primary-text);
    margin-bottom: 6px;
    transition: color 0.3s;
}

.premium-invite-card:hover .invite-card-title {
    color: var(--accent-gold);
}

.invite-card-desc {
    color: var(--text-muted);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0 10px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .premium-invites-grid {
        grid-template-columns: 1fr;
        /* Mobile par sab ek ke niche ek aayenge */
        gap: 30px;
    }

    .teaser-card .invite-card-image-wrapper {
        aspect-ratio: 16 / 9;
        /* Mobile par normal landscape */
    }
}

/* =========================================
   🎬 THE PREMIERE ROOM (VIP CINEMATIC MODAL)
========================================= */
.premium-cine-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 2vh 2vw;
    box-sizing: border-box;
    animation: modalFadeIn 0.5s ease forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(15px);
    }
}

.premium-cine-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.92);
    cursor: pointer;
}

.premium-cine-modal-content {
    background: #050505;
    border: 1px solid rgba(197, 160, 89, 0.2);
    border-radius: 20px;
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    position: relative;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9);
    background-image: radial-gradient(circle at center 30%, rgba(197, 160, 89, 0.08) 0%, transparent 60%);
}

.premium-cine-header {
    padding: 25px 40px;
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.premium-cine-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--accent-gold);
    letter-spacing: 3px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
}

.premium-cine-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.premium-cine-close:hover {
    color: var(--accent-gold);
    transform: rotate(90deg) scale(1.1);
}

.premium-cine-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 40px;
    scroll-behavior: smooth;
}

.premium-cine-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
}

.premium-cine-scroll-area::-webkit-scrollbar {
    width: 6px;
}

.premium-cine-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.premium-cine-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(197, 160, 89, 0.3);
    border-radius: 10px;
}

/* =========================================
   ✨ MODAL‑ONLY CINEMATIC CARDS (SCOPED)
========================================= */
.premium-cine-modal .cine-card {
    position: relative;
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(197, 160, 89, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    animation: premierePopIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes premierePopIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.premium-cine-modal .cine-card.portrait-mode {
    width: 260px;
    height: 462px;
}

.premium-cine-modal .cine-card.landscape-mode {
    width: 380px;
    height: 214px;
}

.premium-cine-modal .cine-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, opacity 0.4s ease;
}

.premium-cine-modal .cine-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 10;
    pointer-events: none;
    transition: 0s;
}

.premium-cine-modal .cine-card .card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, transparent 100%);
    z-index: 5;
}

.premium-cine-modal .cine-card .card-info h3 {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    text-align: center;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.premium-cine-modal .cine-card .play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 65px;
    height: 65px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent-gold);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    padding-left: 4px;
    opacity: 0;
    z-index: 15;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.premium-cine-modal .cine-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(197, 160, 89, 0.6);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(197, 160, 89, 0.2);
}

.premium-cine-modal .cine-card:hover img {
    transform: scale(1.08);
    opacity: 0.5;
}

.premium-cine-modal .cine-card:hover::before {
    left: 200%;
    transition: 0.8s ease-in-out;
}

.premium-cine-modal .cine-card:hover .card-info h3 {
    color: var(--accent-gold);
}

.premium-cine-modal .cine-card:hover .play-btn-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 768px) {
    .premium-cine-modal-content {
        height: 95vh;
        border-radius: 12px;
    }

    .premium-cine-modal .cine-card.portrait-mode {
        width: 100%;
        max-width: 320px;
        aspect-ratio: 9/16;
        height: auto;
    }

    .premium-cine-modal .cine-card.landscape-mode {
        width: 100%;
        max-width: 340px;
        aspect-ratio: 16/9;
        height: auto;
    }

    .premium-cine-scroll-area {
        padding: 25px 15px;
    }

    .premium-cine-header {
        padding: 20px;
    }

    .premium-cine-title {
        font-size: 1.3rem;
    }
}


/* =========================================
   👑 ULTRA-PREMIUM GOLDEN NETFLIX CARDS
========================================= */

.cine-card {
    flex: 0 0 auto !important;
    position: relative;
    background: #050505;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(197, 160, 89, 0.15);
    /* हल्का गोल्डन बॉर्डर */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Card Sizes */
.portrait-mode .cine-card {
    width: 240px !important;
    height: 426px !important;
}

.landscape-mode .cine-card {
    width: 320px !important;
    height: 180px !important;
}

/* 🌟 Hover Glow Effect */
.cine-card:hover {
    transform: translateY(-8px) scale(1.03);
    border: 1px solid rgba(197, 160, 89, 0.9);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), 0 0 30px rgba(197, 160, 89, 0.35);
    /* गोल्डन शाइन */
    z-index: 10;
}

/* 🖼️ Full-Cover Thumbnail */
.cine-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    /* कोई Blank Space नहीं बचेगा */
    object-position: center;
    z-index: 1;
    transition: opacity 0.4s ease, transform 0.5s ease;
}

.cine-card:hover img {
    opacity: 0.5;
    /* होवर पर इमेज डार्क होगी ताकि नाम चमके */
    transform: scale(1.08);
}

/* 🏆 Luxury Black-Golden Blur (Glassmorphism) */
.card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 60px 15px 20px;
    /* फेड (Fade) को स्मूथ बनाने के लिए ज्यादा स्पेस */

    /* डार्क ब्लैक से ट्रांसपेरेंट ग्रेडिएंट */
    background: linear-gradient(to top, rgba(5, 5, 5, 0.95) 0%, rgba(15, 12, 8, 0.7) 40%, transparent 100%);

    /* बैकग्राउंड ब्लर (Blur) इफेक्ट */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    z-index: 3;
    pointer-events: none;
    text-align: center;
    /* नाम को सेंटर में रखने के लिए */
}

/* ✨ Golden Title Text */
.card-info h3 {
    color: #e6c87e;
    /* Vinayak Studio Gold */
    font-size: 16px;
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    /* प्रोफेशनल लुक के लिए गैप */
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.9);
    /* 3D पॉप इफेक्ट */
}

/* ▶️ Premium Play Button */
.play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: linear-gradient(135deg, #f5d792 0%, #c5a059 100%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #111;
    font-size: 24px;
    padding-left: 4px;
    box-shadow: 0 5px 20px rgba(197, 160, 89, 0.6);
    z-index: 2;
}

.cine-card:hover .play-btn-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* =========================================
   🎬 MODAL CONTAINER (Overlay)
========================================= */
.cine-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

.cine-modal-content {
    background: #0a0a0a;
    border-radius: 24px;
    max-width: 1200px;
    width: 100%;
    padding: 20px;
    position: relative;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s;
}

.close-modal:hover {
    color: #d4af37;
}

.modal-title {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 2px;
    color: #d4af37;
    margin-bottom: 30px;
}

.recommendations {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 20px;
    justify-content: flex-start;
    align-items: center;
}

.cine-card {
    flex: 0 0 auto;
}

.portrait-mode .cine-card {
    width: 220px !important;
    height: 390px !important;
}

.landscape-mode .cine-card {
    width: 320px !important;
    height: 180px !important;
}

#videoModal {
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.9) !important;
}

/* =========================================
   🎬 YOUTUBE STYLE HOVER CLOSE BUTTON
========================================= */
.video-hover-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 30px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.video-hover-zone:hover {
    opacity: 1;
}

.youtube-close-btn {
    background: rgba(30, 30, 30, 0.8);
    color: white;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-20px);
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

.video-hover-zone:hover .youtube-close-btn {
    transform: translateY(0);
}

.youtube-close-btn:hover {
    background: #c5a059;
    transform: scale(1.1);
}

/* =========================================
   👑 VIP LOUNGE – SINGLE CARD & BUTTONS
========================================= */
/* =========================================
   👑 VIP LOUNGE: SINGLE CARD FIX (PERFECT SIZE)
========================================= */

/* 1. कार्ड और बटन्स को स्क्रीन के बीच में रखने का फिक्स */
#vipSingleResult {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.single-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 320px;
    /* 🔥 यह कार्ड को स्क्रीन पर फैलने से 100% रोकेगा */
    margin: 0 auto;
}

/* 2. कार्ड का एकदम सटीक और खूबसूरत साइज़ */
.cine-card.portrait-card {
    width: 240px !important;
    height: 426px !important;
    flex-shrink: 0 !important;
    margin: 0 auto !important;
}

.cine-card.landscape-card {
    width: 320px !important;
    height: 180px !important;
    flex-shrink: 0 !important;
    margin: 0 auto !important;
}

/* 3. Premium Download & Share Buttons */
.vip-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.vip-btn {
    flex: 1;
    /* 🔥 दोनों बटन एकदम बराबर साइज़ के होंगे */
    padding: 12px 10px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Golden Download Button */
.vip-btn.download-btn {
    background: linear-gradient(135deg, #f5d792 0%, #c5a059 100%);
    color: #050505;
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4);
}

.vip-btn.download-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(197, 160, 89, 0.6);
}

/* WhatsApp Share Button */
.vip-btn.share-btn {
    background: #25d366;
    color: #fff;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

.vip-btn.share-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
}

/* Force card sizing for single item – reuse portrait/landscape classes */
.single-card-wrapper .cine-card {
    margin: 0 auto;
}

/* =========================================
   🎬 NETFLIX-STYLE VIP MODAL (New Redesign)
========================================= */

/* =========================================
   🎬 NETFLIX-STYLE VIP MODAL (Strict OTT)
   ========================================= */
.netflix-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #141414;
    z-index: 10000;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Custom Thin Professional Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #333 #141414;
}

.netflix-modal::-webkit-scrollbar {
    width: 6px;
}

.netflix-modal::-webkit-scrollbar-track {
    background: #141414;
}

.netflix-modal::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

.netflix-modal::-webkit-scrollbar-thumb:hover {
    background: #c5a059;
}

.netflix-close-btn {
    position: fixed;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 28px;
    z-index: 10002;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.netflix-close-btn:hover {
    background: #fff;
    color: #000;
    transform: scale(1.1);
}

/* Hero Section */
.netflix-hero-bg {
    position: relative;
    width: 100%;
    height: 75vh;
    background-size: cover;
    background-position: center top;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #141414 0%, rgba(20, 20, 20, 0.6) 30%, transparent 100%);
    z-index: 1;
}

.netflix-hero-content {
    position: absolute;
    bottom: 10%;
    left: 4%;
    z-index: 10;
    max-width: 600px;
}

.netflix-series-badge {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.n-logo {
    color: #E50914;
    font-size: 24px;
    font-weight: 900;
}

.netflix-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem !important;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 15px;
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
}

.netflix-hero-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
    margin-bottom: 25px;
}

.netflix-hero-buttons {
    display: flex;
    gap: 15px;
}

.n-btn-play,
.n-btn-info {
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    transition: 0.2s;
}

.n-btn-play {
    background: #fff;
    color: #000;
}

.n-btn-play:hover {
    background: #e6e6e6;
}

.n-btn-info {
    background: rgba(109, 109, 110, 0.7);
    color: #fff;
}

.n-btn-info:hover {
    background: rgba(109, 109, 110, 0.4);
}

/* Rails */
/* =========================================
   ✨ 1. THE CINEMATIC CURVE DIVIDER
========================================= */
.cinematic-curve-divider {
    position: relative;
    width: 100%;
    height: 70px;
    margin-top: -70px;
    /* Hero section ke upar overlap karega */
    z-index: 5;
    overflow: hidden;
}

.curve-glow {
    position: absolute;
    top: 40px;
    /* Curve kitna deep hoga */
    left: -10%;
    width: 120%;
    height: 200px;
    background: #141414;
    /* Niche wale section se match karega */
    border-radius: 50%;
    /* The Magical Glowing Horizon Line (Gold + White) */
    box-shadow: 0 -2px 15px rgba(197, 160, 89, 0.4),
        0 -1px 3px rgba(255, 255, 255, 0.2);
}

/* =========================================
   🍿 2. NETFLIX RAILS CONTAINER
========================================= */
.netflix-rails-container {
    background-color: #141414;
    padding-bottom: 80px;
    position: relative;
    z-index: 5;
    /* margin-top hata diya kyunki ab curve overlap handle kar raha hai */
}

.netflix-rail-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #e5e5e5;
    margin: 0 4% 15px 4%;
    padding-top: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.netflix-rail-scroll {
    display: flex;
    gap: 12px;
    /* Thoda zyada gap premium feel ke liye */
    padding: 10px 4% 60px 4%;
    /* Bottom padding zyada taaki hover shadow na kate */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.netflix-rail-scroll::-webkit-scrollbar {
    display: none;
}

/* =========================================
   💎 3. ULTRA-PREMIUM OTT CARDS
========================================= */
.n-card {
    flex: 0 0 auto !important;
    position: relative;
    background: #1a1a1a;
    border-radius: 8px !important;
    /* Softer, modern corners */
    cursor: pointer;
    border: 1px solid transparent;
    /* Ready for hover border */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
}

/* Base Dimensions */
.portrait-n .n-card {
    width: 165px !important;
    height: 245px !important;
}

/* =========================================
   🎬 BLOCKBUSTER LANDSCAPE CARDS (Cinematic & Wedding Films)
========================================= */

/* 1. Exact 16:9 Cinema Sizing */
.landscape-n .n-card {
    width: 320px !important;
    height: 180px !important;
    border-radius: 8px !important;
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 2. The Deep Theatre Vignette (Shadow) */
.landscape-n .n-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
    border-radius: inherit;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* 3. The Golden Play Button (Hidden by default) */
.landscape-n .n-card::before {
    content: '\f144';
    /* FontAwesome Play Circle Icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    /* Chota hoke chupa rahega */
    font-size: 3.5rem;
    color: #c5a059;
    /* Luxury Gold */
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
    opacity: 0;
    z-index: 20;
    /* Bouncy Pop Animation */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

/* 4. Luxury Hover Interactions */
.landscape-n .n-card:hover {
    border-color: rgba(197, 160, 89, 0.4) !important;
    /* Golden Rim */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), 0 0 20px rgba(197, 160, 89, 0.15) !important;
}

.landscape-n .n-card:hover img {
    opacity: 0.5;
    /* Darken image to make button & text pop */
    transform: scale(1.08) !important;
    /* Slow Zoom */
}

/* Make the play button Pop out! */
.landscape-n .n-card:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 5. Cinematic Typography */
.landscape-n .n-card-title {
    font-family: 'Playfair Display', serif;
    /* Elegant Serif Font for Films */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    padding: 30px 15px 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    z-index: 10;
    opacity: 0.85;
    transition: all 0.3s ease;
}

/* Text turns gold and slides up slightly on hover */
.landscape-n .n-card:hover .n-card-title {
    color: #c5a059;
    opacity: 1;
    transform: translateY(-3px);
}

/* The Image */
.n-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 7px;
    /* Card border se 1px kam taaki perfect fit ho */
    display: block;
    transition: opacity 0.4s ease;
}

/* Dark Gradient Overlay for Text Visibility */
.n-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
    border-radius: inherit;
    opacity: 0.6;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 5;
}

/* Hover Dynamics */
.n-card:hover {
    transform: scale(1.12) !important;
    /* Smooth zoom */
    z-index: 99 !important;
    border-color: rgba(255, 255, 255, 0.2);
    /* Subtle silver rim */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(197, 160, 89, 0.1) !important;
}

.n-card:hover img {
    opacity: 0.8;
}

.n-card:hover::after {
    opacity: 1;
    /* Gradient deepens on hover */
}

/* Card Text Styling */
.n-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 15px 15px;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    z-index: 10;

    /* Reveal Animation */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.n-card:hover .n-card-title {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   👑 ULTRA-PREMIUM HERO STYLES (CINEMATIC UPGRADE)
========================================= */
.premium-hero-container {
    position: relative;
    width: 100vw;
    height: 90vh;
    background-color: #050505;
    overflow: hidden;
}

.premium-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover !important;
    background-position: center 20% !important;
    background-repeat: no-repeat;
    animation: kenBurns 25s ease-in-out infinite alternate;
    z-index: 1;
    /* 🔥 SEAMLESS FIX: Radial mask eliminates all sharp edges */
    -webkit-mask-image: radial-gradient(circle at center 35%, black 40%, transparent 90%);
    mask-image: radial-gradient(circle at center 35%, black 40%, transparent 90%);
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

/* Tablet & Smaller PC adaptive fixes */
@media (max-width: 1200px) {
    .premium-hero-image {
        background-position: center center;
    }
}

.cinematic-dust-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(197, 160, 89, 0.08) 1px, transparent 1px);
    background-size: 3px 3px;
    z-index: 2;
    opacity: 0.5;
    mix-blend-mode: overlay;
}

/* 🔥 THE FIX: Deep Cinematic Left-Fade Masking */
.hero-vignette-deep {
    position: absolute;
    inset: 0;
    background:
        /* Left dark fade for perfect text readability */
        linear-gradient(to right, rgba(5, 5, 5, 0.98) 0%, rgba(5, 5, 5, 0.7) 35%, transparent 75%),
        /* Bottom fade to blend with the curve divider */
        linear-gradient(to top, #141414 0%, rgba(20, 20, 20, 0.6) 20%, transparent 60%);
    z-index: 3;
    pointer-events: none;
}

.premium-hero-content {
    position: absolute;
    bottom: 18%;
    left: 6%;
    /* 👈 More breathing room from the edge */
    z-index: 10;
    max-width: 650px;
    /* 👈 Controlled width for editorial look */
}

/* Brand Badge Enhancement */
.premium-studio-brand {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 5px;
}

.ps-monogram-shield {
    width: 46px;
    height: 50px;
    background: linear-gradient(145deg, #1a1a1a 0%, #050505 100%);
    border: 1px solid rgba(197, 160, 89, 0.6);
    /* Refined Gold Border */
    border-radius: 4px 4px 18px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5a059;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.9), inset 0 2px 10px rgba(197, 160, 89, 0.15);
}

.ps-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(197, 160, 89, 0.3);
    /* Subtle gold divider */
    padding-left: 15px;
}

.ps-name {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 5px;
    text-transform: uppercase;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.ps-tagline {
    color: #c5a059;
    font-family: 'Montserrat', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 4px;
    opacity: 0.9;
}

/* Title & Description */
.premium-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 4.2rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.05;
    margin-bottom: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.95);
}

.premium-hero-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    color: #d1d1d1;
    line-height: 1.6;
    margin-bottom: 35px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.5px;
}

/* 🔥 THE TACTILE LUXURY BUTTONS */
.premium-hero-actions {
    display: flex;
    gap: 18px;
}

.btn-play-luxury {
    background: linear-gradient(145deg, #ffffff 0%, #e6e6e6 100%);
    color: #050505;
    border: none;
    padding: 15px 38px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 2px 0px rgba(255, 255, 255, 0.9);
}

.btn-play-luxury:hover {
    transform: translateY(-3px) scale(1.02);
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 255, 255, 0.3);
}

.btn-info-luxury {
    background: rgba(20, 20, 20, 0.4);
    color: #ffffff;
    border: 1px solid rgba(197, 160, 89, 0.5);
    /* Crisp Gold Border */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px 38px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.btn-info-luxury:hover {
    background: rgba(197, 160, 89, 0.15);
    border-color: rgba(197, 160, 89, 0.9);
    color: #c5a059;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 15px rgba(197, 160, 89, 0.2);
}

/* Animations */
.reveal-item {
    opacity: 0;
    transform: translateY(30px);
}

.reveal-item.active {
    animation: slideUpFadePremium 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    animation-delay: var(--delay);
}

@keyframes slideUpFadePremium {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   📱 LUXURY PORTRAIT CARDS (Invitations & Reels)
========================================= */

/* 1. Perfect 9:16 Cinema Poster Sizing */
.portrait-n .n-card {
    width: 175px !important;
    height: 310px !important;
    /* Perfect mobile/poster ratio */
    border-radius: 12px !important;
    /* Thoda zyada curve premium feel ke liye */
    border: none !important;
    /* Default border hata diya */
    background: #111;
}

/* 2. The Magical Golden Gradient Border on Hover */
.portrait-n .n-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    /* Border ki motai */
    /* Gold & Transparent ka gradient */
    background: linear-gradient(135deg, #f5d792 0%, #c5a059 50%, transparent 100%);
    /* Masking trick to create border-only background */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 20;
    pointer-events: none;
}

.portrait-n .n-card:hover::before {
    opacity: 1;
    /* Hover karne par chamkega */
}

/* 3. The Base Premium Top-Left Badge */
.portrait-n .n-card::after {
    content: 'PREMIERE';
    /* Default Text */
    position: absolute;
    top: 12px;
    left: 12px;
    right: auto !important;
    /* Prevent stretching from generic inset:0 */
    bottom: auto !important;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(197, 160, 89, 0.4);
    color: #c5a059;
    font-family: 'Montserrat', sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
}

.portrait-n .n-card:hover::after {
    transform: scale(1.05);
}

/* 4. Smart Tagging: "Reels" aur "Invites" ke alag-alag colors */
#content-reels .n-card::after {
    content: 'TRENDING';
    color: #ffffff;
    border-color: rgba(229, 9, 20, 0.4);
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.9) 0%, rgba(138, 5, 12, 0.9) 100%);
    /* Netflix Red Vibe */
}

#content-invitation .n-card::after {
    content: 'INVITE';
    /* Already has the golden styling from base */
}

/* 5. Poster Typography (Tall Shadow for Readability) */
.portrait-n .n-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    /* Center align for posters */
    padding: 60px 10px 15px;
    /* Shadow ko lamba kiya taaki text glow kare */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
}

/* =========================================
   📸 EVENT GALLERIES (The Memory Stack)
========================================= */

/* 1. Hide the Play Button (Because it's a photo gallery, not a video) */
#content-gallery .n-card::before {
    display: none !important;
}

/* 2. The 3D Stacked Photo Look */
#content-gallery .n-card {
    border: 3px solid #ffffff !important;
    /* Premium printed photo border */
    background: #ffffff;
    /* Yahan MAGIC hai: 3 layers ki shadow jo lagti hai ki piche aur bhi photos rakhi hain */
    box-shadow:
        4px 4px 0px #c5a059,
        8px 8px 0px rgba(197, 160, 89, 0.4),
        12px 15px 25px rgba(0, 0, 0, 0.8) !important;
    transform-origin: bottom left;
    border-radius: 4px !important;
    /* Sharp photo edges */
}

/* 3. The Hover Lift Effect (Album uthane jaisa feel) */
#content-gallery .n-card:hover {
    transform: scale(1.05) translate(-4px, -4px) !important;
    box-shadow:
        8px 8px 0px #c5a059,
        16px 16px 0px rgba(197, 160, 89, 0.4),
        20px 25px 40px rgba(0, 0, 0, 0.9) !important;
    border-color: #ffffff !important;
}

/* 4. Lighter Gradient so photos look natural */
#content-gallery .n-card::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}

/* 5. Cinematic Album Label Overlay */
.album-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.4) 30%,
            transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 15px;
    z-index: 10;
}

.album-label-content {
    text-align: center;
    width: 100%;
}

.album-tag {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    font-weight: 900;
    color: #c5a059;
    letter-spacing: 3px;
    margin-bottom: 8px;
    opacity: 0.8;
}

.album-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 12px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    text-transform: capitalize;
}

/* 6. The Golden Photo Count Pill */
.photo-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(197, 160, 89, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(197, 160, 89, 0.3);
    color: #c5a059;
    padding: 5px 15px;
    border-radius: 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.album-stack-card:hover .photo-count-pill {
    background: #c5a059;
    color: #141414;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.4);
}

/* Ensure image stays behind the overlay */
.n-card-img-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#content-gallery .n-card:hover .photo-count-badge {
    transform: scale(1.1);
    /* Pop up on hover */
}

/* =========================================
   📖 DIGITAL FLIPBOOK (Album Viewer)
========================================= */






/* =========================================
   📖 THE 3D LUXURY ALBUM CARD (.book-n)
========================================= */

.book-n .n-card {
    width: 210px !important;
    height: 280px !important;
    border-radius: 4px 12px 12px 4px !important;
    border: none !important;
    border-right: 8px solid #c5a059 !important;
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
    background: #050505;
    box-shadow:
        inset 15px 0 30px rgba(0, 0, 0, 0.95),
        inset 2px 0 5px rgba(255, 255, 255, 0.05),
        10px 15px 25px rgba(0, 0, 0, 0.8) !important;
    transform-origin: left center;
    transform: perspective(1000px) rotateY(-8deg) !important;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative;
    overflow: hidden;
}

.book-n .n-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, transparent 5%, transparent 95%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 5;
    pointer-events: none;
}

.book-n .n-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 8px 8px 0 !important;
    opacity: 0.8;
    transition: opacity 0.4s ease;
}

.book-n .n-card:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.05) !important;
    box-shadow:
        inset 5px 0 20px rgba(0, 0, 0, 0.8),
        25px 25px 40px rgba(0, 0, 0, 0.95),
        0 0 20px rgba(197, 160, 89, 0.3) !important;
    z-index: 99 !important;
}

.book-n .n-card:hover img {
    opacity: 1;
}

.book-n .n-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 15px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #fff;
    text-align: center;
    z-index: 10;
    letter-spacing: 1px;
}

.book-n .flipbook-badge {
    display: inline-block;
    margin-top: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: #050505;
    background: linear-gradient(135deg, #f5d792 0%, #c5a059 100%);
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.book-n .n-card:hover .flipbook-badge {
    transform: translateY(-2px) scale(1.05);
}

/* Prevent body scroll when flipbook is open */
body.flipbook-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* =========================================
   📖 THE BLACK WOODEN WALL BACKGROUND
========================================= */
.flipbook-modal {
    display: none;
    position: fixed;
    inset: 0;
    /* Direct Background Image + Center / Cover */
    background: #000 url('assets/images/album_bg.webp') no-repeat center center / cover !important;
    z-index: 999999;
    justify-content: center;
    align-items: center;
}

.flipbook-container {
    position: relative;
    width: 100vw !important;
    height: 100vh !important;
    padding: 10vh 5vw !important;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 10;
    /* Transparent container to show modal background */
    background: transparent !important;
    /* Deeper Shadow for Planks */
    filter: drop-shadow(0 35px 50px rgba(0, 0, 0, 0.95));
}


/* =========================================
   👑 GANESH JI & BRANDING DECOR
========================================= */

/* =========================================
   📖 PAGE STYLES (IVORY PAPER & IMAGE FIT)
========================================= */

.luxury-page {
    background-color: #f5f2eb !important;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.luxury-page img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    padding: 0;
    background-color: #f5f2eb;
}

.luxury-page.cover-page {
    background-color: #0a0a0a !important;
    border: 2px solid #c5a059;
}

.luxury-page.cover-page img {
    padding: 0;
    object-fit: cover !important;
}

/* Ensure the close button looks premium against the wood */
.close-flipbook {
    position: absolute;
    top: 25px;
    right: 35px;
    font-size: 30px;
    cursor: pointer;
    z-index: 1000001;
    color: #c5a059;
    /* Golden Cross */
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #c5a059;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.close-flipbook:hover {
    background: #c5a059;
    color: #000;
    transform: rotate(90deg) scale(1.1);
}

.music-toggle {
    position: absolute;
    top: 25px;
    right: 100px;
    /* next to close button */
    font-size: 18px;
    cursor: pointer;
    z-index: 1000001;
    color: #c5a059;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(197, 160, 89, 0.4);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    animation: musicPulse 2s infinite;
}

.music-toggle:hover {
    background: rgba(197, 160, 89, 0.2);
    border-color: #c5a059;
    transform: scale(1.1);
}

.music-toggle.muted {
    animation: none;
    opacity: 0.6;
    color: #888;
    border-color: #888;
}

/* =========================================
   🎞️ ROTATE DEVICE OVERLAY (FOR BEST UX)
========================================= */
.rotate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 5, 0.98);
    z-index: 10000000;
    /* Above everything */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 30px;
    backdrop-filter: blur(15px);
    pointer-events: all;
}

.rotate-icon-wrapper {
    margin-bottom: 25px;
    color: #c5a059;
}

.rotate-icon {
    font-size: 80px;
}

@keyframes deviceRotate {
    0% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(90deg);
    }
}

.anim-rotate {
    animation: deviceRotate 2.5s infinite alternate ease-in-out;
}

.rotate-overlay p {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    max-width: 320px;
    line-height: 1.8;
    color: #c5a059;
}

@keyframes musicPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(197, 160, 89, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(197, 160, 89, 0);
    }
}

/* =========================================
   🔐 THE VAULT (PREMIUM RAW DATA CARDS)
========================================= */

#content-vault .vault-card {
    flex: 0 0 auto !important;
    width: 260px;
    height: 340px;
    background: linear-gradient(145deg, #111111 0%, #050505 100%);
    border: 1px solid rgba(197, 160, 89, 0.15);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 35px 20px 25px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
    text-decoration: none;
}

#content-vault .vault-card::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#content-vault .vault-card:hover {
    transform: translateY(-10px);
    border-color: rgba(197, 160, 89, 0.8);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(197, 160, 89, 0.2);
}

#content-vault .vault-icon {
    font-size: 3.5rem;
    color: #c5a059;
    text-align: center;
    margin-bottom: 20px;
    filter: drop-shadow(0 5px 15px rgba(197, 160, 89, 0.4));
    transition: transform 0.5s ease;
    position: relative;
    z-index: 2;
}

#content-vault .vault-card:hover .vault-icon {
    transform: scale(1.1) translateY(-5px);
}

#content-vault .vault-badge {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: rgba(197, 160, 89, 0.6);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}

#content-vault .vault-title {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.3;
    position: relative;
    z-index: 2;
}

#content-vault .vault-desc {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    color: #888;
    margin-bottom: 20px;
    flex-grow: 1;
    position: relative;
    z-index: 2;
}

#content-vault .vault-action {
    width: 100%;
    padding: 14px;
    background: rgba(197, 160, 89, 0.05);
    color: #c5a059;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 1px solid rgba(197, 160, 89, 0.2);
    position: relative;
    z-index: 2;
}

#content-vault .vault-card:hover .vault-action {
    background: #c5a059;
    color: #050505;
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.3);
}

/* =========================================
   📱 SMARTPHONE OPTIMIZATION: CLIENT LOUNGE
========================================= */
@media (max-width: 768px) {
    .premium-hero-container {
        height: 90vh !important;
        /* Full immersion */
        min-height: 500px;
        background: radial-gradient(circle at center 20%, #1a1a1a 0%, #050505 80%) !important;
    }

    .premium-hero-image {
        /* 🔥 THE FULL-FILL FIX: Always cover on mobile too */
        background-size: cover !important;
        background-position: center 10% !important;
        opacity: 0.9 !important;
        /* Stronger mask for mobile to avoid bottom cutoff line */
        -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 95%) !important;
        mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 95%) !important;
    }

    /* 🔥 Landscape Mobile: Auto-Adjust for wide phones */
    @media (orientation: landscape) {
        .premium-hero-container {
            height: 100vh !important;
        }

        .premium-hero-image {
            background-size: cover !important;
            background-position: center !important;
        }

        .premium-hero-content {
            bottom: 10% !important;
            flex-direction: row !important;
            align-items: flex-end !important;
            text-align: left !important;
        }

        .premium-hero-actions {
            flex-direction: row !important;
        }
    }

    .hero-vignette-deep {
        background: linear-gradient(to top, #050505 20%, rgba(5, 5, 5, 0.4) 60%, transparent 100%) !important;
    }

    .premium-hero-content {
        bottom: 12% !important;
        left: 5% !important;
        right: 5% !important;
        max-width: 95% !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        z-index: 20;
    }

    /* Rest of mobile styles from earlier turning preserved/refined below */

    .premium-studio-brand {
        margin-bottom: 15px !important;
        transform: scale(0.9);
        /* Perfect scale for mobile */
    }

    .premium-hero-title {
        font-size: 2.5rem !important;
        /* Slightly larger for impact */
        margin-bottom: 12px !important;
        letter-spacing: 1px !important;
    }

    .premium-hero-desc {
        font-size: 0.95rem !important;
        /* Better readability */
        margin-bottom: 30px !important;
        line-height: 1.5 !important;
        color: #ddd !important;
    }

    .premium-hero-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 15px !important;
    }

    .btn-play-luxury,
    .btn-info-luxury {
        width: 100% !important;
        padding: 15px !important;
        border-radius: 8px !important;
        /* Slightly softer corners for luxury */
    }

    .netflix-close-btn {
        top: 15px !important;
        right: 15px !important;
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(5px) !important;
    }
}

/* =========================================
   🎞️ NETFLIX‑STYLE VIDEO INTERFACE (PREMIUM)
========================================= */
.netflix-video-modal {
    background: #000 !important;
}

.luxury-video-content {
    background: #000;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* 1. The Pro Top Navigation */
.video-top-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200000;
    /* Above iframe */
    padding: 30px 40px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
}

/* Modal hover or activity - show top nav */
.netflix-video-modal:hover .video-top-nav,
.netflix-video-modal.user-active .video-top-nav {
    opacity: 1;
}

.v-back-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px;
    transition: transform 0.3s ease;
}

.v-back-btn span {
    font-size: 1rem;
    opacity: 0.8;
}

.v-back-btn:hover {
    transform: translateX(-5px);
    color: #c5a059;
}

/* 2. Mobile Swipe Hint */
.mobile-swipe-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    /* Only mobile */
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    pointer-events: none;
    z-index: 200001;
    animation: bounceDown 2s infinite;
}

.swipe-bar {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

@keyframes bounceDown {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@media (max-width: 768px) {
    .video-top-nav {
        padding: 20px;
        opacity: 1 !important;
        /* Always show on mobile for safety */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    }

    .v-back-btn span {
        display: none;
    }

    .mobile-swipe-hint {
        display: flex;
    }
}

/* Extra immersive frame */
#universalPlayerIframe {
    position: absolute;
    inset: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    border: none;
}

/* =========================================
   🔐 VIP VAULT LOADING ANIMATION
========================================= */
.c-btn.is-loading {
    opacity: 0.9;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
    animation: luxuryPulse 1s infinite alternate ease-in-out;
}

@keyframes luxuryPulse {
    from {
        box-shadow: 0 0 10px rgba(197, 160, 89, 0.2);
        transform: scale(0.99);
    }

    to {
        box-shadow: 0 0 25px rgba(197, 160, 89, 0.8);
        transform: scale(1.01);
    }
}

.fa-spin-slow {
    animation: fa-spin 2s infinite linear;
}

/* Cinematic Transitions */
.fade-out {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

/* Guest mode – hide client‑only UI elements */
body.guest-mode .logout-vault-btn,
body.guest-mode .curate-guest-btn,
body.guest-mode .event-card .share-btn {
    display: none !important;
}

/* Ensure the lounge container is visible and full width */
body.guest-mode #vipNetflixModal {
    display: block !important;
}

.card-share-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 30px;
    padding: 6px 12px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    z-index: 15;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.card-share-btn:hover {
    background: #25D366;
    color: white;
    transform: scale(1.05);
}

.card-share-btn i {
    font-size: 12px;
}

/* =========================================
   🌟 VIP GUEST CONCIERGE UI (ULTRA-LUXURY EDITION)
========================================= */

.curate-guest-btn {
    /* Obsidian Black base with Molten Gold Shimmer Gradient */
    background: linear-gradient(110deg, #0a0a0a 10%, #1a150f 30%, #4a3b1f 50%, #1a150f 70%, #0a0a0a 90%);
    background-size: 200% auto;

    /* Gold Bezel */
    border: 1px solid rgba(197, 160, 89, 0.7);

    color: var(--accent-gold);
    backdrop-filter: blur(10px);
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 11px;
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;

    /* Smooth, slightly elastic magnetic transition */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    vertical-align: middle;
    position: relative;
    overflow: hidden;

    /* Standard State: Slow internal shimmer + Soft museum light pulse */
    animation: moltenShimmer 4s linear infinite, museumLightPulse 3s ease-in-out infinite;
    text-shadow: 0 0 5px rgba(197, 160, 89, 0.3);
}

/* Hover & Click-Through State (The Magnetic Vortex) */
.curate-guest-btn:hover {
    /* Button slightly pops up with magnetic feel */
    transform: translateY(-3px) scale(1.02);

    /* Intense brightened text */
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px var(--accent-gold);

    /* Brighter border on hover */
    border-color: #ffd700;

    /* Expand hover glow */
    box-shadow: 0 10px 25px -5px rgba(197, 160, 89, 0.7), 0 0 15px rgba(197, 160, 89, 0.5);

    /* Speed up the internal shimmer to create a "Vortex" energy */
    animation: moltenShimmer 1.5s linear infinite;

    /* Brighten the gradient colors for intense energy */
    background: linear-gradient(110deg, #15100a 10%, #3d2e15 30%, #c5a059 50%, #3d2e15 70%, #15100a 90%);
    background-size: 200% auto;
}

/* 1. Continuous Internal Shimmer (Molten Gold Light moving across) */
@keyframes moltenShimmer {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

/* 2. Soft Outer Aura (Museum light glowing) */
@keyframes museumLightPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.1);
    }

    50% {
        box-shadow: 0 0 12px 2px rgba(197, 160, 89, 0.3);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.1);
    }
}

/* Ensure header uses flexbox so button aligns to the right */
.netflix-rail-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.selection-mode-active .n-card,
.selection-mode-active .album-stack-card {
    cursor: pointer;
    position: relative;
}

.selection-mode-active .n-card::after,
.selection-mode-active .album-stack-card::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid white;
    background: rgba(0, 0, 0, 0.5);
    z-index: 20;
}

.selection-mode-active .selected-for-guest::after {
    background: var(--accent-gold);
    content: '✓';
    color: black;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guest-action-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 15px 30px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 30px;
    z-index: 100000;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.guest-action-bar.visible {
    transform: translateX(-50%) translateY(0);
}

.guest-action-text {
    color: #fff;
    font-weight: 500;
}

#guestSelCount {
    color: var(--accent-gold);
    font-weight: bold;
    font-size: 1.2rem;
}

.generate-pass-btn {
    background: var(--accent-gold);
    color: #000;
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.generate-pass-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.5);
}

/* Guest carousel */
.guest-items-carousel {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px;
    scrollbar-width: none;
}

.guest-items-carousel::-webkit-scrollbar {
    display: none;
}

.guest-video-item,
.guest-image-item {
    flex: 0 0 280px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.guest-video-item:hover,
.guest-image-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
}

.video-thumb,
.carousel-thumb {
    height: 160px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.guest-item-title {
    padding: 12px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.guest-selection-title {
    font-family: 'Playfair Display';
    color: var(--accent-gold);
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
}