/* Seasonal line drawings stay in the empty sky beside the building (see seasonal.js for the dates). */
.section-open {
    position: relative;
    isolation: isolate;
}

.seasonal-balloons {
    position: absolute;
    inset: 0 0 auto;
    height: 360px;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: -1;
    color: var(--red);
}

.balloon-definitions {
    position: absolute;
}

.seasonal-balloon {
    position: absolute;
    height: auto;
    overflow: visible;
    opacity: .42;
    transform-origin: 50% 80%;
    animation: balloon-drift 19s ease-in-out infinite alternate;
}

.balloon-near-left {
    width: 96px;
    left: max(3%, calc(50% - 490px));
    top: 122px;
    animation-delay: -7s;
}

.balloon-far-left {
    width: 49px;
    left: max(17%, calc(50% - 335px));
    top: 42px;
    opacity: .26;
    animation-duration: 23s;
    animation-delay: -13s;
}

.balloon-near-right {
    width: 110px;
    right: max(4%, calc(50% - 485px));
    top: 56px;
    animation-duration: 22s;
    animation-delay: -16s;
}

.balloon-far-right {
    width: 54px;
    right: max(17%, calc(50% - 330px));
    top: 230px;
    opacity: .26;
    animation-duration: 25s;
    animation-delay: -4s;
}

@keyframes balloon-drift {
    from { transform: translate(0, 0) rotate(-3deg); }
    to { transform: translate(7px, -14px) rotate(3deg); }
}

@media (max-width: 900px) {
    .balloon-near-left { left: 4%; width: 66px; top: 100px; }
    .balloon-near-right { right: 4%; width: 72px; top: 56px; }
    .balloon-far-left,
    .balloon-far-right { display: none; }
}

@media (max-width: 600px) {
    .balloon-near-left { left: 3%; width: 36px; top: 26px; opacity: .34; }
    .balloon-near-right { right: 4%; width: 43px; top: 36px; opacity: .34; }
}

@media (prefers-reduced-motion: reduce) {
    .seasonal-balloon { animation: none; }
}

@media print {
    .seasonal-balloons { display: none; }
}

/* November leaves fall through the same strip of sky, in different columns from the balloons.
 * The strip fades out at the top and bottom so a leaf drifts in and out instead of popping. */
.seasonal-leaves {
    position: absolute;
    inset: 0 0 auto;
    height: 380px;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: -1;
    color: var(--red);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60px, #000 calc(100% - 110px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 60px, #000 calc(100% - 110px), transparent);
}

.leaf-definitions {
    position: absolute;
}

.seasonal-leaf {
    position: absolute;
    top: 0;
    height: auto;
    overflow: visible;
    opacity: .42;
    animation: leaf-fall 21s ease-in-out infinite;
    --fall: 472px;
}

/* A falling leaf rocks side to side and slows at the end of each swing. */
@keyframes leaf-fall {
    0% { transform: translate(0, -80px) rotate(-18deg); }
    20% { transform: translate(24px, calc(var(--fall) * 0.2 - 80px)) rotate(26deg); }
    40% { transform: translate(-2px, calc(var(--fall) * 0.4 - 80px)) rotate(-12deg); }
    60% { transform: translate(22px, calc(var(--fall) * 0.6 - 80px)) rotate(34deg); }
    80% { transform: translate(0, calc(var(--fall) * 0.8 - 80px)) rotate(-4deg); }
    100% { transform: translate(20px, calc(var(--fall) - 80px)) rotate(30deg); }
}

@keyframes leaf-fall-mirror {
    0% { transform: translate(0, -80px) rotate(18deg); }
    20% { transform: translate(-24px, calc(var(--fall) * 0.2 - 80px)) rotate(-26deg); }
    40% { transform: translate(2px, calc(var(--fall) * 0.4 - 80px)) rotate(12deg); }
    60% { transform: translate(-22px, calc(var(--fall) * 0.6 - 80px)) rotate(-34deg); }
    80% { transform: translate(0, calc(var(--fall) * 0.8 - 80px)) rotate(4deg); }
    100% { transform: translate(-20px, calc(var(--fall) - 80px)) rotate(-30deg); }
}

.leaf-near-left {
    width: 44px;
    left: max(5%, calc(50% - 455px));
    animation-delay: -4s;
    --rest: translate(0, 150px) rotate(18deg);
}

.leaf-mid-left {
    width: 34px;
    left: max(11%, calc(50% - 385px));
    animation-name: leaf-fall-mirror;
    animation-duration: 24s;
    animation-delay: -15s;
    --rest: translate(0, 260px) rotate(-24deg);
}

.leaf-far-left {
    width: 26px;
    left: max(19%, calc(50% - 292px));
    opacity: .26;
    animation-duration: 27s;
    animation-delay: -9s;
    --rest: translate(0, 90px) rotate(30deg);
}

.leaf-near-right {
    width: 46px;
    right: max(6%, calc(50% - 440px));
    animation-name: leaf-fall-mirror;
    animation-duration: 22s;
    animation-delay: -11s;
    --rest: translate(0, 200px) rotate(-14deg);
}

.leaf-mid-right {
    width: 32px;
    right: max(2%, calc(50% - 525px));
    animation-duration: 25s;
    animation-delay: -19s;
    --rest: translate(0, 110px) rotate(22deg);
}

.leaf-far-right {
    width: 24px;
    right: max(19%, calc(50% - 275px));
    opacity: .26;
    animation-name: leaf-fall-mirror;
    animation-duration: 29s;
    animation-delay: -2s;
    --rest: translate(0, 240px) rotate(-30deg);
}

@media (max-width: 900px) {
    .leaf-near-left { left: 3%; width: 36px; }
    .leaf-mid-left { left: 13%; width: 28px; }
    .leaf-near-right { right: 4%; width: 38px; }
    .leaf-mid-right { right: 14%; width: 26px; }
    .leaf-far-left,
    .leaf-far-right { display: none; }
}

/* Phones: the building fills the width, so the leaves keep to the sky at the edges and make a
 * shorter drop with softer fades. */
@media (max-width: 600px) {
    .seasonal-leaves {
        height: 200px;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 60px), transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 60px), transparent);
    }
    .seasonal-leaf { --fall: 290px; opacity: .38; }
    .leaf-near-left { left: 2%; width: 28px; }
    .leaf-near-right { right: 3%; width: 30px; }
    .leaf-mid-right { right: 15%; width: 20px; opacity: .28; }
    .leaf-mid-left { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .seasonal-leaf { animation: none; transform: var(--rest); }
}

@media print {
    .seasonal-leaves { display: none; }
}