/* Límite Sur: skin atmosférica de lluvia. Independiente del CSS principal. */
.ls-rain-layer {
    position: fixed;
    inset: 0;
    z-index: 45;
    overflow: hidden;
    pointer-events: none !important;
    isolation: isolate;
    contain: layout paint style;
    --ls-rain-travel: 145vh;
}

.ls-rain-layer--soft {
    opacity: 0.7;
}

.ls-rain-layer--balanced {
    opacity: 0.88;
}

.ls-rain-layer--visible {
    opacity: 1;
}

.ls-rain-layer--preview {
    position: absolute;
    z-index: 3;
    border-radius: inherit;
    clip-path: inset(56px 0 0);
    --ls-rain-travel: 540px;
}

.ls-rain-drop {
    position: absolute;
    top: -15%;
    left: var(--ls-rain-x);
    height: var(--ls-rain-length);
    width: 1px;
    border-radius: 2px;
    pointer-events: none;
    opacity: var(--ls-rain-opacity);
    background: linear-gradient(
        180deg,
        rgba(134, 167, 192, 0) 0%,
        rgba(117, 153, 186, .25) 32%,
        rgba(87, 134, 170, .59) 80%,
        rgba(114, 160, 190, .26) 100%
    );
    animation: ls-rain-fall var(--ls-rain-duration) linear var(--ls-rain-delay) infinite;
    will-change: transform;
}

.ls-rain-drop--near {
    width: 1.6px;
    background: linear-gradient(
        180deg,
        rgba(146, 188, 213, 0) 0%,
        rgba(114, 169, 203, .27) 25%,
        rgba(77, 134, 175, .65) 90%,
        rgba(131, 177, 201, .18) 100%
    );
}

@keyframes ls-rain-fall {
    from {
        transform: translate3d(0, 0, 0) rotate(6deg);
    }

    to {
        transform: translate3d(var(--ls-rain-drift), var(--ls-rain-travel), 0) rotate(6deg);
    }
}

@media (max-width: 767px) {
    .ls-rain-layer--soft .ls-rain-drop:nth-child(n+29),
    .ls-rain-layer--balanced .ls-rain-drop:nth-child(n+39),
    .ls-rain-layer--visible .ls-rain-drop:nth-child(n+49) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce), print {
    .ls-rain-layer {
        display: none !important;
    }
}