@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
.hero-gradient {
    background: linear-gradient(135deg, #f6f8fa 0%, #e9ecef 100%);
}

.feature-card {
    @apply p-6 rounded-lg shadow-lg bg-white transition-all duration-300 ease-in-out hover:scale-105;
}

.coach-card {
    @apply relative transition-all duration-300 ease-in-out;
    margin-bottom: 2rem;
    will-change: transform;
}

.coach-image-container {
    @apply relative overflow-hidden;
    background: linear-gradient(135deg, #86bba2 0%, #2d3431 100%);
    will-change: transform;
    height: 400px;
}

.coach-image-container img {
    @apply w-full h-full object-cover transform transition-all duration-300 ease-in-out;
    filter: brightness(0.95);
    will-change: transform, filter;
}

.coach-card:hover .coach-image-container img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

.coach-image-overlay {
    @apply absolute inset-0 opacity-0 transition-all duration-300 ease-in-out;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    will-change: opacity;
}

.coach-card:hover .coach-image-overlay {
    opacity: 1;
}

.cta-button {
    @apply px-8 py-4 rounded-2xl font-bold transition-all duration-300 ease-in-out relative overflow-hidden;
    background: linear-gradient(135deg, #86bba2 0%, #6ba38a 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(134, 187, 162, 0.2);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-size: 0.95rem;
    will-change: transform, box-shadow;
    min-height: 3.5rem;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: 0.3s ease-in-out;
    will-change: transform;
}

.cta-button:hover {
    background: linear-gradient(135deg, #6ba38a 0%, #86bba2 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(134, 187, 162, 0.4);
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button i {
    font-size: 1.2rem;
    margin-right: 0.75rem;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}

.cta-button:hover i {
    transform: scale(1.1) rotate(-5deg);
}

.text-primary {
    color: #2d3431;
}
.bg-primary {
    background-color: #2d3431;
}
.text-secondary {
    color: #86bba2;
}