/* ============================================
   BASE STYLES
   CSS Variables, Resets, Typography, Scrollbar
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --black: #000000;
    --accent: #96795c;
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.5);

    /* Dynamic viewport height - updates when address bar shows/hides */
    --viewport-height: 100vh;
    --viewport-height-px: 100vh; /* Fallback */

    /* Background overlays - dark (most commonly used values) */
    --bg-dark: rgba(0, 0, 0, 0.02);
    --bg-overlay-20: rgba(0, 0, 0, 0.2);
    --bg-overlay-25: rgba(0, 0, 0, 0.25);
    --bg-overlay-30: rgba(0, 0, 0, 0.3);
    --bg-overlay-40: rgba(0, 0, 0, 0.4);
    --bg-medium: rgba(0, 0, 0, 0.5);
    --bg-strong: rgba(0, 0, 0, 0.7);
    --bg-ultra: rgba(0, 0, 0, 0.95);

    /* Background overlays - light */
    --bg-white-03: rgba(255, 255, 255, 0.03);
    --bg-white-10: rgba(255, 255, 255, 0.1);
    --bg-white-25: rgba(255, 255, 255, 0.25);
    --bg-white-40: rgba(255, 255, 255, 0.4);
    --bg-white-50: rgba(255, 255, 255, 0.5);

    /* Borders */
    --border-default: rgba(255, 255, 255, 0.2);
    --border-hover: rgba(255, 255, 255, 0.3);
    --border-active: rgba(255, 255, 255, 0.6);
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.25);

    /* Common shadow layers (used in multi-layer box-shadows) */
    --shadow-5: 0 5px 12px var(--bg-overlay-30);
    --shadow-8: 0 8px 24px var(--bg-overlay-40);
    --shadow-20: 0 20px 60px var(--bg-medium);
    --shadow-inset-1: inset 0 -1px 0 var(--bg-overlay-40);

    /* Fluid Typography System */
    /* Scaling from 320px (mobile) to 2560px (large desktop) */
    --text-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);      /* 8px -> 12px */
    --text-xs: clamp(0.6875rem, 0.65rem + 0.1875vw, 0.875rem); /* 11px -> 14px */
    --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);          /* 12px -> 16px */
    --text-base: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);   /* 14px -> 20px */
    --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);            /* 16px -> 24px */
    --text-xl: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);       /* 18px -> 28px */
    --text-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);         /* 20px -> 32px */
    --text-3xl: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);           /* 24px -> 40px */
    --text-4xl: clamp(1.75rem, 1.5rem + 1.25vw, 3rem);         /* 28px -> 48px */

    /* Letter spacing scales slightly with viewport */
    --letter-spacing-tight: clamp(-0.025em, -0.02em + -0.01vw, 0em);
    --letter-spacing-normal: 0;
    --letter-spacing-wide: clamp(0.025em, 0.02em + 0.01vw, 0.1em);
    --letter-spacing-wider: clamp(0.05em, 0.04em + 0.05vw, 0.2em);
    --letter-spacing-widest: clamp(0.1em, 0.08em + 0.1vw, 0.3em);

    /* Z-Index Layer System - Section Isolation */
    /* System UI - always on top */
    --z-system-ui: 10000;
    --z-popups: 9000;

    /* Sections - strict hierarchy (no overlaps) */
    --z-contatti: 500;
    --z-candidati: 400;
    --z-missione: 300;
    --z-episodi: 200;
    --z-hero: 100;

    /* Background */
    --z-video-bg: -1;
}

html {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    overscroll-behavior-y: none; /* Prevent pull-to-refresh on mobile */
}

/* Lenis smooth scroll foundation */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* Lenis: only disable iframes during active scrolling */
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* EXCEPTION: Coreografie videos always interactive */
.coreo-video iframe {
    pointer-events: auto !important;
    touch-action: auto !important;
}

/* CRITICAL: Lenis data-lenis-prevent support */
/* Prevents scroll propagation on elements excluded from Lenis control */
.lenis.lenis-smooth [data-lenis-prevent],
.lenis.lenis-smooth [data-lenis-prevent-touch],
.lenis.lenis-smooth [data-lenis-prevent-wheel] {
    overscroll-behavior: contain;
}

/* Also apply without lenis-smooth class for broader compatibility */
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-wheel] {
    overscroll-behavior: contain;
}

/* Ensure horizontal scroll containers (carousel) are excluded from Lenis */
/* Note: .carousel-container has data-lenis-prevent applied in JS */
.lenis .carousel-container,
.carousel-container,
.lenis .carousel-track,
.carousel-track {
    overscroll-behavior: contain;
}

/* Enhanced progressive enhancement for reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .lenis.lenis-smooth {
        scroll-behavior: auto !important;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 300;
    line-height: 1.6;
    background: var(--black);
    color: var(--text-primary);
    overflow-x: hidden;
    overscroll-behavior: contain;
    overscroll-behavior-y: none; /* Extra enforcement for pull-to-refresh prevention */
}

/* Hide scrollbar - webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* Hide scrollbar - Firefox */
html {
    scrollbar-width: none;
}

/* Alternative: Make scrollbar almost invisible (uncomment to use instead) */
/*
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
*/

/* Section Isolation - Unified Visibility Management */
.section-inactive {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* ============================================
   FORCE PORTRAIT MODE ON MOBILE
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    /* If user forces landscape, show warning overlay */
    body::before {
        content: "Please rotate your device to portrait mode";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 24px;
        padding: 40px;
        z-index: 999999;
    }
}