/* ========================================= */
/* UNIVERSAL RESPONSIVE VARIABLES            */
/* ========================================= */
:root {
    /* clamp(minimum_size, preferred_fluid_size, maximum_size) */
    --card-size: clamp(70px, 15vw, 180px);
    --card-font: clamp(3rem, 7vw, 8rem);
    --label-font: clamp(0.7rem, 2vw, 1.2rem);
    --title-font: clamp(1.5rem, 5vw, 4.5rem);
    --nav-font: clamp(12px, 2vw, 20px);
    --gap-size: clamp(0.5rem, 2vw, 1.5rem);
}

/* ========================================= */
/* BASE STYLES                               */
/* ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
    font-family: 'Arial Black', Impact, sans-serif;
    background-color: #121212;
    overflow-x: hidden; /* Prevents horizontal scroll on small devices */
}

.bg-container {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0; 
}

.bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

/* ========================================= */
/* NAVIGATION BAR (GLASSIFIED)               */
/* ========================================= */
.navbar {
    position: relative;
    left: 50%;
    top: 15px; /* Floats it slightly off the top edge for a modern look */
    width: 95%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* Pushes logo left, links right */
    transform: translateX(-50%);
    padding: 10px 30px;
    display: flex;
    flex-wrap: wrap; 
    z-index: 999; 
    
    /* --- Glassmorphism Magic --- */
    background: rgba(255, 255, 255, 0.05); /* Extremely faint transparent white */
    backdrop-filter: blur(12px); /* Creates the frosted glass effect */
    -webkit-backdrop-filter: blur(12px); /* Support for Safari browsers */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle, shiny outer edge */
    border-radius: 20px; /* Smooth rounded corners */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Soft shadow for depth */
}

.logo img {
    height: clamp(40px, 6vw, 55px); 
    z-index: 10;
    /* Adds a slight shadow to make the logo pop against the glass */
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.4)); 
}

.nav-desktop {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    gap: clamp(10px, 3vw, 40px); 
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1000;
}

.nav-desktop li a {
    text-decoration: none;
    color: #e0e0e0; /* Off-white for a sleek look */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Clean, normal font */
    font-size: var(--nav-font);
    font-weight: 500;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px; /* Soft rounding for the hover highlight */
    transition: all 0.3s ease; /* Smooth, elegant fade transition */
}

.nav-desktop li a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Hamburger Menu Button */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1001;
    padding: 10px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Mobile Navigation Styles */
@media screen and (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-desktop {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 0 0 20px 20px;
        padding: 20px;
        gap: 15px;
        transform: translateY(-150%);
        transition: transform 0.3s ease;
        z-index: 999;
    }

    .nav-desktop.active {
        transform: translateY(0);
    }

    .nav-desktop li {
        width: 100%;
        text-align: center;
    }

    .nav-desktop li a {
        display: block;
        padding: 15px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    .countdown-wrapper {
        top: 65%;
    }

    .visit-button {
        position: absolute;
        top: auto;
        bottom: 20px;
        right: 50%;
        transform: translateX(50%);
    }

    .visit-button:hover {
        transform: translateX(50%) scale(1.05);
    }
}

/* Ultra-small screens (smartwatch size) */
@media screen and (max-width: 320px) {
    .navbar {
        padding: 8px 15px;
        width: 98%;
    }

    .logo img {
        height: 35px;
    }

    .hamburger span {
        width: 20px;
        height: 2px;
    }

    .nav-desktop {
        padding: 15px;
        gap: 10px;
    }

    .nav-desktop li a {
        padding: 12px;
        font-size: 0.8rem;
    }

    .countdown-wrapper {
        top: 60%;
    }
}

/* THE HOVER STATE */
.nav-desktop li a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Gentle glass highlight on hover */
    color: #ffffff; /* Text turns pure white */
    transform: translateY(-2px); /* Floats the text up very slightly */
}


/* ========================================= */
/* LAUNCH TITLE                              */
/* ========================================= */
.title-container {
    position: absolute;
    top: clamp(30%, 20vh, 25%); 
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    text-align: center;
    z-index: 10;
}

.launch-title {
    color: #ffffff;
    font-family: 'Russo One', sans-serif;
    font-size: var(--title-font); /* Uses fluid variable */
    text-transform: uppercase;
    letter-spacing: clamp(0.1rem, 1vw, 0.3rem);
    margin: 0;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.9);
}

/* ========================================= */
/* COUNTDOWN FLIP CARDS                      */
/* ========================================= */
.countdown-wrapper {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -58%);
    display: flex;
    flex-wrap: wrap; /* Automatically drops seconds/minutes to a new line on narrow phones */
    justify-content: center;
    width: 100%;
    gap: var(--gap-size);
    z-index: 10;
}

.time-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--gap-size) / 2);
}

.flip-card {
    position: relative;
    width: var(--card-size);  /* Fluid width */
    height: var(--card-size); /* Fluid height */
    background-color: #1c1c1c;
    color: #e0e0e0;
    font-size: var(--card-font); /* Fluid font */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9);
    perspective: 1000px; 
}

.flip-card .top, 
.flip-card .bottom, 
.flip-card .top-flip, 
.flip-card .bottom-flip {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    text-align: center;
    background-color: #1c1c1c;
}

.flip-card .top, 
.flip-card .top-flip {
    top: 0;
    line-height: var(--card-size); /* Perfectly aligns text cut regardless of size */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    transform-origin: bottom;
}

.flip-card .bottom, 
.flip-card .bottom-flip {
    bottom: 0;
    line-height: 0px; 
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    transform-origin: top;
}

.flip-card .top::after, 
.flip-card .top-flip::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #050505;
}

.flip-card .bottom::after, 
.flip-card .bottom-flip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #050505;
}

.top-flip {
    z-index: 2;
    animation: flipTop 0.25s ease-in forwards;
}

.bottom-flip {
    z-index: 2;
    transform: rotateX(90deg); 
    animation: flipBottom 0.25s ease-out 0.25s forwards; 
}

@keyframes flipTop {
    100% { transform: rotateX(-90deg); } 
}

@keyframes flipBottom {
    100% { transform: rotateX(0deg); } 
}

.time-label {
    color: #ffffff;
    font-size: var(--label-font); /* Fluid label font */
    letter-spacing: clamp(0.1rem, 1vw, 0.3rem);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
}

/* ========================================= */
/* VISIT PRERNA'25 BUTTON (GLASSIFIED)       */
/* ========================================= */

.button-section {
    position: relative;
    width: 100%;
    height: 13%;
    top: 7%;
}

.visit-button {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    z-index: 15;

    /* Glassmorphism styling */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    /* Text styling */
    color: #ffffff;
    text-decoration: none;
    font-family: 'Russo One', sans-serif;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    padding: clamp(10px, 1.5vw, 15px) clamp(20px, 3vw, 30px);
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.visit-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* ========================================= */
/* CURTAIN ANIMATION (INDIAN CULTURAL VIBE)  */
/* ========================================= */
.curtain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    pointer-events: none;
    justify-content: center;
    align-items: center;
}

.curtain-left, .curtain-right {
    position: absolute;
    top: 0;
    width: 50vw;
    height: 100vh;
    background-color: #8b0000; /* Deep cultural crimson red */
    border: 5px solid #d4af37; /* Royal gold trim */
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    transition: transform 2s cubic-bezier(0.8, 0, 0.2, 1);
}

.curtain-left {
    left: 0;
    border-left: none;
    transform: translateX(-100%); /* Starts hidden off-screen to the left */
}

.curtain-right {
    right: 0;
    border-right: none;
    transform: translateX(100%); /* Starts hidden off-screen to the right */
}

.curtain-logo {
    position: absolute;
    color: #d4af37;
    font-family: 'Russo One', sans-serif;
    font-size: clamp(2rem, 6vw, 5rem);
    opacity: 0;
    transition: opacity 1s ease-in 1s; /* Fades in after curtains close */
    z-index: 10000;
}

/* These classes are applied by JavaScript to trigger the animation */
.curtain-container.close-curtains .curtain-left {
    transform: translateX(0); /* Slides to center */
}

.curtain-container.close-curtains .curtain-right {
    transform: translateX(0); /* Slides to center */
}

.curtain-container.close-curtains .curtain-logo {
    opacity: 1; /* Shows the logo */
}