/*
 * Caledonian Dandie scrolling photo banner
 */

/*
 * Caledonian Dandie scrolling photo banner
 */

.cddtc-photo-banner {
    position: relative;
    display: block;
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-radius: 10px;
    background: #222;
    text-decoration: none;
    cursor: pointer;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 5%,
        black 95%,
        transparent
    );

    mask-image: linear-gradient(
        to right,
        transparent,
        black 5%,
        black 95%,
        transparent
    );
}

.cddtc-photo-banner-track {
    display: flex;
    width: max-content;
    height: 120px;
    animation: cddtc-photo-banner-scroll 40s linear infinite;
    will-change: transform;
}

.cddtc-photo-banner-group {
    display: flex;
    flex-shrink: 0;
    height: 150px;
}

.cddtc-photo-banner-image {
    display: block;
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    transition:
        filter 0.25s ease,
        opacity 0.25s ease;
}

/*
 * Pause the banner when hovered or keyboard-focused.
 */
.cddtc-photo-banner:hover .cddtc-photo-banner-track,
.cddtc-photo-banner:focus .cddtc-photo-banner-track,
.cddtc-photo-banner:focus-visible .cddtc-photo-banner-track {
    animation-play-state: paused;
}

/*
 * Grey and darken the photographs.
 * There is deliberately no enlargement or movement.
 */
.cddtc-photo-banner:hover .cddtc-photo-banner-image,
.cddtc-photo-banner:focus .cddtc-photo-banner-image,
.cddtc-photo-banner:focus-visible .cddtc-photo-banner-image {
    filter: grayscale(100%) brightness(42%);
}

/*
 * Hover message.
 */
.cddtc-photo-banner-message {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    color: #fff;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);

    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.cddtc-photo-banner:hover .cddtc-photo-banner-message,
.cddtc-photo-banner:focus .cddtc-photo-banner-message,
.cddtc-photo-banner:focus-visible .cddtc-photo-banner-message {
    opacity: 1;
}

/*
 * Each group contains the same images, so moving by one
 * complete group creates an apparently endless loop.
 */
@keyframes cddtc-photo-banner-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/*
 * Respect visitors who have disabled animations.
 */
@media (prefers-reduced-motion: reduce) {
    .cddtc-photo-banner-track {
        animation: none;
    }
}