/*
 * Gedeelde animaties. Gebruik de keyframes rechtstreeks
 * (`animation: ww-fade-up .4s var(--ww-ease-out) both`) of via de
 * hulpklassen hieronder. Reduced motion wordt in base.css afgevangen.
 */

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

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

@keyframes ww-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes ww-pop-in {
    0%   { opacity: 0; transform: scale(0.85); }
    70%  { transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

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

@keyframes ww-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@keyframes ww-spin {
    to { transform: rotate(360deg); }
}

@keyframes ww-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.ww-c-anim-fade-in  { animation: ww-fade-in var(--ww-transition-normal) both; }
.ww-c-anim-fade-up  { animation: ww-fade-up 0.45s var(--ww-ease-out) both; }
.ww-c-anim-scale-in { animation: ww-scale-in 0.25s var(--ww-ease-out) both; }
.ww-c-anim-pop-in   { animation: ww-pop-in 0.4s var(--ww-ease-out) both; }
.ww-c-anim-float    { animation: ww-float 4s ease-in-out infinite; }
.ww-c-anim-pulse    { animation: ww-pulse 1.4s ease-in-out infinite; }

/* Vertraging voor lijsten: zet --ww-anim-index op ieder item. */
.ww-c-anim-stagger > * {
    animation: ww-fade-up 0.45s var(--ww-ease-out) both;
    animation-delay: calc(var(--ww-anim-index, 0) * 60ms);
}