/* RaffleScout Homepage Styles */

:root {
    --dark-900: #0a0a0f;
    --dark-800: #12121a;
    --dark-700: #1a1a24;
    --indigo: #6366f1;
    --purple: #a855f7;
    --pink: #ec4899;
    --green: #22c55e;
}

* { font-family: 'Inter', sans-serif; }

body {
    background-color: var(--dark-900);
    color: #ffffff;
}

.gradient-text {
    background: linear-gradient(135deg, var(--indigo), var(--purple), var(--pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-bg {
    background: linear-gradient(135deg, var(--indigo), var(--purple), var(--pink));
}

.gradient-border {
    background: linear-gradient(135deg, var(--indigo), var(--purple), var(--pink));
    padding: 2px;
    border-radius: 12px;
}

.card-glow:hover {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.btn-gradient {
    background: linear-gradient(135deg, var(--indigo), var(--purple));
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

.float-delay-1 { animation-delay: 1s; }
.float-delay-2 { animation-delay: 2s; }
.float-delay-3 { animation-delay: 3s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.6); }
}

.live-dot {
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.slide-in {
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.hero-gradient {
    background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at bottom right, rgba(168, 85, 247, 0.1) 0%, transparent 50%);
}

.category-card {
    transition: all 0.3s ease;
}

.category-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(99, 102, 241, 0.5);
}

.category-card:hover .category-overlay {
    opacity: 1;
}

.ticker-scroll {
    animation: tickerScroll 30s linear infinite;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.confetti {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
}

/* Count up animation helper */
.count-up {
    display: inline-block;
}

/* FAQ accordion */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-content.open {
    max-height: 200px;
}

.faq-icon.open {
    transform: rotate(180deg);
}

/* Prize Image Rotator */
.prize-rotator-container {
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.prize-rotator {
    display: flex;
    gap: 1.5rem;
    animation: prizeScroll 25s linear infinite;
    width: max-content;
}

.prize-rotator:hover {
    animation-play-state: paused;
}

@keyframes prizeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.prize-slide {
    transition: all 0.3s ease;
}

.prize-slide:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
}