/* encoding: UTF-8 */
.home-new-year-2027 {
    position: relative;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 66% 106%, #695066 0%, transparent 58%),
        linear-gradient(180deg, #080f24, #17243e 65%, #2c3d55);
}

.home-new-year-2027__stars,
.home-new-year-2027__effects {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-new-year-2027__star {
    position: absolute;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: #d5ddec;
    opacity: 0.25;
    animation: ny27-starlight var(--ny27-period) ease-in-out var(--ny27-delay) infinite alternate;
}

.home-new-year-2027__cloud {
    position: absolute;
    left: -30%;
    width: 110%;
    height: 19%;
    border-radius: 50%;
    background: radial-gradient(ellipse, #9babc4 0%, transparent 69%);
    filter: blur(13px);
    opacity: 0.065;
    transform: rotate(-5deg);
    animation: ny27-cloud 170s ease-in-out infinite alternate;
}

.home-new-year-2027__cloud--high {
    top: 10%;
}

.home-new-year-2027__cloud--low {
    top: 37%;
    left: 32%;
    width: 83%;
    height: 12%;
    opacity: 0.045;
    animation-duration: 213s;
    animation-delay: -89s;
}

.home-new-year-2027__city {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 49%;
    overflow: visible;
}

.home-new-year-2027__skyline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 67.5%;
    overflow: visible;
}

.home-new-year-2027__haze {
    position: absolute;
    inset: 58% 0 0;
    background: radial-gradient(ellipse at 53% 80%, #f0a65b24, transparent 70%);
}

.home-new-year-2027__vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, #040a164a, transparent 18%),
        radial-gradient(ellipse at 50% 45%, transparent 40%, #02071533);
}

/* 字形边界精确铺到 SVG 底部，高度跟随 Header，避免字体行盒和固定倍率留下空隙。 */
.home-new-year-2027__year {
    position: absolute;
    top: 1.5%;
    bottom: 0;
    display: block;
    width: 23%;
    min-width: 0;
    max-width: 274px;
    height: 98.5%;
    fill: #d34d58;
    fill-rule: evenodd;
    stroke: #f07b7e99;
    stroke-width: 0.45;
    opacity: 0.78;
    pointer-events: none;
}

.home-new-year-2027__year--left {
    left: 3.2%;
}

.home-new-year-2027__year--right {
    right: 3.2%;
}

.home-new-year-2027:not([data-running]) .home-new-year-2027__star,
.home-new-year-2027:not([data-running]) .home-new-year-2027__cloud {
    animation-play-state: paused;
}

@keyframes ny27-starlight {
    from {
        opacity: 0.16;
    }
    to {
        opacity: 0.4;
    }
}

@keyframes ny27-cloud {
    from {
        transform: translateX(-8%) rotate(-5deg);
    }
    to {
        transform: translateX(18%) rotate(-3deg);
    }
}

@media (max-width: 720px) {
    .home-new-year-2027__skyline {
        height: 82%;
    }

    .home-new-year-2027__city {
        height: 30%;
    }

    .home-new-year-2027__year {
        width: 21%;
        min-width: 0;
        max-width: none;
    }

    .home-new-year-2027__year--left {
        left: 1.8%;
    }

    .home-new-year-2027__year--right {
        right: 1.8%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-new-year-2027__star,
    .home-new-year-2027__cloud {
        animation: none;
    }
}