.rc-cfh__city {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: #05010d;
}

.rc-cfh__time-sky {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.rc-cfh__time-sky--dawn {
    background:
        radial-gradient(ellipse at 50% 110%, rgba(255, 104, 73, .58), transparent 55%),
        linear-gradient(180deg, #17132f 0%, #5e294f 58%, #e07159 100%);
}

.rc-cfh__time-sky--day {
    background:
        radial-gradient(ellipse at 50% 118%, rgba(123, 190, 230, .42), transparent 54%),
        linear-gradient(180deg, #075195 0%, #1477bd 55%, #42a5d8 100%);
}

.rc-cfh__time-sky--sunset {
    background:
        radial-gradient(ellipse at 50% 108%, rgba(255, 93, 37, .72), transparent 57%),
        linear-gradient(180deg, #21113f 0%, #8b205c 55%, #ff7b37 100%);
}

.rc-cfh__time-sky--night {
    background:
        radial-gradient(ellipse at 50% 105%, rgba(204, 0, 90, .32), transparent 58%),
        linear-gradient(180deg, #05010d 0%, #14051f 55%, #020005 100%);
}

.rc-cfh[data-rc-time="dawn"] .rc-cfh__time-sky--dawn,
.rc-cfh[data-rc-time="day"] .rc-cfh__time-sky--day,
.rc-cfh[data-rc-time="sunset"] .rc-cfh__time-sky--sunset,
.rc-cfh[data-rc-time="night"] .rc-cfh__time-sky--night {
    opacity: 1;
}

.rc-cfh__celestial {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 1.6s ease;
}

.rc-cfh[data-rc-time="day"] .rc-cfh__celestial--day,
.rc-cfh[data-rc-time="night"] .rc-cfh__celestial--night {
    opacity: 1;
}

.rc-cfh__sun {
    position: absolute;
    top: 22px;
    right: 12%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffad24;
    box-shadow:
        0 0 13px 3px rgba(255, 224, 92, .98),
        0 0 34px 10px rgba(255, 158, 32, .72),
        0 0 70px 22px rgba(255, 121, 16, .38);
}

.rc-cfh__moon {
    position: absolute;
    top: 20px;
    right: 13%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f5f0d4;
    box-shadow:
        0 0 13px rgba(239, 237, 211, .78),
        0 0 32px rgba(188, 194, 226, .38);
}

.rc-cfh__moon::after {
    position: absolute;
    top: 7px;
    left: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(166, 163, 155, .22);
    box-shadow: 18px 8px 0 2px rgba(166, 163, 155, .17), 8px 23px 0 1px rgba(166, 163, 155, .18);
    content: "";
}

.rc-cfh__stars {
    position: absolute;
    inset: 8px 3% 58px;
}

.rc-cfh__stars i {
    position: absolute;
    top: var(--star-y);
    left: var(--star-x);
    width: var(--star-size);
    height: var(--star-size);
    border-radius: 50%;
    background: rgba(255, 255, 255, var(--star-alpha));
    box-shadow: 0 0 4px rgba(218, 225, 255, .38);
}

.rc-cfh__stars i:nth-child(5n) {
    background: rgba(255, 242, 190, var(--star-alpha));
}

.rc-cfh__stars i:nth-child(7n) {
    background: rgba(205, 218, 255, var(--star-alpha));
}

.rc-cfh__city-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 28%, rgba(204, 0, 0, .08), transparent 2px),
        radial-gradient(circle at 72% 18%, rgba(139, 0, 204, .12), transparent 2px),
        radial-gradient(circle at 88% 34%, rgba(255, 255, 255, .09), transparent 1px);
    background-size: 173px 131px, 211px 157px, 139px 109px;
    opacity: .75;
    transition: opacity 1.6s ease;
}

.rc-cfh[data-rc-time="dawn"] .rc-cfh__city-glow {
    opacity: .34;
}

.rc-cfh[data-rc-time="day"] .rc-cfh__city-glow {
    opacity: .08;
}

.rc-cfh[data-rc-time="sunset"] .rc-cfh__city-glow {
    opacity: .42;
}

.rc-cfh__city-track {
    position: absolute;
    left: -4%;
    display: block;
    width: 108%;
    height: 260px;
    background-repeat: repeat-x;
    background-position: center bottom;
    will-change: background-position;
    transition: filter 1.6s ease, opacity 1.6s ease;
}

.rc-cfh[data-rc-time="dawn"] .rc-cfh__city-track--rear,
.rc-cfh[data-rc-time="dawn"] .rc-cfh__city-track--middle {
    filter: brightness(1.28) saturate(.86) sepia(.12) hue-rotate(-8deg);
}

.rc-cfh[data-rc-time="day"] .rc-cfh__city-track--rear,
.rc-cfh[data-rc-time="day"] .rc-cfh__city-track--middle {
    filter: brightness(1.58) saturate(.68) contrast(.88) hue-rotate(-12deg);
}

.rc-cfh[data-rc-time="sunset"] .rc-cfh__city-track--rear,
.rc-cfh[data-rc-time="sunset"] .rc-cfh__city-track--middle {
    filter: brightness(1.22) saturate(1.18) sepia(.16) hue-rotate(-12deg);
}

.rc-cfh[data-rc-time="night"] .rc-cfh__city-track--rear,
.rc-cfh[data-rc-time="night"] .rc-cfh__city-track--middle {
    filter: none;
}

.rc-cfh__city-track--rear {
    bottom: 0;
    opacity: .92;
    background-size: auto 430px;
    animation: rc-city-rear-v200 220s linear infinite;
}

.rc-cfh__city-track--middle {
    bottom: 4px;
    opacity: .78;
    background-size: auto 260px;
    animation: rc-city-middle-v200 150s linear infinite;
}

.rc-cfh__city-track--front {
    bottom: -6px;
    opacity: .98;
    background-size: auto 260px;
    animation: rc-city-front-v225 158s linear infinite;
    filter:
        brightness(1.18)
        saturate(1.28)
        contrast(1.04)
        drop-shadow(0 0 5px rgba(255, 0, 100, .22));
}

.rc-cfh__city-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .14), transparent 16%, transparent 84%, rgba(0, 0, 0, .14)),
        radial-gradient(ellipse at center, rgba(0, 0, 0, .02) 20%, rgba(0, 0, 0, .20) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .rc-cfh__city-track {
        animation: none;
    }

    .rc-cfh__city-track--middle,
    .rc-cfh__city-track--front,
    .rc-cfh__city-track--rear {
        transform: none;
    }
}