/* ==========================================================================
   Falling images (putoilevat täytekuvat)
   --------------------------------------------------------------------------
   Decorative layer behind the single post hero: pre-tinted, semi-transparent
   WebP drawings (images/falling-images/*.webp) fall slowly from top to bottom
   and sway a little. Colour tint and opacity are baked into the files, so
   there is no runtime CSS filter.

   DOM (created by js/blocks/falling-images.js at runtime, nothing in markup):

     .single-post-hero.has-falling-images        (hero container, GP element)
       .falling-layer[aria-hidden]               (absolute, z-index 0)
         .fi-item  (x N, --x --w --dur --delay --fall-to --sway --r0 --r1)
           img
       .gb-container > .hero-txt-container       (z-index 2, above the layer)

   JS: waits for window load + idle, builds the layer, pauses the animation
   when the hero is scrolled out of view (.fi-paused) and rebuilds on resize.
   Without JS nothing is added. prefers-reduced-motion: items stay static.

   Enqueued only on single posts (theme-functions.php). Tuning lives in the
   PHP config array passed to the script (count, size, sway, durations).
   ========================================================================== */

@media only screen and (min-width: 320px) {

    .has-falling-images {
        overflow: hidden;
    }
    .has-falling-images .hero-txt-container {
        position: relative;
        z-index: 2;
    }
    /* soft fade behind the title so the drawings never fight the text */
    .has-falling-images .hero-txt-container::before {
        content: "";
        position: absolute;
        inset: -40px -60px;
        z-index: -1;
        background: radial-gradient(ellipse at center, var(--bg-clr) 35%, transparent 75%);
        pointer-events: none;
    }

    .falling-layer {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }
    .fi-item {
        position: absolute;
        top: 0;
        left: var(--x);
        width: var(--w);
        transform: translate3d(0, -110%, 0);
        animation: fi-fall var(--dur) linear var(--delay) infinite;
        will-change: transform;
    }
    .fi-item img {
        display: block;
        width: 100%;
        height: auto;
        transform-origin: 50% 40%;
        animation: fi-sway var(--sway) ease-in-out var(--delay) infinite alternate;
    }
    .fi-paused .fi-item,
    .fi-paused .fi-item img {
        animation-play-state: paused;
    }

    @keyframes fi-fall {
        from { transform: translate3d(0, -110%, 0); }
        to   { transform: translate3d(0, var(--fall-to), 0); }
    }
    @keyframes fi-sway {
        from { transform: rotate(var(--r0)); }
        to   { transform: rotate(var(--r1)); }
    }

    @media (prefers-reduced-motion: reduce) {
        .fi-item,
        .fi-item img {
            animation: none;
        }
        .fi-item {
            transform: translate3d(0, var(--static-y), 0);
        }
    }
}