/* ========================================
   KOZ-NEO TECHNICAL UI/UX FRAMEWORK
   Inspired by: Bungie Industrial Design, MAPPA Minimalism, Web3 Aesthetics
   ======================================== */

/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */

/* Primary Navigation (Voice) - Extended Sans-Serif */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');

/* Data Layer (System) - Pixel Terminal Font */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
    /* Typography Scale */
    --font-voice: 'Rajdhani', 'Michroma', sans-serif;
    --font-system: 'Share Tech Mono', monospace;

    /* Font Sizes */
    --text-voice-xl: 1rem;
    --text-voice-lg: 0.875rem;
    --text-voice-base: 0.75rem;
    --text-system-base: 0.5rem;
    /* 30-50% smaller than voice */
    --text-system-sm: 0.4375rem;

    /* Colors - Noir Base */
    --noir: #050505;
    --noir-light: #0a0a0a;
    --white: #ffffff;
    --white-dim: rgba(255, 255, 255, 0.7);
    --white-faint: rgba(255, 255, 255, 0.3);

    /* Iridescent Accents */
    --iridescent: linear-gradient(135deg, #B388FF 0%, #00E5FF 35%, #76FF03 70%, #FFFFFF 100%);
    --iridescent-glow: rgba(179, 136, 255, 0.3);

    /* Grid System */
    --grid-border: 1px;
    --corner-angle: 45deg;
    --corner-size: 8px;
}

.font-voice {
    font-family: var(--font-voice);
    font-weight: 500;
    letter-spacing: 0.15em;
}

.font-system {
    font-family: var(--font-system);
    font-size: var(--text-system-base);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ========================================
   BENTO GRID SYSTEM
   ======================================== */

.bento-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.bento-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: var(--grid-border) solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sharp 45° Angled Corners */
.angled-corners {
    clip-path: polygon(var(--corner-size) 0,
            100% 0,
            100% calc(100% - var(--corner-size)),
            calc(100% - var(--corner-size)) 100%,
            0 100%,
            0 var(--corner-size));
}

.angled-corners-full {
    clip-path: polygon(var(--corner-size) 0,
            calc(100% - var(--corner-size)) 0,
            100% var(--corner-size),
            100% calc(100% - var(--corner-size)),
            calc(100% - var(--corner-size)) 100%,
            var(--corner-size) 100%,
            0 calc(100% - var(--corner-size)),
            0 var(--corner-size));
}

/* ========================================
   TACTICAL GLASS (GLASSMORPHISM)
   ======================================== */

.tactical-glass {
    background: rgba(5, 5, 5, 0.6);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: var(--grid-border) solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

/* 1px Iridescent Rim Light */
.tactical-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    background: var(--iridescent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.tactical-glass:hover::before {
    opacity: 0.6;
}

/* Enhanced Glassmorphism for Navigation */
.nav-glass {
    background: rgba(5, 5, 5, 0.3);
    backdrop-filter: blur(80px) saturate(180%);
    -webkit-backdrop-filter: blur(80px) saturate(180%);
    border-bottom: var(--grid-border) solid rgba(255, 255, 255, 0.05);
}

/* ========================================
   DIGITAL GRAIN / DITHERING EFFECT
   ======================================== */

.digital-grain {
    position: fixed;
    inset: 0;
    background-color: var(--noir);
    z-index: -100;
    overflow: hidden;
}

.digital-grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.01) 2px,
            rgba(255, 255, 255, 0.01) 4px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.01) 2px,
            rgba(255, 255, 255, 0.01) 4px);
    animation: grain-shift 8s steps(10) infinite;
    opacity: 0.3;
}

.digital-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(179, 136, 255, 0.03), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 229, 255, 0.02), transparent 40%);
    animation: grain-pulse 15s ease-in-out infinite;
}

@keyframes grain-shift {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-2px, 2px);
    }

    50% {
        transform: translate(2px, -2px);
    }

    75% {
        transform: translate(-2px, -2px);
    }
}

@keyframes grain-pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.5;
    }
}

/* ========================================
   SCROLL-DRIVEN ANIMATIONS
   ======================================== */

.scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Linear-to-Soft-Out Easing (Industrial Assembly Feel) */
.industrial-ease {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   PARALLAX SYSTEM
   ======================================== */

.parallax-bg {
    transform: translateY(calc(var(--scroll-progress, 0) * 0.1px));
    transition: transform 0.1s linear;
}

.parallax-grid {
    transform: translateY(calc(var(--scroll-progress, 0) * 0.3px));
    transition: transform 0.1s linear;
}

.parallax-content {
    transform: translateY(calc(var(--scroll-progress, 0) * 1px));
    transition: transform 0.1s linear;
}

/* ========================================
   HOVER STATES - SCANLINE OVERLAY
   ======================================== */

.scanline-hover {
    position: relative;
    overflow: hidden;
}

.scanline-hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.03) 1px,
            rgba(255, 255, 255, 0.03) 2px);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.scanline-hover:hover::after {
    opacity: 1;
    animation: scanline-flicker 0.1s steps(2) 3;
}

@keyframes scanline-flicker {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* System Active Indicator */
.system-active {
    position: relative;
}

.system-active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #00E5FF;
    box-shadow: 0 0 8px #00E5FF;
    animation: pulse-indicator 2s ease-in-out infinite;
}

@keyframes pulse-indicator {

    0%,
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(1.2);
    }
}

/* ========================================
   BUTTON COMPONENTS
   ======================================== */

.btn-connect {
    position: relative;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: var(--grid-border) solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-family: var(--font-voice);
    font-size: var(--text-voice-base);
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.btn-connect::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--iridescent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-connect:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 20px var(--iridescent-glow);
}

.btn-connect:hover::before {
    opacity: 0.1;
}

.btn-connect span {
    position: relative;
    z-index: 1;
}

/* ========================================
   STATUS INDICATORS
   ======================================== */

.status-indicator {
    font-family: var(--font-system);
    font-size: var(--text-system-sm);
    color: var(--white-faint);
    letter-spacing: 0.1em;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: var(--grid-border) solid rgba(255, 255, 255, 0.05);
}

.status-indicator.active {
    color: #00E5FF;
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

/* ========================================
   NAVIGATION SPECIFIC
   ======================================== */

.nav-item-technical {
    position: relative;
    padding: 0.5rem 1rem;
    font-family: var(--font-voice);
    font-size: var(--text-voice-base);
    color: var(--white-dim);
    letter-spacing: 0.15em;
    transition: all 0.3s ease;
}

.nav-item-technical:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.05);
}

.nav-item-technical.active {
    color: var(--white);
}

.nav-item-technical.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--iridescent);
}

.nav-label-system {
    font-family: var(--font-system);
    font-size: var(--text-system-sm);
    color: var(--white-faint);
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
    display: block;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-iridescent {
    background: var(--iridescent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.border-iridescent {
    border-image: var(--iridescent) 1;
}

.glow-cyan {
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

.glow-purple {
    box-shadow: 0 0 20px rgba(179, 136, 255, 0.3);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    :root {
        --text-voice-xl: 0.875rem;
        --text-voice-lg: 0.75rem;
        --text-voice-base: 0.625rem;
        --text-system-base: 0.4375rem;
        --text-system-sm: 0.375rem;
    }

    .bento-card {
        padding: 1rem;
    }
}