/* ==========================================================================
   Mecha HUD theme — custom styles that Tailwind utilities can't express
   ========================================================================== */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Technical grid graticule */
.bg-grid-tech {
    background-size: 32px 32px;
    background-image:
        linear-gradient(to right, rgba(92, 64, 55, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(92, 64, 55, 0.15) 1px, transparent 1px);
}

@media (max-width: 767px) {
    .bg-grid-tech {
        background-size: 24px 24px;
    }
}

.no-scrollbar {
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Navigation active state (set by hud.js scrollspy) */
.nav-link.is-active {
    color: #ffb59c;
    border-color: #ffb59c;
}

/* 3D mechanical bevel buttons */
.btn-tactile-primary {
    box-shadow: 0 4px 0 #822700, inset 1px 1px 0 rgba(255, 255, 255, 0.35);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.btn-tactile-primary:hover {
    box-shadow: 0 4px 12px rgba(255, 87, 8, 0.5), 0 4px 0 #822700;
}

.btn-tactile-primary:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #822700;
}

.btn-tactile-cyan {
    box-shadow: 0 4px 0 #00686f, inset 1px 1px 0 rgba(125, 244, 255, 0.25);
    transition: transform 0.06s ease, box-shadow 0.06s ease;
}

.btn-tactile-cyan:hover {
    box-shadow: 0 4px 14px rgba(0, 238, 252, 0.45), 0 4px 0 #004f54;
}

.btn-tactile-cyan:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #004f54;
}

/* Mechanical chamfer plates */
.chamfer-tr {
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}

.chamfer-br {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

/* ==========================================================================
   Section reveal (only hides content when JS is running)
   ========================================================================== */
.hud-reveal-section {
    position: relative;
}

.js .hud-reveal-section {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .hud-reveal-section.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.hud-reveal-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 87, 8, 0.9), rgba(0, 238, 252, 0.9), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 30;
}

.hud-reveal-section.is-revealed::before {
    animation: hudScanBeam 1.1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes hudScanBeam {
    0% { top: 0%; opacity: 0; }
    20% { opacity: 0.95; }
    80% { opacity: 0.8; }
    100% { top: 100%; opacity: 0; }
}

.js .hud-card-reveal {
    opacity: 0;
}

.js .hud-reveal-section.is-revealed .hud-card-reveal {
    animation: cardFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Status lights & flicker effects
   ========================================================================== */
.hud-reveal-section.is-revealed .hud-uplink-blink {
    animation: radarUplinkBlink 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hud-reveal-section.is-revealed .hud-header-container-pulse {
    animation: hudFramePulse 3s ease-in-out infinite;
}

@keyframes radarUplinkBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 16px rgba(255, 87, 8, 0.9), 0 0 4px rgba(255, 181, 156, 0.8); transform: scaleY(1); }
    18% { opacity: 0.25; box-shadow: 0 0 2px rgba(255, 87, 8, 0.2); transform: scaleY(0.92); }
    24% { opacity: 1; box-shadow: 0 0 18px rgba(255, 87, 8, 1), 0 0 6px rgba(255, 181, 156, 1); transform: scaleY(1); }
    32% { opacity: 0.4; box-shadow: 0 0 3px rgba(255, 87, 8, 0.3); }
    38% { opacity: 0.95; box-shadow: 0 0 14px rgba(255, 87, 8, 0.85); }
    65% { opacity: 0.7; box-shadow: 0 0 8px rgba(255, 87, 8, 0.5); }
    82% { opacity: 0.35; box-shadow: 0 0 3px rgba(255, 87, 8, 0.25); }
}

@keyframes hudFramePulse {
    0%, 100% { border-bottom-color: rgba(172, 137, 126, 0.6); background-color: transparent; }
    20% { border-bottom-color: rgba(255, 87, 8, 0.85); background-color: rgba(255, 87, 8, 0.04); }
    26% { border-bottom-color: rgba(172, 137, 126, 0.4); background-color: transparent; }
    38% { border-bottom-color: rgba(255, 87, 8, 0.7); background-color: rgba(255, 87, 8, 0.02); }
    70% { border-bottom-color: rgba(172, 137, 126, 0.3); background-color: transparent; }
}

.amber-glow-flicker {
    animation: amberFlicker 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes amberFlicker {
    0%, 100% { opacity: 1; box-shadow: 0 0 12px #f59e0b, 0 0 24px rgba(245, 158, 11, 0.6); }
    15% { opacity: 0.72; box-shadow: 0 0 8px #f59e0b, 0 0 14px rgba(245, 158, 11, 0.4); }
    22% { opacity: 0.95; box-shadow: 0 0 14px #ffba20, 0 0 28px rgba(245, 158, 11, 0.8); }
    38% { opacity: 0.65; box-shadow: 0 0 6px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.35); }
    45% { opacity: 1; box-shadow: 0 0 16px #ffba20, 0 0 26px rgba(245, 158, 11, 0.75); }
    72% { opacity: 0.8; box-shadow: 0 0 10px #f59e0b, 0 0 18px rgba(245, 158, 11, 0.5); }
    88% { opacity: 0.62; box-shadow: 0 0 7px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.35); }
}

.hud-flicker-sq {
    animation: hudFlicker 3.2s infinite steps(1, end);
}

.hud-flicker-delayed {
    animation: hudFlicker 2.7s 0.8s infinite steps(1, end);
}

.hud-flicker-alt {
    animation: hudFlicker 4s 1.5s infinite steps(1, end);
}

@keyframes hudFlicker {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px currentColor); }
    41.99% { opacity: 1; }
    42% { opacity: 0.35; }
    43% { opacity: 1; }
    45% { opacity: 0.2; }
    46% { opacity: 1; }
    78% { opacity: 0.5; }
    80% { opacity: 1; }
}

.hud-dim-glow-flicker {
    animation: hudDimGlowFlicker 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hudDimGlowFlicker {
    0%, 100% { opacity: 0.85; filter: brightness(1); box-shadow: 0 0 10px rgba(255, 87, 8, 0.55), 0 0 20px rgba(255, 87, 8, 0.25); }
    12% { opacity: 0.5; filter: brightness(0.85); box-shadow: 0 0 5px rgba(255, 87, 8, 0.3), 0 0 10px rgba(255, 87, 8, 0.15); }
    18% { opacity: 0.8; filter: brightness(0.98); box-shadow: 0 0 9px rgba(255, 87, 8, 0.5), 0 0 18px rgba(255, 87, 8, 0.22); }
    35% { opacity: 0.42; filter: brightness(0.75); box-shadow: 0 0 4px rgba(255, 87, 8, 0.25), 0 0 8px rgba(255, 87, 8, 0.12); }
    42% { opacity: 0.78; filter: brightness(0.95); box-shadow: 0 0 8px rgba(255, 87, 8, 0.48), 0 0 16px rgba(255, 87, 8, 0.2); }
    67% { opacity: 0.65; filter: brightness(0.9); box-shadow: 0 0 6px rgba(255, 87, 8, 0.38), 0 0 12px rgba(255, 87, 8, 0.18); }
    73% { opacity: 0.45; filter: brightness(0.8); box-shadow: 0 0 4px rgba(255, 87, 8, 0.25), 0 0 9px rgba(255, 87, 8, 0.14); }
    85% { opacity: 0.82; filter: brightness(1); box-shadow: 0 0 10px rgba(255, 87, 8, 0.55), 0 0 20px rgba(255, 87, 8, 0.25); }
}

.telemetry-flicker {
    animation: telemetryCircleFlicker 2.6s ease-in-out infinite;
}

@keyframes telemetryCircleFlicker {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px #00eefc, 0 0 18px rgba(0, 238, 252, 0.8); }
    20% { opacity: 0.3; box-shadow: 0 0 2px #00eefc; }
    25% { opacity: 0.9; box-shadow: 0 0 8px #00eefc; }
    50% { opacity: 0.15; box-shadow: none; }
    55% { opacity: 0.7; box-shadow: 0 0 6px #00eefc; }
    70% { opacity: 0.35; box-shadow: 0 0 3px #00eefc; }
    85% { opacity: 1; box-shadow: 0 0 12px #00eefc, 0 0 20px rgba(0, 238, 252, 0.9); }
}

.cyan-beacon-ring {
    animation: circleFlickerDim 3s infinite, circleGlowPulse 2s ease-in-out infinite;
}

.cyan-beacon-core {
    animation: circleFlickerDim 3s infinite;
}

@keyframes circleFlickerDim {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 7px #00eefc) drop-shadow(0 0 14px #00eefc); }
    15% { opacity: 0.3; filter: drop-shadow(0 0 1px #00eefc); }
    25% { opacity: 0.95; filter: drop-shadow(0 0 9px #00eefc); }
    32% { opacity: 0.15; filter: none; }
    45% { opacity: 0.8; filter: drop-shadow(0 0 5px #00eefc); }
    60% { opacity: 0.35; filter: drop-shadow(0 0 2px #00eefc); }
    78% { opacity: 1; filter: drop-shadow(0 0 11px #00eefc); }
    88% { opacity: 0.25; filter: none; }
}

@keyframes circleGlowPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ==========================================================================
   Accessibility: respect reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .hud-reveal-section,
    .js .hud-card-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .hud-reveal-section::before {
        display: none !important;
    }

    .hud-uplink-blink,
    .hud-header-container-pulse,
    .amber-glow-flicker,
    .hud-flicker-sq,
    .hud-flicker-delayed,
    .hud-flicker-alt,
    .hud-dim-glow-flicker,
    .telemetry-flicker,
    .cyan-beacon-ring,
    .cyan-beacon-core,
    .animate-ping {
        animation: none !important;
    }
}