/* =============================================================
   GTI — Galactic Tactical Interface — Global Design System

   Scope: only things MudTheme and MudBlazor utilities cannot
   reach — background layers, glassmorphism, neon glows,
   clip-path shapes, animations, and scanlines.

   Colors      → var(--mud-palette-*)       set via MudTheme
   Typography  → var(--mud-typography-*)    set via MudTheme
   Border radius → DefaultBorderRadius + MudBlazor utility classes
   Surface tiers → 4 custom --gti-* vars below (no MudBlazor equivalent)

   All @keyframes MUST be defined here. Blazor scoped CSS does
   not scope keyframe names; defining them in .razor.css files
   pollutes the global scope unpredictably.
   ============================================================= */

/* ---------------------------------------------------------------
   1. CSS Custom Properties
   Only the Material Design 3 surface container tiers that
   MudBlazor's Palette does not expose as variables.
--------------------------------------------------------------- */
:root {
    --gti-surface-dim:     #0e0e0e;   /* starfield/deepest background    */
    --gti-surface-high:    #2a2a2a;   /* card hover states               */
    --gti-surface-highest: #353534;   /* tooltips, topmost layer panels  */
    --gti-surface-bright:  #393939;   /* active/highlighted state        */
}

/* ---------------------------------------------------------------
   2. Base Body
   Font and color come from --mud-typography-default-* and
   --mud-palette-text-primary set by MudThemeProvider.
--------------------------------------------------------------- */
body {
    overflow-x: hidden;
}

/* ---------------------------------------------------------------
   3. Background Layer Utilities
--------------------------------------------------------------- */
.gti-starfield {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--gti-surface-dim);
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 40px 70px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 130px 80px, #fff, rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 160px 120px, #ddd, rgba(0, 0, 0, 0));
    background-repeat: repeat;
    background-size: 200px 200px;
    pointer-events: none;
}

.gti-grid-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.3;
    background-image:
        linear-gradient(to right, rgba(0, 210, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 210, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.gti-radial-glow {
    position: absolute;
    top: -50%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle at center, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* ---------------------------------------------------------------
   4. Glassmorphism
--------------------------------------------------------------- */
.glass-panel {
    background: rgba(32, 31, 31, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ---------------------------------------------------------------
   5. Notched Corner (Clip-Path)
   Uses px (not %) for a consistent notch regardless of element width.
--------------------------------------------------------------- */
.notch-tl {
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%, 0 15px);
}

/* ---------------------------------------------------------------
   6. Left Border Accent Utilities
   References --mud-palette-* so accents always match the theme.
--------------------------------------------------------------- */
.accent-left-primary   { border-left: 2px solid var(--mud-palette-primary); }
.accent-left-secondary { border-left: 2px solid var(--mud-palette-secondary); }
.accent-left-tertiary  { border-left: 2px solid var(--mud-palette-tertiary); }

/* ---------------------------------------------------------------
   7. Neon Glow Utilities
--------------------------------------------------------------- */
.gti-glow-primary        { box-shadow: 0 0 20px rgba(0, 210, 255, 0.15); }
.gti-glow-primary-strong { box-shadow: 0 0 40px rgba(0, 210, 255, 0.40); }
.gti-glow-secondary      { box-shadow: 0 0 10px rgba(255, 83, 87, 0.80); }

/* ---------------------------------------------------------------
   8. Typography Utilities (for plain HTML elements)
   References --mud-typography-* so font choice stays in MudTheme.
--------------------------------------------------------------- */
.font-headline { font-family: var(--mud-typography-h1-family) !important; }
.font-body     { font-family: var(--mud-typography-default-family) !important; }

/* ---------------------------------------------------------------
   9. Animations (ALL @keyframes live here)
--------------------------------------------------------------- */
@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.8;
        box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 40px rgba(0, 210, 255, 0.7);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 3s infinite ease-in-out;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.3; }
}

.gti-dot-pulse {
    animation: dot-pulse 2s infinite ease-in-out;
}

/* ---------------------------------------------------------------
   10. Scanline Overlay
--------------------------------------------------------------- */
.gti-scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.06),
            rgba(0, 255, 0, 0.02),
            rgba(0, 0, 255, 0.06)
        );
    background-size: 100% 2px, 3px 100%;
    overflow: hidden;
}