/* ===== MODERN DESIGN ENHANCEMENTS ===== */

/* === Mesh Gradient Background === */
.mesh-gradient-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-mesh);
    z-index: -1;
    opacity: 1;
    animation: meshAnimation 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes meshAnimation {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* === PHASE 3: Bento Box Layout === */

/* Grille Bento avec disposition asymétrique */
.grid-bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-auto-rows: 280px;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

/* Cartes featured (2x plus grandes) */
.project-card.featured {
    grid-column: span 2;
    grid-row: span 2;
}

.project-card.featured .card-title {
    font-size: var(--font-size-2xl);
}

.project-card.featured .card-description {
    font-size: var(--font-size-lg);
}

.project-card.featured .card-image {
    height: 280px;
}

/* Responsive Bento Grid */
@media (max-width: 1024px) {
    .grid-bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-card.featured {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .grid-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .project-card.featured {
        grid-column: span 1;
        grid-row: span 1;
    }

    .project-card.featured .card-image {
        height: 200px;
    }
}

/* === Scroll Animations === */
.project-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--transition-smooth), transform 0.6s var(--transition-smooth);
}

.project-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation delay for cards */
.project-card:nth-child(1) {
    transition-delay: 0.1s;
}

.project-card:nth-child(2) {
    transition-delay: 0.2s;
}

.project-card:nth-child(3) {
    transition-delay: 0.3s;
}

.project-card:nth-child(4) {
    transition-delay: 0.4s;
}

.project-card:nth-child(5) {
    transition-delay: 0.5s;
}

.project-card:nth-child(6) {
    transition-delay: 0.6s;
}

/* === PHASE 4: Enhanced Visual Effects === */

/* Gradients de texte sur les titres */
.gradient-text {
    background: linear-gradient(135deg, var(--color-accent-primary) 0%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, var(--color-accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Effet de brillance animée (shine effect) */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

/* Animation pulse sur les boutons CTA */
.btn-primary.pulse {
    animation: pulse 2s ease-in-aout infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.7);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(0, 180, 216, 0);
    }
}

/* === Enhanced Badge Styles === */
/* Only apply glassmorphism to badges without inline styles */
.badge:not([style*="background"]) {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all var(--animation-duration-fast) var(--transition-bounce);
}

.badge:hover {
    transform: scale(1.05);
}

[data-theme="dark"] .badge:not([style*="background"]) {
    background: rgba(26, 35, 50, 0.8);
}

/* Rotation subtile des icônes principales */
.card-image i {
    transition: transform var(--animation-duration-normal) var(--transition-bounce);
}

.card:hover .card-image i {
    transform: scale(1.15) rotate(5deg);
}

/* === Accessibility: Respect prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .mesh-gradient-bg {
        animation: none;
    }

    .project-card {
        opacity: 1;
        transform: none;
    }

    .shine-effect::after {
        display: none;
    }
}