/* ================================
   Depth & Motion Design
   Inspired by Rauno Freiberg & Emil Kowalski principles
   ================================ */

/* ================================
   1. LAYERING & DEPTH
   ================================ */

/* Foreground elements appear above */
.hero,
.nav {
    position: relative;
    z-index: 10;
}

/* Background blur effect for depth */
.bg-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Subtle shadow for layering - Emil Kowalski fast transitions */
.project-card,
.blog-card,
.nav {
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover,
.blog-card:hover {
    box-shadow: 
        0 0 0 1px hsl(var(--border) / 0.1),
        0 10px 25px -5px rgba(0, 0, 0, 0.05),
        0 20px 40px -10px rgba(0, 0, 0, 0.03);
}

/* ================================
   2. MOTION CHOREOGRAPHY
   ================================ */

/* Page load sequence - faster with custom ease-out & blur */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        filter: blur(2px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* Orchestrated page load - elements appear in sequence (under 300ms) */
.hero-content {
    animation: fadeInUp 250ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
}

.clients-section {
    animation: fadeInUp 250ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

.portfolio-section {
    animation: fadeInUp 250ms cubic-bezier(0.16, 1, 0.3, 1) 250ms both;
}

.clients-table-section {
    animation: fadeInUp 250ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

.testimonials-section {
    animation: fadeInUp 250ms cubic-bezier(0.16, 1, 0.3, 1) 350ms both;
}

.faq-section {
    animation: fadeInUp 250ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both;
}

/* Navigation appears first */
.nav {
    animation: fadeIn 200ms cubic-bezier(0.16, 1, 0.3, 1) 0s both;
}

/* ================================
   3. STAGGERED ANIMATIONS
   ================================ */

/* Client logos - no stagger for carousel */
/* Carousel handles its own animation */

/* Portfolio items stagger */
.portfolio-item {
    opacity: 0;
    animation: fadeInUp 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.portfolio-item:nth-child(1) { animation-delay: 50ms; }
.portfolio-item:nth-child(2) { animation-delay: 100ms; }
.portfolio-item:nth-child(3) { animation-delay: 150ms; }
.portfolio-item:nth-child(4) { animation-delay: 200ms; }
.portfolio-item:nth-child(5) { animation-delay: 250ms; }
.portfolio-item:nth-child(6) { animation-delay: 300ms; }

/* Client rows stagger - faster & more responsive */
.client-row {
    opacity: 0;
    animation: fadeInUp 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.client-row:nth-child(1) { animation-delay: 30ms; }
.client-row:nth-child(2) { animation-delay: 50ms; }
.client-row:nth-child(3) { animation-delay: 70ms; }
.client-row:nth-child(4) { animation-delay: 90ms; }
.client-row:nth-child(5) { animation-delay: 110ms; }
.client-row:nth-child(6) { animation-delay: 130ms; }
.client-row:nth-child(7) { animation-delay: 150ms; }
.client-row:nth-child(8) { animation-delay: 170ms; }
.client-row:nth-child(9) { animation-delay: 190ms; }
.client-row:nth-child(10) { animation-delay: 210ms; }
.client-row:nth-child(11) { animation-delay: 230ms; }

/* Testimonial cards stagger */
.testimonial-card {
    opacity: 0;
    animation: fadeInUp 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.testimonial-card:nth-child(1) { animation-delay: 50ms; }
.testimonial-card:nth-child(2) { animation-delay: 100ms; }
.testimonial-card:nth-child(3) { animation-delay: 150ms; }

/* FAQ items stagger */
.faq-item {
    opacity: 0;
    animation: fadeInUp 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.faq-item:nth-child(1) { animation-delay: 30ms; }
.faq-item:nth-child(2) { animation-delay: 60ms; }
.faq-item:nth-child(3) { animation-delay: 90ms; }
.faq-item:nth-child(4) { animation-delay: 120ms; }
.faq-item:nth-child(5) { animation-delay: 150ms; }
.faq-item:nth-child(6) { animation-delay: 180ms; }

/* ================================
   4. INTERACTIVE DEPTH
   ================================ */

/* Lift effect on hover - simulates Z-axis movement (faster) */
.blog-card {
    transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover {
    transform: translateY(-2px);
}

/* Button press effect - Emil Kowalski scale(0.97) */
.nav-cta-button,
.form-button,
.btn {
    transition: transform 50ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-cta-button:active,
.form-button:active,
.btn:active {
    transform: scale(0.97);
}

/* ================================
   5. SCROLL-TRIGGERED ANIMATIONS
   ================================ */

/* Elements that fade in on scroll - with blur */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
    transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ================================
   6. MICRO-INTERACTIONS
   ================================ */

/* Language switcher animation - faster with scale(0.93) */
.lang-btn {
    position: relative;
    transition: all 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-btn.active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: hsl(var(--background));
    border-radius: 0.25rem;
    animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

@keyframes slideIn {
    from {
        transform: scale(0.93);
        opacity: 0;
        filter: blur(2px);
    }
    to {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* Logo hover - subtle scale */
.logo {
    transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.logo:hover {
    transform: scale(1.02);
}

.logo:active {
    transform: scale(0.97);
}

/* Client logo hover handled in style.css for carousel */

/* Highlight text animation - faster */
.highlight {
    position: relative;
    transition: all 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

.highlight::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 0.25rem;
    opacity: 0;
    transition: opacity 120ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.highlight-good::before {
    background: hsl(142 76% 36% / 0.1);
}

.highlight-bad::before {
    background: hsl(0 84% 60% / 0.1);
}

/* ================================
   7. LOADING STATES
   ================================ */

/* Skeleton loading with shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        hsl(var(--muted)) 0%,
        hsl(var(--accent)) 50%,
        hsl(var(--muted)) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}

/* ================================
   8. ACCESSIBILITY
   ================================ */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .scroll-fade-in {
        opacity: 1;
        transform: none;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .project-card:hover,
    .blog-card:hover {
        box-shadow: 0 0 0 2px currentColor;
    }
}

/* ================================
   9. FOCUS STATES (for accessibility)
   ================================ */

/* Enhanced focus rings with animation - faster */
*:focus-visible {
    outline: 2px solid hsl(var(--fanatik-blue));
    outline-offset: 2px;
    animation: focusRing 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes focusRing {
    from {
        outline-offset: 0;
        outline-color: transparent;
    }
    to {
        outline-offset: 2px;
        outline-color: hsl(var(--fanatik-blue));
    }
}