.platform-mock {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--border-radius-tiny);
    background: var(--maestra-black);
}

.pm-screenshot {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.pm-stage {
    container-type: size;
    position: absolute;
    inset: 0;
}

/* The stage art is 16:9; the square shows its middle, which still holds the whole screen and the speaker. */
.pm-scene {
    --pm-x: 0;
    --pm-y: 0;
    --pm-perspective: 250cqh;
    position: absolute;
    top: 0;
    left: 50%;
    block-size: 100%;
    aspect-ratio: 1672 / 941;
    translate: -50% 0;
    perspective: var(--pm-perspective);
}

.pm-world {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: scale(1.03) rotateX(calc(var(--pm-y) * 3deg)) rotateY(calc(var(--pm-x) * -7deg));
    transition: transform .7s cubic-bezier(.2, .7, .3, 1);
    will-change: transform;
}

.pm-layer {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    transform: translateZ(calc(var(--pm-depth, 0) * var(--pm-perspective))) scale(calc(1 - var(--pm-depth, 0)));
}

.pm-far .pm-layer { transform: none; }

.pm-far { --pm-depth: -.06; }

.pm-crowd {
    --pm-depth: .07;
    transform: translateZ(calc(var(--pm-depth) * var(--pm-perspective))) scale(calc(1 - var(--pm-depth))) translateY(50%) scale(1.05) translateY(-50%);
    transition: filter .7s ease;
}

.pm-scene[data-pm-active] .pm-crowd { filter: blur(1px); }

.pm-screen {
    position: absolute;
    inset: 18.3% 23.1% 39.4%;
    background: var(--maestra-white);
}

@media (prefers-reduced-motion: reduce) {
    .pm-world,
    .pm-crowd { transition: none; }
}