/* =========================================
   1. GLOBAL VARIABLES & BASE STYLES 
   ========================================= */
: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);
    --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);
    --footer-bg: #ffffff;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
    cursor: auto; 
    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;
}

/* ─────────────────────────────────────────────
   LENIS SMOOTH SCROLL BOILERPLATE
───────────────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* --- HERO SPOTLIGHT & VIDEO FIX --- */
#hero-spotlight {
    height: 100vh;
    height: 100dvh; 
    position: relative;
}

/* Force video to fill spotlight area properly */
.video-element {
    width: 100% !important; /* Fixed 100vw bug here */
    height: 100vh !important;
    height: 100svh !important; 
    object-fit: cover; 
    object-position: center;
}

.spotlight-mask { clip-path: circle(15% at 50% 50%); transition: clip-path 0.1s ease-out; }
@media (max-width: 767px) {
    .spotlight-mask { clip-path: circle(25% at 50% 50%); }
}

/* --- SECTIONS --- */
.section { 
    width: 100%; 
    min-height: 100vh; 
    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; 
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- CARDS & IMAGES --- */
.card-image-wrapper { 
    position: relative; 
    overflow: hidden; 
    border-radius: 1rem; 
    width: 100%; 
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3); 
}

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

/* --- TYPOGRAPHY --- */
.responsive-headline { font-size: clamp(2.5rem, 8vw, 8rem); line-height: 1.1; display: block; width: 100%; }
.inline-video-container { display: inline-flex; align-items: center; height: 0.8em; width: 1.4em; border-radius: 2em; overflow: hidden; margin: 0 0.1em; position: relative; top: -0.05em; background-color: #222; }
.inline-video-container video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) { .responsive-headline br { display: block; } }

/* --- THEME TOGGLE 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; }

/* --- PRELOADER --- */
body.loading { overflow: hidden; }
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; background: #000; z-index: 10000; display: flex; align-items: center; justify-content: center; transition: opacity 1s ease-in-out; }
.preloader-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#preloader-video { width: 100%; height: 100%; object-fit: cover; }

/* --- CONTINUOUS GALLERY (REEL) --- */
.reel-row { width: 100%; user-select: none; }
.reel-item { flex: 0 0 300px; height: 400px; border-radius: 8px; overflow: hidden; background: #111; }
.reel-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.4s ease, transform 0.4s ease; }
.reel-item:hover img { filter: grayscale(0); transform: scale(1.05); }
@media (max-width: 768px) { .reel-item { flex: 0 0 180px; height: 250px; } }

/* --- FOOTER GIF FIX --- */
.main-footer { min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.footer-bg-gif { position: absolute; inset: 0; width: 100vw; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.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)); }

/* =========================================
   MEDIA QUERIES (TABLET & DESKTOP)
   ========================================= */
@media screen and (min-width: 768px) {
    body { cursor: none; } 
    .section-inner { padding: 2rem; }
    .card-image-wrapper { height: 100%; border-radius: 2rem; }
    
    /* Cursor Elements */
    .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); }
}

@media screen and (min-width: 1024px) {
    #puzzle { max-width: 500px; height: auto !important; min-height: 500px; }
}

@media screen and (min-width: 1536px) {
    .container { max-width: 1600px; }
    p { font-size: 1.25rem; }
}