/* Base adjustments */
body {
    background-color: #0a0f14;
}

/* Blueprint Grid */
.grid-bg {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);
}

/* Glassmorphism */
.glass-panel {
    background: rgba(10, 15, 20, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 240, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* Text Shadows */
.text-shadow-cyan {
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.8), 0 0 20px rgba(0, 240, 255, 0.4);
}

.shadow-cyan {
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
}

/* CAD Corners for Hero Image */
.corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: #00f0ff;
    border-style: solid;
    z-index: 20;
    pointer-events: none;
}

.top-left { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
.top-right { top: -2px; right: -2px; border-width: 2px 2px 0 0; }
.bottom-left { bottom: -2px; left: -2px; border-width: 0 0 2px 2px; }
.bottom-right { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }

/* 3D Perspective for Tilt Effect */
.hero-container {
    perspective: 1000px;
}

.hero-border {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

/* Digital Scanner Beam */
.scanner-beam {
    top: 0;
    animation: scan 4s linear infinite;
}

@keyframes scan {
    0% { top: 0%; opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Custom Animations */
@keyframes fastPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.animate-pulse-fast {
    animation: fastPulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Glitch Effect applied briefly during number change via JS class toggle */
.is-glitching {
    animation: textGlitch 0.2s linear infinite;
    color: #00f0ff;
    text-shadow: 2px 0 #ff00ea, -2px 0 #00f0ff;
}

@keyframes textGlitch {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 1px) }
    40% { transform: translate(-1px, -1px) }
    60% { transform: translate(2px, 1px) }
    80% { transform: translate(1px, -1px) }
    100% { transform: translate(0) }
}