/* Spiral ribbon gallery intro. Keeps the kaleidoscope asset key for compatibility. */
.stage.stage-kaleidoscope {
    overflow: visible;
    perspective: 1100px;
    perspective-origin: 50% 48%;
    transition: filter 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

.kaleido-hub {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform-style: preserve-3d;
    will-change: opacity;
    z-index: 2;
}

.kaleido-vortex {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    transform-style: preserve-3d;
    will-change: transform;
    z-index: 1;
}

.kaleido-thread {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
    will-change: opacity;
}

.kaleido-thread-path {
    fill: none;
    stroke: rgba(255,255,255,0.28);
    stroke-width: 2;
    stroke-opacity: 0.62;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 10px rgba(112,180,255,0.28));
    transition: stroke-width 520ms ease, stroke-opacity 520ms ease;
}

.stage.kaleido-phase-warmup .kaleido-thread-path {
    stroke-width: 1.6;
    stroke-opacity: 0.42;
}

.stage.kaleido-phase-landing .kaleido-thread-path {
    stroke-width: 1.4;
    stroke-opacity: 0.24;
}

.kaleido-card {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(94px, 12vw, 156px);
    aspect-ratio: 16 / 10;
    margin-left: calc(clamp(94px, 12vw, 156px) / -2);
    margin-top: calc(clamp(94px, 12vw, 156px) / -3.2);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    box-shadow:
        0 12px 26px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.24);
    transform-style: preserve-3d;
    backface-visibility: visible;
    will-change: transform, opacity;
}

.kaleido-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.28), transparent 38%),
        radial-gradient(circle at 72% 18%, rgba(255,255,255,0.18), transparent 34%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.kaleido-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    backface-visibility: hidden;
}

.kaleido-card-front {
    transform: translateZ(0.2px) scale(1.04);
}

.kaleido-card-back {
    transform: rotateY(180deg) translateZ(0.2px) scale(1.04);
    opacity: 0.72;
}

.kaleido-bloom {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(52vmax, 720px);
    height: min(52vmax, 720px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(90,180,255,0.16) 28%, rgba(255,105,180,0.11) 44%, transparent 70%);
    filter: blur(10px);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.kaleido-vignette {
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(ellipse 58% 50% at 50% 46%, transparent 40%, rgba(0,0,0,0.34) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.18), transparent 28%, transparent 72%, rgba(0,0,0,0.18));
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

@media (max-width: 768px) {
    .stage.stage-kaleidoscope {
        perspective: 850px;
    }

    .kaleido-card {
        width: clamp(74px, 26vw, 112px);
        margin-left: calc(clamp(74px, 26vw, 112px) / -2);
        margin-top: calc(clamp(74px, 26vw, 112px) / -3.15);
        border-radius: 7px;
    }

    .kaleido-bloom {
        width: 70vmax;
        height: 70vmax;
        filter: blur(8px);
    }

    .kaleido-vignette {
        inset: -16%;
        background: radial-gradient(ellipse 70% 58% at 50% 46%, transparent 42%, rgba(0,0,0,0.32) 100%);
    }
}