/* Basic CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- THEME & GLOBAL VARIABLES --- */
:root {
    /* Colors */
    --color-text-light: #ffffff;
    --color-text-dark: #333;
    --color-background-dark: #000000;
    --color-accent-yellow: #ffff00;
    --color-accent-green: #00ff00;
    --color-accent-gold: #FFD700;
    --color-accent-tan: tan;

    /* Fonts */
    --font-pixel: 'Press Start 2P', cursive;
    --font-title: 'Rubik Dirt', sans-serif;
    --font-button: 'jersey 15', sans-serif;
    --font-typewriter: 'Special Elite', monospace;
}

html {
    overflow: hidden;
}

/* Body Styling: Full screen, retro font, dark background */
body {
    font-family: var(--font-pixel); /* Apply the pixelated font as fallback */
    color: var(--color-text-light); /* White text for contrast */
    background-color: var(--color-background-dark); /* Black background as fallback */
    /* Use dynamic viewport height (dvh) to avoid layout jumps from mobile browser UI */
    height: 100dvh;
    overflow: hidden; /* Crucial: Hides any overflow from the oversized video background or sliding screens */
    position: relative; /* Needed for z-index of children like modal */
    perspective: 1500px; /* Add perspective for 3D transitions */
}

/* Video Background Styling (now applies to iframe) */
.video-background-iframe {
    position: fixed; /* Fixes element to the viewport */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    /* These dimensions are key for the "cover" effect.
       They ensure the iframe is always large enough to cover the viewport
       while maintaining a 16:9 aspect ratio (16/9 = 1.777..., 9/16 = 0.5625). */
    width: 177.77777778vh; /* 16/9 of viewport height */
    height: 56.25vw; /* 9/16 of viewport width */
    min-width: 100%; /* Ensure it's at least 100% wide */
    min-height: 100%; /* Ensure it's at least 100% tall */
    transform: translate(-50%, -50%); /* Use transform to truly center and cover */
    z-index: -2; /* Place behind all other content */
    pointer-events: none; /* Allows clicks to pass through to elements behind it */
}

/* Overlay for better text readability over video */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    z-index: -1; /* Between video/iframe and content */
}

/* Screen Container: Holds all main screens side-by-side for sliding */
#screenContainer {
    display: flex; /* Arranges children (screens) horizontally */
    width: 300vw; /* Three viewport widths wide (features + main + scene) */
    height: 100dvh; /* Use dynamic viewport height */
    position: absolute; /* Crucial: Position absolutely from top-left of viewport */
    top: 0;
    left: 0;
    /* Changed transition duration to 1s */
    transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1), opacity 1.2s cubic-bezier(0.76, 0, 0.24, 1), filter 0.5s ease-out; /* Smooth transition for 3D effect and filter */
    z-index: 10; /* Position above the about us screen initially */
    transform: translateX(-100vw); /* Start on the main menu by default (now the 2nd screen) */
    transform-origin: center center; /* Set transform origin for rotation */
}

/* Classes to slide the screen container left to specific pages */
#screenContainer.slide-to-special-features {
    transform: translateX(0vw); /* Special Features is the first screen */
}
#screenContainer.slide-to-main {
    transform: translateX(-100vw); /* Main Menu is the second screen */
}
#screenContainer.slide-to-scene {
    transform: translateX(-200vw); /* Scene Selection is the third screen */
}

/* Base styling for all screen wrappers (main, scene, special features) */
.screen-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes header to top, footer to bottom, main in between */
    align-items: center;
    height: 100dvh; /* Use dynamic viewport height */
    width: 100vw; /* Each screen takes one full viewport width */
    flex-shrink: 0; /* Prevents shrinking */
    position: relative; /* For back button positioning */
    z-index: 1; /* Ensure its content is visible */
    padding: 20px;
    box-sizing: border-box; /* Include padding in width/height */
    background-size: cover; /* Ensure background images cover the area */
    background-position: center; /* Center background images */
    background-repeat: no-repeat; /* Do not repeat background images */
}

/* Main Menu Screen specific alignment */
#mainMenuScreen {
    align-items: center; /* Align content to the center for main menu */
    padding: 20px 0; /* Symmetrical vertical padding, no horizontal padding */
}

/* Main Title Styling (general for all headers) */
header {
    width: 100%;
    text-align: center;
    padding: 20px; /* Add horizontal padding back here to keep title constrained */
    z-index: 1; /* Ensure title is above video and overlay */
    margin-top: 10vh; /* Push title down from the top to create more space */
    /* Add perspective to the header for 3D effect on h1 */
    perspective: 600px; /* Changed perspective to 400px */
    transform-style: preserve-3d; /* Preserve 3D transformations for children */
}

/* Specific font for the main title */
#mainMenuScreen h1 {
    font-family: var(--font-title); /* New textured font */
    font-size: clamp(3rem, 10vw, 12rem); /* Adjusted for a more reasonable desktop size */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9); /* Dark shadow to enhance texture */
    color: var(--color-accent-gold); /* Gold color for the title */
    text-align: center; /* Keep title centered */
    width: 100%; /* Ensure it spans full width for centering */
    transform: none; /* Reset 3D transform to let the font stand out */
    letter-spacing: 4px; /* Adjusted letter spacing for the new font */
}

/* New: Subtitle styling for 'THE SHOWREEL' */
.subtitle-showreel {
    font-family: var(--font-pixel); /* Pixelated font */
    font-size: clamp(0.8rem, 2.5vw, 2rem); /* Responsive size, smaller than main title */
    color: var(--color-accent-green); /* Green for a "Matrix" feel */
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7), /* Green glow */
                 0 0 10px rgba(0, 255, 0, 0.5);
    letter-spacing: 3px; /* Wider spacing */
    margin-top: 10px; /* Space from main title */
    filter: blur(0.5px); /* Subtle blur for a digital effect */
}

/* Style for individual characters in the subtitle, controlled by JS */
.subtitle-showreel span {
    display: inline-block; /* Allows transform and animation on each character */
    /* Initial state for JS animation - these are the *final* styles, but with opacity 0 */
    opacity: 0;
    filter: blur(0); /* Start with no blur, animation will add it */
    transform: translateY(0); /* Start at final Y position */
    color: var(--color-accent-green); /* Start with final color, animation will change it */
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.5);
    
    /* Transition for the reveal to final state after cycling */
    transition: opacity 0.2s ease-out, filter 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out, text-shadow 0.2s ease-out;
}


/* Hide the original h1 title on the Special Features screen */
#specialFeaturesScreen header h1 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Make it unclickable */
    /* Ensure it takes up space for layout consistency */
    display: block;
    width: 100%;
    text-align: center;
}

/* Main content area within screen-wrapper */
main {
    flex-grow: 1; /* Allows main content to take available space */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes its content (button-container) to the bottom */
    width: 100%; /* Take full width of parent */
    align-items: flex-end; /* Align main content to the right */
}

/* Specific alignment for main menu's main content */
#mainMenuScreen main {
    align-items: stretch; /* Stretch the button container to full width */
    justify-content: flex-end; /* Keep it at the bottom */
    padding-bottom: 5vh; /* Add some space from the very bottom edge */
}

/* Specific styling for special features screen's main content to center its buttons */
#specialFeaturesScreen main {
    justify-content: center; /* Center buttons vertically */
    align-items: center; /* Center buttons horizontally */
}

/* Button Container Styling */
.button-container {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 20px; /* Space between buttons */
    width: fit-content; /* Adjust width to content */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.3); /* Slightly transparent background for button block */
    border-radius: 8px; /* Rounded corners */
}

/* Specific styling for main menu button container */
#mainMenuScreen .button-container {
    flex-direction: row; /* Arrange buttons horizontally */
    justify-content: center; /* Center the buttons within the full-width strip */
    gap: 40px; /* Space between horizontal buttons */
    background-color: rgba(255, 255, 255, 0.15); /* Semi-transparent white background */
    padding: 15px 40px; /* Padding for the strip */
    border-radius: 0; /* Remove rounded corners for a full-width strip */
    width: 100%; /* Ensure the container spans the full width */
}

/* Specific styling for special features menu button container (revert background/padding) */
#specialFeaturesScreen .button-container {
    gap: 20px; /* Original gap */
    background-color: rgba(0, 0, 0, 0.3); /* Original background */
    padding: 20px; /* Original padding */
}

/* Individual Button Styling */
.menu-button {
    text-decoration: none; /* Remove underline from links */
    color: var(--color-text-light); /* Default white text */
    font-size: clamp(1rem, 3vw, 1.8rem); /* Responsive font size */
    padding: 10px 20px;rgb(254, 254, 178)
    text-align: center;
    transition: color 0.2s ease-in-out, opacity 0.3s ease-in-out; /* Smooth transition for hover effect and opacity */
    white-space: nowrap; /* Prevent text wrapping */
    cursor: pointer; /* Indicate clickable element */
 
    /* New: Button Font and Gradient */
    font-family: var(--font-button);
    font-size: clamp(1.5rem, 4vw, 2.5rem); /* Slightly larger for emphasis */
    background-image: linear-gradient(to bottom, #ffff00, #ff8c00); /* Vertical gradient: yellow to dark orange */
    -webkit-background-clip: text; /* Clip background to text shape */
    background-clip: text; /* Standard property */
    color: transparent; /* Make text transparent to show gradient */
}

/* Specific styling for main menu buttons */
#mainMenuScreen .menu-button {
    /* Changed to flexbox for precise icon alignment */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Vertically center */
    padding: 10px; /* Symmetrical padding for the button */
    gap: 10px; /* Increased space between icon and text */
    /* Removed text-align: right; as flexbox handles alignment */
    position: relative; /* Keep for general positioning if needed */
    transition: color 0.2s ease-in-out, opacity 0.3s ease-in-out, background-image 0.2s ease-in-out, filter 0.2s ease-in-out;
    /* New: Add a heavy drop shadow to the entire button (text and icon) */
    filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.75));
}

/* Pixelated circle for main menu hovered items */
#mainMenuScreen .menu-button::before {
    content: ''; /* We will create the square with width/height instead of a font character */
    display: inline-block; /* Treat it like a block-level element in the flex row */
    order: -1; /* Place before the text content in flex order */

    /* Proportional sizing using em units, relative to the button's font-size */
    width: 0.6em;
    height: 0.6em;
    background-color: var(--color-accent-yellow);
    box-shadow: 1px 1px 0 black; /* Use box-shadow instead of text-shadow */

    opacity: 0; /* Initially hidden */
    transition: opacity 0s ease-in-out; /* Only opacity transition, no transform */
}

#mainMenuScreen .menu-button:hover::before {
    opacity: 1; /* Just appear */
    transform: none; /* Ensure no lingering transform */
}

/* Specific styling for special features menu buttons (revert font/style) */
#specialFeaturesScreen .menu-button {
    font-family: var(--font-button);
    background-image: none; /* Remove gradient */
    color: var(--color-text-light); /* Ensure white text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Keep original shadow */
    font-size: clamp(1rem, 3vw, 1.8rem); /* Revert to original size */
    padding: 10px 20px; /* Revert to original padding */
    text-align: center; /* Explicitly center text for special features buttons */
}
/* Ensure hover for special features buttons still works */
#specialFeaturesScreen .menu-button:hover {
    color: var(--color-accent-yellow);
    text-shadow: 0 0 10px var(--color-accent-yellow), 0 0 20px var(--color-accent-yellow);
}


/* Button Hover Effect */
.menu-button:hover {
    color: var(--color-accent-yellow); /* Change to solid yellow on hover (overrides gradient) */
    text-shadow: 0 0 10px var(--color-accent-yellow), 0 0 20px var(--color-accent-yellow); /* Add a subtle glow */
    background-image: none; /* Remove gradient on hover for solid color */
}
/* Override for main menu hover to be white */
#mainMenuScreen .menu-button:hover {
    color: var(--color-text-light); /* Make text white on hover */
    text-shadow: 0 0 10px var(--color-text-light), 0 0 20px var(--color-text-light); /* White glow */
}

/* New class to programmatically highlight a main menu button */
#mainMenuScreen .menu-button.is-active {
    color: var(--color-text-light); /* Make text white */
    text-shadow: 0 0 10px var(--color-text-light), 0 0 20px var(--color-text-light);
}

/* Make the selector more specific to override the default opacity: 0 */
#mainMenuScreen .menu-button.is-active::before {
    opacity: 1; /* Show the square icon */
    transform: none;
}


/* Footer Styling */
footer {
    width: 100%;
    text-align: center;
    padding: 15px 20px; /* Add horizontal padding back here to keep footer constrained */
    font-size: clamp(0.5rem, 1.5vw, 0.8rem); /* Much smaller responsive font size */
    color: rgba(255, 255, 255, 0.7); /* Slightly dimmed white for footer */
    z-index: 1; /* Ensure footer is above video and overlay */
}

/* New: DVD Logo in the bottom left */
#dvdLogo {
    position: absolute;
    bottom: 15px; /* Align with footer padding */
    left: 20px;
    width: 60px; /* You can change the size here */
    height: 45px; /* You can change the size here */
    background-color: rgba(255, 255, 255, 0.7); /* You can change the color here */    
    cursor: pointer; /* Indicate that it's clickable for the easter egg */

    /* Use the SVG as a mask to allow for color changes */
    -webkit-mask-image: url('assets/dvd-logo.svg');
    mask-image: url('assets/dvd-logo.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* Add a smooth transition for color changes */
    transition: background-color 0.2s ease-in-out;
}

/* New: Class for when the logo is bouncing */
#dvdLogo.bouncing {
    /* Change position to fixed to bounce around the entire viewport */
    position: fixed;
    /* Let JS control the position via transform, so unset bottom/left */
    bottom: auto;
    left: auto;
    z-index: 200; /* Ensure it's on top of other content */
}

/* New: Speech bubble for the easter egg */
.easter-egg-bubble {
    position: fixed; /* Position relative to the viewport */
    background-color: var(--color-text-light);
    color: var(--color-background-dark);
    padding: 10px 15px;
    border-radius: 8px;
    font-family: var(--font-pixel);
    font-size: 12px;
    white-space: nowrap;
    z-index: 201; /* Above the bouncing logo */
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.5); /* Position above the click point and start small */
    transform-origin: bottom center;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none; /* Don't let it interfere with clicks */
}

.easter-egg-bubble.show {
    opacity: 1;
    transform: translate(-50%, -115%) scale(1); /* Grow to full size and pop up a bit */
}

/* The little triangle pointer for the bubble */
.easter-egg-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: var(--color-text-light) transparent transparent transparent;
}

/* Video Modal Styling */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--color-background-dark); /* Fully opaque */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100; /* High z-index to be on top */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Hidden from screen readers and interactions */
    transform: scale(0.1); /* Start tiny */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s;
}

.video-modal.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.video-modal-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* No padding-bottom or height here, handled by aspect-ratio div */
    background-color: var(--color-background-dark);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-modal-aspect-ratio { /* New class for aspect ratio container */
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    overflow: hidden;
}

.video-modal-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    color: var(--color-text-light);
    font-size: 2rem;
    cursor: pointer;
    z-index: 101;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: color 0.2s ease-in-out;
}

.close-modal:hover {
    color: var(--color-accent-yellow);
}

/* Scene Selection specific styling */
.scene-selection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 20px;
    max-width: 1200px;
    width: 100%;
    margin: auto;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.chapter-video-item {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.chapter-video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(255, 255, 0, 0.4);
}

.chapter-video-item .video-thumbnail {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
    background-color: #333;
}

.chapter-video-item .video-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chapter-video-item .chapter-title {
    padding: 10px;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    color: var(--color-text-light);
    white-space: normal;
}

/* Pagination Controls */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px; /* Padding inside the border */
    margin: 20px auto 10px auto; /* Top, horizontal auto, bottom */
    width: fit-content; /* Fit the content */
    border: 2px solid var(--color-text-light); /* White outline around the list */
    border-radius: 4px;
}

.pagination-item {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--color-text-light); /* White text */
    background-color: transparent; /* Transparent background */
    border: none; /* No individual borders */
    padding: 8px 15px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.pagination-item.active {
    background-color: var(--color-text-light); /* White background */
    color: var(--color-background-dark); /* Black text */
    cursor: default;
}

.pagination-item:not(.active):hover {
    background-color: var(--color-accent-yellow);
    color: var(--color-background-dark);
}

/* Back button for scene selection and special features */
.back-button {
    position: absolute;
    top: 20px;
    color: var(--color-text-light);
    font-size: 1.5rem;
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: color 0.2s ease-in-out;
}

.back-button:hover {
    color: var(--color-accent-yellow);
}

/* Specific styling for the back button on the left (Scene Selection) */
#backToMainMenuFromScenes {
    left: 20px;
}

/* Override default header styles for the About Us screen */
#aboutUsScreen header h1 {
    font-family: var(--font-typewriter);
    color: var(--color-text-dark);
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-shadow: none;
    transform: none;
    letter-spacing: 2px;
}

/* Specific styling for the back button on the right (Special Features) */
#backToMainMenuFromFeatures {
    right: 20px;
}

/* About Us Screen Specific Styling */
#aboutUsScreen {
    /* It's a modal-like panel that animates in 3D over the current screen */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90vw;
    height: 90dvh;
    max-width: 1200px; /* Adjusted max width for a cleaner look */
    max-height: 750px; /* Adjusted max height */
    z-index: 20; /* Positioned above the screenContainer (z-index: 10) */
    background-color: var(--color-accent-tan); /* Tan background as requested */
    color: var(--color-text-dark); /* Darker text for readability on tan background */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Initial state for 3D animation: off-screen at the bottom, rotated back */
    transform-origin: bottom center;
    transform: translate(-50%, -50%) rotateX(-90deg); /* Keep centered, just rotated out of view */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Ensure it's not interactive when hidden */
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease-out, visibility 1s;
    overflow-y: auto;
    overflow-x: hidden;
    justify-content: flex-start;
}

/* "TOP SECRET" stamp for the About Us page */
#aboutUsScreen::after {
    content: 'TOP SECRET';
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: 'Bowlby One SC', sans-serif; /* A suitably blocky, impactful font */
    font-size: clamp(8rem, 25vw, 20rem); /* Larger responsive font size */
    color: rgba(200, 0, 0, 0.1); /* Much more transparent red */
    border: 10px solid rgba(200, 0, 0, 0.1); /* Matching transparent border */
    padding: 0.2em 0.5em;
    border-radius: 8px;
    transform: translate(-50%, -50%) rotate(12deg); /* Center and rotate */
    /* z-index is removed; stacking is now controlled by .about-us-main */
    pointer-events: none; /* Prevent it from interfering with clicks */
    text-shadow: none;
}

/* Specific styling for the back button on the left (About Us) */
#backToMainMenuFromAbout {
    left: 20px;
    color: var(--color-text-dark); /* Make back button dark to be visible on tan */
}

/* --- 3D Transition Active State --- */

/* When About Us is active, the background screen remains static and visible. */
body.about-us-active #screenContainer {
    /* No changes needed, it stays as is. */
}

/* And the about us screen animates into view */
body.about-us-active #aboutUsScreen {
    transform: translate(-50%, -50%) rotateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Make it interactive when shown */
}

/* Make Contact Screen Overlay Styling */
#makeContactScreen {
    /* It's a full-screen overlay that fades in */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 20; /* Positioned above the screenContainer (z-index: 10) */
    background-color: rgba(0, 0, 0, 0.9); /* Dark, semi-transparent background */
    
    /* Initial state for animation */
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05); /* Start slightly zoomed in for a nice effect */
    pointer-events: none; /* Ensure it's not interactive when hidden */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-out, visibility 0.4s;
}

/* Active state for the contact overlay */
body.contact-active #makeContactScreen {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Make it interactive when shown */
}

/* Center the content within the contact overlay */
#makeContactScreen main {
    justify-content: center;
    align-items: center;
}

/* Allow line breaks in the telepathy button and ensure it's centered */
#makeContactScreen #telepathyButton {
    white-space: normal;
    text-align: center;
}

.telepathy-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.95);
    color: var(--color-accent-green); /* Matrix green */
    font-family: var(--font-pixel);
    font-size: clamp(0.8rem, 2vw, 1.5rem);
    padding: 30px;
    border: 2px solid var(--color-accent-green);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.7);
    text-align: center;
    border-radius: 8px;
    z-index: 1000; /* On top of everything */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s;
    max-width: 80vw; /* Responsive width */
}

.telepathy-message.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

#makeContactScreen.wavy-active {
    filter: url(#telepathy-wave);
}


/* When About Us is active, also hide the special features clone title.
   This has higher specificity than .show-clone, so it will override it. */
body.about-us-active #specialFeaturesClone {
    opacity: 0;
    visibility: hidden;
}

/* When Contact screen is active, also hide the special features clone title. */
body.contact-active #specialFeaturesClone {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out; /* Add a quick fade out */
}

.about-us-content img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.about-us-main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content horizontally */
    width: 100%;
    padding: 20px;
    position: relative; /* Create a stacking context */
    z-index: 1; /* Ensure content is above the ::after pseudo-element (the stamp) */
}

.about-us-content {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    align-items: center;
}

.about-us-text {
    flex: 1;
    font-family: var(--font-typewriter); /* Typewriter font */
    font-size: 1.1rem; /* Slightly larger for readability */
    line-height: 1.7;
    color: var(--color-text-dark); /* Dark text for tan background */
}

.about-us-text p {
    margin-bottom: 2em; /* Adjust this value to increase or decrease the space */
}

.about-us-images {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Wrapper for each image to apply paperclip and rotation */
.image-wrapper {
    position: relative;
    transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.image-wrapper:hover {
    transform: rotate(0) scale(1.05); /* Straighten and slightly enlarge on hover */
    z-index: 2; /* Bring the hovered image to the front */
}

/* Rotate the first image clockwise */
.about-us-images .image-wrapper:first-child {
    transform: rotate(3deg);
}

/* Rotate the second image counter-clockwise */
.about-us-images .image-wrapper:last-child {
    transform: rotate(-4deg);
}

.about-us-content img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* New: Easter egg overlays for the About Us image */
.image-wrapper .easter-egg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the whole overlay is visible without stretching */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Allow clicks to pass through to the main image */
    transition: opacity 0.4s ease-in-out;
}

.image-wrapper .easter-egg-overlay.show-overlay {
    opacity: 1;
    visibility: visible;
}
/* New: Loading Overlay Styling */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--color-background-dark);
    z-index: 9999; /* Highest z-index to be on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    opacity: 1;
    visibility: visible;
}

#loadingOverlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Prevent interaction when hidden */
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;    
}

.disc-loader {
    position: relative;
    width: 150px;
    height: 54px; /* Adjusted height to align perfectly with the slot */
    margin-bottom: 10px; /* Space between loader and text */
    overflow: hidden; /* This will act as the mask, clipping the disc */
}

.slot {
    position: absolute;
    bottom: 0; /* Position the slot at the very bottom of the container */
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* Shorter slot, slightly wider than the disc */
    height: 4px; /* Line thickness */
    background-color: var(--color-text-light); /* White line */
    border-radius: 2px; /* Rounded ends */
}

.disc {
    position: absolute;
    left: 50%;
    /* 'top' is removed, as the animation now controls the full vertical transform */
    width: 60px; /* Larger disc */
    height: 60px; /* Larger disc */
    background-color: transparent; /* No fill color */
    border: 4px solid var(--color-text-light); /* White outline with matching thickness */
    border-radius: 50%;
    /* The transform is now fully controlled by the animation keyframes */
    animation: insert-disc 2.5s ease-in-out infinite;
}

.disc::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; /* Size of the inner hole */
    height: 20px;
    background-color: var(--color-background-dark); /* Match the background to create a hole */
    border: 4px solid var(--color-text-light); /* White outline for the inner circle */
    border-radius: 50%;
    box-sizing: border-box; /* Ensure border is included in width/height */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    /* More aggressive adjustments to fit content within the mobile viewport height */
    header {
        margin-top: 8vh; /* Increase top margin to prevent overlap with back button */
        padding: 5px;
    }

    #mainMenuScreen h1 {
        font-size: clamp(3rem, 13vw, 6rem); /* Make title larger on mobile */
        letter-spacing: 1px; /* Tighten letter spacing more */
        margin-bottom: 1vh; /* Add a bit of space below title */
    }

    .subtitle-showreel {
        font-size: clamp(0.7rem, 2vw, 1rem); /* Make subtitle smaller */
        margin-top: 0;
    }

    #mainMenuScreen main {
        flex-grow: 1; /* Allow main to fill the space between header and footer */
        padding-bottom: 30px; /* Create space above the footer, matching the side padding */
    }

    footer {
        padding: 5px;
        margin-bottom: 1vh; /* Nudge footer up slightly from the absolute bottom */
    }

    .menu-button {
        padding: 8px 15px;
    }

    /* Make Special Features menu buttons larger on mobile */
    #specialFeaturesScreen .menu-button {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }

    /* Make the 'Back to Menu' buttons smaller on mobile for a cleaner look */
    .back-button {
        font-size: 1rem;
        top: 25px; /* Adjust position slightly to align with new size */
    }

    /* On mobile, move the DVD logo up to prevent overlapping the copyright text */
    #dvdLogo {
        bottom: 60px;
    }
    /* Force 2 columns on screens up to 768px wide (tablets and larger phones) */
    .scene-selection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 10px;
    }
    #mainMenuScreen {
        padding: 20px 30px;
    }
    .about-us-content {
        flex-direction: column; /* Stack text and images on smaller screens */
        text-align: center;
    }

    /* On mobile, right-align the main menu block */
    #mainMenuScreen main {
        align-items: flex-end;
    }

    /* On mobile, stack main menu buttons vertically and remove the background */
    #mainMenuScreen .button-container {
        flex-direction: column;
        gap: 15px; /* Reduce gap between buttons */
        width: auto; /* Allow the container to fit its content */
        background-color: transparent; /* Remove the background */
        border-radius: 0; /* Remove rounded corners */
        padding: 0; /* Remove padding to align cleanly to the right */
    }

    /* Right-align the text and icon within each button on mobile */
    #mainMenuScreen .menu-button {
        justify-content: flex-end;
        font-size: clamp(2rem, 5vw, 3rem); /* Make main menu buttons larger on mobile */
    }
}

@media (max-width: 480px) { /* Stack to 1 column on very small phones */
    .scene-selection-grid {
        /* grid-template-columns: 1fr; */
    }
    #mainMenuScreen {
        padding: 20px 20px;
    }
}

/* Special Features Clone Styling */
#specialFeaturesClone {
    position: fixed;
    /* Removed width and height from CSS, will be set by JS */
    /* width: 100vw; */
    /* height: 100vh; */
    box-sizing: border-box; /* Added for consistent sizing */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 95; /* Below the main screens but visible during transition */
    color: var(--color-accent-yellow); /* Default color */
    font-family: var(--font-button);
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    /* Add flex properties to perfectly center the text inside the clone's box */
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center center;
}

/* NEW: Class to apply transitions only when the animation should run */
#specialFeaturesClone.is-animating {
    transition-property: top, transform, font-size, letter-spacing, color, width, height;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

/* Class to make the clone instantly visible. The animation itself is triggered by JS. */
#specialFeaturesClone.show-clone {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

/* Black transition overlay for screen changes */
#transitionOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: #000 url('assets/The_Swing_car_away.gif') center center / cover no-repeat;
    z-index: 500; /* High enough to cover content during transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#transitionOverlay.show {
    opacity: 1;
    visibility: visible;
}

#passwordScreen {
    position: fixed;
    z-index: 10000; /* Higher than the loading overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: var(--color-background-dark);
    font-family: var(--font-pixel);
    color: var(--color-accent-green);
    display: flex;
    padding: 2em;
    font-size: clamp(0.8rem, 2.5vw, 1.2rem); 
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    justify-content: flex-start; /* Changed from 'center' to align to left */
    align-items: flex-start; /* Changed from 'center' to align to top */
   
}

#passwordScreen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#passwordForm {
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
    gap: 1em; /* Add some space between them */
    align-items: flex-start; /* Align items to the left */
}

#passwordForm label {
    line-height: 1.8;
    white-space: pre-wrap; /* Allows wrapping while preserving whitespace sequences */
}

#passcodeInput {
    background: transparent;
    border: none;
    color: var(--color-accent-green);
    font-family: var(--font-pixel);
    font-size: inherit; /* Inherit size from parent */
    outline: none;
    width: 12ch; /* Give it some initial width */
    display: block; /* Must be displayed to be focusable */
    opacity: 0; /* But make it invisible */
    pointer-events: none; /* And not clickable */
    transition: opacity 0.3s ease-out; /* For a nice fade-in effect */
    /* The default browser cursor will now be used */
}

/* Class to fade the input in when it's ready */
#passcodeInput.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Style for the new tap prompt */
#tapPrompt {
    color: var(--color-accent-yellow);
    margin-top: 1em;
    animation: pulse 2s infinite;
    cursor: pointer;
    display: none; /* Initially hidden, will be shown by JS */
}

/* Keyframes for the spinner animation */
@keyframes insert-disc {
    0% {
        transform: translate(-50%, -40px); /* Start closer to the slot */
    }
    40% {
        transform: translate(-50%, -8px); /* Adjusted so disc bottom enters the slot slightly */
    }
    100% {
        transform: translate(-50%, 54px); /* Move disc completely through and out of the container */
    }
}

/* New: Keyframes for the telepathy swirl effect */
@keyframes telepathy-swirl {
    0% {
        filter: blur(0px) hue-rotate(0deg);
        opacity: 1;
    }
    50% {
        filter: blur(20px) hue-rotate(720deg);
        opacity: 0.6;
    }
    100% {
        filter: blur(0px) hue-rotate(0deg);
        opacity: 1;
    }
}

/* Keyframes for the tap prompt pulse */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}