/* Saisonale Kopfzeile. Ohne winter-home gilt die Standarddarstellung. */
.light-home .winter-brand {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

.light-home .winter-brand > img {
    display: block;
}

.light-home .winter-sleigh,
.light-home .winter-credit,
.light-home .winter-snow {
    display: none;
}

.light-home > header {
    position: relative;
}

/* Use the existing gap below the navigation without adding layout height. */
.light-home.winter-home .winter-sleigh {
    --flight-duration: 26s;
    --flight-height: calc(clamp(1.75rem, 3.5vw, 3rem) + 2px);
    --sleigh-width: calc((var(--flight-height) - 4px) * 6.2055);
    position: absolute;
    top: calc(100% - 7px);
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: var(--flight-height);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    /* One shared window ends the snowfall and passage at exactly the same time. */
    animation: kituwi-winter-window var(--flight-duration) linear .4s 1 both;
}

.light-home .winter-sleigh-flight {
    position: absolute;
    inset: 0;
    animation: kituwi-sleigh-crossing var(--flight-duration) linear .4s 1 both;
}

.light-home .winter-sleigh-art {
    position: absolute;
    right: 100%;
    bottom: 2px;
    display: block;
    width: var(--sleigh-width);
    max-width: none;
    height: auto;
    animation: kituwi-sleigh-bob 6s ease-in-out 5;
}

/* Adapted from Google Santa Tracker, Copyright 2020 Google LLC, Apache-2.0.
   Original rhythm, quarter amplitude: static/src/elements/santa-santa.scss.
   Full upstream license: docs/licenses/google-santa-tracker.txt. */
@keyframes kituwi-sleigh-bob {
    0%, 100% { transform: translateY(0); }
    10%, 80% { transform: translateY(-.75px); }
    20%, 90% { transform: translateY(.75px); }
    30% { transform: translateY(-.5px); }
    40% { transform: translateY(.5px); }
    55% { transform: translateY(-1.5px); }
    65% { transform: translateY(1.75px); }
}

.light-home.winter-home .winter-credit {
    display: block;
    margin: .5rem 0 0;
    font-size: .75rem;
}

.light-home .winter-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .15em;
}

@media (max-width: 959px) {
    .light-home.winter-home .winter-sleigh {
        --flight-height: calc(clamp(1.75rem, 3.5vw, 3rem) + 10px);
        top: calc(100% - 14px);
    }
}

@media (max-width: 760px) {
    .light-home.winter-home .winter-sleigh {
        --flight-height: 34px;
    }
}

@media (max-width: 680px) {
    .light-home.winter-home .winter-sleigh {
        /* Mobile passage: 1.5 times the desktop speed (26s / 1.5). */
        --flight-duration: 17.333333s;
        --flight-height: 42px;
        top: calc(100% - 22px);
    }

    .light-home .winter-snow .winter-flake:nth-child(even) {
        display: none;
    }
}

@keyframes kituwi-winter-window {
    0% {
        visibility: visible;
        opacity: 0;
    }
    3%, 96% {
        opacity: 1;
    }
    100% {
        visibility: hidden;
        opacity: 0;
    }
}

@keyframes kituwi-sleigh-crossing {
    0% {
        transform: translate3d(-1px, 0, 0);
    }
    100% {
        transform: translate3d(calc(100% + var(--sleigh-width)), 0, 0);
    }
}

.light-home.winter-home .winter-sleigh > .winter-snow {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.light-home .winter-sleigh .winter-flake {
    position: absolute;
    top: 0;
    left: var(--x);
    width: var(--size, 10px);
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%239bb3bf' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M3.34 7l17.32 10M3.34 17L20.66 7M9 4l3 3 3-3M9 20l3-3 3 3M3.57 10.6l4.1-1.1-1.1-4.1M17.43 18.6l-1.1-4.1 4.1-1.1M3.57 13.4l4.1 1.1-1.1 4.1M17.43 5.4l-1.1 4.1 4.1 1.1'/%3E%3C/g%3E%3C/svg%3E") center top / var(--size, 10px) var(--size, 10px) no-repeat;
    opacity: 0;
    /* Finite particle cycles; the shared window hides them when Santa exits. */
    animation: kituwi-lane-snow 5s linear var(--delay, 0s) 6 both;
}

@keyframes kituwi-lane-snow {
    0% {
        opacity: 0;
        transform: translate3d(0, -16px, 0) rotate(0deg);
    }
    18%, 60% {
        opacity: .65;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift, 5px), 100%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .light-home.winter-home .winter-sleigh {
        display: none;
        animation: none;
    }

    .light-home .winter-sleigh-flight,
    .light-home .winter-sleigh-art,
    .light-home .winter-sleigh .winter-flake {
        animation: none;
    }
}

@media print {
    .light-home.winter-home .winter-sleigh {
        display: none;
    }
}