/* --arrive (0 → 1 on scroll) and --mx / --my (pointer, -0.5 → 0.5) come from the script;
   unset, everything rests in place. Not inherited, so updating them never restyles the screens inside */
@property --arrive { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --away { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --mx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --my { syntax: "<number>"; inherits: false; initial-value: 0; }

/* clipped so the slide-in never widens the page; the padding keeps the resting tilt and shadows inside */
.lgrp {
    display: flex;
    align-items: center;
    padding-inline: calc(var(--spacing) / 2);
    perspective: 1600px;
    overflow-x: clip;
}

.lgrp-left,
.lgrp-phone {
    --away: calc(1 - var(--arrive, 1));
    opacity: var(--arrive, 1);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.lgrp-left {
    flex: 3;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--ncs-container-strong);
    border-radius: var(--border-radius-small);
    background: var(--background);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--ncs-primary) 25%, transparent);
    translate: calc(var(--away) * -40%) 0;
    rotate: y calc(var(--away) * 28deg);
    scale: calc(1 - var(--away) * 0.14);
    transform: rotateY(calc(6deg + var(--mx, 0) * 6deg)) rotateX(calc(3deg - var(--my, 0) * 4deg));
}

.lgrp-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lgrp-phone {
    flex: 1;
    margin-inline-start: calc(var(--spacing) / 2);
    translate: calc(var(--away) * 60%) calc(var(--away) * 15%);
    rotate: y calc(var(--away) * -38deg);
    transform: rotateY(calc(-10deg + var(--mx, 0) * 8deg)) rotateX(calc(3deg - var(--my, 0) * 4deg)) translateY(calc(var(--my, 0) * -2%));
}

@container showcase (max-width: 640px) {
    .lgrp {
        padding-inline: calc(var(--spacing) / 4);
    }

    .lgrp-left {
        border-radius: var(--border-radius-tiny);
    }

    .lgrp-phone {
        flex: 0 0 38%;
        margin-inline-start: calc(var(--spacing) * -3 / 4);
    }
}