body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* スクロールバーを非表示にする */
    box-sizing: border-box;
}

.scroll-container {
    position: relative;
    width: 100vw; /* ビュー幅 */
    height: 100vh; /* ビュー高さ */
    overflow: hidden; /* スクロールバーを非表示にする */
    perspective: 3500px;
}

.scroll-wrapper {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400vw; /* 4列分の幅 */
    height: auto; /* 高さを自動調整 */
    transform-origin: center center;
    transform: translate(-50%, -50%) rotateX(60deg) translateZ(-3000px); /* 3D回転 */
    transform-style: preserve-3d;
    will-change: transform;
}

.scroll-column {
    flex: 0 0 auto;
    width: 100vw; /* 各列の幅を調整 (例: 25vw) */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    will-change: transform;
}

.work-item-wrapper {
    width: 100%;
    height: 120%;
    margin-top: 9vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title-overlay {
    display: flex;
    width: 95%;
    height: 20%;
    border: 4px black solid;
    color: white;
    font-size: 1.2em;
    text-align: center;
    animation: none; /* グリッチエフェクトを無効化 */
    margin: 0;
}

.work-item {
    display: flex;
    width: 95%;
    height: 100%; /* 高さを固定 */
    /* align-items: center;
    justify-content: center; */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin: 0;
    border: solid black;
    border-width: 0px 4px 4px 4px;
}

.glitch-item {
    position: relative;
    overflow: hidden;
}

.work-item img,
.work-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* グリッチエフェクトのアニメーション */
@keyframes glitch1 {
    0%,
    100% {
        transform: translate(0, 0);
    }
    4% {
        transform: translate(-8px, -4px);
    }
    8% {
        transform: translate(6px, 2px);
    }
    12% {
        transform: translate(-10px, 6px);
    }
    16% {
        transform: translate(10px, -5px);
    }
    20% {
        transform: translate(-5px, 5px);
    }
    24% {
        transform: translate(4px, -3px);
    }
    28% {
        transform: translate(-2px, 2px);
    }
    32% {
        transform: translate(7px, -2px);
    }
    36% {
        transform: translate(-6px, 6px);
    }
    40% {
        transform: translate(5px, -4px);
    }
}

@keyframes glitch2 {
    0%,
    100% {
        transform: translate(0, 0);
    }
    5% {
        transform: translate(-6px, 4px);
    }
    15% {
        transform: translate(8px, -4px);
    }
    25% {
        transform: translate(-10px, 6px);
    }
    35% {
        transform: translate(5px, -5px);
    }
    45% {
        transform: translate(-4px, 3px);
    }
    55% {
        transform: translate(6px, -2px);
    }
    65% {
        transform: translate(-5px, 4px);
    }
    75% {
        transform: translate(7px, -6px);
    }
    85% {
        transform: translate(-3px, 5px);
    }
}

@keyframes glitch3 {
    0%,
    100% {
        transform: translate(0, 0);
    }
    7% {
        transform: translate(-4px, 4px);
    }
    14% {
        transform: translate(6px, -6px);
    }
    21% {
        transform: translate(-8px, 2px);
    }
    28% {
        transform: translate(4px, -4px);
    }
    35% {
        transform: translate(-6px, 6px);
    }
    42% {
        transform: translate(7px, -3px);
    }
    49% {
        transform: translate(-5px, 4px);
    }
    56% {
        transform: translate(6px, -2px);
    }
    63% {
        transform: translate(-4px, 5px);
    }
}

@keyframes glitch4 {
    0%,
    100% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-3px, 2px);
    }
    20% {
        transform: translate(5px, -3px);
    }
    30% {
        transform: translate(-6px, 4px);
    }
    40% {
        transform: translate(7px, -2px);
    }
    50% {
        transform: translate(-4px, 3px);
    }
    60% {
        transform: translate(6px, -5px);
    }
    70% {
        transform: translate(-5px, 4px);
    }
    80% {
        transform: translate(4px, -2px);
    }
    90% {
        transform: translate(-3px, 5px);
    }
}

@keyframes colorShift {
    0%,
    100% {
        filter: none;
    }
    5% {
        filter: hue-rotate(90deg);
    }
    10% {
        filter: hue-rotate(180deg);
    }
    15% {
        filter: hue-rotate(270deg);
    }
    20% {
        filter: hue-rotate(360deg);
    }
    25% {
        filter: hue-rotate(45deg);
    }
    30% {
        filter: hue-rotate(135deg);
    }
    35% {
        filter: hue-rotate(225deg);
    }
    40% {
        filter: hue-rotate(315deg);
    }
    45% {
        filter: hue-rotate(405deg);
    }
}

@keyframes glitch-lines1 {
    0%,
    100% {
        clip-path: inset(15% 0% 75% 0);
    }
    5% {
        clip-path: inset(30% 0 60% 0);
    }

    10% {
        clip-path: inset(0 0 0 0);
    }
    15% {
        clip-path: inset(45% 0% 45% 0);
    }
    20% {
        clip-path: inset(0 0 0 0);
    }
    25% {
        clip-path: inset(60% 0 30% 0%);
    }
    30% {
        clip-path: inset(0 0 0 0);
    }
    35% {
        clip-path: inset(75% 0% 15% 0);
    }
    40% {
        clip-path: inset(0 0 0 0);
    }
    45% {
        clip-path: inset(80% 0 10% 0%);
    }
    50% {
        clip-path: inset(0 0 0 0);
    }
    60% {
        clip-path: inset(0 0 0 0);
    }
    70% {
        clip-path: inset(0 0 0 0);
    }
    80% {
        clip-path: inset(0 0 0 0);
    }
    90% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes glitch-lines2 {
    0%,
    100% {
        clip-path: inset(0 0 40% 0);
    }
    10% {
        clip-path: inset(40% 0 0 0);
    }
    20% {
        clip-path: inset(0 40% 0 0);
    }
    30% {
        clip-path: inset(0 0 40% 40%);
    }
    40% {
        clip-path: inset(40% 40% 0 0);
    }
    50% {
        clip-path: inset(40% 0 40% 0);
    }
}

@keyframes glitch-lines3 {
    0%,
    100% {
        clip-path: inset(0 0 60% 0);
    }
    15% {
        clip-path: inset(60% 0 0 0);
    }
    30% {
        clip-path: inset(0 60% 0 0);
    }
    45% {
        clip-path: inset(0 0 60% 60%);
    }
    60% {
        clip-path: inset(60% 60% 0 0);
    }
    75% {
        clip-path: inset(60% 0 60% 0);
    }
}

/* グリッチエフェクトのCSS */
.glitch1:hover img,
.glitch1:hover video {
    animation: glitch1 0.1s steps(2, end) infinite alternate-reverse,
        colorShift 1s infinite, glitch-lines1 0.15s infinite;
    transform: scale(1.05);
}

.glitch2:hover img,
.glitch2:hover video {
    animation: glitch2 0.1s steps(2, end) infinite alternate-reverse,
        colorShift 1s infinite, glitch-lines2 0.15s infinite;
    transform: scale(1.05);
}

.glitch3:hover img,
.glitch3:hover video {
    animation: glitch3 0.1s steps(2, end) infinite alternate-reverse,
        colorShift 1s infinite, glitch-lines3 0.15s infinite;
    transform: scale(1.05);
}

.glitch4:hover img,
.glitch4:hover video {
    animation: glitch4 0.1s steps(2, end) infinite alternate-reverse,
        colorShift 1s infinite, glitch-lines1 0.15s infinite;
    transform: scale(1.05);
}