/* Halloween sign-in theme. Everything is scoped under html.halloween, which
   login-theme.js sets only in season (or with ?theme=halloween), so the
   everyday login page is untouched. Delete this file, login-theme.js and the
   hw-* markup in login.html to retire it. */

.hw-scene,
.hw-badge,
.hw-spider {
    display: none;
}

/* Shared shapes/gradients. Must stay rendered (not display:none) or Chrome
   drops the gradient fills on every <use>. */
.hw-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

html.halloween body {
    background:
        radial-gradient(ellipse 80% 55% at 50% 108%, rgba(255, 128, 36, 0.32), transparent 60%),
        radial-gradient(ellipse 60% 50% at 82% 14%, rgba(255, 226, 160, 0.10), transparent 70%),
        linear-gradient(180deg, #070a24 0%, #131d61 46%, #2c1a5c 78%, #47215a 100%);
    overflow-x: hidden;
}

/* ---------- Backdrop ---------- */

html.halloween .hw-scene {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

html.halloween .login-container {
    position: relative;
    z-index: 1;
}

.hw-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: hw-twinkle 4.5s ease-in-out infinite;
}

.hw-stars-a {
    box-shadow:
        2.2vw 7.9vh 0 rgba(255,255,255,1),
        14.8vw 3.6vh 0 rgba(255,255,255,0.55),
        53.5vw 44.4vh 0 rgba(255,255,255,0.7),
        15.4vw 46.2vh 0 rgba(255,255,255,0.55),
        14.4vw 33.7vh 0 rgba(255,255,255,1),
        52.6vw 13.5vh 0 rgba(255,255,255,0.55),
        12.6vw 48.0vh 0 rgba(255,255,255,1),
        34.5vw 13.6vh 0 rgba(255,255,255,1),
        36.8vw 59.3vh 0 rgba(255,255,255,0.7),
        71.9vw 26.4vh 0 rgba(255,255,255,0.55),
        94.5vw 52.2vh 0 rgba(255,255,255,0.85),
        14.2vw 10.0vh 0 rgba(255,255,255,1),
        4.0vw 45.8vh 0 rgba(255,255,255,1),
        64.8vw 14.3vh 0 rgba(255,255,255,1),
        72.5vw 12.8vh 0 rgba(255,255,255,0.7),
        48.2vw 17.1vh 0 rgba(255,255,255,0.85),
        33.8vw 25.2vh 0 rgba(255,255,255,0.85),
        95.2vw 60.6vh 0 rgba(255,255,255,0.55),
        78.4vw 19.7vh 0 rgba(255,255,255,0.7),
        55.9vw 58.1vh 0 rgba(255,255,255,0.85),
        10.2vw 12.8vh 0 rgba(255,255,255,0.85),
        69.1vw 6.8vh 0 rgba(255,255,255,1),
        28.9vw 19.6vh 0 rgba(255,255,255,0.7),
        12.2vw 13.4vh 0 rgba(255,255,255,0.85),
        44.6vw 49.1vh 0 rgba(255,255,255,0.55),
        27.2vw 54.3vh 0 rgba(255,255,255,0.55),
        95.2vw 13.3vh 0 rgba(255,255,255,0.7),
        70.9vw 53.1vh 0 rgba(255,255,255,1),
        6.7vw 38.3vh 0 rgba(255,255,255,0.85),
        85.3vw 60.9vh 0 rgba(255,255,255,1),
        63.4vw 3.3vh 0 rgba(255,255,255,0.55),
        48.6vw 49.6vh 0 rgba(255,255,255,1),
        96.4vw 47.8vh 0 rgba(255,255,255,0.85),
        49.0vw 48.7vh 0 rgba(255,255,255,1),
        35.2vw 1.7vh 0 rgba(255,255,255,1),
        58.1vw 28.2vh 0 rgba(255,255,255,0.55),
        14.0vw 35.6vh 0 rgba(255,255,255,0.55),
        91.5vw 55.1vh 0 rgba(255,255,255,0.7),
        93.8vw 53.9vh 0 rgba(255,255,255,0.7),
        55.3vw 35.1vh 0 rgba(255,255,255,1),
        23.2vw 12.9vh 0 rgba(255,255,255,1),
        31.2vw 51.0vh 0 rgba(255,255,255,0.85),
        14.1vw 8.5vh 0 rgba(255,255,255,0.85),
        74.0vw 58.5vh 0 rgba(255,255,255,1),
        57.8vw 11.1vh 0 rgba(255,255,255,0.55),
        72.8vw 13.7vh 0 rgba(255,255,255,0.7),
        38.3vw 19.7vh 0 rgba(255,255,255,1),
        88.3vw 19.7vh 0 rgba(255,255,255,0.7),
        91.1vw 17.4vh 0 rgba(255,255,255,0.55),
        4.2vw 38.5vh 0 rgba(255,255,255,0.85),
        26.4vw 13.3vh 0 rgba(255,255,255,0.85),
        21.6vw 3.0vh 0 rgba(255,255,255,1),
        38.6vw 13.1vh 0 rgba(255,255,255,0.7),
        32.6vw 19.1vh 0 rgba(255,255,255,0.85),
        12.0vw 14.2vh 0 rgba(255,255,255,0.7),
        87.7vw 43.3vh 0 rgba(255,255,255,1),
        45.3vw 40.8vh 0 rgba(255,255,255,0.7),
        41.9vw 5.1vh 0 rgba(255,255,255,0.7),
        30.1vw 29.9vh 0 rgba(255,255,255,0.55),
        97.2vw 17.9vh 0 rgba(255,255,255,0.85);
}

.hw-stars-b {
    width: 1px;
    height: 1px;
    animation-delay: -2.2s;
    animation-duration: 3.4s;
    box-shadow:
        75.2vw 19.3vh 0 rgba(255,255,255,0.7),
        57.8vw 25.6vh 0 rgba(255,255,255,0.7),
        24.4vw 9.7vh 0 rgba(255,255,255,0.85),
        84.3vw 41.9vh 0 rgba(255,255,255,0.7),
        3.0vw 56.3vh 0 rgba(255,255,255,1),
        93.2vw 42.1vh 0 rgba(255,255,255,0.85),
        31.2vw 24.6vh 0 rgba(255,255,255,0.7),
        55.3vw 14.5vh 0 rgba(255,255,255,1),
        5.7vw 35.8vh 0 rgba(255,255,255,0.7),
        5.7vw 59.2vh 0 rgba(255,255,255,0.85),
        27.7vw 7.6vh 0 rgba(255,255,255,0.55),
        33.1vw 45.5vh 0 rgba(255,255,255,1),
        14.8vw 3.9vh 0 rgba(255,255,255,0.85),
        79.3vw 58.0vh 0 rgba(255,255,255,0.7),
        53.8vw 27.9vh 0 rgba(255,255,255,0.7),
        8.5vw 31.1vh 0 rgba(255,255,255,1),
        44.1vw 30.3vh 0 rgba(255,255,255,1),
        66.4vw 1.2vh 0 rgba(255,255,255,0.85),
        24.0vw 61.6vh 0 rgba(255,255,255,1),
        85.2vw 4.5vh 0 rgba(255,255,255,1),
        90.2vw 20.7vh 0 rgba(255,255,255,1),
        20.8vw 14.4vh 0 rgba(255,255,255,0.55),
        68.0vw 52.2vh 0 rgba(255,255,255,0.55),
        87.5vw 26.1vh 0 rgba(255,255,255,1),
        14.3vw 59.9vh 0 rgba(255,255,255,0.85),
        43.0vw 34.9vh 0 rgba(255,255,255,0.55),
        45.5vw 9.4vh 0 rgba(255,255,255,0.85),
        86.4vw 54.1vh 0 rgba(255,255,255,0.7),
        64.2vw 29.6vh 0 rgba(255,255,255,0.85),
        34.4vw 59.5vh 0 rgba(255,255,255,1),
        76.9vw 51.9vh 0 rgba(255,255,255,1),
        81.4vw 26.6vh 0 rgba(255,255,255,0.55),
        19.3vw 14.8vh 0 rgba(255,255,255,0.85),
        80.7vw 59.9vh 0 rgba(255,255,255,0.55),
        74.9vw 7.6vh 0 rgba(255,255,255,0.85),
        27.1vw 48.6vh 0 rgba(255,255,255,1),
        20.3vw 32.1vh 0 rgba(255,255,255,0.85),
        79.4vw 34.1vh 0 rgba(255,255,255,1),
        47.7vw 9.7vh 0 rgba(255,255,255,1),
        48.3vw 4.8vh 0 rgba(255,255,255,0.85),
        31.7vw 52.6vh 0 rgba(255,255,255,0.55),
        76.8vw 8.3vh 0 rgba(255,255,255,0.7),
        55.0vw 37.1vh 0 rgba(255,255,255,0.7),
        26.9vw 34.2vh 0 rgba(255,255,255,1),
        59.3vw 34.1vh 0 rgba(255,255,255,0.85),
        74.3vw 40.4vh 0 rgba(255,255,255,0.7),
        15.6vw 60.1vh 0 rgba(255,255,255,1),
        95.1vw 45.0vh 0 rgba(255,255,255,0.7),
        42.7vw 60.0vh 0 rgba(255,255,255,0.7),
        46.1vw 9.1vh 0 rgba(255,255,255,0.85),
        79.5vw 30.8vh 0 rgba(255,255,255,0.7),
        81.7vw 21.5vh 0 rgba(255,255,255,1),
        37.4vw 47.5vh 0 rgba(255,255,255,0.7),
        48.4vw 19.8vh 0 rgba(255,255,255,0.7),
        70.4vw 46.0vh 0 rgba(255,255,255,1),
        34.9vw 53.3vh 0 rgba(255,255,255,0.55),
        74.9vw 56.3vh 0 rgba(255,255,255,0.85),
        80.7vw 5.0vh 0 rgba(255,255,255,0.55),
        80.5vw 52.7vh 0 rgba(255,255,255,0.85),
        56.5vw 15.5vh 0 rgba(255,255,255,0.85),
        41.6vw 19.2vh 0 rgba(255,255,255,0.55),
        95.4vw 25.4vh 0 rgba(255,255,255,0.55),
        7.4vw 25.6vh 0 rgba(255,255,255,0.85),
        16.9vw 3.2vh 0 rgba(255,255,255,0.55),
        54.2vw 25.1vh 0 rgba(255,255,255,0.85),
        85.5vw 44.0vh 0 rgba(255,255,255,0.55),
        32.9vw 16.2vh 0 rgba(255,255,255,1),
        91.5vw 22.9vh 0 rgba(255,255,255,1),
        42.9vw 61.6vh 0 rgba(255,255,255,0.7),
        96.7vw 44.4vh 0 rgba(255,255,255,0.7);
}

@keyframes hw-twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.hw-moon {
    position: absolute;
    top: 9vh;
    right: 11vw;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 34%, rgba(214, 190, 128, 0.55) 0 9%, transparent 10%),
        radial-gradient(circle at 62% 58%, rgba(214, 190, 128, 0.45) 0 12%, transparent 13%),
        radial-gradient(circle at 44% 74%, rgba(214, 190, 128, 0.4) 0 6%, transparent 7%),
        radial-gradient(circle at 70% 28%, rgba(214, 190, 128, 0.35) 0 5%, transparent 6%),
        radial-gradient(circle at 36% 32%, #fffdf0, #f7e9bd 58%, #e6cd8a 100%);
    box-shadow:
        0 0 40px 10px rgba(255, 238, 180, 0.35),
        0 0 140px 50px rgba(255, 196, 110, 0.16);
    animation: hw-moon-glow 7s ease-in-out infinite;
}

@keyframes hw-moon-glow {
    0%, 100% {
        box-shadow:
            0 0 40px 10px rgba(255, 238, 180, 0.35),
            0 0 140px 50px rgba(255, 196, 110, 0.16);
    }
    50% {
        box-shadow:
            0 0 54px 14px rgba(255, 238, 180, 0.45),
            0 0 170px 64px rgba(255, 196, 110, 0.22);
    }
}

/* Bats: an outer box flies the path, the svg inside flaps. */
.hw-bat {
    position: absolute;
    left: -140px;
    width: 64px;
    height: 26px;
    animation: hw-fly 19s linear infinite;
}

.hw-bat svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #0c0a1f;
    transform-origin: 50% 40%;
    animation: hw-flap 0.32s ease-in-out infinite alternate;
}

.hw-bat-1 { top: 16vh; animation-duration: 17s; animation-delay: -3s; }
.hw-bat-2 { top: 28vh; width: 44px; height: 18px; animation-duration: 23s; animation-delay: -12s; }
.hw-bat-3 { top: 9vh; width: 34px; height: 14px; animation-duration: 26s; animation-delay: -19s; }
.hw-bat-4 { top: 38vh; width: 52px; height: 21px; animation-duration: 21s; animation-delay: -7s; }

.hw-bat-2 svg { animation-duration: 0.26s; }
.hw-bat-3 svg { animation-duration: 0.22s; opacity: 0.8; }

@keyframes hw-fly {
    0%   { transform: translate(0, 0) rotate(4deg); }
    20%  { transform: translate(24vw, -5vh) rotate(-3deg); }
    40%  { transform: translate(48vw, 3vh) rotate(5deg); }
    60%  { transform: translate(72vw, -6vh) rotate(-4deg); }
    80%  { transform: translate(96vw, 1vh) rotate(3deg); }
    100% { transform: translate(calc(100vw + 280px), -4vh) rotate(-2deg); }
}

@keyframes hw-flap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0.55) translateY(8%); }
}

.hw-hills {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 32vh;
    min-height: 200px;
    overflow: visible;
}

.hw-hill-back,
.hw-house {
    fill: #1c1440;
}

.hw-hill-front {
    fill: #0b0920;
}

.hw-tree path {
    fill: none;
    stroke: #0b0920;
    stroke-linecap: round;
}

.hw-window {
    fill: #ffb547;
    animation: hw-flicker 3.2s ease-in-out infinite;
}

.hw-window-b { animation-delay: -1.1s; animation-duration: 4.1s; }
.hw-window-c { animation-delay: -2.3s; animation-duration: 2.6s; }

.hw-door {
    fill: #120c2c;
}

.hw-lantern {
    filter: drop-shadow(0 0 10px rgba(255, 150, 40, 0.55));
}

.hw-face {
    fill: #ffe38a;
    animation: hw-flicker 2.4s ease-in-out infinite;
}

.hw-lantern-b .hw-face { animation-delay: -0.8s; }
.hw-lantern-c .hw-face { animation-delay: -1.5s; }

@keyframes hw-flicker {
    0%, 100% { opacity: 1; }
    42%      { opacity: 0.82; }
    46%      { opacity: 0.55; }
    50%      { opacity: 0.95; }
    70%      { opacity: 0.75; }
}

.hw-fog {
    position: absolute;
    left: -50%;
    width: 200%;
    height: 22vh;
    bottom: 3vh;
    background:
        radial-gradient(ellipse 18% 50% at 12% 60%, rgba(200, 190, 255, 0.07), transparent 70%),
        radial-gradient(ellipse 22% 45% at 38% 55%, rgba(200, 190, 255, 0.05), transparent 70%),
        radial-gradient(ellipse 16% 50% at 62% 65%, rgba(200, 190, 255, 0.06), transparent 70%),
        radial-gradient(ellipse 20% 45% at 86% 58%, rgba(200, 190, 255, 0.05), transparent 70%);
    filter: blur(6px);
    animation: hw-drift 38s linear infinite alternate;
}

.hw-fog-b {
    bottom: -4vh;
    animation-duration: 52s;
    animation-direction: alternate-reverse;
    opacity: 0.8;
}

@keyframes hw-drift {
    from { transform: translateX(-12%); }
    to   { transform: translateX(12%); }
}

/* ---------- Card ---------- */

html.halloween .login-card {
    position: relative;
    border: none;
    border-radius: 16px;
    background:
        linear-gradient(90deg, #ff7a18, #ffb347 45%, #9b5de5) top / 100% 5px no-repeat,
        #ffffff;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 24px 60px rgba(4, 4, 20, 0.55),
        0 0 90px rgba(255, 140, 40, 0.12);
    animation: hw-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}


@keyframes hw-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

html.halloween .login-header {
    margin-bottom: 28px;
}

html.halloween .login-logo {
    margin-bottom: 12px;
}

html.halloween .hw-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px 5px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff7ec, #ffefd9);
    border: 1px solid #ffd7a6;
    color: #b4500c;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html.halloween .hw-badge svg {
    overflow: visible;
}

html.halloween .form-group input:focus,
html.halloween .reset-email-input:focus,
html.halloween .mfa-code-input:focus {
    outline: none;
    border-color: #f27a12;
    box-shadow: 0 0 0 3px rgba(242, 122, 18, 0.16);
}

html.halloween .login-btn:not(:disabled) {
    background: linear-gradient(135deg, #131d61 0%, #2d1b69 100%);
    box-shadow: 0 6px 16px rgba(19, 29, 97, 0.28);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

html.halloween .login-btn:not(:disabled):hover {
    background: linear-gradient(135deg, #1a2678 0%, #3a2283 100%);
    box-shadow:
        0 8px 20px rgba(19, 29, 97, 0.32),
        0 0 0 3px rgba(255, 140, 40, 0.28);
    transform: translateY(-1px);
}

html.halloween .login-footer a,
html.halloween .back-link {
    color: #2d1b69;
}

/* A small spider dangles past the card's top-right corner. */
html.halloween .hw-spider {
    display: block;
    position: absolute;
    top: -6px;
    right: 34px;
    width: 30px;
    transform-origin: 50% -100vh;
    animation: hw-dangle 5.5s ease-in-out infinite;
    z-index: 2;
}

.hw-spider-thread {
    position: absolute;
    bottom: 22px;
    left: 50%;
    width: 1px;
    height: 100vh;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 70%, rgba(40, 30, 70, 0.6));
}

.hw-spider-body {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
}

@keyframes hw-dangle {
    0%, 100% { transform: translateY(0) rotate(0.4deg); }
    35%      { transform: translateY(26px) rotate(-0.4deg); }
    55%      { transform: translateY(20px) rotate(0.2deg); }
    75%      { transform: translateY(30px) rotate(-0.2deg); }
}

/* ---------- Small screens & reduced motion ---------- */

@media (max-width: 640px) {
    .hw-moon {
        width: 84px;
        height: 84px;
        top: 5vh;
        right: 6vw;
    }

    .hw-bat-3,
    .hw-bat-4,
    .hw-tree-sm {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-scene *,
    html.halloween .login-card,
    html.halloween .hw-spider {
        animation: none !important;
    }

    .hw-bat {
        display: none;
    }
}