/* Main CSS for Fitmate Coach Landing Page */

/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Base styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Background gradients */
.hero-gradient {
    background: #FFF6F1;
}

/* Radial gradient for features section */
.bg-radial-gradient {
    /* Gradient removed for now */
}

/* Animations */
.floating-animation {
    animation: float 6s ease-in-out infinite;
}

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

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

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

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

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

/* Progress ring */
.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring circle {
    transition: stroke-dasharray 0.5s ease-in-out;
}

/* Ping animation */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {
    50% {
        opacity: .5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Alternating pulse animations for the circles */
@keyframes pulseLeft {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.05); 
    }
}

@keyframes pulseRight {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.05); 
    }
}

.pulse-left {
    animation: pulseLeft 2s ease-in-out infinite;
}

.pulse-right {
    animation: pulseRight 2s ease-in-out infinite;
    animation-delay: 1s; /* Start 1 second after left circle */
}

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

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hero-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
    }
    .hero-image-container {
        transform: scale(1.07);
        align-self: center;
    }
    .hero-content {
        max-width: 100%;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .hero-image-container {
        transform: scale(0.8);
        align-self: center;
    }
    .hero-content {
        max-width: 100%;
        text-align: left;
    }
}

/* Carousel styles - mobile only */
.carousel-container {
    overflow: hidden;
    position: relative;
}

.carousel-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: calc(300px * 3 + 2rem); /* 3 cards + 2 margins */
}

.carousel-card {
    flex-shrink: 0;
    width: 300px;
    margin-right: 1rem;
}

.carousel-card:last-child {
    margin-right: 0;
}