/* ==========================================
   Wspólny "silnik" delikatnej animacji wyłaniania się przy wejściu w widok ekranu.
   Używany przez WSZYSTKIE eleganckie widgety tekstowe (Elegancki Blok Tekstowy,
   Tekst ze Zdjęciem, i kolejne w przyszłości) - dzięki temu zachowują się
   i wyglądają dokładnie tak samo, niezależnie od tego, w którym widgetcie są użyte.

   Każdy widget:
   - owija się w .cet-wrapper.cet-animated (jeśli animacja włączona w ustawieniach),
   - każdy animowany fragment treści dostaje klasę .cet-item oraz zmienną CSS
     --cet-order (kolejność pojawiania się),
   - JS (elegant-animations.js) dodaje klasę .cet-in-view, gdy element wejdzie w viewport.
   ========================================== */

.cet-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.cet-animated .cet-item {
    opacity: 0;
    transform: translateY(22px);
    will-change: opacity, transform;
}

.cet-animated.cet-in-view .cet-item {
    animation-name: cet-fade-in-up;
    animation-duration: var(--cet-duration, 1100ms);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: forwards;
    animation-delay: calc(var(--cet-order, 0) * var(--cet-stagger, 160ms));
}

@keyframes cet-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Osoby preferujące ograniczony ruch na ekranie - treść widoczna od razu, bez animacji. */
@media (prefers-reduced-motion: reduce) {
    .cet-animated .cet-item {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}