/* Mass Effect Theme
   Aesthetic: Sci-Fi, Holographic, Deep Space, Tech-Noir
   Colors: Deep Blues, Cyan/Teal Glows, Warning Orange
*/

@theme {
    /* Core Backgrounds - Deep Space */
    --color-bg-primary: #05070a;
    --color-bg-secondary: #0b1421;
    --color-bg-tertiary: #132030;
    --color-bg-header: rgba(5, 7, 10, 0.95);

    /* Text - Crisp Holographic */
    --color-text-primary: #e0f2ff;
    --color-text-secondary: #8daac7;
    --color-text-muted: #536b85;

    /* Accents */
    --color-accent-primary: #00ccff; /* Omni-tool Cyan */
    --color-accent-secondary: #ff3300; /* Renegade Red/Orange */
    --color-accent-tertiary: #d9d9d9; /* Alliance Silver */

    /* Borders - Tech Lines */
    --color-border: #1c3a5e;
    --color-border-light: rgba(0, 204, 255, 0.2);
    --color-border-medium: rgba(0, 204, 255, 0.4);
    
    /* Status */
    --color-online: #00ffcc;
}

:root {
    --me-cyan: #00ccff;
    --me-orange: #ff4400;
    --me-dark-blue: #0b1421;
    --me-glow: 0 0 10px rgba(0, 204, 255, 0.5);
    --me-border-glow: 0 0 5px rgba(0, 204, 255, 0.3);
}

/* 1. Global Reset & Base Styles */
body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    overflow-x: hidden; /* For stars overflow */
    min-height: 100vh;
    position: relative;
    /* Static gradient base */
    background-image: radial-gradient(circle at 50% 50%, #0e1a2b 0%, #05070a 100%);
}

/* 2. Animated Background System */

/* Layer 1: Drifting Stardust */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 15% 15%, white 1px, transparent 0),
        radial-gradient(1px 1px at 35% 25%, white 1px, transparent 0),
        radial-gradient(1.5px 1.5px at 55% 45%, rgba(255, 255, 255, 0.8) 1px, transparent 0),
        radial-gradient(1px 1px at 75% 65%, white 1px, transparent 0),
        radial-gradient(1.5px 1.5px at 85% 85%, rgba(255, 255, 255, 0.9) 1px, transparent 0);
    background-size: 800px 800px;
    opacity: 0.5;
    z-index: -3;
    animation: driftStars 100s linear infinite;
    pointer-events: none;
    will-change: transform;
}

/* Layer 2: Geometric Tech Grid (Hexagons) */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 L93.3 25 V75 L50 100 L6.7 75 V25 Z' fill='none' stroke='rgba(0, 204, 255, 0.03)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 100px 174px; /* Hex ratio */
    opacity: 0.3;
    z-index: -2;
    animation: pulseGrid 10s ease-in-out infinite alternate;
    pointer-events: none;
    will-change: opacity, transform;
}

/* Layer 3: Nebulae/Glows (using html pseudo to avoid interfering with body content) */
html::after {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 204, 255, 0.05), transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(255, 68, 0, 0.03), transparent 40%);
    z-index: -1;
    animation: rotateNebula 120s linear infinite;
    pointer-events: none;
    will-change: transform;
}

/* Animation Keyframes */
@keyframes driftStars {
    from { background-position: 0 0; }
    to { background-position: 0 800px; }
}

@keyframes pulseGrid {
    0% { opacity: 0.2; transform: scale(1); }
    100% { opacity: 0.4; transform: scale(1.02); }
}

@keyframes rotateNebula {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 3. Component Styling & Hover Effects */

/* Tech Corners Mixin Logic (applied via clip-path) */
.card, .bg-bg-secondary, .bg-bg-tertiary {
    position: relative;
    border: 1px solid var(--color-border) !important;
    background: rgba(11, 20, 33, 0.85) !important;
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Corner cuts */
    clip-path: polygon(
        10px 0, 100% 0, 
        100% calc(100% - 10px), calc(100% - 10px) 100%, 
        0 100%, 0 10px
    );
}

.card:hover, .bg-bg-secondary:hover {
    border-color: var(--me-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.15);
    transform: translateY(-2px);
}

/* Primary Actions / Buttons */
button.bg-accent-primary, .btn-primary, a.bg-accent-primary {
    background-color: rgba(0, 204, 255, 0.15) !important;
    border: 1px solid var(--me-cyan) !important;
    color: var(--me-cyan) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(0, 204, 255, 0.3);
}

button.bg-accent-primary:hover, .btn-primary:hover, a.bg-accent-primary:hover {
    background-color: rgba(0, 204, 255, 0.3) !important;
    box-shadow: 0 0 20px rgba(0, 204, 255, 0.6), inset 0 0 10px rgba(0, 204, 255, 0.4);
    text-shadow: 0 0 8px var(--me-cyan);
    transform: translateY(-1px);
}

/* Scanline effect on buttons */
button.bg-accent-primary::after, .btn-primary::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom,
        transparent 49%,
        rgba(0, 204, 255, 0.3) 50%,
        transparent 51%
    );
    transform: rotate(45deg);
    animation: scanline 3s linear infinite;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

button.bg-accent-primary:hover::after, .btn-primary:hover::after {
    opacity: 1;
}

@keyframes scanline {
    0% { transform: translateY(-100%) rotate(45deg); }
    100% { transform: translateY(100%) rotate(45deg); }
}

/* Inputs & Forms */
input, select, textarea {
    background-color: rgba(19, 32, 48, 0.8) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    border-radius: 2px !important;
    transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--me-cyan) !important;
    background-color: rgba(19, 32, 48, 1) !important;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.3) !important;
    outline: none;
}

/* Navigation & Links */
nav a, .nav-item {
    position: relative;
    transition: color 0.3s ease;
}

nav a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--me-cyan);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px var(--me-cyan);
}

nav a:hover {
    color: var(--me-cyan) !important;
    text-shadow: 0 0 8px rgba(0, 204, 255, 0.5);
}

nav a:hover::before {
    width: 100%;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    display: inline-block;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #05070a;
}

::-webkit-scrollbar-thumb {
    background: #1c3a5e;
    border: 1px solid #05070a;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--me-cyan);
    box-shadow: 0 0 10px var(--me-cyan);
}

/* Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Hide Default Global Ambient Background (from base.html) to improve performance */
.fixed.inset-0.z-\[-1\].overflow-hidden.pointer-events-none > div {
    display: none !important;
}

/* =========================================
   Mobile & Performance Optimizations
   Targeting tablets, mobile devices, and low-power modes
   ========================================= */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
    /* Disable heavy backdrop-filter on mobile/tablet */
    .card, .bg-bg-secondary, .bg-bg-tertiary,
    header, .bg-bg-header {
        backdrop-filter: none !important;
        background: rgba(11, 20, 33, 0.95) !important; /* Slightly more opaque since blur is gone */
    }

    /* Disable complex background animations */
    body::before,
    body::after,
    html::after {
        display: none !important;
    }

    /* Simplify body background */
    body {
        background-image: none !important;
        background-color: var(--color-bg-primary) !important;
    }

    /* Disable complex hover effects */
    .card:hover, .bg-bg-secondary:hover,
    button.bg-accent-primary:hover, .btn-primary:hover,
    a.bg-accent-primary:hover {
        box-shadow: none !important;
        transform: none !important;
        text-shadow: none !important;
        background-color: rgba(0, 204, 255, 0.15) !important; /* Keep static hover state */
    }

    /* Disable scanline animation on buttons */
    button.bg-accent-primary::after, .btn-primary::after {
        display: none !important;
    }

    /* Simplify card clips to standard borders */
    .card, .bg-bg-secondary, .bg-bg-tertiary {
        clip-path: none !important;
        border-radius: 8px !important;
        border: 1px solid var(--color-border) !important;
    }
    
    /* Simplify nav hover */
    nav a::before {
        display: none !important;
    }
    nav a:hover {
        color: var(--me-cyan) !important;
        text-decoration: underline;
        text-shadow: none !important;
    }
}