@charset "UTF-8";

/* =====================================================
   slideshow
===================================================== */

.slideshow {
    position: absolute;
    bottom:2rem;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
}

.slides-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
}

.slides {
    display: flex;
    align-items: center;
    transition: transform 0.7s ease;
    will-change: transform;
}

.slides.no-transition {
    transition: none;
}

/* ループ補正中は、各スライドの拡大縮小アニメも止める */
.slides.no-transition .slide {
    transition: none !important;
}

.slide {
    flex: 0 0 32rem;
    width: 32rem;
    margin: 0;
    position: relative;
    overflow: hidden;
    background: #222;
    transform: scale(0.85);
    transform-origin: center center;
    opacity: 0.9;
    transition:
        transform 0.7s ease,
        opacity 0.7s ease;

}

.slide.is-center {
    transform: scale(1);
    opacity: 1;
}

.media-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.poster,
.movie {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.poster {
    z-index: 2;
    opacity: 1;
    transition: opacity 1.5s ease;
}

.movie {
    z-index: 1;
    opacity: 0;
    transition: opacity 1.5s ease;
    background: none;
}

.slide.is-playing .poster {
    opacity: 0;
    pointer-events: none;
}

.slide.is-playing .movie {
    opacity: 1;
}

/* =====================================================
   nav
===================================================== */

:root {
    --arrow-size: 1rem;
    --arrow-border: 0.rem;
    --arrow-color: #6f6f6f;
    --arrow-border-color: #fff;

    --arrow-dim-color: #6f6f6f;
    --arrow-dim-border-color: #fff;

    --arrow-flash-color: #000;
    --arrow-flash-border-color: #ffffff;

    --nav-size: 1rem;
    --nav-gap: 2.5rem;

    --nav-opacity-dim: 1;
    --nav-opacity-normal: 1;

    --nav-pulse-scale: 1.0;
    --nav-hover-scale: 1.0;
    --nav-shift-y: 0rem;

    --nav-pulse-duration: 360ms;
    --nav-flash-duration: 420ms;
}

.nav-btn-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--nav-gap);
    margin-top: 1.25rem;
}

.nav-btn {
    position: relative;
    width: var(--nav-size);
    height: var(--nav-size);
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
        opacity 0.24s ease,
        transform 0.24s ease,
        filter 0.24s ease;
    opacity: var(--nav-opacity-normal);
    z-index:2;
}

.nav-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 0.1875rem;
}

/* 状態 */
.nav-btn.is-dim {
    opacity: var(--nav-opacity-dim);
}

/* hover */
.nav-btn:hover {
    transform: scale(var(--nav-hover-scale));
}

/* 一瞬の動き */
.nav-btn.is-pulse {
    transform: scale(var(--nav-pulse-scale));
    filter: brightness(1.08);
}

/* 一瞬の色変化 */
.nav-btn.is-active-flash {
    opacity: 1;
}

.nav-btn.is-pulse::before,
.nav-btn.is-pulse::after,
.nav-btn.is-active-flash::before,
.nav-btn.is-active-flash::after {
    filter: drop-shadow(0 0 0.25rem rgba(255, 255, 255, 0.45));
}

/* 三角の共通 */
.nav-btn::before,
.nav-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transition:
        transform 0.24s ease,
        filter 0.24s ease,
        opacity 0.24s ease,
        border-color 0.24s ease;
}

/* =====================================================
   右矢印
===================================================== */

.nav-btn.next::before {
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width:
        calc(var(--arrow-size) + var(--arrow-border))
        0
        calc(var(--arrow-size) + var(--arrow-border))
        calc(var(--arrow-size) * 1.8 + var(--arrow-border));
    border-color:
        transparent
        transparent
        transparent
        var(--arrow-border-color);
}

.nav-btn.next::after {
    transform: translate(-60%, -50%);
    border-style: solid;
    border-width:
        var(--arrow-size)
        0
        var(--arrow-size)
        calc(var(--arrow-size) * 1.8);
    border-color:
        transparent
        transparent
        transparent
        var(--arrow-color);
}

/* 右の薄い状態 */
.nav-btn.next.is-dim::before {
    border-color:
        transparent
        transparent
        transparent
        var(--arrow-dim-border-color);
}

.nav-btn.next.is-dim::after {
    border-color:
        transparent
        transparent
        transparent
        var(--arrow-dim-color);
}

/* 右の発光状態 */
.nav-btn.next.is-active-flash::before {
    border-color:
        transparent
        transparent
        transparent
        var(--arrow-flash-border-color);
}

.nav-btn.next.is-active-flash::after {
    border-color:
        transparent
        transparent
        transparent
        var(--arrow-flash-color);
}

/* =====================================================
   左矢印
===================================================== */

.nav-btn.prev::before {
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width:
        calc(var(--arrow-size) + var(--arrow-border))
        calc(var(--arrow-size) * 1.8 + var(--arrow-border))
        calc(var(--arrow-size) + var(--arrow-border))
        0;
    border-color:
        transparent
        var(--arrow-border-color)
        transparent
        transparent;
}

.nav-btn.prev::after {
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width:
        var(--arrow-size)
        calc(var(--arrow-size) * 1.8)
        var(--arrow-size)
        0;
    border-color:
        transparent
        var(--arrow-color)
        transparent
        transparent;
}

/* 左の薄い状態 */
.nav-btn.prev.is-dim::before {
    border-color:
        transparent
        var(--arrow-dim-border-color)
        transparent
        transparent;
}

.nav-btn.prev.is-dim::after {
    border-color:
        transparent
        var(--arrow-dim-color)
        transparent
        transparent;
}

/* 左の発光状態 */
.nav-btn.prev.is-active-flash::before {
    border-color:
        transparent
        var(--arrow-flash-border-color)
        transparent
        transparent;
}

.nav-btn.prev.is-active-flash::after {
    border-color:
        transparent
        var(--arrow-flash-color)
        transparent
        transparent;
}

/* =====================================================
   dots
===================================================== */

.dots {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.5rem;
    display: none;
}

.dot {
    width: 0.625rem;
    height: 0.625rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        opacity 0.3s ease;
}

.dot.is-active {
    background: #fff;
    transform: scale(1.2);
}






.brush-reveal {
    display: inline-block;
    width: 20rem;
    aspect-ratio: 282 / 100;
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 4.5rem;
    transform: translateX(calc(-50% - 9rem));
    overflow: hidden;
}

.brush-reveal__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    clip-path: inset(0 100% 0 0);
    animation: revealImage 1.4s cubic-bezier(1, 0, 0, 1) forwards;
}

.brush-reveal__edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5rem;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transform: translateX(0);
    animation: moveEdge 1.4s cubic-bezier(1, 0, 0, 1) forwards;
}

.brush-reveal__edge::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.04) 18%,
            rgba(255, 255, 255, 0.12) 42%,
            rgba(255, 255, 255, 0.08) 68%,
            rgba(255, 255, 255, 0) 100%
        );
    filter: blur(0.08rem);
}

@keyframes revealImage {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes moveEdge {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    85% {
        opacity: 1;
        transform: translateX(calc(100% - 1.5rem));
    }
    100% {
        opacity: 0;
        transform: translateX(calc(100% - 1.5rem));
    }
}