/**
 * Progressive landing motion.
 * JavaScript adds the reveal classes; without it, content stays fully visible.
 */

.landing-reveal {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
    filter: blur(4px);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-reveal.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.landing-reveal--stagger > * {
    opacity: 0;
    transform: translate3d(0, 0.8rem, 0);
    filter: blur(3px);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--reveal-i, 0) * 0.055s);
}

.landing-reveal--stagger.is-inview > * {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.landing-reveal--copy {
    transform: translate3d(0, 1rem, 0);
}

.landing-reveal--media {
    transform: translate3d(0, 1.5rem, 0) scale(0.985);
    transform-origin: 50% 35%;
}

.landing-reveal--media.is-inview {
    transform: translate3d(0, 0, 0) scale(1);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .landing-product-shot--live .landing-product-shot__glass-shell--section {
        transition:
            border-color var(--transition-base, 0.2s ease),
            box-shadow var(--transition-slower, 0.4s ease);
    }

    .landing-product-shot--live.is-inview:hover {
        transform: translate3d(0, -0.3rem, 0) scale(1.006);
    }

    .landing-product-shot--live.is-inview:hover .landing-product-shot__glass-shell--section {
        border-color: color-mix(in srgb, var(--landing-text) 18%, transparent);
        box-shadow:
            inset 0 1px 0 color-mix(in srgb, var(--landing-text) 11%, transparent),
            0 2rem 5rem color-mix(in srgb, var(--landing-canvas) 78%, transparent);
    }
}

/* Native scroll-linked depth is decorative progressive enhancement. */
@supports ((animation-timeline: view()) and (animation-range: entry)) {
    @media (prefers-reduced-motion: no-preference) {
        .landing-product-shot--live.is-inview {
            animation: landing-product-shot-depth linear both;
            animation-timeline: view(block);
            animation-range: entry 5% cover 85%;
        }
    }
}

@keyframes landing-product-shot-depth {
    from {
        translate: 0 0.65rem;
    }

    to {
        translate: 0 -0.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-reveal,
    .landing-reveal--stagger > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .landing-product-shot--live {
        animation: none !important;
        translate: none !important;
    }
}