/* Footer logo skeleton loader.
   Shared by both the Bootstrap 4 footer (Views/Bootstrap4/FooterView.php) and the
   Bootstrap 2 footer (Views/Bootstrap2/Footer.php). Each logo column shows a
   placeholder until JS reveals them all together. Every placeholder uses the same
   fixed height so the loading row is even regardless of the (varying) logo sizes,
   and the real logos fade in on reveal so the swap is not an abrupt block. */
.footer-logo-loading {
    position: relative;
    height: 40px;
}

/* Take the real logo out of flow while loading so its natural height can't make
   the placeholders uneven. */
.footer-logo-loading > * {
    display: none;
}

.footer-logo-loading::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    right: 15px;
    border-radius: 0.25rem;
    background-color: rgba(0, 0, 0, 0.05);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.4) 40px, rgba(255, 255, 255, 0) 80px);
    background-size: 600px 100%;
    background-repeat: no-repeat;
    animation: footer-logo-shimmer 1.5s infinite linear;
}

@keyframes footer-logo-shimmer {
    0% { background-position: -300px 0; }
    100% { background-position: 300px 0; }
}

/* Gentle fade so the logos ease in when the skeleton is removed instead of popping. */
.footer-logo-loaded img {
    animation: footer-logo-fade-in 0.35s ease-in;
}

@keyframes footer-logo-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Bootstrap 2 footer only: spacing between the regional RAP logo rows. */
.regional-rap-rows {
    margin-bottom: 10px;
}