/* --- 1. CORE RESET & BACKGROUND --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* --- SCROLLBAR REMOVAL (Fixes Layout Shift) --- */
html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

body::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

html, body {
    width: 100%; max-width: 100%;
    overflow-x: hidden; 
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #050000; color: #fff;
    min-height: 100vh; display: flex; flex-direction: column;
}

#bg-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -10; 
    background: url('images/Sponsor_BG.png') no-repeat center center;
    background-size: cover;
}

.bg-tint {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: radial-gradient(circle, rgba(5, 5, 5, 0.4) 0%, rgba(0, 0, 0, 0.9) 100%); 
    z-index: 1;
}

canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
    opacity: 0.3; 
}

/* --- 2. NAVBAR (SYNCED WITH INDEX) --- */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 50px 15px 35px;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 50, 50, 0.3);
    position: fixed; top: 0; width: 100%; height: 80px;
    z-index: 1000; transition: all 0.3s ease;
}

.logo { display: flex; align-items: center; z-index: 2001; }
.logo img {
    height: 45px; width: auto; display: block;
    mix-blend-mode: screen; margin-left: -5px; 
    transition: transform 0.3s ease, filter 0.3s ease;
}
.logo img:hover { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8)); }

.nav-links { display: flex; gap: 30px; }
.nav-links a {
    text-decoration: none; color: #ccc; 
    font-size: 0.9rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.3s ease; position: relative; padding: 5px 0;
    cursor: pointer;
}
.nav-links a:hover, .nav-links a.active { color: #ff3333; text-shadow: 0 0 8px rgba(255, 0, 0, 0.6); }
.nav-links a::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0;
    background-color: #ff3333; transition: width 0.3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; z-index: 2001; }
.hamburger span { display: block; width: 25px; height: 3px; background-color: #fff; transition: all 0.3s ease; }

/* --- 3. PAGE HEADER --- */
.page-header {
    margin-top: 140px; text-align: center; z-index: 2; margin-bottom: 50px;
    padding: 0 15px; width: 100%;
}
.page-header h1 {
    font-family: 'Orbitron', sans-serif; font-size: 3rem; 
    letter-spacing: 5px; color: #fff; text-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
    margin-bottom: 10px; line-height: 1.1; word-wrap: break-word;
}
.page-header p {
    color: #ff3333; letter-spacing: 3px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase;
}

/* --- 4. GRID LAYOUT --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 100px 40px; width: 100%; max-width: 1200px;
    margin: 0 auto 100px auto; padding: 0 20px; z-index: 2; justify-items: center; 
}

/* --- 5. ENVELOPE ASSEMBLY (MOLTEN RED THEME) --- */
.envelope-wrapper {
    position: relative; width: 280px; height: 180px;
    perspective: 1500px; 
    cursor: pointer; 
}

.envelope { 
    top: 60px;
    position: relative; width: 100%; min-height: 100%; 
    transform-style: preserve-3d;
    clip-path: inset(-500% 0 0 0); 
    transition: filter 0.4s ease;
}

.envelope-wrapper:hover .envelope {
    filter: drop-shadow(0 0 20px rgba(255, 30, 30, 0.6));
}

.env-back {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a0000 0%, #3d0000 100%); 
    border-radius: 5px;
    z-index: 1;
    border: 1px solid rgba(255, 51, 51, 0.4);
}

/* Update this in Section 5 */
.env-card {
    position: absolute; 
    bottom: 3px; /* Fixed typo from '3' to '3px' */
    left: 15px; 
    width: 250px; 
    height: 150px;
    background: #000000; 
    border-radius: 4px;
    transform: translateY(20px); 
    opacity: 0; 
    z-index: 5; /* Starts behind the front flap */
    /* Optimized transition for the "up and over" feel */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.3s ease, 
                z-index 0s linear 0.3s; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    background-image: linear-gradient(transparent 50%, rgba(255,0,0,0.05) 50%);
    background-size: 100% 4px;
    transition: transform 0.5s ease-in, opacity 0.3s ease, z-index 0s 0.5s;
}

.env-card img { max-width: 85%; max-height: 85%; object-fit: contain; }

@keyframes indicator-blink-red {
    0%, 100% { border-color: rgba(255, 0, 0, 0.3); box-shadow: 0 0 5px rgba(255,0,0,0.2); }
    50% { border-color: #ff0000; box-shadow: 0 0 15px rgba(255,0,0,0.5); }
}

.env-front {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    clip-path: polygon(0 0, 50% 40%, 100% 0, 100% 100%, 0 100%);
    background-color: #1a0000; 
    border: 1.5px solid rgba(255, 0, 0, 0.5);
    border-radius: 5px; 
    z-index: 10;
    display: flex; justify-content: center; align-items: flex-end; padding-bottom: 25px;
    animation: indicator-blink-red 2.5s infinite ease-in-out;
    transition: all 0.3s ease;
}

.env-front::after {
    content: 'STATUS: ACTIVE'; position: absolute; bottom: 5px; left: 10px;
    font-family: 'Orbitron', sans-serif; font-size: 0.4rem; color: #ff3333;
}

.stamp {
    position: relative;
    border: 2px dashed #ff3333;
    background: #000; color: #ff3333;
    padding: 8px 15px;
    font-family: 'Orbitron', sans-serif; font-weight: 700;
    font-size: 0.85rem; letter-spacing: 1px;
    box-shadow: 0 0 15px rgba(255, 50, 50, 0.4);
    white-space: nowrap;
}

.env-flap {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    clip-path: polygon(0 0, 50% 45%, 100% 0);
    transform-origin: top; 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0.4s, z-index 0.1s linear 1s, border-color 0.3s ease;
    border-radius: 5px; 
    background-color: #2a0000; 
    border: 1.5px solid rgba(255, 0, 0, 0.4);
    animation: indicator-blink-red 2.5s infinite ease-in-out;
    z-index: 20;
    transform: translateZ(1px);
}

.wax-seal {
    position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%);
    width: 32px; height: 32px; background: #ff0000; border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; color: #000; font-weight: 900; font-family: 'Orbitron';
    border: 1px solid #500;
}

/* --- 6. INTERACTION LOGIC --- */

/* MOBILE/TABLET: Triggered by the 'is-open' class (JS Taps) */
.envelope-wrapper.is-open .env-flap {
    animation: none;
    border-color: #ff3333; 
    transform: rotateX(180deg); 
    background-color: #4d0000; 
    z-index: 0; 
    transition-delay: 0s;
}

.envelope-wrapper.is-open .env-front {
    animation: none;
    background-color: #2a0000;
    box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.6), 0 0 15px rgba(255, 0, 0, 0.4); 
    border-color: #ff3333;
}

.envelope-wrapper.is-open .env-card {
    opacity: 1; 
    transform: translateY(-110px); 
}


/* NEW ANI */
@keyframes openCloseFlap {
    0% { transform: rotateX(0deg); z-index: 5; }
    20% { transform: rotateX(180deg); z-index: 1; } /* Open quickly */
    80% { transform: rotateX(180deg); z-index: 1; } /* Stay open while card moves */
    100% { transform: rotateX(0deg); z-index: 1; } /* Close over the card */
}

@keyframes popAndStack {
    0% {
        transform: translateY(20px);
        z-index: 5;
        opacity: 0;
    }
    45% {
        transform: translateY(-160px);
        z-index: 5;
        opacity: 1;
    }
    55% {
        transform: translateY(-160px);
        z-index: 25; /* Switch to front at the peak */
        opacity: 1;
    }
    100% {
        transform: translateY(-20px); /* Back to original position, but on top */
        z-index: 25;
        opacity: 1;
    }
}







/* LAPTOP/DESKTOP: Triggered by Hover */
@media (hover: hover) {
    /* 1. Trigger the Flap Animation */
    .envelope-wrapper:hover .env-flap {
        transform-origin: top; /* Critical for a realistic fold */
        animation: openCloseFlap 2s ease-in-out forwards;
        background-color: #4d0000;
        border-color: #ff3333;
    }

    /* 2. Trigger the Card Animation */
    .envelope-wrapper:hover .env-card {
        animation: popAndStack 2s ease-in-out forwards;
    }

    /* 3. Aesthetic adjustments for the rest */
    .envelope-wrapper:hover .env-front {
        background-color: #2a0000;
        box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.6), 0 0 15px rgba(255, 0, 0, 0.4);
        border-bottom-color: #ff3333;
    }

    .envelope-wrapper:hover .wax-seal {
        opacity: 0; /* Hide seal when it opens */
        transition: opacity 0.3s;
    }
}

/* Shared Active State for Wax Seal (Click/Tap) */
.envelope-wrapper.is-open .wax-seal {
    box-shadow: 0 0 25px #ff0000; 
    background: #ffffff; 
    color: #000;
}

.envelope-wrapper.is-open .envelope {
    filter: drop-shadow(0 0 20px rgba(255, 30, 30, 0.6));
}

/* --- 7. RESPONSIVE SYNCED --- */
@media (max-width: 968px) {
    nav { 
        padding: 0 20px; 
        height: 72px; /* Reduced from 80px (80% of original) */
    }

            /* Adjust logo size to fit the smaller nav height */
    .logo img {
        height: 37px; /* Reduced from 45px */
    }

    .hamburger { display: flex; }

            /* Mobile Menu Styling - Contact Page Style */
    .nav-links {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: linear-gradient(to left, #000000 0%, #000000 55%, rgba(0,0,0,0.1) 100%);
        backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
        flex-direction: column; align-items: flex-end; justify-content: flex-start;
        padding-top: 90px;
        padding-right: 50px;
        transform: translateX(100%); opacity: 0;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
        z-index: 2000; pointer-events: none;
        will-change: transform, opacity;
    }
    .nav-links.active { transform: translateX(0); opacity: 1; pointer-events: all; }
            
    .nav-links a {
        font-size: 1.1rem; 
        margin: 12px 0;    
        width: auto; 
        text-align: right; 
        display: block; 
        font-weight: 500; 
    }
    .nav-links a::after { left: auto; right: 0; }

    .hamburger.toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.toggle span:nth-child(2) { opacity: 0; }
    .hamburger.toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* ... existing nav code ... */

    /* Ensure the card doesn't pop up too high on tablets */
    @keyframes popAndStackTablet {
        0% { transform: translateY(20px); z-index: 5; opacity: 0; }
        45% { transform: translateY(-130px); z-index: 5; opacity: 1; }
        55% { transform: translateY(-130px); z-index: 25; opacity: 1; }
        100% { transform: translateY(-15px); z-index: 25; opacity: 1; }
    }

    /* Apply the animation to the JS click state for mobile/tablet */
    .envelope-wrapper.is-open .env-card {
        animation: popAndStackTablet 1.5s ease-in-out forwards;
    }

    .envelope-wrapper.is-open .env-flap {
        animation: openCloseFlap 1.5s ease-in-out forwards;
    }
}
            

@media (max-width: 700px) {
    .page-header {
        margin-top: 100px;

    }
    .page-header h1 { font-size: 2rem; margin-bottom: 20px;}
    
    /* Increase vertical gap to account for the card popping UP */
    .grid-container { 
        grid-template-columns: minmax(0, 1fr); 
        gap: 30px; /* Increased top/bottom gap */
        padding: 20px 20px; 
    }

    .envelope-wrapper { transform: scale(0.9); margin: 0; }

    /* Scaled animation for small screens */
    @keyframes popAndStackMobile {
        0% { transform: translateY(10px); z-index: 5; opacity: 0; }
        45% { transform: translateY(-160px); z-index: 5; opacity: 1; }
        55% { transform: translateY(-160px); z-index: 25; opacity: 1; }
        100% { transform: translateY(-10px); z-index: 25; opacity: 1; }
    }

    .envelope-wrapper.is-open .env-card {
        animation: popAndStackMobile 1.5s ease-in-out forwards;
    }
    .envelope { 
        top: 0px;
    }
}

@media (max-width: 360px) {
    .envelope-wrapper { transform: scale(0.8); margin: -10px 0; }
    .page-header h1 { font-size: 1.8rem; }

    @keyframes popAndStackSmall {
        0% { transform: translateY(10px); z-index: 5; opacity: 0; }
        45% { transform: translateY(-90px); z-index: 5; opacity: 1; }
        55% { transform: translateY(-90px); z-index: 25; opacity: 1; }
        100% { transform: translateY(-5px); z-index: 25; opacity: 1; }
    }

    .envelope-wrapper.is-open .env-card {
        animation: popAndStackSmall 1.5s ease-in-out forwards;
    }
}


.minimal-footer {
    width: 100%;
    /* Use clamp for responsive padding: min 15px, preferred 3vw, max 25px */
    padding: clamp(15px, 3vw, 25px) 0; 
    background-color: #050000;
    opacity: 0.6;
    border-top: 1px solid rgba(255, 50, 50, 0.1);
    text-align: center;
    margin-top: auto;
}

.minimal-footer p {
    font-family: 'Montserrat', sans-serif;
    /* Scales font size based on screen width so it doesn't look huge on phones */
    font-size: clamp(0.75rem, 2vw, 1rem); 
    color: #ff0000;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    /* Prevents text from hitting the screen edges on mobile */
    margin: 0 15px; 
    line-height: 1.4;
}