/* Animated Diwali background (desktop + mobile SVG artwork split into components).
   Loaded after the other festive stylesheets so it replaces their cream canvas and old art. */

/* ---- canvas ------------------------------------------------------------ */
html,
body,
#festive-landing-step .login-19,
#festive-landing-step .login-19 .first_tab.festive-desktop,
#festive-landing-step .login-19 .first_tab.festive-mobile {
    background: #3e67ab !important;
}

#festive-landing-step .login-19 .first_tab::before,
#festive-landing-step .login-19 .first_tab::after,
#festive-landing-step .festive-wave-art,
#festive-landing-step .festive-desktop-scene,
#festive-landing-step .festive-lanterns,
#festive-landing-step .festive-result-lanterns { display: none !important; }

.festive-desktop { --bgw: min(100vw, 2000px); }
.festive-mobile { --bgw: min(100vw, 560px); }

.festive-bg {
    position: absolute;
    inset: 0;
    z-index: 2; /* the artwork frames the form from in front; pointer-events stay off */
    overflow: hidden;
    pointer-events: none;
}

.festive-bg svg {
    position: absolute;
    left: 50%;
    width: var(--bgw);
    transform: translateX(-50%);
    overflow: hidden;
}

.festive-bg-desktop .festive-bg-top { top: 0; height: calc(var(--bgw) * 640 / 1920); }
.festive-bg-desktop .festive-bg-bottom { bottom: 0; height: calc(var(--bgw) * 330 / 1920); }
.festive-bg-mobile .festive-bg-top { top: 0; height: calc(var(--bgw) * 540 / 1080); }
.festive-bg-mobile .festive-bg-bottom { bottom: 0; height: calc(var(--bgw) * 370 / 1080); }

.festive-desktop-slot,
#festive-mobile-form-slot { position: relative; z-index: 1; }

/* ---- form sits on a card so it stays readable on the blue ---------------- */
#festive-landing-step .login-19 .festive-content-card {
    display: block;
    width: 100%;
    margin: 0;
    border: 1px solid rgba(235, 225, 204, .65);
    border-radius: 20px;
    background: rgba(255, 253, 245, .96);
    box-shadow: 0 10px 30px rgba(18, 38, 84, .35), inset 0 1px 0 #fff;
}

#festive-landing-step:not(.festive-showing-offers) .login-19 .festive-content-card { padding: 16px 18px 22px; }

@media (min-width: 992px) {
    #festive-landing-step:not(.festive-showing-offers) .login-19 .festive-desktop .festive-content-card { padding: 20px 32px 26px; }

    #festive-landing-step .login-19 .festive-desktop .festive-form-panel,
    #festive-landing-step .login-19 .festive-desktop .festive-form-panel:has(.login-inner-form.ng-hide) {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    /* garland across the top, diyas along the bottom */
    #festive-landing-step .login-19 .festive-desktop .form-section {
        padding-top: calc(var(--bgw) * 96 / 1920 + 12px);
        padding-bottom: calc(var(--bgw) * 130 / 1920 + 24px);
    }
}

@media (max-width: 991.98px) {
    #festive-landing-step .login-19 .festive-mobile .form-section {
        box-sizing: border-box;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        padding: calc(var(--bgw) * .39) 14px calc(var(--bgw) * 370 / 1080 + 50px) !important;
    }
}

/* Tablets: let the artwork span the full width instead of a narrow centred strip. */
@media (min-width: 561px) and (max-width: 991.98px) {
    .festive-mobile { --bgw: 100vw; }
    #festive-landing-step .login-19 .festive-mobile .form-section {
        padding-top: calc(var(--bgw) * .31) !important;
        padding-bottom: calc(var(--bgw) * 370 / 1080 + 50px) !important;
    }
}

/* ---- motion ------------------------------------------------------------- */
.festive-bg .fb-lantern,
.festive-bg .fb-string,
.festive-bg .fb-rangoli,
.festive-bg .fb-flame,
.festive-bg .fb-glow { transform-origin: var(--px) var(--py); }

.festive-bg .fb-lantern,
.festive-bg .fb-string { will-change: transform; }

/* hanging items draw in from their own side like curtains, then sway from their top anchor */
.festive-bg .fb-lantern,
.festive-bg .fb-string {
    animation:
        fb-curtain 1.3s cubic-bezier(.22, .8, .24, 1) .1s both,
        fb-sway var(--st) ease-in-out calc(1.4s + var(--i) * .15s) infinite;
}

@keyframes fb-curtain {
    from { opacity: 0; transform: translateX(calc(var(--side, -1) * var(--reach, 400px))); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fb-sway {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(var(--sa)); }
    75% { transform: rotate(calc(var(--sa) * -1)); }
}

/* garland of stars drifts sideways, one tile per loop so it never jumps */
.festive-bg .fb-garland { animation: fb-curtain 1.3s cubic-bezier(.22, .8, .24, 1) .1s both; }
.festive-bg .fb-garland-strip { animation: fb-garland 26s linear infinite; }
@keyframes fb-garland {
    from { transform: translateX(0); }
    to { transform: translateX(var(--p)); }
}

/* rangoli blooms open, then each petal ring turns at its own speed and direction */
.festive-bg .fb-rangoli { animation: fb-bloom 1.6s cubic-bezier(.2, .8, .25, 1) .2s both; }
.festive-bg .fb-layer {
    transform-origin: var(--px) var(--py);
    animation: fb-spin var(--dur) linear 1.8s infinite;
    will-change: transform;
}
.festive-bg .fb-centre { transform-origin: var(--px) var(--py); animation: fb-pulse 3.2s ease-in-out 1.8s infinite; }
@keyframes fb-bloom {
    from { opacity: 0; transform: scale(.15) rotate(-120deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes fb-spin { to { transform: rotate(calc(360deg * var(--dir))); } }
@keyframes fb-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* diyas rise in one after another; flames flicker with a pulsing glow */
.festive-bg .fb-diya { animation: fb-rise .9s ease-out calc(.8s + var(--i) * .12s) both; }
@keyframes fb-rise {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
.festive-bg .fb-flame { animation: fb-flicker 1.6s ease-in-out var(--fd) infinite; }
.festive-bg .fb-glow { animation: fb-glow 2.4s ease-in-out var(--fd, 0s) infinite; }
@keyframes fb-flicker {
    0%, 100% { transform: scale(1, 1) rotate(0deg); }
    20% { transform: scale(.94, 1.07) rotate(-2.5deg); }
    45% { transform: scale(1.04, .95) rotate(1.8deg); }
    70% { transform: scale(.96, 1.05) rotate(-1.2deg); }
}
@keyframes fb-glow {
    0%, 100% { opacity: .55; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .festive-bg * { animation: none !important; }
}