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

:root {
    --primary-color: #000;
    --secondary-color: #f7f7f7;
    --accent-color: #FF5733;
    --text-light: #555;
    --header-font-size: 3.5em;
    /* Increased for impact */
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--secondary-color);
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

.hero-section {
    position: relative;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    display: grid;
    grid-template-areas:
        "header-left . header-right"
        ". center-content ."
        "bottom-left . bottom-right";
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    padding: 20px;
    box-sizing: border-box;
}

/* --- Intro Animation & Initial State --- */
.hero-section>* {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.center-content {
    grid-area: center-content;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.hero-section.loaded>*:not(.center-content) {
    opacity: 1;
    transform: translateY(0);
}

.hero-section.loaded .center-content {
    opacity: 1;
    transform: scale(1);
}

/* --- Header Left - Typing Effect Styles --- */
.header-left {
    grid-area: header-left;
    align-self: flex-start;
    justify-self: flex-start;
    padding: 20px;
    /* --- FONT CHANGE HERE --- */
    font-family: 'Parisienne', cursive;
    /* ------------------------ */
    font-size: var(--header-font-size);
    /* Script fonts are often visually lighter, so let's keep the font-weight light */
    font-weight: 400;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.cursor {
    display: inline-block;
    color: var(--primary-color);
    animation: blink 0.75s step-end infinite;
    font-size: 1.1em;
    font-weight: 300;
    margin-left: -5px;
    /* Pull cursor closer to the text */
}

@keyframes blink {

    from,
    to {
        color: transparent
    }

    50% {
        color: var(--primary-color)
    }
}

/* --- Header Right - Menu Improvements --- */
.header-right {
    grid-area: header-right;
    align-self: flex-start;
    justify-self: flex-end;
    padding: 20px;
    position: relative;
    z-index: 10;
}

.menu-button {
    background: #313131;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: var(--secondary-color);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    padding: 11px 24px;
    font-size: 0.95em;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    border-radius: 16px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 2px 10px rgba(255, 255, 255, 0.35),
        inset 0 -2px 10px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

/* --- NEW CSS for Menu Button Logo --- */
.menu-logo {
    /* Adjust these values to control the logo size */
    width: 20px;
    height: 20px;
    object-fit: contain;
    /* Ensures the logo scales without being cropped */

    /* Add a slight vertical offset if needed for perfect centering */
    /* transform: translateY(-1px); */
}

/* ------------------------------------ */

.menu-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.menu-button:hover {
    background: #3d3d3d;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.12),
        inset 0 2px 10px rgba(255, 255, 255, 0.45),
        inset 0 -2px 10px rgba(0, 0, 0, 0.04);
    transform: translateY(-3px);
}

.menu-button:hover::before {
    opacity: 1;
}

.menu-button:active {
    background: #282828;
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.1),
        inset 0 2px 8px rgba(255, 255, 255, 0.25),
        inset 0 -2px 8px rgba(0, 0, 0, 0.03);
}

.dropdown-content {
    position: absolute;
    background: rgba(20, 20, 30, 0.7);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    min-width: 220px;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.2),
        0 0 1px rgba(255, 255, 255, 0.15) inset;
    z-index: 1;
    right: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* Animation Properties */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
    transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-right:hover .dropdown-content {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0) scale(1);
    padding: 12px 0;
}

.dropdown-content a {
    color: rgba(255, 255, 255, 0.85);
    padding: 14px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    font-weight: 400;
    font-size: 0.95em;
}

.dropdown-content a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
    border-radius: 2px;
    transition: height 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dropdown-content a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 1);
    padding-left: 24px;
}

.dropdown-content a:hover::before {
    height: 20px;
}

.dropdown-content a:active {
    background: rgba(255, 255, 255, 0.12);
}

/* Divider between menu items (optional) */
.dropdown-content a:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Center Content - Jersey PNG --- */
.jersey-flip-container {
    /* Set the maximum size of the jersey image on the page */
    width: 450px;
    /* Adjust width as necessary */
    height: auto;
    max-width: 80%;
    /* Ensures responsiveness */
    aspect-ratio: 1 / 1;
    /* Keeps the container square/proportional if images are the same aspect ratio */
    perspective: 1000px;
    cursor: pointer;
}

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Smoother, bouncier transition */
    transform-style: preserve-3d;
}

/* Trigger the flip on hover of the main container */
.jersey-flip-container:hover .flip-inner {
    transform: rotateY(180deg);
}

.front,
.back {
    position: absolute;
    width: 100%;
    height: 100%;
    /* This is the key: hides the back side of the element during rotation */
    backface-visibility: hidden;
}

.front img,
.back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Use 'contain' to ensure the whole image is visible */
    transition: box-shadow 0.3s ease;
}

/* Initial rotation for the back side */
.back {
    transform: rotateY(180deg);
}

/* Optional: Add a subtle lift/shadow on hover to the whole flip container */
.jersey-flip-container:hover {
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.2));
}



/* --- Bottom Left & Right (Same as before) --- */
.bottom-left {
    grid-area: bottom-left;
    align-self: flex-end;
    justify-self: flex-start;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- Bottom Right Logo --- */
.bottom-right-logo {
    grid-area: bottom-right;
    align-self: flex-end;
    justify-self: flex-end;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logo-img {
    width: 90px;
    /* Adjust size of the logo */
    height: 60px;
    opacity: 0.3;
    /* Make it subtle in the corner */
    transition: opacity 0.3s ease;
}

.footer-logo-img:hover {
    opacity: 0.6;
    /* Slight visibility boost on hover */
}

#bottom-text {
    font-size: 1.1em;
    color: var(--text-light);
    max-width: 300px;
}

.order-button {
    background: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    padding: 12px 25px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 30px;
    transition: background 0.3s ease, transform 0.3s ease;
    width: fit-content;
}

.order-button:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
}

.bottom-right {
    grid-area: bottom-right;
    align-self: flex-end;
    justify-self: flex-end;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Responsive Adjustments (Reworked) --- */

@media (max-width: 768px) {
    :root {
        --header-font-size: 3em;
    }
}

@media (max-width: 768px) {
    .hero-section {
        grid-template-areas:
            "header-left header-right"
            "center-content center-content"
            "bottom-left bottom-right";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 3fr auto;
        padding: 15px;
    }

    .bottom-right-logo,
    .bottom-left {
        padding: 15px;
        align-self: center;
    }

    :root {
        --header-font-size: 2.2em;
    }

    .header-left,
    .header-right {
        padding: 15px;
    }

    .header-left {
        justify-self: flex-start;
        align-self: center;
    }

    .header-right {
        justify-self: flex-end;
    }

    .dropdown-content {
        right: 15px;
    }

    .bottom-left,
    .bottom-right {
        padding: 15px;
        align-self: center;
    }

    #bottom-text {
        font-size: 1em;
    }
}

@media (max-width: 480px) {

    /* ---------------------------------------------------- */
    /* 1. REDEFINED GRID LAYOUT (Corrected Stacking Order) */
    /* ---------------------------------------------------- */
    .hero-section {
        /* Use two columns for the header row */
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header-left header-right"
            /* NERO Left, Button Right */
            "center-content center-content"
            /* Jersey spans full width */
            "bottom-left bottom-left"
            /* Main message / Order button spans full width */
            "bottom-right bottom-right";
        /* Logo at the very bottom, centered */

        /* Adjusted row heights to push content into the center */
        grid-template-rows: auto 1fr 3fr auto;
        /* Removed an unnecessary 'auto' row */
        padding: 10px;
        /* Ensure content doesn't stretch past 100vh unless absolutely necessary */
        height: 100vh;
        overflow-y: auto;
    }

    /* ---------------------------------------------------- */
    /* 2. HEADER AND FONT SIZE ADJUSTMENTS */
    /* ---------------------------------------------------- */
    :root {
        --header-font-size: 1.5em;
    }

    .header-left {
        /* Aligned to the left of the screen */
        justify-content: flex-start;
        text-align: left;
        padding: 15px 10px;
        align-self: center;
        /* Vertically aligned with the button */
    }

    .header-right {
        /* Aligned to the right of the screen */
        justify-content: flex-end;
        text-align: right;
        padding: 15px 10px;
        position: static;
        align-self: center;
        /* Vertically aligned with NERO text */
    }

    /* HIDE THE "MENU" WORD */
    .menu-text {
        display: none;
    }

    /* --- SQUARE MENU BUTTON (To keep the logo aligned right) --- */
    .menu-button {
        padding: 12px;
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
    }

    .menu-logo {
        width: 24px;
        height: 24px;
        margin: 0;
        padding: 0;
    }

    /* ---------------------------------------------------- */
    /* 4. JERSEY CONTENT ADJUSTMENT (center-content) */
    /* The Jersey image is now below the Order button */
    /* ---------------------------------------------------- */
    .center-content {
        justify-content: center;
        /* Align the jersey to the top of its row for minimal whitespace */
        align-items: flex-start;
    }

    .jersey-flip-container {
        width: 100%;
        max-width: 90%;
        margin: 0 auto;
    }

    /* ---------------------------------------------------- */
    /* 3. ORDER BUTTON & MESSAGE (bottom-left) */
    /* ---------------------------------------------------- */
    .bottom-left {
        justify-self: center;
        text-align: center;
        align-items: center;
        /* Use flex-direction column for top-to-bottom stacking */
        flex-direction: column;
        padding: 0px 15px 10px 15px;
    }

    .order-button {
        /* Ensures the button is centered and has space below the text */
        width: fit-content;
        margin: 15px auto 0 auto;
    }

    /* ---------------------------------------------------- */
    /* 5. BOTTOM LOGO CENTERING */
    /* ---------------------------------------------------- */
    .bottom-right-logo {
        justify-self: center;
        align-self: center;
        padding: 20px 0;
    }
}