/* ─────────────────────────────────────────────
   Dust Animate — CSS v1.1
   Per-element zmienne: --da-el-blur, --da-el-dist, --da-el-dur
───────────────────────────────────────────── */

/* Stan ukryty — używa per-element zmiennych (fallback do globalnych) */
.da-hidden {
    opacity: 0;
    transform: translateY(var(--da-el-dist, var(--da-distance, 38px)));
    filter: blur(var(--da-el-blur, var(--da-blur, 24px)));
    will-change: opacity, transform, filter;
}

/* Wejście */
.da-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    filter: blur(0) !important;
    transition:
        opacity   var(--da-el-dur, var(--da-duration, 950ms)) cubic-bezier(0.16, 1, 0.3, 1),
        transform var(--da-el-dur, var(--da-duration, 950ms)) cubic-bezier(0.16, 1, 0.3, 1),
        filter    calc(var(--da-el-dur, var(--da-duration, 950ms)) * 1.15) cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--da-delay, 0ms);
}

/* Wyjście przy scroll w górę */
.da-exiting {
    opacity: 0 !important;
    transform: translateY(calc(var(--da-el-dist, var(--da-distance, 38px)) * 0.35)) !important;
    filter: blur(calc(var(--da-el-blur, var(--da-blur, 24px)) * 0.45)) !important;
    transition:
        opacity   calc(var(--da-el-dur, var(--da-duration, 950ms)) * 0.42) ease-in,
        transform calc(var(--da-el-dur, var(--da-duration, 950ms)) * 0.42) ease-in,
        filter    calc(var(--da-el-dur, var(--da-duration, 950ms)) * 0.35) ease-in;
    transition-delay: 0ms !important;
}

/* Obrazy — scale zamiast Y */
.da-image.da-hidden {
    transform: scale(1.03) !important;
    filter: blur(var(--da-el-blur, 17px));
}
.da-image.da-visible {
    transform: scale(1) !important;
}
.da-image.da-exiting {
    transform: scale(1.015) !important;
    filter: blur(calc(var(--da-el-blur, 17px) * 0.4)) !important;
}

/* Hero — wchodzi od razu po załadowaniu */
.da-hero-hidden {
    opacity: 0;
    transform: translateY(var(--da-el-dist, var(--da-distance, 38px)));
    filter: blur(var(--da-el-blur, var(--da-blur, 24px)));
    will-change: opacity, transform, filter;
}

.da-hero-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    filter: blur(0) !important;
    transition:
        opacity   calc(var(--da-el-dur, var(--da-duration, 950ms)) * 1.2) cubic-bezier(0.16, 1, 0.3, 1),
        transform calc(var(--da-el-dur, var(--da-duration, 950ms)) * 1.2) cubic-bezier(0.16, 1, 0.3, 1),
        filter    calc(var(--da-el-dur, var(--da-duration, 950ms)) * 1.4) cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--da-delay, 0ms);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .da-reduce-motion .da-hidden,
    .da-reduce-motion .da-hero-hidden {
        transform: none !important;
        filter: none !important;
        transition: opacity 250ms ease !important;
    }
    .da-reduce-motion .da-visible,
    .da-reduce-motion .da-hero-visible {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .da-reduce-motion .da-exiting {
        opacity: 0 !important;
        transform: none !important;
        filter: none !important;
        transition: opacity 200ms ease !important;
    }
}

/* ─────────────────────────────────────────────
   MOBILE — zredukowany blur, szybsza animacja
   blur() na GPU mobilnym jest kosztowny
───────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root {
        --da-mobile: 1;
    }

    .da-hidden {
        /* Mniejszy blur żeby GPU dał radę płynnie */
        filter: blur(calc(var(--da-el-blur, var(--da-blur, 24px)) * 0.45));
        /* Mniejsze przesunięcie - na wąskim ekranie duże Y wygląda tanio */
        transform: translateY(calc(var(--da-el-dist, var(--da-distance, 38px)) * 0.6));
    }

    .da-visible {
        transition:
            opacity   calc(var(--da-el-dur, var(--da-duration, 950ms)) * 0.85) cubic-bezier(0.16, 1, 0.3, 1),
            transform calc(var(--da-el-dur, var(--da-duration, 950ms)) * 0.85) cubic-bezier(0.16, 1, 0.3, 1),
            filter    calc(var(--da-el-dur, var(--da-duration, 950ms)) * 0.75) cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: var(--da-delay, 0ms);
    }

    .da-hero-hidden {
        filter: blur(calc(var(--da-el-blur, var(--da-blur, 24px)) * 0.4));
        transform: translateY(calc(var(--da-el-dist, var(--da-distance, 38px)) * 0.5));
    }

    .da-hero-visible {
        transition:
            opacity   calc(var(--da-el-dur, var(--da-duration, 950ms)) * 0.9) cubic-bezier(0.16, 1, 0.3, 1),
            transform calc(var(--da-el-dur, var(--da-duration, 950ms)) * 0.9) cubic-bezier(0.16, 1, 0.3, 1),
            filter    calc(var(--da-el-dur, var(--da-duration, 950ms)) * 0.8) cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: var(--da-delay, 0ms);
    }

    /* Na mobile stagger krótszy - nie chcemy żeby użytkownik czekał */
    .da-visible,
    .da-hero-visible {
        --da-stagger-mult: 0.7;
    }
}