/* =====================================================================
 * Hero person framing (UIUX-008R people rotation)
 *
 * Shared by the homepage hero and the Admin → Hero people preview, so the
 * operator sees exactly the framing customers get. A person layer is a
 * size container; its crop box is the person's framed region (crop box,
 * ratio, alignment and scale from Admin metadata, as custom properties),
 * contained in the layer. The full-length rendition is the default; add
 * .hero-person--compact (or the homepage's ≤1023px rule) for the
 * upper-body rendition.
 * ===================================================================== */
.hero-person {
    --hp-x: var(--hp-full-x);
    --hp-y: var(--hp-full-y);
    --hp-w: var(--hp-full-w);
    --hp-h: var(--hp-full-h);
    --hp-ratio: var(--hp-full-ratio);
    position: absolute;
    inset: 0;
    container-type: size;
    opacity: 1;
    transition: opacity var(--hp-fade, 1000ms) ease-in-out;
}

.hero-person.is-entering,
.hero-person.is-leaving {
    opacity: 0;
}

/* Light studio backgrounds melt into the white hero (and any future tint). */
.hero-person[data-background="light"] {
    mix-blend-mode: multiply;
}

.hero-person__crop {
    position: absolute;
    top: 0;
    left: calc((100cqw - min(100cqw, 100cqh * var(--hp-ratio)) * var(--hp-scale, 1)) * var(--hp-align, 0));
    width: calc(min(100cqw, 100cqh * var(--hp-ratio)) * var(--hp-scale, 1));
    height: calc(min(100cqh, 100cqw / var(--hp-ratio)) * var(--hp-scale, 1));
    overflow: hidden;
}

.hero-person__crop img {
    position: absolute;
    top: calc(-100% * var(--hp-y) / var(--hp-h));
    left: calc(-100% * var(--hp-x) / var(--hp-w));
    width: calc(100% / var(--hp-w));
    max-width: none;
    height: calc(100% / var(--hp-h));
}

/* Upper-body rendition, with a short fade in place of a hard waist cut. */
.hero-person--compact {
    --hp-x: var(--hp-compact-x);
    --hp-y: var(--hp-compact-y);
    --hp-w: var(--hp-compact-w);
    --hp-h: var(--hp-compact-h);
    --hp-ratio: var(--hp-compact-ratio);
    --hp-align: 0;
    --hp-scale: 1;
}

.hero-person--compact .hero-person__crop {
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .hero-person {
        transition: none;
    }
}