/* 
 * Optimized Tailwind CSS for Star Computer Center
 * Minified and performance-focused styles
 */

/* Base utilities and components only */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-to-content:focus {
    top: 6px;
}

/* Navigation optimized */
.navbar {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Form optimizations */
.form-field {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-field:focus {
    outline: 0;
    border-color: #3b82f6;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

/* Status messages */
.status-message {
    transition: opacity 0.3s ease;
}

/* Performance animations */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

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

/* Modern Course Card Design - No Shadow, Clean Borders */
.modern-course-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-course-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.modern-course-card .group:hover .transform {
    transform: rotate(6deg);
}

/* Course Filter Buttons */
.course-filter-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.course-filter-btn:hover {
    transform: translateY(-2px) scale(1.05);
}

.course-filter-btn.active {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Gallery Section Improvements */
.gallery-main-container {
    position: relative;
    background: linear-gradient(145deg, #f8fafc, #e2e8f0);
    border: 2px solid #cbd5e1;
    transition: all 0.3s ease;
}

.gallery-main-container:hover {
    transform: translateY(-2px);
    border-color: #94a3b8;
}

.thumbnail-btn {
    position: relative;
    background: linear-gradient(145deg, #ffffff, #f1f5f9);
    transition: all 0.3s ease;
}

.thumbnail-btn:hover {
    transform: translateY(-2px);
    border-color: #3b82f6 !important;
}

.thumbnail-btn.active {
    border-color: #2563eb !important;
    background: linear-gradient(145deg, #dbeafe, #bfdbfe);
}

/* Gallery Modal Improvements */
#imageModal .relative {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 2px solid #e2e8f0;
}

/* Remove any remaining shadows from gallery */
#gallery img,
#gallery button,
#gallery .relative {
    box-shadow: none !important;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

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

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

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Enhanced Button Animations */
@keyframes buttonGlow {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    }
    50% { 
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.1);
    }
}

@keyframes shimmer {
    0% { transform: translateX(-100%) skewX(-12deg); }
    100% { transform: translateX(300%) skewX(-12deg); }
}

@keyframes floatUp {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-5px) scale(1.02); }
}

/* Button hover effects */
.hero-buttons button:hover {
    animation: floatUp 2s ease-in-out infinite;
}

.hero-buttons button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Course card optimizations with clean white design */
.course-card-container {
    perspective: 1000px;
    height: 350px; /* Increased height for better content display */
}

.course-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    cursor: pointer;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.course-card.flipped {
    transform: rotateY(180deg);
}

.course-card-front,
.course-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    background: white;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.course-card-back {
    transform: rotateY(180deg);
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
}

.course-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
}

/* Responsive card heights - Clean and consistent */
@media (max-width: 640px) {
    .course-card-container {
        height: 320px;
    }
    
    .course-card-back {
        padding: 16px !important;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    .course-card-container {
        height: 340px;
    }
    
    .course-card-back {
        padding: 20px !important;
    }
}

@media (min-width: 1024px) {
    .course-card-container {
        height: 360px;
    }
    
    .course-card-back {
        padding: 24px !important;
    }
}

/* Critical loading optimizations */
.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy.loaded {
    opacity: 1;
}

/* Reduce layout shifts */
img {
    max-width: 100%;
    height: auto;
}

/* Print styles */
@media print {
    .navbar,
    .floating-whatsapp,
    #form-status {
        display: none !important;
    }
}