/* Page Index Entrance - Tailwind Extensions
 * This file adds Tailwind classes that aren't available in the default set
 * or provides cyberpunk-specific styling enhancements
 */

/* Cyberpunk Color Variables (matching the theme) */
:root {
    --binance-bg-primary: #000000;
    --binance-bg-secondary: #1a1a1a;
    --binance-bg-tertiary: #2a2a2a;
    --binance-primary: #f0b90b;
    --binance-accent: #84cc16;
    --binance-text-primary: #ffffff;
    --binance-text-secondary: #94a3b8;
}

/* Tailwind Background Extensions */
.bg-binance-primary {
    background-color: var(--binance-bg-primary);
}

.bg-binance-secondary {
    background-color: var(--binance-bg-secondary);
}

.bg-binance-tertiary {
    background-color: var(--binance-bg-tertiary);
}

/* Gradient Background Extensions (replacing inline styles) */
.bg-gradient-binance-primary {
    background: linear-gradient(135deg, var(--binance-bg-secondary) 0%, var(--binance-bg-primary) 100%);
}

.bg-gradient-binance-secondary {
    background: linear-gradient(180deg, var(--binance-bg-secondary) 0%, var(--binance-bg-primary) 100%);
}

.bg-gradient-binance-tertiary {
    background: linear-gradient(135deg, var(--binance-bg-tertiary) 0%, var(--binance-bg-secondary) 100%);
}

/* Button Gradient Extensions */
.bg-gradient-binance-button {
    background: linear-gradient(135deg, var(--binance-primary) 0%, var(--binance-accent) 100%);
}

/* Text Color Extensions */
.text-binance-primary {
    color: var(--binance-primary);
}

.text-binance-accent {
    color: var(--binance-accent);
}

/* Border Extensions */
.border-binance-primary {
    border-color: var(--binance-primary);
}

.border-binance-accent {
    border-color: var(--binance-accent);
}

@keyframes hologram-scan {
    0% { left: -100%; }
    100% { left: 100%; }
}

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

.neon-glow:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
}

.geometric-shape {
    filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.5));
}

/* 二维码图标旋转效果 */
.fa-qrcode.geometric-shape {
    animation: qrcode-rotate 8s linear infinite;
    transform-style: preserve-3d;
}

@keyframes qrcode-rotate {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/* 悬停时加速旋转 */
.fa-qrcode.geometric-shape:hover {
    animation-duration: 2s;
}

.glitch-effect {
    position: relative;
    animation: glitch 2s infinite;
}

@keyframes glitch {
    0%, 100% { transform: translate(0); }
    10% { transform: translate(-2px, -2px); }
    20% { transform: translate(2px, 2px); }
    30% { transform: translate(-2px, 2px); }
    40% { transform: translate(2px, -2px); }
    50% { transform: translate(0); }
}

/* 3D浮动效果 */
.float-3d {
    animation: float3d 6s ease-in-out infinite;
}

@keyframes float3d {
    0%, 100% { transform: translateY(0px) rotateX(0deg); }
    50% { transform: translateY(-20px) rotateX(5deg); }
}

/* 价格颜色 */
.price-up {
    color: #10b981;
}

.price-down {
    color: #ef4444;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
    .text-6xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
   
   
}

@media (max-width: 640px) {
    .text-6xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    
}