/**
 * LASE CANDLE HOUSE - Özel Animasyonlar & Efektler
 * Pastel Büyü, Titreyen Mum Alevi, Süzülen Bulutlar & Mikro Etkileşimler
 */

/* 1. Titreyen Gerçekçi Mum Alevi Animasyonu */
@keyframes candleFlicker {
    0%, 100% {
        transform: scale(1) rotate(-1deg);
        filter: drop-shadow(0 0 10px rgba(253, 224, 71, 0.8)) drop-shadow(0 0 20px rgba(249, 115, 22, 0.4));
    }
    20% {
        transform: scale(1.04, 0.96) rotate(2deg);
        filter: drop-shadow(0 0 14px rgba(253, 224, 71, 0.9)) drop-shadow(0 0 25px rgba(249, 115, 22, 0.5));
    }
    40% {
        transform: scale(0.97, 1.03) rotate(-2deg);
        filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.7)) drop-shadow(0 0 16px rgba(249, 115, 22, 0.3));
    }
    60% {
        transform: scale(1.02, 0.98) rotate(1deg);
        filter: drop-shadow(0 0 16px rgba(253, 224, 71, 0.95)) drop-shadow(0 0 28px rgba(249, 115, 22, 0.55));
    }
    80% {
        transform: scale(0.98, 1.02) rotate(-1deg);
        filter: drop-shadow(0 0 11px rgba(253, 224, 71, 0.85)) drop-shadow(0 0 22px rgba(249, 115, 22, 0.45));
    }
}

.candle-flame-active {
    animation: candleFlicker 2.8s infinite ease-in-out;
    transform-origin: bottom center;
}

/* 2. Süzülen Arka Plan Balonları ve Bulutları (Floating Dream Clouds) */
@keyframes floatGentle {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-16px) rotate(2deg);
    }
}

@keyframes floatReverse {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(18px) rotate(-2deg);
    }
}

.float-slow {
    animation: floatGentle 6s ease-in-out infinite;
}

.float-reverse {
    animation: floatReverse 7s ease-in-out infinite;
}

/* 3. Parıltı & Shimmer Efekti */
@keyframes shimmerPass {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.shimmer-text {
    background: linear-gradient(90deg, #F43F5E 0%, #38BDF8 50%, #F43F5E 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmerPass 6s linear infinite;
}

/* 4. WhatsApp Nabız / Kalp Atışı Animasyonu */
@keyframes pulseHeartbeat {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.pulse-wa {
    animation: pulseHeartbeat 2.2s infinite;
}

/* 5. Yumuşak Işıma (Soft Glow Aura) */
@keyframes pastelGlow {
    0%, 100% {
        box-shadow: 0 10px 30px -10px rgba(244, 63, 94, 0.25), 0 20px 40px -15px rgba(56, 189, 248, 0.2);
    }
    50% {
        box-shadow: 0 15px 40px -5px rgba(244, 63, 94, 0.35), 0 25px 50px -10px rgba(56, 189, 248, 0.3);
    }
}

.glow-card {
    animation: pastelGlow 4s infinite ease-in-out;
}

/* 6. Kayan Duyuru Bandı (Marquee Ticker) */
@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.marquee-inner {
    display: inline-flex;
    white-space: nowrap;
    animation: marqueeScroll 24s linear infinite;
}

.marquee-inner:hover {
    animation-play-state: paused;
}

/* 7. Yumuşak Giriş Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 8. 3D Kart Hover Geçişi */
.product-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
    transform: translateY(-8px);
}

.product-card:hover .product-img {
    transform: scale(1.04);
}

.product-img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}