/* Independent painted sky props. The lettering is real text, not baked into the artwork. */
.sky-announcement{position:absolute;z-index:1;line-height:1.15}
.sky-announcement img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.sky-flight{display:block;color:var(--ink);text-decoration:none;min-height:64px}
.flight-drift{position:relative;display:block;width:100%;height:100%;animation:flight-drift 13s ease-in-out infinite alternate;transform-origin:18% 50%}
.tow-plane{position:absolute;left:0;top:0;width:35%!important}
.tow-cord{position:absolute;left:34%;top:20%;width:10%;height:32%;overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.tow-banner{position:absolute;left:43%;top:14%;width:57%;container-type:inline-size;animation:banner-flutter 3.8s ease-in-out infinite alternate;transform-origin:0 50%}
/* Lettering is sized in banner widths (cqw) so it always fits the cloth, and multiplied into it like paint.
   The box stays inside the cream field: clear of the grommet strip on the left and the tail notch on the right. */
.banner-lettering{position:absolute;inset:21% 16% 14% 9%;gap:.8cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;white-space:nowrap;mix-blend-mode:multiply;transform:rotate(-.75deg)}
.banner-lettering>span{font-size:2.8cqw;font-weight:600;line-height:1;text-transform:uppercase;letter-spacing:.12em;opacity:.8}
.banner-lettering strong{font-family:var(--font-hand);font-weight:700;font-size:8.6cqw;line-height:.95;transform:rotate(-1deg) translateX(1%)}
.banner-clock{display:flex;gap:2.2cqw;align-items:baseline}
/* Each number gets a fixed slot so the ticking seconds don't make the row jiggle. */
.banner-clock>span{display:inline-flex;align-items:baseline;font-size:.62em;opacity:.85}
.banner-clock b{display:inline-block;min-width:1.05em;text-align:right;font-weight:700;font-size:1.6em;line-height:.9;margin-right:.08em}
.banner-clock>span:first-child b{min-width:0}
.sky-flight:hover .flight-drift,.sky-flight:hover .tow-banner{animation-play-state:paused}
.motion-paused .flight-drift,.motion-paused .tow-banner{animation-play-state:paused}
@keyframes flight-drift{from{transform:translate(9px,-2px) rotate(-.4deg)}to{transform:translate(-9px,3px) rotate(.5deg)}}
@keyframes banner-flutter{from{transform:rotate(-1deg) skewY(-.6deg)}to{transform:rotate(1deg) skewY(.6deg)}}
.world:not(.is-laid-out) .sky-announcement{position:relative;margin:20px auto;width:240px}
.world:not(.is-laid-out) .sky-flight{height:80px;width:340px;max-width:90%}
@media(prefers-reduced-motion:reduce){.flight-drift,.tow-banner{animation:none}}