/* Halloween pack, loaded only inside the config/seasonal.php window. Metronic forces radius 0, hence !important on round shapes */

:root {
    --hw-night: #0b0820;
    --hw-haze: #2a1b4d;
    --hw-ember: #ff7a18;
    --hw-pumpkin: #c2410c;
    --hw-pumpkin-deep: #9a3412;
    --hw-bone: #f3ead8;
    --hw-bat: #140c1f;
}

/* ---- Scene (login) ---- */
.ciu-hw-scene {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.ciu-hw-sky {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        radial-gradient(ellipse 70% 45% at 50% 108%, rgba(255, 122, 24, 0.26), transparent 70%),
        radial-gradient(ellipse 60% 55% at 12% 6%, rgba(42, 27, 77, 0.6), transparent 70%),
        linear-gradient(180deg, rgba(11, 8, 32, 0.66) 0%, rgba(11, 8, 32, 0.42) 55%, rgba(11, 8, 32, 0.74) 100%);
}

.ciu-hw-sky::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.09;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.login-dark .ciu-hw-sky {
    opacity: 0.7;
}

.ciu-hw-moon {
    position: absolute;
    top: 7vh;
    left: 7vw;
    width: 128px;
    height: 128px;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 64% 36%, rgba(170, 155, 130, 0.35) 0 11%, transparent 12%),
        radial-gradient(circle at 34% 62%, rgba(170, 155, 130, 0.28) 0 8%, transparent 9%),
        radial-gradient(circle at 68% 74%, rgba(170, 155, 130, 0.24) 0 5%, transparent 6%),
        radial-gradient(circle at 38% 34%, #fffaf0 0%, var(--hw-bone) 45%, #d9cdb4 100%);
    box-shadow: 0 0 60px 18px rgba(243, 234, 216, 0.28), 0 0 160px 70px rgba(255, 196, 120, 0.12);
    animation: ciuHwMoonRise 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ciu-hw-cloud {
    position: absolute;
    top: calc(7vh + 58px);
    left: 0;
    width: 240px;
    height: 34px;
    border-radius: 50% !important;
    background: rgba(214, 206, 232, 0.22);
    filter: blur(7px);
    animation: ciuHwCloud 70s linear -24s infinite;
}

.ciu-hw-cloud-low {
    top: calc(7vh + 104px);
    width: 180px;
    height: 26px;
    opacity: 0.7;
    animation-duration: 95s;
    animation-delay: -61s;
}

.ciu-hw-fog {
    position: absolute;
    left: 0;
    bottom: -4vh;
    width: 200%;
    height: 32vh;
    background-image:
        radial-gradient(ellipse 30% 60% at 25% 85%, rgba(226, 220, 240, 0.3), transparent 70%),
        radial-gradient(ellipse 35% 50% at 72% 95%, rgba(226, 220, 240, 0.24), transparent 70%);
    background-size: 50% 100%;
    background-repeat: repeat-x;
    filter: blur(4px);
    animation: ciuHwFog 48s linear infinite;
}

.ciu-hw-fog-back {
    height: 42vh;
    opacity: 0.6;
    animation-duration: 76s;
    animation-direction: reverse;
}

.ciu-hw-lantern {
    position: absolute;
    right: 4vw;
    bottom: 0;
    width: 150px;
    transform: translateY(8%);
    animation: ciuHwPeek 1.4s cubic-bezier(0.2, 0.9, 0.2, 1) 0.8s both;
}

.ciu-hw-lantern::before {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    bottom: 0;
    height: 60%;
    border-radius: 50% !important;
    background: radial-gradient(ellipse at 50% 70%, rgba(255, 122, 24, 0.45), transparent 70%);
}

.ciu-hw-lantern svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
}

/* witch hat on the lantern, tipped slightly to the right */
.ciu-hw-lantern .ciu-hw-hat {
    position: absolute;
    top: -25%;
    left: 18%;
    width: 64%;
    transform: rotate(14deg);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35));
}

/* ---- Bats (login scene) and swarm (first app page after login) ---- */
.ciu-hw-bat {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 32px;
    margin: -16px 0 0 -32px;
    color: var(--hw-bat);
    will-change: transform;
}

.ciu-hw-bat svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ciu-hw-wing {
    transform-box: fill-box;
    transform-origin: 100% 30%;
    animation: ciuHwFlap 0.22s ease-in-out infinite alternate;
}

.ciu-hw-swarm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10050;
    pointer-events: none;
}

.ciu-hw-carve {
    animation: ciuHwFlicker 2.6s steps(1, end) 1.5s infinite;
}

/* ---- Login card ---- */
body.ciu-halloween:not(.ciu-hw-off) .content {
    box-shadow: 0 0 0 1px rgba(255, 122, 24, 0.28), 0 24px 70px -24px rgba(255, 122, 24, 0.5) !important;
}

body.ciu-halloween:not(.ciu-hw-off) .btn-custom {
    background-color: var(--hw-pumpkin) !important;
    color: #ffffff;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

body.ciu-halloween:not(.ciu-hw-off) .btn-custom:hover,
body.ciu-halloween:not(.ciu-hw-off) .btn-custom:focus {
    background-color: var(--hw-pumpkin-deep) !important;
    box-shadow: 0 8px 24px -10px rgba(255, 122, 24, 0.75) !important;
    color: #ffffff;
}

.ciu-hw-spider {
    position: absolute;
    top: 0;
    right: 12px;
    z-index: 2;
    width: 24px;
    color: var(--hw-bat);
    pointer-events: none;
    transform-origin: 50% 0;
    animation: ciuHwSway 3.6s ease-in-out 2.4s infinite;
}

body.login-dark .ciu-hw-spider {
    color: #b8aecb;
}

.ciu-hw-thread {
    display: block;
    width: 1px;
    height: 0;
    margin: 0 auto;
    background: linear-gradient(rgba(120, 120, 140, 0.15), rgba(120, 120, 140, 0.8));
    transition: height 1.4s cubic-bezier(0.3, 0.7, 0.2, 1);
}

body.login-dark .ciu-hw-thread {
    background: linear-gradient(rgba(220, 220, 235, 0.1), rgba(220, 220, 235, 0.55));
}

.ciu-hw-spider.is-down .ciu-hw-thread {
    height: 58px;
}

.ciu-hw-spider.is-up .ciu-hw-thread {
    height: 4px;
    transition-duration: 0.6s;
}

.ciu-hw-spider svg {
    display: block;
    width: 24px;
    height: 24px;
    margin-top: -3px;
}

/* ---- Header web (all app pages): canvas just under the header (z-index 100), threads behind it stay hidden ---- */
.ciu-hw-web {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    width: 480px;
    max-width: 100%;
    height: 560px;
    max-height: 100%;
    pointer-events: none;
}

/* big corner web of the login scene, behind the card */
.ciu-hw-web-floor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ---- Halloween switch: the dark mode switch's look, pumpkin when on ---- */
.theme-toggle-wrap,
.theme-toggle-card {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* side by side on tablets and phones */
@media (max-width: 991px) {
    .theme-toggle-wrap,
    .theme-toggle-card {
        flex-direction: row;
        align-items: center;
    }
}

.ciu-hw-icon-off {
    color: rgba(15, 23, 38, 0.45);
}

.ciu-hw-icon-on {
    color: rgba(15, 23, 38, 0.38);
}

.ciu-hw-toggle[aria-checked="true"] .ciu-hw-icon-off {
    color: rgba(255, 255, 255, 0.55);
}

.ciu-hw-toggle[aria-checked="true"] .ciu-hw-icon-on {
    color: #ffffff;
}

.ciu-hw-toggle[aria-checked="true"] .theme-toggle-thumb {
    background: linear-gradient(135deg, #ff9a3c, #e8650f);
}

/* navbar variant sits on the dark header */
.theme-toggle-nav .ciu-hw-icon-off {
    color: #e0e6ed;
}

.theme-toggle-nav .ciu-hw-icon-on {
    color: rgba(255, 255, 255, 0.4);
}

.theme-toggle-nav .ciu-hw-toggle[aria-checked="true"] .ciu-hw-icon-off {
    color: rgba(255, 255, 255, 0.35);
}

.theme-toggle-nav .ciu-hw-toggle[aria-checked="true"] .ciu-hw-icon-on {
    color: #ffffff;
}

.theme-toggle-nav .ciu-hw-toggle[aria-checked="true"] .theme-toggle-thumb {
    background: linear-gradient(135deg, #ff9a3c, #e8650f);
}

.ciu-hw-off .ciu-hw-scene,
.ciu-hw-off .ciu-hw-web,
.ciu-hw-off .ciu-hw-swarm,
.ciu-hw-off .ciu-hw-spider {
    display: none !important;
}

/* ---- Keyframes ---- */
@keyframes ciuHwMoonRise {
    from { opacity: 0; transform: scale(0.8) translateY(14px); }
}

@keyframes ciuHwCloud {
    from { transform: translate3d(-280px, 0, 0); }
    to { transform: translate3d(110vw, 0, 0); }
}

@keyframes ciuHwFog {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes ciuHwPeek {
    from { opacity: 0; transform: translateY(70%); }
    55% { opacity: 1; }
}

@keyframes ciuHwFlicker {
    0%, 100% { opacity: 1; }
    18% { opacity: 0.82; }
    23% { opacity: 1; }
    51% { opacity: 0.9; }
    74% { opacity: 0.76; }
    78% { opacity: 1; }
}

@keyframes ciuHwFlap {
    from { transform: rotate(10deg) scaleY(1); }
    to { transform: rotate(-22deg) scaleY(0.35); }
}

@keyframes ciuHwSway {
    0%, 100% { transform: rotate(4deg); }
    50% { transform: rotate(-4deg); }
}

.ciu-hw-paused [class*="ciu-hw-"] {
    animation-play-state: paused !important;
}

@media (max-width: 767px) {
    .ciu-hw-moon {
        top: 8px;
        left: -16px;
        width: 56px;
        height: 56px;
    }

    .ciu-hw-cloud {
        top: 40px;
    }

    .ciu-hw-cloud-low {
        top: 70px;
    }

    .ciu-hw-fog {
        height: 22vh;
    }
}

@media (max-width: 768px) {
    .ciu-hw-lantern {
        display: none;
    }
}

/* phones: round button with the active icon only, like the dark mode switch */
@media (max-width: 563px) {
    .theme-toggle-wrap .ciu-hw-toggle .ciu-hw-icon-on,
    .theme-toggle-wrap .ciu-hw-toggle[aria-checked="true"] .ciu-hw-icon-off {
        display: none;
    }

    .theme-toggle-wrap .ciu-hw-toggle[aria-checked="true"] .ciu-hw-icon-on {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    [class*="ciu-hw-"] {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .ciu-hw-scene,
    .ciu-hw-swarm,
    .ciu-hw-web,
    .ciu-hw-spider {
        display: none !important;
    }
}