/* Main CSS - Base Styles and Font Face for Why So Serious Party Promoter */

/* ==============================================================================
   CSS CUSTOM PROPERTIES - Design System
   ============================================================================== */

:root {
    /* ----------------------------------------------------------------------------
       TV Interface Theme - Colors
       ---------------------------------------------------------------------------- */
    --tv-background: #ECEA01; /* Primary yellow background */
    --tv-screen-bg: #000; /* Black screen background */
    --tv-bezel-color: #D1C19E; /* Bezel/border color */
    --tv-shadow-color: rgba(0, 0, 0, 0.3); /* Shadow color for depth */

    /* CRT Effect Colors */
    --crt-glow-color: #ff4444; /* Red glow for power indicator */
    --crt-glow-text: #FFD7DF; /* Light red for glowing text */
    --crt-scanline-color: rgba(0, 0, 0, 0.2); /* Scan line overlay */

    /* ----------------------------------------------------------------------------
       TV Interface Theme - Dimensions (as fractions of TV container)
       Note: These are base ratios - actual values use calc() with TV dimensions
       ---------------------------------------------------------------------------- */
    --tv-aspect-width: 1686; /* TV container aspect ratio width */
    --tv-aspect-height: 1621; /* TV container aspect ratio height */
    --tv-screen-inset-x: 211; /* Screen position from left */
    --tv-screen-inset-y: 89; /* Screen position from top */
    --tv-screen-width: 997; /* Screen width within TV */
    --tv-screen-height: 788; /* Screen height within TV */

    /* ----------------------------------------------------------------------------
       Spacing Scale (responsive, viewport-based)
       ---------------------------------------------------------------------------- */
    --spacing-xs: 0.5vw;
    --spacing-sm: 1vw;
    --spacing-md: 2vw;
    --spacing-lg: 4vw;
    --spacing-xl: 8vw;

    /* ----------------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------------- */
    --font-family-primary: 'Courier New', 'Monaco', monospace;
    --font-family-script: 'Marck Script', cursive;
    --font-family-display: 'M PLUS Rounded 1c', sans-serif;

    --font-size-xs: 0.5vw;
    --font-size-sm: 0.8vw;
    --font-size-base: 1vw;
    --font-size-md: 1.5vw;
    --font-size-lg: 2vw;
    --font-size-xl: 3.5vw;

    --line-height-tight: 1.1;
    --line-height-base: 1.2;
    --line-height-relaxed: 1.5;

    /* ----------------------------------------------------------------------------
       Animation Durations
       ---------------------------------------------------------------------------- */
    --transition-instant: 0.1s;
    --transition-fast: 0.2s;
    --transition-base: 0.3s;
    --transition-slow: 0.5s;
    --transition-very-slow: 1.0s;

    /* Animation Easing Functions */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.230, 1.000, 0.320, 1.000);

    /* ----------------------------------------------------------------------------
       Z-Index Layers (consistent stacking context)
       ---------------------------------------------------------------------------- */
    --z-background: 0; /* Background elements, TV shadow */
    --z-tv-screen: 1; /* TV screen content */
    --z-tv-glass: 2; /* Screen glass overlay */
    --z-tv-overlay: 3; /* TV bezel/frame */
    --z-controls: 5; /* Interactive controls (power, dial) */
    --z-canvas: 9; /* VCR effect canvas */
    --z-effects: 1000; /* UI effects layer */
    --z-menu: 9999; /* Hanging menus/overlays */
    --z-modal: 10000; /* Modals/popups */

    /* ----------------------------------------------------------------------------
       Shadows
       ---------------------------------------------------------------------------- */
    --shadow-sm: 0 0.2vw 0.4vw rgba(0, 0, 0, 0.2);
    --shadow-md: 0 0.5vw 1vw rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 clamp(10px, 2vw, 20px) clamp(40px, 6vw, 80px) rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 10px rgba(236, 234, 1, 0.8);

    /* ----------------------------------------------------------------------------
       Border Radius
       ---------------------------------------------------------------------------- */
    --radius-sm: 0.5vw;
    --radius-base: 1vw;
    --radius-lg: clamp(10px, 2vw, 20px);

    /* ----------------------------------------------------------------------------
       Hanging Cards System
       ---------------------------------------------------------------------------- */
    --card-width: 10vw;
    --chain-width: 0.15vw;
    --chain-color: #444;
    --nail-size: 1vw;
    --nail-gradient: linear-gradient(to bottom, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);

    /* Overlay dimensions */
    --overlay-width: min(40vw, calc(80vh * 1016 / 1530));
    --overlay-height: calc(min(40vw, calc(80vh * 1016 / 1530)) * 1530 / 1016);
    --overlay-min-width: clamp(25vw, 30vw, 35vw);
    --overlay-max-width: clamp(40vw, 50vw, 60vw);
    --overlay-min-height: calc(clamp(25vw, 30vw, 35vw) * 1530 / 1016);
    --overlay-max-height: calc(clamp(40vw, 50vw, 60vw) * 1530 / 1016);

    /* ----------------------------------------------------------------------------
       CRT Effects (inherited from tv-effects.css)
       Note: These are also defined in tv-effects.css - values should match
       ---------------------------------------------------------------------------- */
    --scan-lines-opacity: 0.2;
    --scan-lines-thickness: 1px;
    --scan-lines-spacing: 2px;
    --glitch-speed: 0.2s;
    --glitch-distance: 5px;
    --glitch-opacity: 0.3;
    --vcr-opacity: 1.0;
    --vcr-blur: 1px;
    --video-contrast: 1.2;
    --video-brightness: 1.1;
    --video-saturation: 1.0;
    --video-sepia: 0;
    --video-hue: 0deg;
    --snow-size: 100%;
    --snow-opacity: 0;
    --snow-speed: 0.5s;

    /* ----------------------------------------------------------------------------
       Volume Control
       ---------------------------------------------------------------------------- */
    --volume-track-bg: linear-gradient(to right, #474747 0%, #000000 50%, #474747 100%);
    --volume-thumb-gradient: radial-gradient(circle, #f0f0f0 0%, #d0d0d0 30%, #b0b0b0 60%, #888888 100%);
    --volume-thumb-hover: radial-gradient(circle, #ffffff 0%, #e0e0e0 30%, #c0c0c0 60%, #999999 100%);
    --volume-thumb-active: radial-gradient(circle, #e8e8e8 0%, #c8c8c8 30%, #a8a8a8 60%, #777777 100%);

    /* ----------------------------------------------------------------------------
       Gallery/Terminal Theme
       ---------------------------------------------------------------------------- */
    --terminal-bg: #000;
    --terminal-text: #00ff00;
    --terminal-border: #333;
    --terminal-accent: #0f0;
}

/* ==============================================================================
   FONT FACE DECLARATIONS
   ============================================================================== */

@font-face {
    font-family: 'Marck Script';
    src: url('../fonts/MarckScript-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==============================================================================
   EASTER EGG TRIGGER ZONE
   ============================================================================== */

.easter-egg-trigger-zone {
    position: absolute;
    bottom: 0%;
    left: 30%;
    transform: translateX(-50%);
    width: 20%;
    height: 8%;
    cursor: pointer;
    z-index: 9999;
    pointer-events: auto;
    /* Invisible but clickable - true easter egg! */
    background: transparent;
}

/* Optional: Visual debugging (disabled in production) */
/* .easter-egg-trigger-zone:hover {
    background: rgba(255, 0, 0, 0.2);
    outline: 2px dashed red;
} */