.auth-story-theme {
    background:
        radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--brand-light-blue, #044985) 65%, transparent), transparent 34%),
        linear-gradient(145deg, var(--brand-dark-blue, #00173c), var(--brand-light-blue, #044985));
}

.auth-story-theme .auth-live-centre {
    margin-top: 8px;
    padding-top: 0;
}

.auth-ball-rain {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-falling-ball {
    position: absolute;
    top: -18px;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255, 225, 214, .72);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 27%, #ff9b81 0 10%, #d94a3d 43%, #811f2b 100%);
    box-shadow: 0 0 12px rgba(244, 93, 75, .38), inset -1px -1px 2px rgba(42, 7, 18, .45);
    opacity: 0;
    animation: auth-leather-ball-fall 8s linear infinite;
}

.auth-falling-ball::after {
    position: absolute;
    top: 1px;
    left: 3px;
    width: 2px;
    height: 6px;
    border-right: 1px solid rgba(255, 239, 226, .9);
    border-left: 1px solid rgba(255, 239, 226, .9);
    border-radius: 50%;
    content: "";
    transform: rotate(35deg);
}

.auth-falling-ball-1 { left: 12%; animation-delay: -1s; animation-duration: 8.5s; }
.auth-falling-ball-2 { left: 29%; animation-delay: -5.4s; animation-duration: 10s; }
.auth-falling-ball-3 { left: 47%; animation-delay: -3.1s; animation-duration: 9s; }
.auth-falling-ball-4 { left: 66%; animation-delay: -7s; animation-duration: 11s; }
.auth-falling-ball-5 { left: 82%; animation-delay: -2.2s; animation-duration: 9.5s; }
.auth-falling-ball-6 { left: 94%; animation-delay: -6.2s; animation-duration: 10.5s; }

.cricket-login h2 {
    overflow: hidden;
    font-size: clamp(1rem, 2.6vw, 2rem);
    letter-spacing: -.07em;
    line-height: 1.15;
    text-overflow: clip;
    white-space: nowrap;
}

@keyframes auth-leather-ball-fall {
    0% { opacity: 0; transform: translate3d(0, -2vh, 0) rotate(0); }
    8% { opacity: .78; }
    88% { opacity: .58; }
    100% { opacity: 0; transform: translate3d(24px, 108vh, 0) rotate(720deg); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-ball-rain {
        display: none;
    }
}
