/* FeedbackKit Custom Styles */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Marquee Animation */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: scroll-left 40s linear infinite;
}

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

/* Custom animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fade-in 0.4s ease-out forwards;
}

/* Staggered animation delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero gradient background */
.hero-gradient {
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(251, 191, 36, 0.15), transparent);
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
}

/* Button hover effects */
.btn-primary {
    transition: all 0.2s ease;
}

.btn-primary:hover {
    transform: scale(1.02);
}

/* Code block styling */
.code-block {
    background: linear-gradient(145deg, #1e1e2e 0%, #11111b 100%);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* Navbar blur effect */
.navbar-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Hero glow animation */
@keyframes hero-glow {
    0%, 100% { opacity: 0.6; transform: translate(-50%, 0) scale(1); }
    50% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
}

.animate-hero-glow {
    animation: hero-glow 6s ease-in-out infinite;
}

/* Floating animation variants for hero illustration */
@keyframes float-1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(1deg); }
}
@keyframes float-2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-1.5deg); }
}
@keyframes float-3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(2deg); }
}
@keyframes float-4 {
    0%, 100% { transform: translateY(0px); }
    33% { transform: translateY(-8px); }
    66% { transform: translateY(-16px); }
}
.animate-float-1 { animation: float-1 4s ease-in-out infinite; }
.animate-float-2 { animation: float-2 5s ease-in-out infinite 0.5s; }
.animate-float-3 { animation: float-3 6s ease-in-out infinite 1s; }
.animate-float-4 { animation: float-4 7s ease-in-out infinite 1.5s; }

/* Pop-in entrance animation */
@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.6) translateY(20px); }
    60% { transform: scale(1.05) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-pop-in { animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; }
.pop-delay-1 { animation-delay: 0.3s; }
.pop-delay-2 { animation-delay: 0.5s; }
.pop-delay-3 { animation-delay: 0.7s; }
.pop-delay-4 { animation-delay: 0.9s; }
.pop-delay-5 { animation-delay: 1.1s; }
.pop-delay-6 { animation-delay: 1.3s; }

/* Pulse ring for notification badges */
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}
.animate-pulse-ring { animation: pulse-ring 2s ease-out infinite; }

/* Star twinkle */
@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.9); }
}
.animate-twinkle { animation: twinkle 2s ease-in-out infinite; }
.twinkle-delay-1 { animation-delay: 0.2s; }
.twinkle-delay-2 { animation-delay: 0.4s; }
.twinkle-delay-3 { animation-delay: 0.6s; }
.twinkle-delay-4 { animation-delay: 0.8s; }

/* Vote count bump */
@keyframes count-bump {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.animate-count-bump { animation: count-bump 3s ease-in-out infinite 2s; }

/* 3D scene perspective */
.hero-scene {
    perspective: 1200px;
    perspective-origin: 50% 40%;
}
.hero-scene-inner {
    transform-style: preserve-3d;
    transform: rotateX(4deg) rotateY(-2deg);
}

/* Glass morphism cards */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Environment badge pulse */
.env-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}