.logo-box {
   height: 120px;
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.logo-box:hover {
    transform: translateY(-5px);
}

.logo-box img {
    max-height: 100%;
}
/* Continuous auto-scroll — pure CSS transform, no JS carousel library, to
   keep this "subtle and not impact performance" per the block's own notes.
   The track is rendered twice in the markup; animating exactly -50% of its
   own (doubled) width always lands on an identical frame, looping seamlessly. */
.logo-carousel {
    width: 100%;
    overflow: hidden;
}

.logo-carousel__track {
    width: max-content;
    animation: logo-carousel-scroll 90s linear infinite;
}

.logo-carousel__item {
    flex: 0 0 auto;
    width: 200px;
    padding: 0 12px;
}

@keyframes logo-carousel-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

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

/* Hover always pauses, regardless of the toggle button's own state.
.logo-carousel:hover .logo-carousel__track {
    animation-play-state: paused;
} */

/* CSS-only pause/play toggle — no JS needed. The checkbox is visually
   hidden; the label acts as the clickable button, and :checked drives both
   the animation state and which of the two text labels shows. */
.logo-carousel__pause-toggle:checked ~ .logo-carousel__track {
    animation-play-state: paused;
}

/* Icon-only button — same static pause-icon treatment as the hero's video
   toggle (assets/images/pause.svg shown regardless of state). Both labels
   are screen-reader-only text (.visually-hidden); this display swap controls
   which one is actually in the accessibility tree at a given time. */
.logo-carousel__pause-btn {
    display: inline-block;
    width: 44px;
    height: 44px;
    background-color: transparent;
    background-image: url("../../assets/images/pause.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.logo-carousel__pause-btn:hover {
    opacity: 0.8;
}

.logo-carousel__pause-btn:active {
    transform: scale(0.92);
}

/* Real keyboard-focus indicator: the hidden checkbox is what actually
   receives focus on Tab, not this <label> — :focus on the label itself
   never matches via keyboard, since labels aren't in the tab order. */
.logo-carousel__pause-toggle:focus-visible ~ .logo-carousel__pause-btn {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 50%;
}

.logo-carousel__play-label {
    display: none;
}

.logo-carousel__pause-toggle:checked ~ .logo-carousel__pause-btn .logo-carousel__pause-label {
    display: none;
}

.logo-carousel__pause-toggle:checked ~ .logo-carousel__pause-btn .logo-carousel__play-label {
    display: inline;
}