/* =========================================
   1. GLOBAL VARIABLES & BASE STYLES (MOBILE DEFAULT)
   Target: Phones (< 768px)
   ========================================= */
:root {
    --color-bg: #050505;
    --color-text: #EAEAEA;
    --color-accent: #E11D48;
    --color-card-bg: #0a0a0a;
    --color-border: rgba(255,255,255,0.1);
    --cursor-bg: #ffffff;
    --cursor-border: rgba(255,255,255,0.5);
    --grid-text: #b41717;
    --footer-bg: #050505;
}

[data-theme="light"] {
    --color-bg: #ffffff;
    --color-text: #111111;
    --color-accent: #E11D48;
    --color-card-bg: #fafafa;
    --color-border: rgba(0,0,0,0.05);
    --cursor-bg: #000000;
    --cursor-border: rgba(0,0,0,0.5);
    --grid-text: #b41717;
    --footer-bg: #ffffff;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
    cursor: auto; /* Default cursor for touch */
    margin: 0;
    transition: background-color 0.5s ease, color 0.5s ease;
}

h1, h2, h3, .brand-font {
    font-family: 'Syncopate', sans-serif;
    text-transform: uppercase;
}

/* --- HERO & LOGO (MOBILE) --- */
#hero-spotlight {
    height: 100dvh; /* Mobile browser friendly */
    position: relative;
}

.hero-logo-container { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 30; 
    pointer-events: none;
    /* Mobile Sizing */
    width: 65%; 
    aspect-ratio: 1/1;
}

/* --- TYPOGRAPHY (MOBILE) --- */
.responsive-headline {
    font-size: 2.5rem; /* Readable on phone */
    line-height: 1.1;
    white-space: normal;
    word-wrap: break-word;
}

.inline-video-container {
    display: inline-flex;
    align-items: center;
    height: 0.7em;
    width: auto;
    aspect-ratio: 16/9;
    margin: 0 0.1em;
    border-radius: 0.15em;
    overflow: hidden;
    position: relative;
    transform: translateY(0.05em);
    background-color: #222;
}
.inline-video-container video { width: 100%; height: 100%; object-fit: cover; }

/* --- SECTIONS (MOBILE) --- */
.section { 
    width: 100%; 
    min-height: 100vh; /* Full height on mobile */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    background: var(--color-card-bg); 
    overflow: hidden; 
    border-top: 1px solid var(--color-border); 
}

.section-inner { 
    padding: 1rem; /* Tight padding for mobile */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- 3D CARDS & IMAGES (MOBILE) --- */
.card-image-wrapper { 
    position: relative; 
    overflow: hidden; 
    border-radius: 1rem; 
    width: 100%; 
    height: 30vh; /* Shorter on mobile */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3); 
}
.card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }

.scene {
    perspective: 1000px;
    width: 100%;
    max-width: 250px; /* Smaller 3D card for mobile */
    aspect-ratio: 9/16;
    position: relative;
    margin: 0 auto;
}
.card-3d { width: 100%; height: 100%; transform-style: preserve-3d; }
.card__layer {
    position: absolute; inset: 0; border-radius: 15px; 
    backface-visibility: hidden; pointer-events: none;
}
.layer-stage { background: #111; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
.layer-capture { border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: center; transform: translateZ(20px); }
.layer-social { display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; border: 2px solid rgba(225, 29, 72, 0.4); transform: translateZ(40px); }

/* --- PUZZLE (MOBILE) --- */
#puzzle { 
    height: 300px !important; 
    width: 100%; 
    max-width: 300px; 
    margin: 2rem auto; 
}
.piece:not(.draggable) { cursor: default !important; }

/* --- GRID SHOWCASE (MOBILE) --- */
#grid-showcase { background-color: var(--color-bg); padding-bottom: 10vh; }
.codrops-grid { 
    display: grid; 
    width: 100%;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns for Mobile */
    padding: 1vh 0; 
    gap: 1vw; 
}
.grid__item { margin-bottom: 20px; }
.grid__item-img { width: 100%; aspect-ratio: 1; background-size: cover; border-radius: 4px; }
.showcase-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 10; }
.cover__sticky { position: sticky; top: 50vh; transform: translateY(-50%); text-align: center; padding: 0 1rem; }
.cover__title { font-size: 2rem; font-weight: bold; line-height: 1.1; margin-bottom: 1rem; }
.cover__subtitle { font-size: 0.8rem; opacity: 0.7; }

/* --- TEAM CAROUSEL (MOBILE) --- */
.cast-carousel-container { 
    width: 100%; 
    height: 350px; 
    position: relative; 
    overflow: hidden; 
    background: var(--color-card-bg); 
    display: flex; align-items: center; justify-content: center; 
}
.cast-slide { 
    width: 120px; 
    height: 80px; 
    flex-shrink: 0; 
    border-radius: 0.25rem; 
    border: 1px solid rgba(255,255,255,0.1); 
    background: #111; 
    overflow: hidden; 
}
.cast-slide img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }

/* --- MISC UI --- */
.nav-mix-blend { mix-blend-mode: difference; color: white; }
.theme-toggle { cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.theme-toggle svg { width: 100%; height: 100%; fill: currentColor; transition: transform 0.5s; }
[data-theme="dark"] .icon-sun { transform: scale(0) rotate(90deg); position: absolute; }
[data-theme="dark"] .icon-moon { transform: scale(1) rotate(0deg); }
[data-theme="light"] .icon-sun { transform: scale(1) rotate(0deg); }
[data-theme="light"] .icon-moon { transform: scale(0) rotate(-90deg); position: absolute; }

.spotlight-mask { clip-path: circle(15% at 50% 50%); transition: clip-path 0.1s ease-out; }

/* Preloader */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); z-index: 10000; display: flex; align-items: center; justify-content: center; transition: opacity 1s; }
.sticker-text { font-family: 'Playfair Display', serif; font-style: italic; font-size: 2rem; color: var(--color-accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

body.loading { overflow: hidden; }
.main-footer { background-color: var(--footer-bg); transition: background-color 0.5s ease; }
.footer-char { display: inline-block; transition: transform 0.3s; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)); }
.footer-char:hover { transform: translateY(-20px) scale(1.1); filter: drop-shadow(0 0 15px rgba(225, 29, 72, 0.6)); }

/* =========================================
   2. TABLET MEDIA QUERY
   Target: iPads, Large Phones (768px - 1023px)
   ========================================= */
@media screen and (min-width: 768px) {
    body { cursor: none; } /* Enable custom cursor logic */
    
    /* Hero */
    .hero-logo-container { width: 45%; } /* Smaller than mobile relative to screen */
    
    /* Typography */
    .responsive-headline { font-size: 5rem; }
    .section-inner { padding: 2rem; }

    /* Cards */
    .card-image-wrapper { height: 100%; border-radius: 2rem; } /* Full height cards */
    .scene { max-width: 280px; }

    /* Grid */
    .codrops-grid { 
        grid-template-columns: repeat(4, 1fr); /* 4 Columns for Tablet */
        gap: 2vw; 
        padding: 10vh 0;
    }
    .cover__title { font-size: 3.5rem; }

    /* Carousel */
    .cast-carousel-container { height: 500px; }
    .cast-slide { width: 200px; height: 130px; }
    
    /* Cursor Elements (Only show on devices with mouse) */
    .cursor-dot, .cursor-outline {
        position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); border-radius: 50%; z-index: 9999; pointer-events: none;
    }
    .cursor-dot { width: 8px; height: 8px; background: var(--cursor-bg); }
    .cursor-outline { width: 40px; height: 40px; border: 1px solid var(--cursor-border); transition: width 0.2s, height 0.2s; }
    body:hover .cursor-outline.active { width: 80px; height: 80px; background: rgba(125,125,125,0.1); backdrop-filter: blur(2px); border-color: var(--cursor-bg); }
}

/* =========================================
   3. LAPTOP / DESKTOP MEDIA QUERY
   Target: Laptops, Small Monitors (1024px - 1535px)
   ========================================= */
@media screen and (min-width: 1024px) {
    
    /* Hero */
    .hero-logo-container { width: 30%; } /* Perfect desktop size */
    
    /* Typography */
    .responsive-headline { font-size: 7rem; }
    
    /* 3D Scene */
    .scene { max-width: 320px; margin: 0 auto; }
    
    /* Puzzle */
    #puzzle { max-width: 500px; height: auto !important; min-height: 500px; }

    /* Grid */
    .codrops-grid { 
        grid-template-columns: repeat(8, 1fr); /* 8 Columns for Desktop */
        padding: 20vh 0; 
        gap: 4vw;
    }
    /* Specific grid positions for desktop layout */
    .grid__item { grid-column: var(--c); grid-row: var(--r); margin-bottom: 40px; }

    /* Carousel */
    .cast-carousel-container { height: 600px; }
    .cast-slide { width: 300px; height: 180px; border-radius: 0.5rem; }
    .cast-track { gap: 20px; }
    
    /* Preloader Text */
    .sticker-text { font-size: 4rem; }
}

/* =========================================
   4. LARGE SCREEN / 4K MEDIA QUERY
   Target: Ultrawide, iMacs, TV (1536px +)
   ========================================= */
@media screen and (min-width: 1536px) {
    
    /* Container Max Widths */
    .container { max-width: 1600px; }
    
    /* Hero */
    .hero-logo-container { 
        width: 25%; 
        max-width: 500px; /* Hard cap for huge screens */
    }
    
    /* Typography Scale Up */
    .responsive-headline { font-size: 9rem; }
    h2.brand-font { font-size: 6rem; }
    p { font-size: 1.25rem; }
    
    /* 3D Scene */
    .scene { max-width: 400px; } /* Bigger card for bigger screens */
    
    /* Grid */
    .codrops-grid { 
        gap: 2vw; /* Tighter gap on huge screens */
        max-width: 1800px; 
        margin: 0 auto; 
    }

    /* Carousel */
    .cast-carousel-container { height: 800px; }
    .cast-slide { width: 400px; height: 240px; }
}