body, html {
    font-family: 'Roboto', sans-serif;
    background-color: #0a0a14; /* Deep charcoal/navy */
    color: #ffffff;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Hide scrollbars for immersion */
}

.megrim-regular {
  font-family: "Megrim", system-ui;
  font-weight: 700;
  font-style: normal;
}

.jim-nightshade-regular {
  font-family: "Jim Nightshade", cursive;
  font-weight: 400;
  font-style: normal;
}

.odibee-sans-regular {
  font-family: "Odibee Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* --- Layer 1: Media Background --- */
#media-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

.media-slot {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    /* Transition duration (Ensure this matches FADE_DURATION in config.js) */
    transition: opacity 1.5s ease-in-out;
}

.media-slot.active {
    opacity: 1;
}

/* Ensure media covers the screen perfectly */
.media-slot img,
.media-slot video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Layer 2: Atmosphere/Overlay --- */
.overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 2;
    /* Dark overlay to ensure foreground contrast */
    background: rgba(0, 0, 0, 0.5);
    /* Subtle vignette effect for atmosphere */
    box-shadow: inset 0 0 150px rgba(0,0,0,0.8);
}

/* --- Layer 3: 3D/Physics Scene --- */
#scene-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3;
    /* Crucial: Allows interaction with the content layer below */
    pointer-events: none;
}

/* --- Layer 4: Content (CTA) --- */
#content {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    animation: fadeInContent 2.5s ease-out;
}

h1 {
    font-size: 5rem;
    font-weight: 100; /* Ultra-light for elegance */
    letter-spacing: 5px;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#enter-button {
    background: transparent;
    border: 1px solid #00ffff; /* Accent color */
    color: #ffffff;
    padding: 15px 45px;
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 3px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s, transform 0.3s;
    pointer-events: auto; /* Ensure button is clickable */
    border-radius: 2px;
}

#enter-button:hover {
    background-color: #00ffff;
    color: #0a0a14;
    /* Futuristic glow effect */
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.7);
    transform: scale(1.02);
}

@keyframes fadeInContent {
    from { opacity: 0; transform: translate(-50%, -40%); }
    
    to { opacity: 1; transform: translate(-50%, -50%); }
}
/* --- Audio Controls (Play/Stop) --- */
#audio-toggle {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 20; /* Ensure it is above all other layers */
    background: rgba(0, 0, 0, 0.3); /* Subtle background for better readability */
    /* Subtle border matching the theme color (cyan) */
    border: 1px solid rgba(0, 255, 255, 0.5);
    border-radius: 2px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s, background-color 0.3s, border-color 0.3s;
    padding: 8px 12px;
    pointer-events: auto; /* Crucial since the 3D scene might overlap */

    /* Flexbox for aligning icon and text side-by-side */
    display: flex;
    align-items: center;
}

#audio-toggle:hover {
    opacity: 1;
    background: rgba(0, 255, 255, 0.1); /* Subtle glow effect on hover */
    border-color: #00ffff;
}

/* Styling the SVG Icon itself */
#audio-toggle svg {
    display: block;
    width: 18px; /* Slightly smaller icon */
    height: 18px;
    stroke: #00ffff;
    margin-right: 10px; /* Space between icon and text */
}

/* Styling the Play/Stop Text */
#audio-text {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 2px;
}

/* --- Interaction Gateway (Combined: Masked Spotlight Grid) --- */
#interaction-gateway {
    /* Essential Layout & Positioning */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 100;
    cursor: pointer;
    transition: opacity 1s ease-out, visibility 1s;
    opacity: 1;
    visibility: visible;

    /* Flexbox Centering */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    /* Base Layer: Darkness */
    background-color: #050508; /* Very dark base */

    /* Needed for correct layering and positioning of pseudo-elements */
    overflow: hidden;
    isolation: isolate;
}

/* Layer 1: The Grid Pattern (Masked by Spotlight) */
#interaction-gateway::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2; /* Behind content and noise layer */

    /* Define variables for the grid */
    /* Using the theme's cyan color for the "glossy" illuminated lines */
    --grid-color-subtle: rgba(0, 255, 255, 0.10);
    --grid-color-major: rgba(0, 255, 255, 0.30);
    --grid-spacing-subtle: 25px;
    --grid-spacing-major: 100px;

    /* The Grid Pattern Implementation */
    background-image:
        /* Major grid lines */
        repeating-linear-gradient(0deg, var(--grid-color-major), var(--grid-color-major) 1px, transparent 1px, transparent var(--grid-spacing-major)),
        repeating-linear-gradient(90deg, var(--grid-color-major), var(--grid-color-major) 1px, transparent 1px, transparent var(--grid-spacing-major)),
        /* Subtle grid lines */
        repeating-linear-gradient(0deg, var(--grid-color-subtle), var(--grid-color-subtle) 1px, transparent 1px, transparent var(--grid-spacing-subtle)),
        repeating-linear-gradient(90deg, var(--grid-color-subtle), var(--grid-color-subtle) 1px, transparent 1px, transparent var(--grid-spacing-subtle));

    /* --- The Spotlight Mask --- */
    /* This radial gradient acts as the mask. The grid is visible in the center (opaque)
       and fades out towards the edges (transparent). We use an ellipse for a wider spread. */
    mask-image: radial-gradient(
        ellipse 80% 70% at 50% 50%,
        rgba(0, 0, 0, 1) 0%,      /* Fully visible center */
        rgba(0, 0, 0, 0.5) 40%,   /* Feathering starts */
        rgba(0, 0, 0, 0) 75%      /* Fully hidden edges */
    );
    /* Ensure compatibility across different browsers (e.g., Safari, Chrome) */
    -webkit-mask-image: radial-gradient(
        ellipse 80% 70% at 50% 50%,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0) 75%
    );
}

/* Layer 2: Subtle Noise Texture (Adds depth and industrial realism) */
#interaction-gateway::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; /* Behind content, layered over the grid */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05; /* Very subtle */
}

/* State when the gateway is dismissed */
#interaction-gateway.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Logo Styling within Gateway */
#interaction-gateway img {
    margin-bottom: 30px;
    max-width: 90%;
    /* Enhance depth by adding a subtle shadow to the logo */
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.7));
}

/* Text Styling within Gateway */
#interaction-gateway p {
    font-weight: 300;
    letter-spacing: 3px;
    font-size: 0.9rem;
    color: #ffffff;
    opacity: 0.7;
    animation: blink 4s infinite;
}

@keyframes blink {
    0% { opacity: 0.7; }
    50% { opacity: 0.3; }
    100% { opacity: 0.7; }
}