/* Seasonal line drawings stay in the empty sky beside the building. */
.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; }
}