/* ============================================================
   index.css – Unique styles for index.php
   ============================================================ */

/* Logo width override */
.w-10 {
    width: 5.5rem;
}

/* Hero Section Background */
.hero-bg {
    background: radial-gradient(circle, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
}

/* Floating Animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.float-btc  { animation: float 3s ease-in-out infinite; }
.float-eth  { animation: float 3s ease-in-out infinite 1s; }
.float-usdt { animation: float 3s ease-in-out infinite 2s; }

/* Fade-in Animation */
.fade-in {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Price Change Animations */
.price-update {
    animation: priceFlash 0.5s ease-in-out;
}

@keyframes priceFlash {
    0%   { background-color: rgba(34, 197, 94, 0.1); }
    50%  { background-color: rgba(34, 197, 94, 0.2); }
    100% { background-color: transparent; }
}

.price-update-negative {
    animation: priceFlashNegative 0.5s ease-in-out;
}

@keyframes priceFlashNegative {
    0%   { background-color: rgba(239, 68, 68, 0.1); }
    50%  { background-color: rgba(239, 68, 68, 0.2); }
    100% { background-color: transparent; }
}

/* Live Indicator Pulse */
.live-pulse {
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* Coin Card Hover */
.coin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Particle Animation */
.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: particleFloat 10s linear infinite;
}

@keyframes particleFloat {
    0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

/* Mobile */
@media (max-width: 768px) {
    #hero-headline { margin-top: 2rem; }
    .float-btc, .float-eth, .float-usdt { display: none; }
}

/* Newsletter Alert */
.newsletter-alert-show {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.newsletter-alert-hide {
    opacity: 0;
    transform: scale(0.95);
}