/* ---- Homepage card rain (GitHub + Archive) ----
   Drops are generated in index.php by card_rain(). Each drop is a span whose
   shape comes from its image (--img) used as a CSS mask, so its colour is
   just background-color and follows the theme like the rest of the site.
   Any image works as long as it is a solid silhouette on a transparent
   background; only its shape is used.

   Colour: a drop uses its own --ink if card_rain() was given a 'colors'
   list, otherwise the theme colour (--rain-ink) below. Cards built with
   'tint' => false (Archive) skip all that and show the images as-is.

   Images:
     GitHub  - /ImageData/github/logos/PNG/GitHub_Invertocat_Black.png
     Archive - /ImageData/archive/rain/floppy.svg, cd.svg, cassette.svg

   Layering: rain sits at z-index 0, the card overlay (landing.css) at 1,
   the card text at 2. Nothing here pauses on hover. */

.card-rain {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;            /* keeps the rain inside its card */
    pointer-events: none;
    container-type: size;        /* lets drops fall exactly the card's height (cqh) */
}

/* Drop colour per theme, matched to the site's inverted palette */
body[data-bs-theme="light"] .card-rain { --rain-ink: whitesmoke; }
body[data-bs-theme="dark"]  .card-rain { --rain-ink: #000; }

.rain-drop {
    position: absolute;
    top: 0;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    opacity: var(--alpha);
    background-color: var(--ink, var(--rain-ink, currentColor));   /* --ink = per-drop colour from index.php */
    -webkit-mask: var(--img) center / contain no-repeat;
            mask: var(--img) center / contain no-repeat;
    animation: rain-fall var(--dur) linear var(--delay) infinite;
    will-change: transform;
}

/* Natural mode (card_rain(..., ['tint' => false])): draw each image as-is,
   in its own colours, instead of using it as a tinted silhouette. */
.card-rain--natural .rain-drop {
    background: var(--img) center / contain no-repeat;
    -webkit-mask: none;
            mask: none;
}

@keyframes rain-fall {
    from { transform: translateY(calc(-1 * var(--size) - 10px)) rotate(0deg); }
    to   { transform: translateY(calc(100cqh + 10px)) rotate(var(--spin)); }
}

/* Reduced motion: no falling, just a still scatter */
@media (prefers-reduced-motion: reduce) {
    .rain-drop {
        animation: none;
        top: var(--top);
    }
}