/* AP Serwis - animations */

@keyframes ap-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ap-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ap-slide-down {
    from { opacity: 0; transform: translateY(-12px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0);   max-height: 999px; }
}

@keyframes ap-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 hsl(40 55% 50% / 0.5); }
    50%      { box-shadow: 0 0 0 12px hsl(40 55% 50% / 0); }
}

.ap-animate {
    opacity: 0;
}

.ap-animate.ap-visible {
    animation: ap-fade-up 0.7s ease forwards;
}

.ap-animate--fade.ap-visible {
    animation: ap-fade 0.6s ease forwards;
}

.ap-animate[data-delay="100"].ap-visible { animation-delay: 0.1s; }
.ap-animate[data-delay="200"].ap-visible { animation-delay: 0.2s; }
.ap-animate[data-delay="300"].ap-visible { animation-delay: 0.3s; }
.ap-animate[data-delay="400"].ap-visible { animation-delay: 0.4s; }
.ap-animate[data-delay="500"].ap-visible { animation-delay: 0.5s; }
.ap-animate[data-delay="600"].ap-visible { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
    .ap-animate { opacity: 1; animation: none !important; }
}

/* === Hero fade-in (1:1 z React'a animate-fade-in) === */
@keyframes ap-hero-fade-in {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.ap-fade-in {
    opacity: 0;
    animation: ap-hero-fade-in 0.8s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .ap-fade-in { opacity: 1; animation: none !important; }
}