/* obecné */
.scroll-animace {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 420ms cubic-bezier(.2,.9,.2,1);
    transform: translateZ(0);
    /* default variables */
    --delay: 0s;
    --exit-timeout: 0.35; /* v sekundách */
}

    /* -----------------------------------
   1) anim-ukaz (např. ProduktBox)
   ----------------------------------- */
    .scroll-animace.anim-ukaz {
        /* již dělaný opacity transition výše stačí */
        transition-duration: 1220ms;
        transition-delay: var(--delay);
        /*transition-delay: 700ms;*/
    }

        .scroll-animace.anim-ukaz.ukaz {
            opacity: 1;
        }

        .scroll-animace.anim-ukaz.exiting {
            opacity: 0;
            transition-duration: 260ms;
        }

/* -----------------------------------
   2) ANIM-COMBO (TextBox: h4 zprava, p odspodu + fade)
   ----------------------------------- */
.text-box.scroll-animace {
    padding: 1rem;
    overflow: hidden;
}

    /* základní chování vnitřních elementů */
    .text-box.scroll-animace h2,
    .text-box.scroll-animace p {
        opacity: 0;
        will-change: transform, opacity;
        transition-property: transform, opacity;
        transition-duration: 800ms;
        transition-timing-function: cubic-bezier(.2,.9,.2,1);
    }

    /* výchozí (venkovní) pozice */
    .text-box.scroll-animace h2 {
        transform: translateX(40px);
        transition-delay: calc(var(--delay) + 0.05s);
        margin: 0 0 0.5rem 0;
    }

    .text-box.scroll-animace p {
        transform: translateY(24px);
        transition-delay: calc(var(--delay) + 0.15s);
        margin: 0;
    }

    /* po vstupu */
    .text-box.scroll-animace.anim-combo.ukaz {
        opacity: 1;
    }

        .text-box.scroll-animace.anim-combo.ukaz h2,
        .text-box.scroll-animace.anim-combo.ukaz p {
            opacity: 1;
            transform: translateX(0) translateY(0);
        }

    /* při opouštění (volitelné rychlejší) */
    .text-box.scroll-animace.anim-combo.exiting {
        transition-duration: 320ms;
    }

        .text-box.scroll-animace.anim-combo.exiting h2,
        .text-box.scroll-animace.anim-combo.exiting p {
            opacity: 0;
            transition-duration: 260ms;
        }

/* -----------------------------------
   3) DALŠÍ TYPY (přidáš CSS a použiješ třídu)
   např. slide-left (celý element sjede zleva) 
   ----------------------------------- */
.scroll-animace.anim-prijizdi-z-leva {
    transform: translateX(150px);
    transition-property: transform, opacity;
    transition-duration: 800ms;
    transition-delay: var(--delay);
}

    .scroll-animace.anim-prijizdi-z-leva.ukaz {
        transform: translateX(0);
        opacity: 1;
    }

.scroll-animace.anim-prijizdi-z-prava {
    transform: translateX(-150px);
    transition-property: transform, opacity;
    transition-duration: 800ms;
    transition-delay: var(--delay);
}

    .scroll-animace.anim-prijizdi-z-prava.ukaz {
        transform: translateX(0);
        opacity: 1;
    }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-animace {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

        .scroll-animace h4, .scroll-animace p {
            transition: none !important;
            transform: none !important;
            opacity: 1 !important;
        }
}