/* Facial Touchup section — horizontal slider with initial scan + cross-fade. */

.facial-touchup {
    padding: var(--spacing-2xl, 4rem) var(--spacing-md, 1rem);
    background-color: var(--color-bg-alt, #f7f5f2);
}

.facial-touchup__container {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.facial-touchup__heading {
    margin-bottom: var(--spacing-sm, 0.75rem);
}

.facial-touchup__intro {
    margin-bottom: var(--spacing-lg, 1.5rem);
    color: var(--color-text-muted, #555);
}

.facial-touchup__viewport {
    --ft-scan-duration: 2500ms;
    --ft-fade-duration: 400ms;

    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, 0.12));
    background-color: #000;
}

.facial-touchup__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: translateX(24px);
    transition:
        opacity var(--ft-fade-duration) ease-in-out,
        transform var(--ft-fade-duration) ease-in-out;
    will-change: opacity, transform;
}

.facial-touchup__slide.is-active {
    opacity: 1;
    transform: translateX(0);
}

/* Initial scan: slower, more pronounced horizontal swipe to draw the eye. */
.facial-touchup__viewport.is-scanning .facial-touchup__slide {
    transition:
        opacity var(--ft-scan-duration) ease-in-out,
        transform var(--ft-scan-duration) ease-in-out;
    transform: translateX(80px);
}

.facial-touchup__viewport.is-scanning .facial-touchup__slide.is-active {
    transform: translateX(0);
}

/* Respect users who'd rather not see motion. Skip the scan, keep static. */
@media (prefers-reduced-motion: reduce) {
    .facial-touchup__slide,
    .facial-touchup__viewport.is-scanning .facial-touchup__slide {
        transition: opacity 0.001ms;
        transform: none;
    }
}

/* Mobile: keep the 3:2 aspect ratio, let it shrink to viewport width. */
@media (max-width: 640px) {
    .facial-touchup {
        padding: var(--spacing-xl, 2.5rem) var(--spacing-sm, 0.75rem);
    }

    .facial-touchup__viewport {
        max-width: 100%;
        border-radius: var(--radius-sm, 8px);
    }
}

/* Story-image hosts: any div.story-image is auto-converted by the module
   into a slider. The container already has width/height/overflow:hidden
   from base.css; we just need positioning + the scan transition rules. */
.story-image.is-facial-touchup-slider {
    --ft-scan-duration: 2500ms;
    --ft-fade-duration: 400ms;
    position: relative;
}

.story-image.is-facial-touchup-slider.is-scanning .facial-touchup__slide {
    transition:
        opacity var(--ft-scan-duration) ease-in-out,
        transform var(--ft-scan-duration) ease-in-out;
    transform: translateX(80px);
}

.story-image.is-facial-touchup-slider.is-scanning .facial-touchup__slide.is-active {
    transform: translateX(0);
}