/* ============================================================
   Infinite Window
   ============================================================ */

.infinite-window {

    --mx: 0;
    --my: 0;

    position: relative;

    width: 100%;
    height: 360px;

    overflow: hidden;

    border-radius: 17px;

    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            #76add2,
            #a6c8df 58%,
            #ddd8ca
        );

    box-shadow:
        0 18px 38px rgba(0, 0, 0, .17),
        0 4px 12px rgba(0, 0, 0, .08),
        inset 0 0 0 1px rgba(255, 255, 255, .23);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    transition:
        background 2.5s ease,
        box-shadow 2.5s ease;
}


/* ============================================================
   Header
   ============================================================ */

.iw-header {

    position: absolute;

    top: 18px;
    left: 19px;
    right: 19px;

    z-index: 200;

    display: flex;
    justify-content: space-between;

    color: rgba(255,255,255,.73);

    font-size: 9px;

    letter-spacing: 2.6px;

    pointer-events: none;
}


.iw-live {

    display: flex;
    align-items: center;
    gap: 8px;
}


.iw-live-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: rgba(255,255,255,.9);

    box-shadow:
        0 0 8px rgba(255,255,255,.65);

    animation:
        iwLivePulse 2.5s ease-in-out infinite;
}


@keyframes iwLivePulse {

    0%,
    100% {
        opacity: .25;
    }

    50% {
        opacity: 1;
    }

}


/* ============================================================
   Sky glow
   ============================================================ */

.iw-sky-glow {

    position: absolute;

    width: 390px;
    height: 180px;

    left: 50%;
    bottom: 55px;

    transform: translateX(-50%);

    z-index: 2;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 204, 150, .32),
            rgba(255, 190, 135, .08) 45%,
            transparent 72%
        );

    filter: blur(15px);

    transition:
        opacity 2.5s ease,
        background 2.5s ease;
}


/* ============================================================
   Stars
   ============================================================ */

.iw-stars {

    position: absolute;
    inset: 0;

    z-index: 3;

    opacity: 0;

    transition: opacity 2s ease;
}


.iw-star {

    position: absolute;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: rgba(255,255,255,.92);

    animation:
        iwTwinkle var(--star-duration)
        ease-in-out infinite;

    animation-delay:
        var(--star-delay);
}


.iw-star.large {

    width: 3px;
    height: 3px;

    box-shadow:
        0 0 7px rgba(255,255,255,.8);
}


@keyframes iwTwinkle {

    0%,
    100% {
        opacity: .15;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.4);
    }

}


/* ============================================================
   Sun / Moon
   ============================================================ */

.iw-celestial {

    position: absolute;

    width: 54px;
    height: 54px;

    z-index: 7;

    border-radius: 50%;

    transform:
        translate(
            calc(var(--mx) * -5px),
            calc(var(--my) * -3px)
        );

    transition:
        top 2s ease,
        left 2s ease,
        right 2s ease,
        opacity 2s ease,
        background 2s ease,
        box-shadow 2s ease,
        transform .3s ease-out;
}


.iw-celestial.sun {

    background:
        radial-gradient(
            circle at 48% 42%,
            #fffbd8 0%,
            #ffd676 42%,
            #f7ae4c 100%
        );

    box-shadow:
        0 0 30px rgba(255,208,117,.48),
        0 0 70px rgba(255,190,90,.2);
}


.iw-celestial.moon {

    background:
        radial-gradient(
            circle at 36% 32%,
            #fff,
            #e6ebef 57%,
            #bbc6d1 100%
        );

    box-shadow:
        0 0 20px rgba(225,235,255,.48),
        0 0 55px rgba(190,215,255,.18);
}


/* ============================================================
   Clouds
   ============================================================ */

.iw-cloud-layer {

    position: absolute;
    inset: 0;

    z-index: 12;

    pointer-events: none;

    transform:
        translate(
            calc(var(--mx) * 3px),
            calc(var(--my) * 1px)
        );

    transition:
        opacity 2s ease,
        transform .35s ease-out;
}


.iw-cloud {

    position: absolute;

    height: 20px;

    border-radius: 40px;

    background: rgba(255,255,255,.18);

    filter: blur(.3px);

    transition:
        background 2s ease,
        opacity 2s ease;
}


.iw-cloud::before,
.iw-cloud::after,
.iw-cloud span {

    content: "";

    position: absolute;

    border-radius: 50%;

    background: inherit;
}


.iw-cloud::before {

    width: 35px;
    height: 35px;

    top: -17px;
    left: 15px;
}


.iw-cloud::after {

    width: 46px;
    height: 46px;

    top: -24px;
    left: 44px;
}


.iw-cloud span {

    width: 31px;
    height: 31px;

    top: -12px;
    right: 8px;
}


.iw-cloud-1 {

    width: 115px;

    top: 110px;

    animation:
        iwCloudMove1 45s linear infinite;
}


.iw-cloud-2 {

    width: 85px;

    top: 165px;

    opacity: .6;

    transform: scale(.75);

    animation:
        iwCloudMove2 62s linear infinite;

    animation-delay: -29s;
}


.iw-cloud-3 {

    width: 130px;

    top: 72px;

    opacity: .38;

    transform: scale(.55);

    animation:
        iwCloudMove3 73s linear infinite;

    animation-delay: -42s;
}


.iw-cloud-4 {

    width: 145px;

    top: 138px;

    opacity: .35;

    transform: scale(.62);

    animation:
        iwCloudMove4 53s linear infinite;

    animation-delay: -17s;
}


@keyframes iwCloudMove1 {

    from {
        left: -160px;
    }

    to {
        left: 430px;
    }

}


@keyframes iwCloudMove2 {

    from {
        left: -140px;
    }

    to {
        left: 430px;
    }

}


@keyframes iwCloudMove3 {

    from {
        left: -170px;
    }

    to {
        left: 430px;
    }

}


@keyframes iwCloudMove4 {

    from {
        left: -180px;
    }

    to {
        left: 430px;
    }

}


/* ============================================================
   Mountain layers
   ============================================================ */

.iw-mountains {

    position: absolute;

    left: -8%;

    width: 116%;

    pointer-events: none;

    transition:
        filter 2s ease,
        opacity 2s ease;
}


.iw-mountains svg {

    width: 100%;
    height: 100%;
}


.iw-mountains-back {

    bottom: 70px;

    height: 150px;

    z-index: 22;

    transform:
        translate(
            calc(var(--mx) * -2px),
            calc(var(--my) * -1px)
        );
}


.iw-mountains-back path {

    fill: #646d79;

    transition: fill 2.5s ease;
}


.iw-mountains-mid {

    bottom: 33px;

    height: 164px;

    z-index: 25;

    transform:
        translate(
            calc(var(--mx) * -5px),
            calc(var(--my) * -2px)
        );
}


.iw-mountains-mid path {

    fill: #293240;

    transition: fill 2.5s ease;
}


.iw-mountains-front {

    bottom: -3px;

    height: 150px;

    z-index: 30;

    transform:
        translate(
            calc(var(--mx) * -8px),
            calc(var(--my) * -3px)
        );
}


.iw-mountains-front path {

    fill: #111924;

    transition: fill 2.5s ease;
}


/* ============================================================
   Landscape fog
   ============================================================ */

.iw-landscape-fog {

    position: absolute;

    left: -15%;

    bottom: 50px;

    width: 130%;
    height: 95px;

    z-index: 27;

    opacity: .42;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(215,225,230,.12),
            rgba(215,225,230,.18),
            transparent
        );

    filter: blur(10px);

    animation:
        iwFogDrift 14s ease-in-out
        infinite alternate;

    transition: opacity 2s ease;
}


@keyframes iwFogDrift {

    from {
        transform: translateX(-12px);
    }

    to {
        transform: translateX(18px);
    }

}


/* ============================================================
   Ground
   ============================================================ */

.iw-ground {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 74px;

    z-index: 45;

    background:
        linear-gradient(
            180deg,
            #111821,
            #090d12
        );

    transition: background 2s ease;
}


/* ============================================================
   Tiny lights
   ============================================================ */

.iw-light {

    position: absolute;

    z-index: 48;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #ffd77d;

    box-shadow:
        0 0 6px rgba(255,208,110,.8);

    animation:
        iwLightFlicker 4s ease-in-out infinite;
}


.iw-light-1 {
    left: 13%;
    bottom: 67px;
}

.iw-light-2 {
    left: 27%;
    bottom: 60px;
    animation-delay: -1.7s;
}

.iw-light-3 {
    left: 59%;
    bottom: 67px;
    animation-delay: -2.9s;
}

.iw-light-4 {
    left: 76%;
    bottom: 58px;
    animation-delay: -.7s;
}

.iw-light-5 {
    left: 87%;
    bottom: 64px;
    animation-delay: -3.4s;
}


@keyframes iwLightFlicker {

    0%,
    100% {
        opacity: .18;
    }

    50% {
        opacity: .95;
    }

}


/* ============================================================
   Weather layer
   ============================================================ */

.iw-weather-layer {

    position: absolute;

    inset: 0;

    z-index: 60;

    overflow: hidden;

    pointer-events: none;
}


/* ============================================================
   Rain
   ============================================================ */

.iw-rain {

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: opacity 1.5s ease;
}


.iw-raindrop {

    position: absolute;

    top: -45px;

    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(210,230,255,.72)
        );

    transform: rotate(8deg);

    animation:
        iwRainFall linear infinite;
}


@keyframes iwRainFall {

    from {

        transform:
            translate3d(0,-45px,0)
            rotate(8deg);

    }

    to {

        transform:
            translate3d(-45px,440px,0)
            rotate(8deg);

    }

}


/* ============================================================
   Snow
   ============================================================ */

.iw-snow {

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: opacity 1.5s ease;
}


.iw-snowflake {

    position: absolute;

    top: -15px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.88);

    box-shadow:
        0 0 5px rgba(255,255,255,.4);

    animation:
        iwSnowFall linear infinite;
}


@keyframes iwSnowFall {

    0% {

        transform:
            translate3d(0,-20px,0);

    }

    50% {

        transform:
            translate3d(15px,190px,0);

    }

    100% {

        transform:
            translate3d(-8px,410px,0);

    }

}


/* ============================================================
   Weather fog
   ============================================================ */

.iw-weather-fog {

    position: absolute;

    left: -25%;
    top: 55px;

    width: 150%;
    height: 255px;

    opacity: 0;

    background:
        radial-gradient(
            ellipse,
            rgba(225,232,235,.55),
            rgba(210,220,225,.26) 45%,
            transparent 76%
        );

    filter: blur(20px);

    animation:
        iwWeatherFog 11s ease-in-out
        infinite alternate;

    transition: opacity 2s ease;
}


@keyframes iwWeatherFog {

    from {
        transform: translateX(-18px);
    }

    to {
        transform: translateX(20px);
    }

}


/* ============================================================
   Lightning
   ============================================================ */

.iw-lightning {

    position: absolute;

    inset: 0;

    opacity: 0;

    background:
        rgba(225,238,255,.8);

    mix-blend-mode: screen;
}


.iw-lightning.flash {

    animation:
        iwLightningFlash .7s ease-out;
}


@keyframes iwLightningFlash {

    0% {
        opacity: 0;
    }

    8% {
        opacity: .78;
    }

    14% {
        opacity: .05;
    }

    23% {
        opacity: .58;
    }

    34% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }

}


/* ============================================================
   Shooting star
   ============================================================ */

.iw-shooting-star {

    position: absolute;

    top: 72px;
    left: -120px;

    z-index: 15;

    width: 95px;
    height: 1px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.95)
        );

    filter:
        drop-shadow(
            0 0 3px rgba(255,255,255,.7)
        );

    transform: rotate(-18deg);
}


.iw-shooting-star.active {

    animation:
        iwShootingStar 1.25s ease-out;
}


@keyframes iwShootingStar {

    0% {

        left: -100px;
        top: 65px;

        opacity: 0;

    }

    15% {
        opacity: 1;
    }

    100% {

        left: 430px;
        top: 160px;

        opacity: 0;

    }

}


/* ============================================================
   Glass
   ============================================================ */

.iw-glass {

    position: absolute;

    inset: 0;

    z-index: 150;

    pointer-events: none;

    border-radius: inherit;

    box-shadow:
        inset 0 0 55px rgba(0,0,0,.20),
        inset 0 0 0 1px rgba(255,255,255,.16);
}


.iw-glass::before {

    content: "";

    position: absolute;

    width: 130px;
    height: 510px;

    top: -80px;
    left: -80px;

    transform: rotate(19deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012),
            transparent
        );
}


/* ============================================================
   Footer
   ============================================================ */

.iw-footer {

    position: absolute;

    left: 19px;
    right: 19px;
    bottom: 15px;

    z-index: 220;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    pointer-events: none;
}


/* LEFT */

.iw-time {

    color: rgba(255,255,255,.82);

    font-size: 23px;

    line-height: 1;

    letter-spacing: -1px;
}


.iw-date {

    margin-top: 7px;

    color: rgba(255,255,255,.47);

    font-size: 8px;

    letter-spacing: 1.7px;
}


/* RIGHT */

.iw-weather-info {

    text-align: right;
}


.iw-weather-main {

    color: rgba(255,255,255,.82);

    font-size: 17px;

    line-height: 1;
}


.iw-weather-description {

    margin-top: 6px;

    color: rgba(255,255,255,.52);

    font-size: 8px;

    letter-spacing: 1.5px;
}


.iw-location {

    margin-top: 4px;

    max-width: 145px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: rgba(255,255,255,.34);

    font-size: 7px;

    letter-spacing: 1.3px;
}


/* ============================================================
   Loading
   ============================================================ */

.iw-loading {

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 300;

    transform: translate(-50%, -50%);

    color: rgba(255,255,255,.55);

    font-size: 8px;

    letter-spacing: 2px;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}


.iw-loading.hidden {

    opacity: 0;
    visibility: hidden;
}


.iw-loading span {

    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 9px;

    border-radius: 50%;

    background: rgba(255,255,255,.8);

    animation:
        iwLoadingBlink 1s ease-in-out infinite;
}


@keyframes iwLoadingBlink {

    50% {
        opacity: .15;
    }

}


/* ============================================================
   TIME SYSTEM
   ============================================================ */


/* ------------------------------------------------------------
   05:00–07:30
   EARLY MORNING
   ------------------------------------------------------------ */

.infinite-window.time-dawn {

    background:
        linear-gradient(
            180deg,
            #5b6f95 0%,
            #a28c9e 38%,
            #e49b82 68%,
            #f2c693 100%
        );
}


.time-dawn .iw-stars {

    opacity: .3;
}


.time-dawn .iw-sky-glow {

    opacity: .8;

    background:
        radial-gradient(
            ellipse,
            rgba(255,179,105,.55),
            rgba(255,150,110,.15) 45%,
            transparent 72%
        );
}


.time-dawn .iw-mountains-back path {
    fill: #606575;
}

.time-dawn .iw-mountains-mid path {
    fill: #363a49;
}


/* ------------------------------------------------------------
   07:30–11:30
   MORNING
   ------------------------------------------------------------ */

.infinite-window.time-morning {

    background:
        linear-gradient(
            180deg,
            #77b5df 0%,
            #afd4e9 48%,
            #e4e1d3 100%
        );
}


.time-morning .iw-stars {
    opacity: 0;
}


.time-morning .iw-sky-glow {
    opacity: .35;
}


/* ------------------------------------------------------------
   11:30–14:00
   NOON
   ------------------------------------------------------------ */

.infinite-window.time-noon {

    background:
        linear-gradient(
            180deg,
            #64afe2 0%,
            #99d0ec 55%,
            #dce9e5 100%
        );
}


.time-noon .iw-stars {
    opacity: 0;
}


.time-noon .iw-sky-glow {
    opacity: .18;
}


/* ------------------------------------------------------------
   14:00–17:30
   AFTERNOON
   ------------------------------------------------------------ */

.infinite-window.time-afternoon {

    background:
        linear-gradient(
            180deg,
            #70a9d3 0%,
            #abcbe0 52%,
            #ded8c9 100%
        );
}


.time-afternoon .iw-stars {
    opacity: 0;
}


/* ------------------------------------------------------------
   17:30–20:30
   EVENING
   ------------------------------------------------------------ */

.infinite-window.time-evening {

    background:
        linear-gradient(
            180deg,
            #384a73 0%,
            #75647d 38%,
            #c37973 67%,
            #eeb175 100%
        );
}


.time-evening .iw-stars {
    opacity: .35;
}


.time-evening .iw-sky-glow {

    opacity: 1;

    background:
        radial-gradient(
            ellipse,
            rgba(255,165,90,.6),
            rgba(255,120,85,.18) 45%,
            transparent 72%
        );
}


/* ------------------------------------------------------------
   20:30–05:00
   NIGHT
   ------------------------------------------------------------ */

.infinite-window.time-night {

    background:
        linear-gradient(
            180deg,
            #06101f 0%,
            #101d34 48%,
            #28334b 75%,
            #443d4c 100%
        );
}


.time-night .iw-stars {
    opacity: 1;
}


.time-night .iw-sky-glow {
    opacity: .07;
}


.time-night .iw-cloud {

    background:
        rgba(180,195,215,.09);
}


.time-night .iw-mountains-back path {
    fill: #30394a;
}

.time-night .iw-mountains-mid path {
    fill: #1b2230;
}


/* ============================================================
   WEATHER SYSTEM
   ============================================================ */


/* CLEAR */

.weather-clear .iw-cloud-layer {
    opacity: .35;
}


/* PARTLY CLOUDY */

.weather-partly-cloudy .iw-cloud-layer {
    opacity: .75;
}


/* CLOUDY */

.weather-cloudy .iw-cloud-layer {
    opacity: 1;
}


.weather-cloudy .iw-cloud {

    background:
        rgba(215,220,225,.31);
}


.weather-cloudy .iw-celestial {
    opacity: .5;
}


.weather-cloudy {

    filter:
        saturate(.83)
        brightness(.94);
}


/* OVERCAST */

.weather-overcast {

    filter:
        saturate(.55)
        brightness(.82);
}


.weather-overcast .iw-cloud {

    background:
        rgba(190,198,205,.48);
}


.weather-overcast .iw-celestial {
    opacity: .16;
}


/* FOG */

.weather-fog {

    filter:
        saturate(.5)
        brightness(.9);
}


.weather-fog .iw-weather-fog {
    opacity: .88;
}


.weather-fog .iw-celestial {
    opacity: .17;
}


/* RAIN */

.weather-rain {

    filter:
        saturate(.62)
        brightness(.75);
}


.weather-rain .iw-rain {
    opacity: 1;
}


.weather-rain .iw-cloud {

    background:
        rgba(145,155,168,.55);
}


.weather-rain .iw-cloud-layer {
    opacity: 1;
}


.weather-rain .iw-celestial {
    opacity: .08;
}


/* HEAVY RAIN */

.weather-heavy-rain {

    filter:
        saturate(.5)
        brightness(.62);
}


.weather-heavy-rain .iw-rain {
    opacity: 1;
}


.weather-heavy-rain .iw-cloud {

    background:
        rgba(115,125,140,.67);
}


.weather-heavy-rain .iw-celestial {
    opacity: 0;
}


/* SNOW */

.weather-snow {

    filter:
        saturate(.55)
        brightness(.93);
}


.weather-snow .iw-snow {
    opacity: 1;
}


.weather-snow .iw-cloud {

    background:
        rgba(215,220,225,.48);
}


.weather-snow .iw-mountains-back path {
    fill: #89929d;
}


.weather-snow .iw-mountains-mid path {
    fill: #505965;
}


/* THUNDER */

.weather-thunder {

    filter:
        saturate(.43)
        brightness(.55);
}


.weather-thunder .iw-rain {
    opacity: 1;
}


.weather-thunder .iw-cloud {

    background:
        rgba(90,100,115,.76);
}


.weather-thunder .iw-celestial {
    opacity: 0;
}


/* ============================================================
   Mobile / accessibility
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .infinite-window *,
    .infinite-window *::before,
    .infinite-window *::after {

        animation-duration: .001ms !important;

        animation-iteration-count: 1 !important;

    }

}