/* Halloween Decor — login branco com Lotties transparentes e teia no card */

body.welcome-anonymous {
    background-color: #f8fafc !important;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)),
        url("../pics/portal-halloween-bg.png") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

body.welcome-anonymous .main-content-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(148, 163, 184, .30);
    border-radius: 18px;
    box-shadow:
        0 24px 65px rgba(15, 23, 42, .10),
        0 6px 18px rgba(15, 23, 42, .06);
}

/* Teias presas aos dois cantos superiores do card. */
body.welcome-anonymous .main-content-card::before,
body.welcome-anonymous .main-content-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -2px;
    width: 150px;
    height: 150px;
    pointer-events: none;
    opacity: .30;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23475569' stroke-linecap='round'%3E%3Cg stroke-width='1.25'%3E%3Cpath d='M0 0C11 55 15 117 7 200M0 0C35 46 59 108 73 200M0 0C59 34 108 91 137 200M0 0C87 22 156 64 200 137M0 0C104 6 166 25 200 61M0 0C112-2 173 3 200 13'/%3E%3C/g%3E%3Cg stroke-width='.9' opacity='.82'%3E%3Cpath d='M0 34C13 32 28 38 41 50M0 69C28 65 58 78 77 101M0 108C42 101 88 120 114 155M0 153C57 141 121 162 154 200M34 0C31 17 38 33 50 43M72 0C69 31 83 57 105 75M113 0C108 39 131 74 165 94M158 0C153 23 172 44 200 54'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") top left / contain no-repeat;
}

body.welcome-anonymous .main-content-card::before {
    left: -2px;
}

body.welcome-anonymous .main-content-card::after {
    display: none;
}

body.welcome-anonymous .main-content-card > .card-header,
body.welcome-anonymous .main-content-card > .card-body {
    position: relative;
    z-index: 1;
}

.halloween-login-skeleton {
    position: absolute;
    z-index: 3;
    right: 22px;
    bottom: 16px;
    width: 300px;
    height: 390px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.halloween-login-skeleton.is-ready {
    opacity: 1;
}

.halloween-login-skeleton svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    overflow: visible;
    filter: drop-shadow(0 10px 12px rgba(67, 64, 25, .12));
}

/* Aranha Lottie presa no canto superior direito e descendo pela própria teia. */
.halloween-login-spider {
    position: absolute;
    z-index: 4;
    top: -38px;
    right: -5px;
    width: 190px;
    height: 280px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.halloween-login-spider.is-ready {
    opacity: .88;
}

.halloween-login-spider svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    overflow: visible;
    filter: drop-shadow(0 8px 9px rgba(15, 23, 42, .14));
}

@media (max-width: 900px) {
    body.welcome-anonymous .main-content-card::before,
    body.welcome-anonymous .main-content-card::after {
        width: 105px;
        height: 105px;
        opacity: .24;
    }

    .halloween-login-skeleton {
        display: none;
    }

    .halloween-login-spider {
        top: -16px;
        right: -4px;
        width: 120px;
        height: 185px;
        opacity: .65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-login-skeleton,
    .halloween-login-spider {
        transition: none;
    }
}