/* FoundContext Card Deck v3 - DOM Manipulation Approach */

/* Import FoundContext fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&display=swap');

/* CSS Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* FoundContext Design System Variables */
    --card-deck-font-body: 'Inter', system-ui, sans-serif;
    --card-deck-font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    
    /* FoundContext theme colors */
    --theater-burgundy: #8B1538;
    --theater-burgundy-light: #A91B47;
    --theater-burgundy-dark: #6B0F2B;
    
    /* Neutral colors */
    --neutral-50: #FAFAFA;
    --neutral-100: #F4F4F5;
    --neutral-200: #E4E4E7;
    --neutral-300: #D4D4D8;
    --neutral-400: #A1A1AA;
    --neutral-500: #71717A;
    --neutral-600: #52525B;
    --neutral-700: #3F3F46;
    --neutral-800: #27272A;
    --neutral-900: #18181B;
    
    /* Card deck colors */
    --card-bg: #FFFFFF;
    --card-border: var(--neutral-200);
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --background-primary: var(--neutral-50);
    
    /* Card dimensions - Responsive sizing */
    --card-width: min(90vw, 400px);
    --card-height: auto;
    --card-border-radius: 16px;
    
    /* Show selection grid dimensions */
    --show-card-width: min(85vw, 320px);
    --show-card-height: auto;
    
    /* Reference carousel dimensions - FIX 2: Viewport-Optimized Card Sizing */
    /* Calculate available space: viewport minus header (60px) minus footer (80px) minus margins (40px) */
    --available-height: calc(100vh - 60px - 80px - 40px);
    --available-width: calc(100vw - 40px);
    
    /* Playing card aspect ratio: 2.5:3.5 (width:height ratio = 0.714) */
    --card-aspect-ratio: 0.714;
    
    /* Calculate maximum card dimensions maintaining aspect ratio */
    --height-constrained-width: calc(var(--available-height) * var(--card-aspect-ratio));
    --width-constrained-height: calc(var(--available-width) / var(--card-aspect-ratio));
    
    /* Use the smaller dimension to ensure card fits in both directions */
    --reference-card-width: min(var(--available-width), var(--height-constrained-width));
    --reference-card-height: min(var(--available-height), var(--width-constrained-height));
    
    /* DOM Manipulation Positioning System - Based on Reference Demo */
    /* Card 1 (far left, moving out) */
    --item1-transform: translateX(-120%) translateY(-5%) scale(0.8);
    --item1-filter: blur(10px);
    --item1-z-index: 5;
    --item1-opacity: 0;
    
    /* Card 2 (center/active card) */
    --item2-transform: translateX(0%) translateY(0%) scale(1.0);
    --item2-filter: blur(0px);
    --item2-z-index: 10;
    --item2-opacity: 1;
    
    /* Card 3 (right side) */
    --item3-transform: translateX(60%) translateY(5%) scale(0.9);
    --item3-filter: blur(5px);
    --item3-z-index: 8;
    --item3-opacity: 0.8;
    
    /* Card 4 (far right) */
    --item4-transform: translateX(100%) translateY(10%) scale(0.7);
    --item4-filter: blur(15px);
    --item4-z-index: 6;
    --item4-opacity: 0.4;
    
    /* Card 5 (hidden) */
    --item5-transform: translateX(140%) translateY(15%) scale(0.5);
    --item5-filter: blur(20px);
    --item5-z-index: 4;
    --item5-opacity: 0;
}

body {
    font-family: var(--card-deck-font-body);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--background-primary);
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
}