/**
 * 喜迎中秋·欢度国庆 登录主题
 * 有效期由 zhongqiu.jsp 控制；样式均挂在 body.festival-zq 下
 */

/* ========== 页面红金喜庆底色 ========== */
body.festival-zq {
    background: #8b0000;
}

body.festival-zq .header {
    background: linear-gradient(180deg, #6b0f0f 0%, #8b1515 100%);
    color: #f5d76e;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 10;
}

body.festival-zq .header .logo-tip,
body.festival-zq .header-phone,
body.festival-zq .header-phone span {
    color: #ffe9a0 !important;
}

body.festival-zq .banner {
    background:
        radial-gradient(ellipse 80% 60% at 20% 40%, rgba(255, 180, 60, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 20%, rgba(255, 215, 100, 0.22) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(180, 20, 20, 0.5) 0%, transparent 60%),
        linear-gradient(165deg, #9b1b1b 0%, #c41e1e 35%, #a01818 70%, #7a1010 100%) !important;
    color: #fff;
    position: relative;
    overflow: hidden;
}

body.festival-zq .banner .login-tip h1,
body.festival-zq .banner .login-tip {
    color: #ffe9a0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 200, 80, 0.35);
}

body.festival-zq .banner .login {
    background: rgba(255, 252, 245, 0.96);
    box-shadow: 0 8px 32px rgba(100, 0, 0, 0.45), 0 0 0 2px rgba(220, 143, 3, 0.35);
    border-radius: 6px;
    z-index: 20;
}

body.festival-zq .banner .login h5 {
    color: #c41e1e;
}

body.festival-zq .banner .login .login-btn {
    background: linear-gradient(180deg, #e03a3a 0%, #c41e1e 55%, #a01818 100%);
    border: 1px solid #8b1515;
    box-shadow: 0 4px 12px rgba(160, 20, 20, 0.4);
}

body.festival-zq .banner .login .login-btn:hover {
    background: linear-gradient(180deg, #f04a4a 0%, #d42828 55%, #b01c1c 100%);
}

body.festival-zq .footer {
    background: linear-gradient(180deg, #4a0a0a 0%, #2a0606 100%);
    color: #d4a85a;
    position: relative;
    z-index: 10;
}

body.festival-zq .footer h2 {
    color: #ffe9a0;
}

body.festival-zq .footer .copyright,
body.festival-zq .footer .copyright a {
    color: #c9a05a !important;
}

/* ========== 顶部横幅 ========== */
.zq-banner {
    position: fixed;
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    pointer-events: none;
    padding: 6px 36px;
    background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.75), rgba(196, 30, 30, 0.85), rgba(139, 0, 0, 0.75), transparent);
    border-radius: 4px;
}

.zq-banner-text {
    font-family: "华文行楷", "STXingkai", "楷体", serif;
    font-size: 28px;
    letter-spacing: 0.35em;
    color: #ffe9a0;
    text-shadow:
        0 0 8px rgba(255, 200, 80, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.5),
        1px 1px 0 #8b1515;
    white-space: nowrap;
    animation: zq-banner-glow 2.8s ease-in-out infinite;
}

@keyframes zq-banner-glow {
    0%, 100% { opacity: 0.9; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.15); }
}

/* ========== 满月 + 云 ========== */
.zq-moon-wrap {
    position: fixed;
    top: 100px;
    right: 8%;
    width: 160px;
    height: 160px;
    z-index: 5;
    pointer-events: none;
}

.zq-moon {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, #fff8e0 0%, #ffe9a0 40%, #f5c542 75%, #e0a020 100%);
    box-shadow:
        0 0 30px 12px rgba(255, 220, 100, 0.55),
        0 0 60px 24px rgba(255, 180, 50, 0.25),
        inset -8px -6px 16px rgba(180, 120, 20, 0.25);
    animation: zq-moon-breathe 4s ease-in-out infinite;
}

@keyframes zq-moon-breathe {
    0%, 100% { box-shadow: 0 0 30px 12px rgba(255, 220, 100, 0.55), 0 0 60px 24px rgba(255, 180, 50, 0.25); }
    50% { box-shadow: 0 0 40px 18px rgba(255, 230, 120, 0.75), 0 0 80px 32px rgba(255, 190, 60, 0.4); }
}

.zq-cloud {
    position: absolute;
    background: rgba(255, 245, 220, 0.55);
    border-radius: 50px;
    filter: blur(1px);
}

.zq-cloud:before,
.zq-cloud:after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.zq-cloud-1 {
    width: 70px;
    height: 28px;
    bottom: 15px;
    left: 0;
    animation: zq-cloud-drift 12s ease-in-out infinite;
}

.zq-cloud-1:before {
    width: 36px;
    height: 36px;
    top: -18px;
    left: 10px;
}

.zq-cloud-1:after {
    width: 28px;
    height: 28px;
    top: -12px;
    left: 36px;
}

.zq-cloud-2 {
    width: 55px;
    height: 22px;
    top: 5px;
    right: -10px;
    opacity: 0.7;
    animation: zq-cloud-drift 16s ease-in-out infinite reverse;
}

.zq-cloud-2:before {
    width: 28px;
    height: 28px;
    top: -14px;
    left: 8px;
}

.zq-cloud-2:after {
    width: 22px;
    height: 22px;
    top: -10px;
    left: 28px;
}

@keyframes zq-cloud-drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(18px); }
}

/* ========== 月光晕层 ========== */
.zq-glow {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255, 180, 60, 0.2) 0%, transparent 70%);
}

/* ========== 左右彩带 ========== */
.zq-ribbon {
    position: fixed;
    top: 0;
    width: 28px;
    height: 220px;
    z-index: 50;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        #c41e1e 0px,
        #c41e1e 18px,
        #ffe9a0 18px,
        #ffe9a0 22px
    );
    border-radius: 0 0 8px 8px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
    transform-origin: top center;
}

.zq-ribbon-l {
    left: 4%;
    animation: zq-ribbon-sway 3.5s ease-in-out infinite;
}

.zq-ribbon-r {
    right: 4%;
    animation: zq-ribbon-sway 4s ease-in-out infinite reverse;
}

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

/* ========== 五角星点缀 ========== */
.zq-stars-deco {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}

.zq-deco-star {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #ffe9a0;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    opacity: 0.75;
    animation: zq-star-twinkle 2.5s ease-in-out infinite;
}

.zq-deco-star.s1 { top: 18%; left: 12%; animation-delay: 0s; }
.zq-deco-star.s2 { top: 28%; left: 22%; animation-delay: 0.6s; width: 10px; height: 10px; }
.zq-deco-star.s3 { top: 22%; right: 28%; animation-delay: 1.2s; }
.zq-deco-star.s4 { top: 35%; right: 18%; animation-delay: 0.3s; width: 12px; height: 12px; }
.zq-deco-star.s5 { top: 55%; left: 8%; animation-delay: 1.8s; width: 9px; height: 9px; }
.zq-deco-star.s6 { top: 48%; right: 10%; animation-delay: 0.9s; }

@keyframes zq-star-twinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.85) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(15deg); }
}

/* ========== 飘落粒子 ========== */
.zq-particles {
    position: fixed;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    overflow: hidden;
}

.zq-star,
.zq-petal,
.zq-spark {
    position: absolute;
    top: -40px;
    display: block;
}

.zq-star {
    width: 8px;
    height: 8px;
    background: #ffe9a0;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: zq-fall 9s linear infinite;
    opacity: 0.85;
}

.zq-petal {
    width: 12px;
    height: 10px;
    background: radial-gradient(ellipse at 40% 40%, #ff6b6b, #c41e1e);
    border-radius: 80% 0 80% 0;
    animation: zq-fall-spin 11s linear infinite;
    opacity: 0.8;
}

.zq-spark {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff5c0;
    box-shadow: 0 0 6px 2px rgba(255, 220, 100, 0.9);
    animation: zq-fall 7s linear infinite;
}

@keyframes zq-fall {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.8; }
    100% { transform: translateY(110vh) translateX(30px); opacity: 0; }
}

@keyframes zq-fall-spin {
    0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
    10% { opacity: 0.9; }
    100% { transform: translateY(110vh) rotate(360deg) translateX(-40px); opacity: 0; }
}

/* ========== 烟花 ========== */
.zq-fireworks {
    position: fixed;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    overflow: hidden;
}

.zq-fw {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    animation: zq-firework 4s ease-out infinite;
}

.zq-fw:before,
.zq-fw:after {
    content: "";
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #ffe9a0;
    border-right-color: #ff6b6b;
    animation: inherit;
}

.zq-fw-1 { top: 18%; left: 15%; background: #ffe9a0; animation-delay: 0s; box-shadow: 0 0 0 0 #ffe9a0; }
.zq-fw-2 { top: 25%; left: 45%; background: #ff6b6b; animation-delay: 0.8s; }
.zq-fw-3 { top: 15%; left: 72%; background: #ffd700; animation-delay: 1.6s; }
.zq-fw-4 { top: 40%; left: 25%; background: #ff8c42; animation-delay: 2.2s; }
.zq-fw-5 { top: 32%; left: 58%; background: #fff; animation-delay: 0.4s; }
.zq-fw-6 { top: 22%; left: 85%; background: #ff4757; animation-delay: 2.8s; }
.zq-fw-7 { top: 45%; left: 10%; background: #ffd700; animation-delay: 1.2s; }
.zq-fw-8 { top: 38%; left: 78%; background: #ffe9a0; animation-delay: 3.2s; }
.zq-fw-9 { top: 12%; left: 35%; background: #ff6b6b; animation-delay: 2s; }
.zq-fw-10 { top: 50%; left: 50%; background: #ff8c42; animation-delay: 3.6s; }

@keyframes zq-firework {
    0% {
        opacity: 0;
        transform: scale(0.2);
        box-shadow:
            0 0 0 0 currentColor,
            0 0 0 0 #ffe9a0,
            0 0 0 0 #ff6b6b;
    }
    15% { opacity: 1; }
    40% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 -28px 0 1px #ffe9a0,
            20px -20px 0 1px #ff6b6b,
            28px 0 0 1px #ffd700,
            20px 20px 0 1px #ff8c42,
            0 28px 0 1px #fff,
            -20px 20px 0 1px #ffe9a0,
            -28px 0 0 1px #ff6b6b,
            -20px -20px 0 1px #ffd700,
            14px -24px 0 0 #fff,
            -14px -24px 0 0 #ff8c42;
    }
    70%, 100% {
        opacity: 0;
        transform: scale(1.4);
        box-shadow:
            0 -40px 0 0 transparent,
            28px -28px 0 0 transparent,
            40px 0 0 0 transparent,
            28px 28px 0 0 transparent,
            0 40px 0 0 transparent,
            -28px 28px 0 0 transparent,
            -40px 0 0 0 transparent,
            -28px -28px 0 0 transparent,
            20px -34px 0 0 transparent,
            -20px -34px 0 0 transparent;
    }
}

/* ========== 底部祥云角花 ========== */
.zq-corner {
    position: fixed;
    bottom: 0;
    z-index: 9;
    pointer-events: none;
    width: 140px;
    height: 100px;
}

.zq-corner-l {
    left: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 100%, rgba(255, 200, 80, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 90%, rgba(196, 30, 30, 0.4) 0%, transparent 70%);
}

.zq-corner-r {
    right: 0;
    background:
        radial-gradient(ellipse 80% 60% at 80% 100%, rgba(255, 200, 80, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 90%, rgba(196, 30, 30, 0.4) 0%, transparent 70%);
}

.zq-knot {
    position: absolute;
    bottom: 28px;
    width: 28px;
    height: 28px;
    background: #c41e1e;
    border: 3px solid #dc8f03;
    border-radius: 4px;
    transform: rotate(45deg);
    box-shadow: 0 0 12px rgba(255, 180, 50, 0.5);
    animation: zq-knot-pulse 2.5s ease-in-out infinite;
}

.zq-corner-l .zq-knot { left: 36px; }
.zq-corner-r .zq-knot { right: 36px; }

.zq-knot:before,
.zq-knot:after {
    content: "";
    position: absolute;
    background: #dc8f03;
}

.zq-knot:before {
    width: 6px;
    height: 40px;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -3px;
}

.zq-knot:after {
    width: 40px;
    height: 6px;
    left: 50%;
    top: 50%;
    margin: -3px 0 0 -20px;
}

@keyframes zq-knot-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 180, 50, 0.4); }
    50% { box-shadow: 0 0 18px rgba(255, 200, 80, 0.9); }
}

/* ========== 灯笼：上下错开 ==========
 * 左外「中」上  → zq-deng-box2
 * 左内「秋」下  → zq-deng-box3
 * 右内「国」下  → zq-deng-box1
 * 右外「庆」上  → zq-deng-box（默认）
 */
.zq-deng-box {
    position: fixed;
    top: -35px;
    right: -15px;
    z-index: 9999;
    pointer-events: none;
}

.zq-deng-box1 {
    position: fixed;
    top: 55px;
    right: 95px;
    z-index: 9999;
    pointer-events: none;
}

.zq-deng-box2 {
    position: fixed;
    top: -35px;
    left: -15px;
    z-index: 9999;
    pointer-events: none;
}

.zq-deng-box3 {
    position: fixed;
    top: 55px;
    left: 95px;
    z-index: 9999;
    pointer-events: none;
}

.zq-deng {
    position: relative;
    width: 110px;
    height: 84px;
    margin: 50px;
    background: rgba(216, 0, 15, 0.88);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    transform-origin: 50% -100px;
    -webkit-animation: zq-swing 3s infinite ease-in-out;
    animation: zq-swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 40px 4px rgba(250, 108, 0, 0.95);
}

.zq-deng-box1 .zq-deng,
.zq-deng-box3 .zq-deng {
    width: 100px;
    height: 76px;
    -webkit-animation: zq-swing 5s infinite ease-in-out;
    animation: zq-swing 5s infinite ease-in-out;
    animation-delay: 0.6s;
    box-shadow: -5px 5px 28px 4px rgba(252, 144, 61, 0.95);
}

.zq-deng-box2 .zq-deng {
    -webkit-animation: zq-swing 3.8s infinite ease-in-out;
    animation: zq-swing 3.8s infinite ease-in-out;
    animation-delay: 0.3s;
}

.zq-deng-a {
    width: 90px;
    height: 84px;
    background: rgba(216, 0, 15, 0.12);
    margin: 10px 8px 8px 9px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}

.zq-deng-box1 .zq-deng-a,
.zq-deng-box3 .zq-deng-a {
    width: 82px;
    height: 76px;
}

.zq-deng-b {
    width: 42px;
    height: 84px;
    background: rgba(216, 0, 15, 0.12);
    margin: -2px 8px 8px 24px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}

.zq-deng-box1 .zq-deng-b,
.zq-deng-box3 .zq-deng-b {
    width: 38px;
    height: 76px;
    margin-left: 22px;
}

.zq-xian {
    position: absolute;
    top: -20px;
    left: 54px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}

.zq-deng-box1 .zq-xian,
.zq-deng-box3 .zq-xian {
    left: 49px;
}

.zq-shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 52px;
    -webkit-animation: zq-swing 4s infinite ease-in-out;
    animation: zq-swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}

.zq-deng-box1 .zq-shui-a,
.zq-deng-box3 .zq-shui-a {
    margin-left: 47px;
}

.zq-shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}

.zq-shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}

.zq-deng:before {
    position: absolute;
    top: -7px;
    left: 25px;
    height: 12px;
    width: 55px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}

.zq-deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 55px;
    content: " ";
    display: block;
    margin-left: 18px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}

.zq-deng-box1 .zq-deng:before,
.zq-deng-box3 .zq-deng:before,
.zq-deng-box1 .zq-deng:after,
.zq-deng-box3 .zq-deng:after {
    width: 50px;
}

.zq-deng-t {
    font-family: "华文行楷", "STXingkai", Arial, sans-serif;
    font-size: 2.8rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 80px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.zq-deng-box1 .zq-deng-t,
.zq-deng-box3 .zq-deng-t {
    font-size: 2.4rem;
    line-height: 72px;
}

@-webkit-keyframes zq-swing {
    0% { -webkit-transform: rotate(-10deg); }
    50% { -webkit-transform: rotate(10deg); }
    100% { -webkit-transform: rotate(-10deg); }
}

@keyframes zq-swing {
    0% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}

/* 小屏：缩小灯笼，避免挡登录框 */
@media (max-width: 1100px) {
    .zq-deng-box1 { right: 40px; }
    .zq-deng-box3 { left: 40px; }
    .zq-moon-wrap { right: 2%; transform: scale(0.75); }
    .zq-banner-text { font-size: 20px; letter-spacing: 0.2em; }
}