.stage.stage-kaleidoscope {
    overflow: hidden;
}

.stage.stage-kaleidoscope .stage-tiles {
    opacity: 0;
    pointer-events: none;
}

.stage.stage-kaleidoscope::after {
    display: none;
}

.kaleido-slice {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(124,92,252,0.13), transparent 34%),
        radial-gradient(ellipse at 78% 72%, rgba(94,234,212,0.1), transparent 40%),
        linear-gradient(180deg, rgba(5,9,18,0.2), rgba(5,9,18,0.04) 48%, rgba(5,9,18,0.18));
    transform-origin: center;
    will-change: transform, opacity;
}

.kaleido-slice-wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(4,8,16,0.34), transparent 18%, transparent 82%, rgba(4,8,16,0.34)),
        radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0,0,0,0.24));
}

.kaleido-slice-band {
    position: absolute;
    left: -16vw;
    right: -16vw;
    top: var(--band-y, 50%);
    height: var(--band-h, 132px);
    z-index: 2;
    overflow: visible;
    transform: rotate(0deg);
    transform-origin: center;
}

.kaleido-slice-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.kaleido-slice-band-dir-left .kaleido-slice-layer-image {
    clip-path: inset(0 calc(100% - var(--cut-x)) 0 0);
}

.kaleido-slice-band-dir-left .kaleido-slice-layer-code {
    clip-path: inset(0 0 0 var(--cut-x));
}

.kaleido-slice-band-dir-right .kaleido-slice-layer-image {
    clip-path: inset(0 0 0 var(--cut-x));
}

.kaleido-slice-band-dir-right .kaleido-slice-layer-code {
    clip-path: inset(0 calc(100% - var(--cut-x)) 0 0);
}

.kaleido-slice-track {
    display: flex;
    width: max-content;
    gap: clamp(16px, 2vw, 28px);
    align-items: center;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.kaleido-slice-card.stage-tile {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--band-h, 132px) * 1.62);
    height: var(--band-h, 132px);
    border-radius: 18px;
    overflow: hidden;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    border: 1px solid rgba(255,255,255,0.24);
    box-shadow:
        0 18px 42px rgba(0,0,0,0.34),
        inset 0 0 0 1px rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.08);
    will-change: transform;
}

.kaleido-slice-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}

.kaleido-slice-code-card {
    background:
        radial-gradient(ellipse at 18% 22%, rgba(124,92,252,0.26), transparent 34%),
        radial-gradient(ellipse at 82% 72%, rgba(94,234,212,0.2), transparent 38%),
        linear-gradient(135deg, rgba(5,9,18,0.96), rgba(17,22,38,0.92));
    border-color: rgba(160,210,255,0.24);
    color: rgba(218,239,255,0.72);
    box-shadow:
        0 18px 42px rgba(0,0,0,0.3),
        inset 0 0 0 1px rgba(124,92,252,0.18),
        inset 0 0 42px rgba(94,234,212,0.08);
}

.kaleido-code-card-grid {
    position: absolute;
    inset: 12%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px, 0.55vw, 10px);
    overflow: hidden;
    opacity: 0.78;
}

.kaleido-code-card-line {
    display: block;
    white-space: nowrap;
    font: 700 clamp(9px, 0.72vw, 12px)/1.18 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0;
    color: rgba(216,238,255,0.62);
    text-shadow:
        0 0 10px rgba(124,92,252,0.62),
        0 0 18px rgba(94,234,212,0.2);
}

.kaleido-code-card-dots {
    position: absolute;
    inset: 0;
    opacity: 0.85;
    mix-blend-mode: screen;
}

.kaleido-code-card-dots i {
    position: absolute;
    left: var(--dot-x);
    top: var(--dot-y);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(225,246,255,0.9);
    box-shadow:
        0 0 10px rgba(124,92,252,0.75),
        0 0 18px rgba(94,234,212,0.35);
    will-change: transform, opacity;
}

.kaleido-slice-gate {
    position: absolute;
    top: -8%;
    bottom: -8%;
    left: var(--cut-x);
    z-index: 5;
    width: 1px;
}

.kaleido-slice-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgba(236,222,255,0.96);
    transform: translateZ(0);
    box-shadow:
        0 0 14px rgba(255,255,255,0.78),
        0 0 28px rgba(166,94,255,0.9),
        0 0 58px rgba(94,234,212,0.5),
        0 0 96px rgba(255,123,172,0.28);
    will-change: transform, opacity;
}

.kaleido-slice-line::before,
.kaleido-slice-line::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(36px, 5vw, 82px);
    opacity: 0.45;
}

.kaleido-slice-line::before {
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(124,92,252,0.44));
}

.kaleido-slice-line::after {
    left: 0;
    background: linear-gradient(90deg, rgba(94,234,212,0.3), transparent);
}

.kaleido-gate-particles {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
}

.kaleido-gate-particles i {
    position: absolute;
    top: var(--py);
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: hsl(var(--hue) 92% 72%);
    box-shadow:
        0 0 10px hsl(var(--hue) 92% 72% / 0.78),
        0 0 22px hsl(var(--hue) 92% 72% / 0.34);
    transform: translate3d(var(--px), 0, 0);
    will-change: transform, opacity;
}

.kaleido-slice-copyright {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    width: max-content;
    max-width: min(22vw, 300px);
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    color: rgba(218,239,255,0.68);
    text-align: center;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, opacity;
    mix-blend-mode: screen;
}

.kaleido-slice-copyright::before,
.kaleido-slice-copyright::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(94,234,212,0.9));
    box-shadow:
        0 0 12px rgba(94,234,212,0.62),
        0 0 20px rgba(124,92,252,0.28);
}

.kaleido-slice-copyright::before {
    left: 0;
    transform: translateY(-50%);
}

.kaleido-slice-copyright::after {
    right: 0;
    transform: translateY(-50%) scaleX(-1);
}

.kaleido-slice-copyright span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 700 clamp(9px, 0.68vw, 11px)/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow:
        0 0 9px rgba(124,92,252,0.52),
        0 0 16px rgba(94,234,212,0.26);
}

@media (max-width: 768px) {
    .kaleido-slice-band {
        left: -32vw;
        right: -32vw;
        transform: rotate(0deg);
    }

    .kaleido-slice-track {
        gap: 14px;
    }

    .kaleido-slice-card.stage-tile {
        border-radius: 14px;
        box-shadow:
            0 14px 30px rgba(0,0,0,0.3),
            inset 0 0 0 1px rgba(255,255,255,0.08);
    }

    .kaleido-code-card-grid {
        inset: 13%;
        gap: 6px;
    }

    .kaleido-code-card-line {
        font-size: 8px;
    }

    .kaleido-slice-gate {
        top: -6%;
        bottom: -6%;
    }

    .kaleido-gate-particles i,
    .kaleido-code-card-dots i {
        width: 1.5px;
        height: 1.5px;
    }

    .kaleido-slice-copyright {
        max-width: min(36vw, 160px);
        padding: 0 20px;
    }

    .kaleido-slice-copyright span {
        font-size: 8px;
    }

    .kaleido-slice-copyright::before,
    .kaleido-slice-copyright::after {
        width: 12px;
    }
}