/* The hero owns its slides; the existing composition keeps its own motion. */
.hero-squishy__panel {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.hero-squishy__panel--image { background: var(--color-hero); }
.hero-squishy__panel--squishy { background: var(--color-canvas); }
.hero-squishy__panel.is-visible { visibility: visible; }
.hero-squishy__panel:not([inert]) { pointer-events: auto; }
.hero-squishy__panel.is-entering { z-index: 2; will-change: transform; }
.hero-squishy__panel[hidden] { display: none; }

.hero-squishy__stage {
    position: absolute;
    inset: 0;
}

.hero-squishy__stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    outline-offset: -0.5rem;
}

.hero-squishy__stage canvas[data-squishy-background-scroll] { touch-action: auto; }
.hero-squishy__stage canvas:focus-visible:not([data-pointer-focus]) { outline: var(--focus); }
.hero-squishy__stage canvas[data-pointer-focus] { outline: none; }
.hero-squishy__stage.is-hovering canvas { cursor: grab; }
.hero-squishy__stage.is-grabbing canvas { cursor: grabbing; }

/* Reuse the studio's circular image treatment and the site's hairline/focus. */
.hero-squishy__toggle {
    position: absolute;
    z-index: 5;
    top: var(--space-4);
    right: var(--space-4);
    display: grid;
    width: 80px;
    height: 80px;
    padding: 0;
    overflow: hidden;
    place-items: center;
    border: var(--hairline);
    border-radius: 50%;
    background: var(--color-hero);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.hero-squishy__toggle:hover,
.hero-squishy__toggle:active { border-color: var(--color-ink); }
.hero-squishy__toggle:focus-visible { outline: var(--focus); outline-offset: 4px; }
.hero-squishy__toggle[aria-busy="true"] { cursor: progress; }
.hero-squishy__toggle img { width: 100%; height: 100%; object-fit: contain; }
.hero-squishy__toggle[hidden],
.hero-squishy__toggle img[hidden] { display: none; }

@media (max-width: 760px) {
    .hero-squishy__toggle {
        top: var(--space-2);
        right: var(--space-2);
        width: 48px;
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* A live preference change retains the kinetic DOM. Returning to this
       panel must reveal its source image immediately, without replaying it. */
    .hero-squishy [data-hero-panel="image"] .image-slot__image {
        animation: none;
        opacity: 1;
    }
}