/* ROOT WORK - Cyberpunk Theme Shared Styles */

/* Prevent horizontal overflow on mobile */
html, body { overflow-x: hidden; }

/* Glow effects */
.glow-green { text-shadow: 0 0 20px rgba(0,255,136,0.5), 0 0 40px rgba(0,255,136,0.2); }
.glow-green-sm { text-shadow: 0 0 10px rgba(0,255,136,0.3); }
.glow-box { box-shadow: 0 0 30px rgba(0,255,136,0.1), inset 0 0 30px rgba(0,255,136,0.02); }
.glow-box-hover:hover { box-shadow: 0 0 40px rgba(0,255,136,0.15), 0 0 80px rgba(0,255,136,0.05), inset 0 0 30px rgba(0,255,136,0.03); }

/* Scanline overlay */
.scanlines { position: relative; }
.scanlines::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,136,0.015) 2px, rgba(0,255,136,0.015) 4px);
    pointer-events: none;
    z-index: 1;
}

/* Grid background */
.grid-bg {
    background-image:
        linear-gradient(rgba(0,255,136,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,136,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Terminal cursor blink */
.cursor-blink::after { content: '\2588'; animation: blink 1s step-end infinite; color: #00ff88; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* Typing cursor */
.typing { border-right: 2px solid #00ff88; animation: blink-caret 0.75s step-end infinite; }
@keyframes blink-caret { 0%,100%{border-color:#00ff88;} 50%{border-color:transparent;} }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 560ms; }

/* Navbar scroll */
.navbar-scrolled {
    background: rgba(10,10,15,0.92) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,255,136,0.1);
}

/* Card lift */
.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.card-lift:hover { transform: translateY(-4px); }

/* HUD corner decorations */
.hud-corners { position: relative; }
.hud-corners::before, .hud-corners::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: rgba(0,255,136,0.3);
    border-style: solid;
}
.hud-corners::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hud-corners::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #00ff8844; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00ff8877; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Terminal window component */
.terminal-window { overflow: hidden; }
.terminal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.terminal-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.terminal-dot-red { background: rgba(239,68,68,0.7); }
.terminal-dot-yellow { background: rgba(234,179,8,0.7); }
.terminal-dot-green { background: rgba(34,197,94,0.7); }

/* Status pulse */
.status-pulse { position: relative; }
.status-pulse::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Cookie Consent Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(10,10,15,0.97);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0,255,136,0.2);
    padding: 1rem 1.5rem;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.cookie-banner.visible {
    transform: translateY(0);
}
.cookie-banner-inner {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cookie-banner p {
    flex: 1 1 300px;
    margin: 0;
    font-size: 0.8125rem;
    color: #9ca3af;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    line-height: 1.5;
}
.cookie-banner p a {
    color: #00ff88;
    text-decoration: none;
    transition: opacity 0.2s;
}
.cookie-banner p a:hover { opacity: 0.7; }
.cookie-banner-buttons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.cookie-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1.25rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.cookie-btn-accept {
    background: #00ff88;
    color: #0a0a0f;
    font-weight: 600;
}
.cookie-btn-accept:hover {
    box-shadow: 0 0 20px rgba(0,255,136,0.3);
}
.cookie-btn-reject {
    background: transparent;
    color: #9ca3af;
    border: 1px solid rgba(156,163,175,0.3);
}
.cookie-btn-reject:hover {
    border-color: #00ff88;
    color: #00ff88;
}
@media (max-width: 640px) {
    .cookie-banner { padding: 1rem; }
    .cookie-banner-inner { flex-direction: column; text-align: center; }
    .cookie-banner-buttons { width: 100%; }
    .cookie-btn { flex: 1; }
}