/* Add after the existing footer refinement stylesheet. */
.footer-bar {
    /* Move the weather/date boundary about 9 CSS px to the right at 959px. */
    grid-template-columns: minmax(0,8fr) minmax(0,55fr) minmax(0,10fr) minmax(0,20fr) minmax(0,7fr);
}
.footer-bar .weather { padding: 0 .5vw; }
.footer-bar .weather-line { font-size: 3.5vh; gap: .4vw; }
.footer-bar .weather-line img { width: 5vh; height: 5vh; }
.footer-bar .astro { height: 4.1vh; gap: .7vw; }
.footer-bar .astro img, .footer-bar .astro svg { width: 4.1vh; height: 4.1vh; }
.footer-bar .date strong { font-size: 5.2vh; white-space: nowrap; }
.footer-bar .date span { font-size: 2.6vh; margin-top: .6vh; }

/* A brief hop and wiggle every 30s; the logo rests between hops. */
.footer-bar .tv-brand img {
    transform-origin: 50% 75%;
    animation: rossopepe-logo-hop 30s linear 30s infinite;
}
@keyframes rossopepe-logo-hop {
    0%, 3.6%, 100% { transform: translateY(0) rotate(0deg); }
    .7% { transform: translateY(-.5vh) rotate(-4deg); }
    1.5% { transform: translateY(-.2vh) rotate(4deg); }
    2.2% { transform: translateY(0) rotate(-2deg); }
    2.9% { transform: translateY(-.15vh) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
    .footer-bar .tv-brand img { animation: none; }
}