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

/* 使用币安主题变量 - 从style.css继承 */

/* Tailwind Background Extensions - 使用币安主题变量 */
.bg-binance-primary {
    background-color: var(--theme-black, #0B0E11);
}

.bg-binance-secondary {
    background-color: var(--theme-black-light, #1A1D22);
}

.bg-binance-tertiary {
    background-color: var(--theme-black-lighter, #2A2D32);
}

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

.bg-gradient-binance-secondary {
    background: var(--gradient-dark, linear-gradient(180deg, #1A1D22 0%, #0B0E11 100%));
}

.bg-gradient-binance-tertiary {
    background: var(--gradient-dark, linear-gradient(135deg, #2A2D32 0%, #1A1D22 100%));
}

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

/* Text Color Extensions - 使用币安主题变量 */
.text-binance-primary {
    color: var(--primary, #F0B90B);
}

.text-binance-accent {
    color: var(--success, #10B981);
}

/* Border Extensions - 使用币安主题变量 */
.border-binance-primary {
    border-color: var(--primary, #F0B90B);
}

.border-binance-accent {
    border-color: var(--success, #10B981);
}

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

.neon-glow {
    box-shadow: var(--neon-glow, 0 0 20px rgba(240, 185, 11, 0.4));
}

.neon-glow:hover {
    box-shadow: var(--shadow-hover, 0 0 30px rgba(240, 185, 11, 0.6));
}

.geometric-shape {
    filter: drop-shadow(0 0 10px rgba(240, 185, 11, 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: var(--transition-fast, 2s);
}

.glitch-effect {
    position: relative;
    animation: glitch 2s var(--transition-fast, ease) 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 var(--transition, ease-in-out) infinite;
}

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

/* 价格颜色 - 使用主题变量 */
.price-up {
    color: var(--success, #10B981);
}

.price-down {
    color: var(--error, #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;
    }
    
}