.yukyu-loop-slider {
    --yukyu-loop-ink: var(--color-font-light);
    --yukyu-loop-caption: var(--color-font-light);
    color: var(--yukyu-loop-ink);
    font-family: var(--font-family01);
}

.yukyu-loop-slider__stage,
.yukyu-loop-slider__captions {
    position: absolute;
    inset: 0;
}

.yukyu-loop-slider__stage {
    touch-action: none;
    cursor: grab;
    transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}

.yukyu-loop-slider__stage.is-dragging { cursor: grabbing; }
.yukyu-loop-slider__stage canvas { display: block; width: 100%; height: 100%; }
.yukyu-loop-slider__captions {
    pointer-events: none;
    transition: opacity .65s ease;
}

/* 最終周は慣性が止まったあとに画面をゆっくり暗転させ、通常スクロールへ渡す。 */
.yukyu-loop-slider.is-fading .yukyu-loop-slider__stage {
    pointer-events: none;
    opacity: 0;
    transform: scale(1.025);
}

.yukyu-loop-slider.is-fading .yukyu-loop-slider__captions,
.yukyu-loop-slider.is-finished .yukyu-loop-slider__stage,
.yukyu-loop-slider.is-finished .yukyu-loop-slider__captions {
    opacity: 0;
}

.yukyu-loop-slider__caption {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    color: var(--yukyu-loop-caption);
    font-size: clamp(12px, 1.14583vw, 18px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .06em;
    white-space: nowrap;
    will-change: transform, opacity;
}

.yukyu-loop-slider__header {
    position: absolute;
    z-index: 5;
    inset: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 20px 24px;
    pointer-events: none;
    font: 11px/1.4 ui-monospace, "SFMono-Regular", "Roboto Mono", Menlo, monospace;
    letter-spacing: .08em;
    mix-blend-mode: difference;
}

.yukyu-loop-slider__hint { color: rgb(255 255 255 / 42%); }