/* Cyberpunk Theme
   Aesthetic: High Tech, Low Life, Neon, Glitch
   Colors: Neon Pink, Cyan, Yellow, Black
*/

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;500;600;700&display=swap');

:root {
  /* Cyberpunk Fonts */
  --font-sans: 'Rajdhani', sans-serif;
  --font-display: 'Orbitron', sans-serif;

  /* Backgrounds - Deep Dark with Blue Tint */
  --color-bg-primary: #02020a; 
  --color-bg-secondary: #0a0a14;
  --color-bg-tertiary: #11111f;
  --color-bg-header: rgba(2, 2, 10, 0.95);

  /* Text Colors */
  --color-text-primary: #e0faff; /* Cyan Ice */
  --color-text-secondary: #94a3b8;
  --color-text-muted: #475569;

  /* Border Colors - Neon */
  --color-border: #00f3ff;
  --color-border-light: rgba(0, 243, 255, 0.2);
  --color-border-medium: rgba(0, 243, 255, 0.4);

  /* Accent Colors - High Voltage */
  --color-accent-primary: #ff00ff; /* Neon Magenta */
  --color-accent-secondary: #00f3ff; /* Cyan */
  --color-accent-blue: #0099ff;
  --color-accent-green: #39ff14; /* Acid Green */
  --color-accent-red: #ff003c; /* Cyber Red */
  --color-accent-yellow: #fcee0a;
  --color-accent-amber: #ffb800;

  /* Steam Colors - Adapted */
  --color-steam-bg: #0a0a14;
  --color-steam-hover: #1a1a2e;
  --color-steam-text: #00f3ff;
  --color-steam-border: #00f3ff;

  /* Glass Effect */
  --glass-bg: rgba(10, 10, 20, 0.8);
  --glass-border: rgba(0, 243, 255, 0.3);
}

/* =========================================
   Global Styles & Layout
   ========================================= */

body {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
    /* Digital Grid Background */
    background-image: 
        linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    background-attachment: fixed;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.3);
}

/* =========================================
   Components Overrides
   ========================================= */

/* Cards & Containers */
.bg-bg-secondary, 
.bg-bg-tertiary,
.card,
.bg-glass {
    background-color: rgba(10, 10, 20, 0.8) !important;
    border: 1px solid var(--color-border-light) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.05);
    backdrop-filter: blur(5px);
    position: relative;
    /* Corner cuts using clip-path could break overflow, so using borders for now or pseudo-elements */
}

/* Holographic Corner Accents */
.bg-bg-secondary::before,
.card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--color-accent-secondary);
    border-left: 2px solid var(--color-accent-secondary);
    z-index: 10;
}

.bg-bg-secondary::after,
.card::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--color-accent-secondary);
    border-right: 2px solid var(--color-accent-secondary);
    z-index: 10;
}

/* Buttons */
button, 
.btn,
a.btn-primary,
a.btn-secondary {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0 !important; /* Sharp edges */
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Primary Button - Neon Pink/Purple */
.btn-primary, 
.bg-accent-primary {
    background: linear-gradient(45deg, var(--color-accent-primary), #bc13fe) !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
    border: none !important;
}

.btn-primary:hover {
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.7);
    text-shadow: 0 0 5px white;
    transform: translateY(-1px);
}

/* Secondary Button - Neon Cyan */
.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--color-accent-secondary) !important;
    color: var(--color-accent-secondary) !important;
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.2), inset 0 0 10px rgba(0, 243, 255, 0.1);
}

.btn-secondary:hover {
    background: rgba(0, 243, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.5), inset 0 0 15px rgba(0, 243, 255, 0.2);
    text-shadow: 0 0 8px var(--color-accent-secondary);
}

/* Inputs */
input, select, textarea {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--color-border-medium) !important;
    color: var(--color-accent-secondary) !important;
    font-family: var(--font-sans) !important;
    border-radius: 0 !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-accent-primary) !important;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3) !important;
    outline: none !important;
}

input::placeholder {
    color: rgba(0, 243, 255, 0.3) !important;
}

/* Links */
a {
    transition: all 0.2s ease;
}
a:hover {
    text-shadow: 0 0 8px currentColor;
}

/* Navigation / Header */
header, .bg-bg-header {
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
}

/* Text Gradients Overrides */
.text-gradient {
    background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(0, 243, 255, 0.3));
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
}
::-webkit-scrollbar-thumb {
    background: var(--color-accent-secondary);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-primary);
    box-shadow: 0 0 10px var(--color-accent-primary);
}

/* =========================================
   Cyberpunk Specific Animations & Effects
   ========================================= */

/* Glitch Effect Class */
.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg-primary);
}

.glitch::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(35px, 9999px, 37px, 0); }
    5% { clip: rect(86px, 9999px, 59px, 0); }
    10% { clip: rect(21px, 9999px, 9px, 0); }
    15% { clip: rect(6px, 9999px, 86px, 0); }
    20% { clip: rect(69px, 9999px, 12px, 0); }
    25% { clip: rect(48px, 9999px, 49px, 0); }
    30% { clip: rect(9px, 9999px, 24px, 0); }
    35% { clip: rect(13px, 9999px, 83px, 0); }
    40% { clip: rect(72px, 9999px, 14px, 0); }
    45% { clip: rect(56px, 9999px, 37px, 0); }
    50% { clip: rect(8px, 9999px, 46px, 0); }
    55% { clip: rect(17px, 9999px, 67px, 0); }
    60% { clip: rect(32px, 9999px, 84px, 0); }
    65% { clip: rect(89px, 9999px, 5px, 0); }
    70% { clip: rect(23px, 9999px, 21px, 0); }
    75% { clip: rect(95px, 9999px, 63px, 0); }
    80% { clip: rect(4px, 9999px, 85px, 0); }
    85% { clip: rect(51px, 9999px, 16px, 0); }
    90% { clip: rect(76px, 9999px, 5px, 0); }
    95% { clip: rect(28px, 9999px, 39px, 0); }
    100% { clip: rect(64px, 9999px, 84px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(25px, 9999px, 17px, 0); }
    5% { clip: rect(56px, 9999px, 89px, 0); }
    10% { clip: rect(11px, 9999px, 49px, 0); }
    15% { clip: rect(76px, 9999px, 26px, 0); }
    20% { clip: rect(19px, 9999px, 32px, 0); }
    25% { clip: rect(98px, 9999px, 19px, 0); }
    30% { clip: rect(29px, 9999px, 74px, 0); }
    35% { clip: rect(33px, 9999px, 33px, 0); }
    40% { clip: rect(12px, 9999px, 94px, 0); }
    45% { clip: rect(46px, 9999px, 17px, 0); }
    50% { clip: rect(98px, 9999px, 26px, 0); }
    55% { clip: rect(27px, 9999px, 17px, 0); }
    60% { clip: rect(82px, 9999px, 24px, 0); }
    65% { clip: rect(19px, 9999px, 45px, 0); }
    70% { clip: rect(53px, 9999px, 81px, 0); }
    75% { clip: rect(15px, 9999px, 23px, 0); }
    80% { clip: rect(84px, 9999px, 15px, 0); }
    85% { clip: rect(21px, 9999px, 96px, 0); }
    90% { clip: rect(36px, 9999px, 25px, 0); }
    95% { clip: rect(58px, 9999px, 69px, 0); }
    100% { clip: rect(14px, 9999px, 44px, 0); }
}

/* Scanning Line Animation */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 243, 255, 0.02) 50%,
        rgba(0, 243, 255, 0.02) 51%,
        transparent 51%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 1000;
}

/* Restore Font Awesome families overridden by theme typography */
.fa, .fas, .fa-solid, .far, .fa-regular {
    font-family: "Font Awesome 6 Free" !important;
}
.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
}

/* =========================================
   Mobile Performance Optimizations
   ========================================= */
@media (max-width: 768px) {
    /* Disable heavy backdrop-filter on mobile */
    .bg-bg-secondary,
    .bg-bg-tertiary,
    .card,
    .bg-glass {
        backdrop-filter: none !important;
    }

    /* Disable scanning line effect on mobile */
    body::after {
        display: none;
    }

    /* Disable complex hover effects */
    .bg-bg-secondary:hover,
    .card:hover,
    .btn-primary:hover,
    .btn-secondary:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transform: none;
        text-shadow: none;
    }

    /* Simplify corner accents */
    .bg-bg-secondary::before,
    .bg-bg-secondary::after,
    .card::before,
    .card::after {
        display: none;
    }

    /* Disable glitch effect on mobile */
    .glitch::before,
    .glitch::after {
        display: none;
    }

    /* Simplify button styling */
    button, .btn, a.btn-primary, a.btn-secondary {
        clip-path: none;
        border-radius: 4px;
    }
}