/* =========================================================================
   PX Reveal — gestaffelde scroll-reveal (links -> rechts via index-delay).
   Begintoestand alleen actief met .px-reveal-ready (gezet door px-reveal.js),
   zodat content zonder JS gewoon zichtbaar blijft.

   Tempo (#080443/#083941): rustiger en langer, met een wachtmoment nadat de
   sectie in beeld komt vóór het eerste item start. Tunable via tokens hieronder.
   Gebruikt in px-case-studies, px-stats, px-jobs-list, px-risk-types,
   px-global-risk, px-text-block, px-product-cards e.a.
   ========================================================================= */

:root {
    --px-reveal-base: 0.4s;   /* wachten nadat de sectie in beeld komt, vóór item 1 */
    --px-reveal-step: 0.16s;  /* tijd tussen opeenvolgende items (rustig, links -> rechts) */
    --px-reveal-dur: 0.85s;   /* duur per item */

    --px-reveal-words-base: 0.08s; /* wachten vóór het eerste woord van een titel */
    --px-reveal-words-step: 0.055s; /* tijd tussen woorden (speels, links -> rechts) */
    --px-reveal-words-dur: 0.6s;   /* duur per woord */
}

.px-reveal-ready [data-px-reveal] [data-px-reveal-item] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--px-reveal-dur) var(--px-ease-out),
                transform var(--px-reveal-dur) var(--px-ease-out);
    transition-delay: calc(var(--px-reveal-base) + var(--px-reveal-i, 0) * var(--px-reveal-step));
}

.px-reveal-ready [data-px-reveal].is-inview [data-px-reveal-item] {
    opacity: 1;
    transform: none;
}

/* Variant "pop": cirkels/tegels die opploppen met een lichte overshoot. */
.px-reveal-ready [data-px-reveal="pop"] [data-px-reveal-item] {
    transform: scale(0.7);
    transition: opacity calc(var(--px-reveal-dur) * 0.7) var(--px-ease-out),
                transform calc(var(--px-reveal-dur) * 0.85) cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--px-reveal-base) + var(--px-reveal-i, 0) * var(--px-reveal-step));
}

.px-reveal-ready [data-px-reveal="pop"].is-inview [data-px-reveal-item] {
    transform: scale(1);
}

/* =========================================================================
   Variant "words" — grote titels komen woord voor woord op, links -> rechts
   (#074914, designer-keuze "Woord voor woord"). De heading zelf is de
   [data-px-reveal]-container; elk woord is een [data-px-reveal-item].
   Tempo is bewust sneller dan de grid-reveal zodat een titel speels en vlot
   leest. Px-heading-component zet dit automatisch op alle h2-titels.
   ========================================================================= */
.px-heading__word {
    display: inline-block;
}

.px-heading__word-i {
    display: inline-block;
}

.px-reveal-ready [data-px-reveal="words"] [data-px-reveal-item] {
    opacity: 0;
    transform: translateY(0.5em);
    transition: opacity var(--px-reveal-words-dur) var(--px-ease-out),
                transform var(--px-reveal-words-dur) var(--px-ease-out);
    transition-delay: calc(var(--px-reveal-words-base) + var(--px-reveal-i, 0) * var(--px-reveal-words-step));
}

.px-reveal-ready [data-px-reveal="words"].is-inview [data-px-reveal-item] {
    opacity: 1;
    transform: none;
}

/* =========================================================================
   Variant "diagonal" — tegelmodules bouwen op in een diagonale golf vanaf
   linksboven (#29, designer-keuze "Diagonale golf", bewust langzaam en subtiel).
   px-reveal.js zet --px-reveal-i per tegel op (rij + kolom), zodat tegels op
   dezelfde diagonaal samen opkomen en de golf van linksboven naar rechtsonder
   loopt. De zichtbare overgang is identiek aan de basis-reveal (zachte
   opkomende fade); alleen het tempo is rustiger via de tokens hieronder.
   ========================================================================= */
.px-reveal-ready [data-px-reveal="diagonal"] {
    --px-reveal-step: 0.2s;  /* tijd tussen de diagonale lagen (langzaam) */
    --px-reveal-dur: 1.1s;   /* duur per tegel (rustig) */
}

@media (prefers-reduced-motion: reduce) {
    .px-reveal-ready [data-px-reveal] [data-px-reveal-item] {
        transition: none;
    }
}

.fl-builder-edit [data-px-reveal] [data-px-reveal-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}