/* Custom Fonts */
@font-face {
    font-family: 'Macbex'; /* This is the name you'll use in font-family */
    src: url('../fonts/Macbex.ttf') format('truetype'); /* Only load the .ttf file */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Tells the browser how to display text while font is loading */
}

@font-face {
    font-family: 'Glitch Goblin'; /* This is the name you'll use in font-family */
    src: url('../fonts/GlitchGoblin.ttf') format('truetype'); /* Only load the .ttf file */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Tells the browser how to display text while font is loading */
}

/* Background Video */
#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1; /* This is crucial to keep it behind other content */
}

/* Page Container (holds everything above the video) */
.container {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0;
    padding: 0;
    color: black; /* Text color for elements within body if not overridden */
    list-style: none;
    background-color: black; /* NEW: Ensures the entire body background is black */
}

/* Optional overlay wrapper (if you want padding around all content) */
.content-overlay {
    position: relative;
    z-index: 2;
    padding: 20px;
    text-align: center; /* Added for general centering of text within it */
}

/* Fleeting Questions (if you add them back to HTML) */
#fleeting-question {
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 15px 25px;
    border: 2px solid #00FF00;
    color: #00FF00;
    font-family: 'VT323', 'Press Start 2P', monospace;
    font-size: 1.8em;
    text-align: center;
    max-width: 70%;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}

/* General Headings (if used for other content) */
h1 {
    color: orangered; /* Default h1 color if not overridden by specific classes */
}

/* Headings currently not in your index.html */
/*
.welcome-text-container h1 { color: #00FF00; }
h2 { color: yellowgreen; }
h3 { color: royalblue; }
*/

.centered-gif {
    width: 600px; /* Adjust as needed */
    height: auto;
}

.enter-now-button {
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid #00FF00;
    color: #00FF00;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
    font-family: 'Press Start 2P', 'VT323', monospace;
    font-size: 1.5em;
    pointer-events: auto;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

    .enter-now-button:hover {
        background-color: #00FF00;
        color: black;
        border-color: #00FF00;
    }

.gif-and-button-container {
    position: absolute;
    top: 55vh;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: fit-content;
    gap: 125px;
}

/* welcome-text-container was not in your last index.html, so commenting out its style */
/*
.welcome-text-container {
    position: absolute;
    top: 25vh;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    color: #00FF00;
    font-family: 'Glitch Goblin', 'Press Start 2P', 'VT323', monospace;
    font-size: 2em;
    white-space: nowrap;
}

.blinking-underscore {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}
*/

/* Real-time Surveillance Text */
.surveillance-text {
    position: fixed;
    bottom: 20px;
    left: 20px;
    color: #00FF00;
    font-family: 'VT323','Consolas', monospace;
    font-size: 1.5em;
    z-index: 10;
    padding: 5px;
}

    .surveillance-text::after {
        content: '';
        display: inline-block;
        width: 1.5em;
        overflow: hidden;
        vertical-align: bottom;
        animation: dots 1.5s steps(4) infinite;
    }

@keyframes dots {
    0% {
        content: ".";
    }

    25% {
        content: "..";
    }

    50% {
        content: "...";
    }

    75% {
        content: "";
    }

    100% {
        content: ".";
    }
}






.main-website-title {
    position: absolute;
    top: 2vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    white-space: nowrap;
}

    .main-website-title h1 {
        font-family: 'Macbex', sans-serif;
        font-size: 8em;
        letter-spacing: 5px;
        /* Background Gradient */
        background: repeating-linear-gradient(180deg, #1A0033 0%, #1A0033 5%, #00FF00 5%, #00FF00 10%, #1A0033 10%, #1A0033 15%, #FF9900 15%, #FF9900 20%, #1A0033 20%, #1A0033 25%, #FF0000 25%, #FF0000 30%, #1A0033 30%, #1A0033 35%, #00FFFF 35%, #00FFFF 40%, #1A0033 40%, #1A0033 45%, #FF00FF 45%, #FF00FF 50%, #1A0033 50%, #1A0033 55%, #00FF00 55%, #00FF00 60% );
        background-size: auto 240%;
        -webkit-background-clip: text;
        background-clip: text;
        color: black; /* Text fill is black */
        /* Violent animation transitions */
        animation: tron-color-shift 2.5s steps(10) infinite, /* Adjusted for your full gradient including red */
        neon-segments-shift 1s steps(4) infinite;
    }

/* @keyframes for background gradient shift */
@keyframes tron-color-shift {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 0% -200%;
    }
    /* Assuming 200% as before */
    /* Note: If you want this to match the new 240% background-size,
       you might want background-position: 0% -240%; at 100% */
}


/* @keyframes for Neon Segments Animation (sharp outline with no glow) */
@keyframes neon-segments-shift {
    0% {
        text-shadow:
        /* Base Black Outline (remains constant) */
        1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000,
        /* Dynamic White Accents */
        -1px -1px 0px rgba(255, 255, 255, 0.8), /* Top-left accent (strong) */
        1px 1px 0px rgba(255, 255, 255, 0.3), /* Bottom-right accent (faint) */
        2px 0px 0px rgba(255, 255, 255, 0), /* Horizontal accent (hidden) */
        -2px 0px 0px rgba(255, 255, 255, 0), 0px 2px 0px rgba(255, 255, 255, 0.6), /* Vertical accent (medium) */
        0px -2px 0px rgba(255, 255, 255, 0);
    }

    25% {
        text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000, -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(255, 255, 255, 0.8), 2px 0px 0px rgba(255, 255, 255, 0.6), -2px 0px 0px rgba(255, 255, 255, 0), 0px 2px 0px rgba(255, 255, 255, 0), 0px -2px 0px rgba(255, 255, 255, 0.8);
    }

    50% {
        text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000, -1px -1px 0px rgba(255, 255, 255, 0), 1px 1px 0px rgba(255, 255, 255, 0.6), 2px 0px 0px rgba(255, 255, 255, 0), -2px 0px 0px rgba(255, 255, 255, 0.8), 0px 2px 0px rgba(255, 255, 255, 0.8), 0px -2px 0px rgba(255, 255, 255, 0);
    }

    75% {
        text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000, -1px -1px 0px rgba(255, 255, 255, 0.8), 1px 1px 0px rgba(255, 255, 255, 0), 2px 0px 0px rgba(255, 255, 255, 0.8), -2px 0px 0px rgba(255, 255, 255, 0), 0px 2px 0px rgba(255, 255, 255, 0), 0px -2px 0px rgba(255, 255, 255, 0.8);
    }

    100% {
        text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000, -1px -1px 0px rgba(255, 255, 255, 0.8), /* Loops back to 0% state */
        1px 1px 0px rgba(255, 255, 255, 0.3), 2px 0px 0px rgba(255, 255, 255, 0), -2px 0px 0px rgba(255, 255, 255, 0), 0px 2px 0px rgba(255, 255, 255, 0.6), 0px -2px 0px rgba(255, 255, 255, 0);
    }
}


/* --- NEW: Preloader Styles --- */
#preloader {
    position: fixed; /* Fixes it to the viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-color: black; /* Black background */
    z-index: 9999; /* Ensures it's on top of everything */
    display: flex; /* Use flexbox to center content */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #00FF00; /* Neon green text for "LOADING..." */
    font-family: 'VT323', monospace; /* Cyber font */
    font-size: 2em; /* Adjust size as needed */
    opacity: 1; /* Starts fully visible */
    transform: scale(1); /* Start at normal size */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Animate opacity AND transform */
}

.loading-text {
    margin-bottom: 20px; /* Space between text and bar */
}

.loading-bar-container {
    width: 300px; /* Width of the loading bar container */
    height: 10px; /* Height of the loading bar */
    border: 1px solid #00FF00; /* Green border for the bar */
    border-radius: 5px; /* Slightly rounded corners */
    overflow: hidden; /* Ensures fill stays within bounds */
}

#loading-bar-fill {
    height: 100%; /* Fill takes full height of container */
    width: 0%; /* Starts empty */
    background-color: #00FF00; /* Green fill color */
    transition: width 0.5s ease-out; /* Smooth animation for the fill progress */
}

/* --- NEW: Main Content Wrapper Styles (Initially Hidden) --- */
#main-content-wrapper {
    opacity: 0; /* Starts completely hidden */
    pointer-events: none; /* Prevents interaction until visible */
    transition: opacity 1s ease-in; /* For a smooth fade-in effect */
}


/* --- NEW: Exit Transition Overlay --- */
#exit-transition-overlay {
    position: fixed; /* Fixes it to the viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-color: black; /* The color it will fade to */
    z-index: 9998; /* Just below preloader, but above everything else on the page */
    opacity: 0; /* Starts completely transparent (hidden) */
    pointer-events: none; /* Prevents it from blocking clicks when hidden */
    transition: opacity 1s ease-in-out; /* Smooth fade-in/out effect */
}

    #exit-transition-overlay.fade-to-black {
        opacity: 1; /* When this class is added, it becomes fully visible */
        pointer-events: auto; /* It will now cover the screen and block interaction */
    }

/* Spinning Head for Main Content Page */
#spinning-head-main-content {
    position: absolute; /* Position it relative to the body */
    top: 20px; /* 20px from the top */
    left: 20px; /* 20px from the left */
    z-index: 10; /* Ensure it's above other elements like the grey box */
}

    #spinning-head-main-content img {
        width: 150px; /* NEW: Smaller size, adjust as needed (e.g., 100px, 200px) */
        height: auto; /* Maintain aspect ratio */
    }

/* --- NEW: Cart Icon Styles --- */
#cart-icon-container {
    position: fixed; /* Keep it fixed on screen */
    top: 20px; /* From top */
    right: 20px; /* From right */
    z-index: 100; /* Ensure it's on top of everything */
    color: #00FF00; /* Neon green color */
    font-size: 2em; /* Adjust size */
    cursor: pointer; /* Indicates it's clickable */
}

#cart-item-count {
    position: absolute;
    top: -5px; /* Adjust vertical position relative to icon */
    right: -5px; /* Adjust horizontal position relative to icon */
    background-color: red; /* Red badge */
    color: white;
    font-size: 0.5em; /* Smaller font for count */
    padding: 3px 7px; /* Oval shape */
    border-radius: 50%; /* Make it round */
    line-height: 1; /* Center number vertically */
    min-width: 15px; /* Ensure it's wide enough for double digits */
    text-align: center;
}

/* --- NEW: Product Listings Styles (inside grey box) --- */
#product-listings {
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between product cards */
    padding: 20px; /* Padding inside the grey box */
    width: 100%; /* Take full width of parent */
    height: 100%; /* Take full height of parent */
    overflow-y: auto; /* Enable scrolling if many products */
    justify-items: center; /* Center items within grid cells */
    align-items: center; /* Center items vertically within grid cells */
}

/* --- NEW: Individual Product Card Styles (will be created by JS) --- */
.product-card {
    background-color: rgba(0, 0, 0, 0.7); /* Dark background for cards */
    border: 1px solid #00FFFF; /* Cyan border */
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    color: white;
    font-family: 'VT323', monospace;
    max-width: 280px; /* Max width for each card */
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); /* Cyan glow */
}

    .product-card img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .product-card h3 {
        color: #00FF00; /* Green product name */
        margin-top: 0;
        margin-bottom: 5px;
    }

    .product-card p {
        font-size: 0.9em;
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .product-card .price {
        color: #FFFF00; /* Yellow price */
        font-weight: bold;
        font-size: 1.1em;
    }

    .product-card button {
        background-color: #FF9900; /* Orange Add to Cart button */
        color: black;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        font-family: 'VT323', monospace;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

        .product-card button:hover {
            background-color: #FF6600; /* Darker orange on hover */
            box-shadow: 0 0 8px rgba(255, 153, 0, 0.7); /* Orange glow on hover */
        }

    /* Indicate product titles are clickable */
    .product-card h3.clickable-title {
        cursor: pointer;
        text-decoration: underline; /* Optional: adds an underline on hover */
        transition: color 0.3s ease;
    }

        .product-card h3.clickable-title:hover {
            color: #00FFFF; /* Optional: changes color on hover */
        }