/* Final Hero v3 — lookbook stage (desktop WebGL mirrors + mobile showroom) */

.fh3,
.fh3 *,
.fh3 *::before,
.fh3 *::after {
    box-sizing: border-box;
}

.fh3 {
    --art-w: 1440;
    --art-h: 1043;
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #140a07;
    direction: ltr;
    isolation: isolate;
    container-type: size;
    contain: layout style;
}

.fh3__stage {
    --u-w: calc(100cqi / var(--art-w));
    --u-h: calc(100cqh / var(--art-h));
    --u: min(var(--u-w), var(--u-h));
    --section-zoom: 1.095;
    --section-ox: 31;
    --section-oy: 10;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: scale(var(--section-zoom));
    transform-origin: calc(var(--section-ox) * 1%) calc(var(--section-oy) * 1%);
    contain: layout paint;
}

/* Background + lines overlay (same box, same stretch) */
.fh3__bg-stack {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.fh3__bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: fill;
    object-position: center center;
    pointer-events: none;
    user-select: none;
}

.fh3__lines {
    /* Soft ember — red-orange, not harsh pure red */
    --ember: #ff5c38;
    --ember-deep: #ff3a1a;
    --ember-soft: #ff8a68;
    --lines-op: 0;
    --ring-inner-op: 0.32;
    --ring-outer-op: 0.95;
    --ring-wide-op: 0.95;
    --ring-inner-sw: 5;
    --ring-outer-sw: 11;
    --ring-wide-sw: 11;
    --ring-glow-op: 0;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    opacity: var(--lines-op);
    pointer-events: none;
    user-select: none;
}

.fh3__lines-path {
    fill: none;
    stroke: var(--ember);
    stroke-width: 7;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter:
        drop-shadow(0 0 3px rgba(255, 92, 56, 0.5))
        drop-shadow(0 0 10px rgba(255, 58, 26, 0.22));
}

/* Settled terrain — calm base so traveling highlight can read */
.fh3__lines.is-settled .fh3__lines-path:not([data-ring]) {
    opacity: 0.62;
}

/* Soft traveling highlight over terrain lines (option 2) */
.fh3__lines-flow {
    fill: none;
    stroke: #ffc2a8;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    mix-blend-mode: screen;
    pointer-events: none;
    filter:
        drop-shadow(0 0 4px rgba(255, 180, 140, 0.75))
        drop-shadow(0 0 12px rgba(255, 92, 56, 0.35));
}

.fh3__lines-glow {
    opacity: var(--ring-glow-op);
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Smallest — faintest, static */
.fh3__lines-ring[data-ring="inner"] {
    stroke: var(--ember-soft);
    stroke-width: var(--ring-inner-sw);
    opacity: var(--ring-inner-op);
    filter: drop-shadow(0 0 4px rgba(255, 138, 104, 0.35));
}

/* Middle + largest — same heavy ember; travel in upper half (JS) */
.fh3__lines-ring[data-ring="outer"],
.fh3__lines-ring[data-ring="wide"] {
    stroke: var(--ember-deep);
    stroke-width: var(--ring-wide-sw);
    opacity: var(--ring-wide-op);
    filter:
        drop-shadow(0 0 4px rgba(255, 58, 26, 0.65))
        drop-shadow(0 0 16px rgba(255, 92, 56, 0.35));
}

.fh3__lines-ring[data-ring="outer"] {
    stroke-width: var(--ring-outer-sw);
    opacity: var(--ring-outer-op);
}

.fh3__lines-spark {
    fill: #ffb08a;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(255, 140, 90, 0.8));
}

/* Wall line */
.fh3__wall {
    --wl-op: 0;
    --wl-stroke: 40;
    --wl-light: 1;
    --wl-glow: 0;
    --wl-soft: 0.2;
    --wl-r: 0;
    --wl-g: 0;
    --wl-b: 0;
    --wl-flow-op: 0.99;
    --wl-flow-w: 0.67;
    --wl-flow-light: 1.35;
    --wl-flow-glow: 0;
    --wl-fr: 255;
    --wl-fg: 36;
    --wl-fb: 19;
    --wl-dash: 160;
    --wl-gap: 22;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    contain: layout style;
}

.fh3__wall.is-off {
    visibility: hidden;
}

.fh3__wall-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fh3__wall-soft,
.fh3__wall-stroke,
.fh3__wall-flow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fh3__wall-soft {
    stroke: rgba(
        var(--wl-r),
        var(--wl-g),
        var(--wl-b),
        calc(var(--wl-op) * var(--wl-soft) * var(--wl-light))
    );
    stroke-width: calc(var(--wl-stroke) * 2.6);
    filter: blur(calc(var(--wl-glow) * 1px));
}

.fh3__wall-stroke {
    stroke: rgba(
        var(--wl-r),
        var(--wl-g),
        var(--wl-b),
        calc(var(--wl-op) * 0.85 * var(--wl-light))
    );
    stroke-width: var(--wl-stroke);
    filter: drop-shadow(
        0 0 calc(var(--wl-glow) * 0.5px)
        rgba(var(--wl-r), var(--wl-g), var(--wl-b), calc(var(--wl-op) * 0.5 * var(--wl-light)))
    );
}

.fh3__wall-flow {
    stroke: rgba(
        var(--wl-fr),
        var(--wl-fg),
        var(--wl-fb),
        calc(var(--wl-flow-op) * var(--wl-flow-light))
    );
    filter:
        drop-shadow(0 0 calc(var(--wl-flow-glow) * 0.55px) rgba(var(--wl-fr), var(--wl-fg), var(--wl-fb), calc(var(--wl-flow-op) * 0.95)))
        drop-shadow(0 0 calc(var(--wl-flow-glow) * 1.25px) rgba(var(--wl-fr), var(--wl-fg), var(--wl-fb), calc(var(--wl-flow-op) * 0.55)));
}

.fh3__wall.is-glowless .fh3__wall-soft,
.fh3__wall.is-glowless .fh3__wall-stroke,
.fh3__wall.is-glowless .fh3__wall-flow {
    filter: none;
}

/* Behind strip */
.fh3__behind {
    --bw: 980;
    --bh: 340;
    --bx: 0;
    --by: 20;
    --bop: 1;
    --b-radius: 4;
    --b-strip-x: 0;
    --b-img-y: 0;
    --b-img-scale: 1;
    --b-sepia: 0.22;
    --b-sat: 1.15;
    --b-hue: -12;
    --b-bright: 1;
    --b-contrast: 1;
    --b-grade: 0.22;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: calc(var(--bw) * var(--u));
    height: calc(var(--bh) * var(--u));
    transform: translate(
        calc(-50% + var(--bx) * var(--u)),
        calc(-50% + var(--by) * var(--u))
    );
    opacity: var(--bop);
    overflow: hidden;
    border-radius: calc(var(--b-radius) * var(--u));
    pointer-events: none;
    background: #120c0a;
}

.fh3__behind.is-off {
    visibility: hidden;
}

.fh3__behind-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
}

.fh3__behind-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    max-width: none;
    display: block;
    transform-origin: left center;
    transform:
        translate3d(
            calc(var(--b-strip-x) * 1px),
            calc(var(--b-img-y) * 1px),
            0
        )
        scale(var(--b-img-scale));
    filter:
        sepia(var(--b-sepia))
        saturate(var(--b-sat))
        hue-rotate(calc(var(--b-hue) * 1deg))
        brightness(var(--b-bright))
        contrast(var(--b-contrast));
    pointer-events: none;
    user-select: none;
}

.fh3__behind.is-clean .fh3__behind-img {
    filter: none;
}

.fh3__behind-grade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            180deg,
            rgba(255, 70, 40, calc(var(--b-grade) * 0.7)) 0%,
            rgba(180, 40, 25, calc(var(--b-grade) * 0.45)) 45%,
            rgba(90, 20, 15, calc(var(--b-grade) * 0.9)) 100%
        ),
        radial-gradient(
            ellipse 80% 55% at 50% 42%,
            rgba(255, 90, 50, calc(var(--b-grade) * 0.55)),
            transparent 70%
        );
    mix-blend-mode: multiply;
    opacity: var(--b-grade);
    display: none;
}

.fh3__behind.has-grade .fh3__behind-grade {
    display: block;
}

/* Mirrors (WebGL) */
.fh3__mirrors {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.fh3__mirrors.is-off {
    visibility: hidden;
}

.fh3__mirrors.is-interactive {
    pointer-events: auto;
}

.fh3__mirrors-canvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.fh3__mirrors-canvas.is-hit {
    cursor: pointer;
}

/* Model */
.fh3__model {
    --mw: 434;
    --mh: 647;
    --mx: -22;
    --my: 25;
    --mop: 1;
    --mscale: 1;
    --swap: 0.45s;
    --u-model: var(--u-h, var(--u));
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: calc(var(--mw) * var(--u-model));
    height: calc(var(--mh) * var(--u-model));
    transform: translate(
        calc(-50% + var(--mx) * var(--u-model)),
        calc(-50% + var(--my) * var(--u-model))
    ) scale(var(--mscale));
    transform-origin: 50% 100%;
    opacity: var(--mop);
    pointer-events: none;
    contain: layout paint;
}

.fh3__model.is-off {
    visibility: hidden;
}

.fh3__model-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity var(--swap) cubic-bezier(0.4, 0, 0.2, 1);
}

.fh3__model-img.is-active {
    opacity: 1;
}

/* Mobile showroom ≤768 */
.fh3__mobile {
    display: none;
}

@media (max-width: 768px) {
    /*
      Mobile artboard — ported from final-hero-v2 (390×650).
      Model + mirror are absolute slots; model always z-index above mirror
      so the mirror tucks behind the shoulder. All sizes are % of the frame.
    */
    .fh3 {
        --frame-w: 390;
        --frame-h: 720;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 740px;
        min-height: 0;
        aspect-ratio: 390 / 720;
    }

    .fh3.is-mobile .fh3__mirrors,
    .fh3.is-mobile .fh3__behind,
    .fh3.is-mobile .fh3__wall,
    .fh3.is-mobile .fh3__model {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .fh3.is-mobile .fh3__stage {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }

    .fh3.is-mobile .fh3__bg-stack {
        transform: scale(1.22);
        transform-origin: 50% 40%;
    }

    .fh3.is-mobile .fh3__bg {
        object-fit: cover;
        object-position: center 42%;
    }

    .fh3.is-mobile .fh3__mobile {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 6;
        overflow: hidden;
        pointer-events: auto;
        touch-action: pan-y;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
    }

    .fh3__mobile-pair {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .fh3__mobile-block {
        position: absolute;
        left: 0;
        width: 100%;
        /* Less negative = higher on screen (v2 was -156/650) */
        bottom: calc(-115 / 650 * 100%);
        height: 100%;
    }

    .fh3__mobile-model,
    .fh3__mobile-mirror {
        position: absolute;
        overflow: hidden;
        /* Only slide sideways between layouts — never tween vertical size/pos */
        transition:
            left 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.45s ease;
        will-change: left, transform, opacity;
    }

    .fh3__mobile-img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        object-position: center bottom;
        opacity: 0;
        transition: opacity 0.55s ease;
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
    }

    /*
      Mirror assets vary in ratio/padding — contain made each slide sit
      higher/lower inside the same slot. Cover locks every mirror to the
      exact same frame so vertical position stays identical across items.
    */
    .fh3__mobile-mirror .fh3__mobile-img {
        object-fit: contain;
        object-position: center top;
    }

    .fh3__mobile-img.is-shown {
        opacity: 1;
        z-index: 1;
    }

    /* Solo — centered model, mirror slot hidden */
    .fh3__mobile-pair[data-layout="solo"] .fh3__mobile-model {
        left: 50%;
        top: calc(20 / 650 * 100%);
        width: calc(258 / 390 * 100%);
        height: calc(476 / 650 * 100%);
        transform: translateX(-50%);
        z-index: 2;
    }

    .fh3__mobile-pair[data-layout="solo"] .fh3__mobile-mirror {
        opacity: 0;
        pointer-events: none;
    }

    /*
      Controller "mirror-left" (incl. CMS model-left) → v2 model-left:
      model on the left, mirror tucked behind on the right.
    */
    .fh3__mobile-pair[data-layout="mirror-left"] .fh3__mobile-mirror {
        left: calc(161 / 390 * 100%);
        top: 0;
        width: calc(181 / 390 * 100%);
        height: calc(461 / 650 * 100%);
        opacity: 1;
        z-index: 1;
    }

    .fh3__mobile-pair[data-layout="mirror-left"] .fh3__mobile-model {
        left: calc(7 / 390 * 100%);
        top: calc(20 / 650 * 100%);
        width: calc(258 / 390 * 100%);
        height: calc(476 / 650 * 100%);
        transform: none;
        z-index: 2;
    }

    /*
      Controller "mirror-right" (incl. CMS model-right) → v2 model-right:
      model on the right, mirror tucked behind on the left.
    */
    .fh3__mobile-pair[data-layout="mirror-right"] .fh3__mobile-mirror {
        left: calc(48 / 390 * 100%);
        top: 0;
        width: calc(181 / 390 * 100%);
        height: calc(461 / 650 * 100%);
        opacity: 1;
        z-index: 1;
    }

    .fh3__mobile-pair[data-layout="mirror-right"] .fh3__mobile-model {
        left: calc(125 / 390 * 100%);
        top: calc(20 / 650 * 100%);
        width: calc(258 / 390 * 100%);
        height: calc(476 / 650 * 100%);
        transform: none;
        z-index: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fh3__model-img,
    .fh3__mobile-model,
    .fh3__mobile-mirror,
    .fh3__mobile-img {
        transition: none;
    }

    .fh3__lines {
        --lines-op: 0.85;
        --ring-glow-op: 0.7;
    }

    .fh3__lines-path,
    .fh3__lines-ring[data-ring="inner"],
    .fh3__lines-ring[data-ring="outer"],
    .fh3__lines-ring[data-ring="wide"] {
        filter: drop-shadow(0 0 4px rgba(255, 92, 56, 0.35));
    }
}