/**
 * OBELISK SHADERS - Advanced Visual Effects
 * Build: 2026-01-26
 * Cyberpunk/Futuristic trading terminal aesthetic
 */

/* === GLOBAL SCANLINES OVERLAY === */
.obelisk-scanlines::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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: 9990;
    animation: scanlines-flicker 8s linear infinite;
}

@keyframes scanlines-flicker {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.7; }
    92% { opacity: 0.5; }
    93% { opacity: 0.8; }
    94% { opacity: 0.5; }
}

/* === CRT VIGNETTE EFFECT === */
.obelisk-crt::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
    z-index: 9989;
}

/* === GLOW CARDS === */
.card, .panel, .module-card, .product-card, .stat-card, .combo-card {
    position: relative;
    overflow: hidden;
}

.card::before, .panel::before, .module-card::before,
.product-card::before, .stat-card::before, .combo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 136, 0.08) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.card:hover::before, .panel:hover::before, .module-card:hover::before,
.product-card:hover::before, .stat-card:hover::before, .combo-card:hover::before {
    left: 100%;
}

/* === NEON GLOW BORDERS === */
@keyframes neon-pulse {
    0%, 100% {
        box-shadow:
            0 0 5px rgba(0, 255, 136, 0.3),
            0 0 10px rgba(0, 255, 136, 0.2),
            inset 0 0 5px rgba(0, 255, 136, 0.1);
    }
    50% {
        box-shadow:
            0 0 10px rgba(0, 255, 136, 0.5),
            0 0 20px rgba(0, 255, 136, 0.3),
            0 0 30px rgba(0, 255, 136, 0.2),
            inset 0 0 10px rgba(0, 255, 136, 0.15);
    }
}

.neon-glow {
    animation: neon-pulse 3s ease-in-out infinite;
}

/* Headers with neon effect */
.header, .nav-tabs {
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 136, 0.5) 20%,
        rgba(0, 170, 255, 0.8) 50%,
        rgba(0, 255, 136, 0.5) 80%,
        transparent 100%
    );
    animation: header-glow 4s ease-in-out infinite;
}

@keyframes header-glow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* === DATA STREAM EFFECT === */
@keyframes data-stream {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.data-stream {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 136, 0.05) 25%,
        rgba(59, 130, 246, 0.05) 50%,
        rgba(0, 255, 136, 0.05) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: data-stream 4s linear infinite;
}

/* === HOLOGRAPHIC SHIMMER === */
@keyframes hologram-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.hologram {
    position: relative;
}

.hologram::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(0, 255, 136, 0.1) 25%,
        rgba(59, 130, 246, 0.15) 50%,
        rgba(138, 43, 226, 0.1) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: hologram-shimmer 6s ease infinite;
    pointer-events: none;
    z-index: 2;
}

/* === MATRIX RAIN BACKGROUND === */
@keyframes matrix-fall {
    0% { transform: translateY(-100vh); opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

.matrix-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.matrix-column {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: #00ff88;
    text-shadow: 0 0 10px #00ff88;
    writing-mode: vertical-rl;
    white-space: nowrap;
    animation: matrix-fall linear infinite;
    opacity: 0.15;
}

/* === GLITCH EFFECT === */
@keyframes glitch {
    0%, 100% {
        transform: translate(0);
        text-shadow: none;
    }
    20% {
        transform: translate(-2px, 2px);
        text-shadow: 2px 0 #00ff88, -2px 0 #ff0088;
    }
    40% {
        transform: translate(-2px, -2px);
        text-shadow: 2px 0 #00aaff, -2px 0 #ff0088;
    }
    60% {
        transform: translate(2px, 2px);
        text-shadow: 2px 0 #00ff88, -2px 0 #00aaff;
    }
    80% {
        transform: translate(2px, -2px);
        text-shadow: -2px 0 #00ff88, 2px 0 #ff0088;
    }
}

.glitch:hover {
    animation: glitch 0.3s ease infinite;
}

/* === PULSE ANIMATIONS === */
@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
        border-color: rgba(0, 255, 136, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.8), 0 0 40px rgba(0, 255, 136, 0.4);
        border-color: rgba(0, 255, 136, 1);
    }
}

@keyframes pulse-blue {
    0%, 100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
        border-color: rgba(59, 130, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 40px rgba(59, 130, 246, 0.4);
        border-color: rgba(59, 130, 246, 1);
    }
}

@keyframes pulse-orange {
    0%, 100% {
        box-shadow: 0 0 5px rgba(245, 158, 11, 0.5);
        border-color: rgba(245, 158, 11, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.8), 0 0 40px rgba(245, 158, 11, 0.4);
        border-color: rgba(245, 158, 11, 1);
    }
}

.pulse-green { animation: pulse-green 2s ease-in-out infinite; }
.pulse-blue { animation: pulse-blue 2s ease-in-out infinite; }
.pulse-orange { animation: pulse-orange 2s ease-in-out infinite; }

/* === FLOATING PARTICLES === */
@keyframes float-particle {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(-10vh) scale(1);
        opacity: 0;
    }
}

.floating-particle {
    position: fixed;
    width: 4px;
    height: 4px;
    background: #00ff88;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ff88;
    animation: float-particle 8s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.floating-particle.blue { background: #3b82f6; box-shadow: 0 0 10px #3b82f6; }
.floating-particle.purple { background: #8b5cf6; box-shadow: 0 0 10px #8b5cf6; }

/* === SPEED LINES === */
@keyframes speed-line {
    0% { transform: translateX(-100%); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

.speed-line {
    position: fixed;
    height: 1px;
    width: 100px;
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
    animation: speed-line 2s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* === ENERGY BARS (Like crypto prices) === */
@keyframes energy-bar {
    0%, 100% { height: 30%; }
    25% { height: 80%; }
    50% { height: 45%; }
    75% { height: 90%; }
}

.energy-bar {
    width: 3px;
    background: linear-gradient(to top, #00ff88, #00aaff);
    animation: energy-bar 1s ease-in-out infinite;
    border-radius: 2px;
}

/* === TRADING ACTIVITY INDICATOR === */
@keyframes blink-fast {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

.activity-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff88;
    animation: blink-fast 0.5s infinite;
    box-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
}

.activity-indicator.warning {
    background: #f59e0b;
    box-shadow: 0 0 10px #f59e0b, 0 0 20px #f59e0b;
}

.activity-indicator.danger {
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444, 0 0 20px #ef4444;
}

/* === TERMINAL CURSOR === */
@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.terminal-cursor::after {
    content: '▊';
    color: #00ff88;
    animation: cursor-blink 1s step-end infinite;
    margin-left: 2px;
}

/* === BUTTON EFFECTS === */
.btn-primary, .btn-trade, .nav-tab.active, button[type="submit"] {
    position: relative;
    overflow: hidden;
}

.btn-primary::after, .btn-trade::after, button[type="submit"]::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
    transform: scale(0);
    transition: transform 0.5s ease;
    pointer-events: none;
}

.btn-primary:hover::after, .btn-trade:hover::after, button[type="submit"]:hover::after {
    transform: scale(1);
}

/* === HEXAGON GRID OVERLAY === */
.hex-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2300ff88' fill-opacity='0.03'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* === CHART GLOW EFFECT === */
.trading-chart, .chart-container, #tradingview-widget {
    position: relative;
}

.trading-chart::before, .chart-container::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg,
        rgba(0, 255, 136, 0.3),
        rgba(59, 130, 246, 0.3),
        rgba(138, 43, 226, 0.3),
        rgba(0, 255, 136, 0.3)
    );
    background-size: 300% 300%;
    animation: gradient-rotate 8s ease infinite;
    border-radius: inherit;
    z-index: -1;
    filter: blur(4px);
}

@keyframes gradient-rotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* === NOTIFICATION EFFECTS === */
.notification, .toast {
    animation: notification-slide-in 0.3s ease, notification-glow 2s ease-in-out infinite;
}

@keyframes notification-slide-in {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes notification-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 136, 0.3); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.5); }
}

/* === LOADING EFFECTS === */
@keyframes loading-bar {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

.loading-bar {
    height: 2px;
    background: linear-gradient(90deg, #00ff88, #00aaff, #8b5cf6);
    animation: loading-bar 2s ease-in-out infinite;
}

/* === PRICE CHANGE ANIMATIONS === */
@keyframes price-up {
    0% { background-color: rgba(0, 255, 136, 0.3); }
    100% { background-color: transparent; }
}

@keyframes price-down {
    0% { background-color: rgba(239, 68, 68, 0.3); }
    100% { background-color: transparent; }
}

.price-up {
    animation: price-up 0.5s ease-out;
}

.price-down {
    animation: price-down 0.5s ease-out;
}

/* === TICKER TAPE === */
@keyframes ticker-scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.ticker-tape {
    display: flex;
    animation: ticker-scroll 30s linear infinite;
    white-space: nowrap;
}

/* === CYBER GRID FLOOR === */
.cyber-floor {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30vh;
    background:
        linear-gradient(to top, rgba(0, 255, 136, 0.1) 0%, transparent 100%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 50px,
            rgba(0, 255, 136, 0.05) 50px,
            rgba(0, 255, 136, 0.05) 51px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 50px,
            rgba(0, 255, 136, 0.05) 50px,
            rgba(0, 255, 136, 0.05) 51px
        );
    perspective: 500px;
    transform: rotateX(60deg);
    transform-origin: center bottom;
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
}

/* === RESPONSIVE: Disable heavy effects on mobile === */
@media (max-width: 768px) {
    .obelisk-scanlines::after,
    .obelisk-crt::before,
    .matrix-rain,
    .cyber-floor,
    .hex-overlay {
        display: none;
    }

    .floating-particle,
    .speed-line {
        display: none;
    }
}

/* === REDUCED MOTION: Respect user preferences === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}