/**
 * GOXLR Motion System — cinematic transitions, reveals, micro-interactions
 */

/* ── View Transitions API (cross-document, progressive) ── */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: motion-vt-out var(--motion-page-leave) var(--ease-premium) both;
}

::view-transition-new(root) {
    animation: motion-vt-in var(--motion-page-enter) var(--ease-premium) both;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation-duration: calc(var(--motion-page-enter) + 80ms);
    mix-blend-mode: normal;
}

::view-transition-group(site-header) {
    z-index: 100;
}

::view-transition-group(main-content) {
    z-index: 1;
}

::view-transition-old(main-content) {
    animation: motion-main-out var(--motion-page-leave) var(--ease-premium) both;
}

::view-transition-new(main-content) {
    animation: motion-main-in var(--motion-page-enter) var(--ease-premium) both;
}

@keyframes motion-vt-out {
    from { opacity: 1; filter: blur(0); }
    to { opacity: 0; filter: blur(6px); }
}

@keyframes motion-vt-in {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0); }
}

@keyframes motion-main-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(1.008);
        filter: blur(8px);
    }
}

@keyframes motion-main-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.992);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

/* Shared persistent layers */
.motion-persist-header {
    view-transition-name: site-header;
}

#main-content {
    view-transition-name: main-content;
}

.site-footer {
    view-transition-name: site-footer;
}

/* ── Lenis ── */
html.lenis,
html.lenis body {
    height: auto;
}

html.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

/* ── Page transition layers (fallback + enhanced) ── */
.page-progress {
    height: 2px;
    background: linear-gradient(90deg,
        rgba(59, 130, 246, 0.2),
        rgba(59, 130, 246, 0.95) 50%,
        rgba(147, 197, 253, 0.6));
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.35);
    transition: opacity 0.35s var(--ease-premium);
    will-change: width, opacity;
}

.page-curtain {
    backdrop-filter: blur(0);
    transition:
        opacity var(--motion-page-enter) var(--ease-premium),
        backdrop-filter var(--motion-page-leave) var(--ease-premium),
        visibility 0s linear calc(var(--motion-page-enter) + 0.05s);
}

body.page-leaving .page-curtain {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.72);
}

html.vt-nav-supported body.page-leaving .page-curtain {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.page-enter #main-content,
body.page-leaving #main-content {
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
    transform: translateZ(0);
}

body.page-leaving #main-content {
    transform: translateY(-8px) scale(1.006) translateZ(0);
    filter: blur(8px);
}

body.page-enter #main-content {
    transform: translateY(14px) scale(0.992) translateZ(0);
    filter: blur(6px);
}

body.page-entering #main-content {
    filter: blur(0);
}

body.motion-leaving .site-footer,
body.motion-leaving .global-trust {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity calc(var(--motion-page-leave) - 80ms) var(--ease-premium),
        transform var(--motion-page-leave) var(--ease-premium);
}

body.page-ready .site-footer,
body.page-ready .global-trust {
    transition:
        opacity 0.6s var(--ease-premium) 0.15s,
        transform 0.65s var(--ease-premium) 0.12s;
}

/* ── Unified reveal system ── */
.motion-reveal,
.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition:
        opacity var(--motion-reveal) var(--ease-premium) var(--motion-delay, 0s),
        transform 0.88s var(--ease-premium) var(--motion-delay, 0s);
    will-change: opacity, transform;
}

.motion-reveal--title,
.scroll-reveal--title {
    transform: translate3d(0, 24px, 0);
}

.motion-reveal--media,
.scroll-reveal--media {
    transform: translate3d(0, 16px, 0) scale(0.985);
}

.motion-reveal--left,
.scroll-reveal--left {
    transform: translate3d(-24px, 0, 0);
}

.motion-reveal--right,
.scroll-reveal--right {
    transform: translate3d(24px, 0, 0);
}

.motion-reveal.is-motion-visible,
.motion-reveal.is-visible,
.scroll-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Load stagger (hero / page headers) */
.motion-load,
.page-stagger {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 0.72s var(--ease-premium),
        transform 0.78s var(--ease-premium);
    transition-delay: calc(0.06s + var(--motion-i, var(--ps-i, 0)) * var(--motion-stagger));
}

body.motion-ready .motion-load,
body.page-ready .motion-load,
body.motion-ready .page-stagger,
body.page-ready .page-stagger,
body.motion-ready .hero-stagger,
body.page-ready .hero-stagger {
    opacity: 1;
    transform: none;
}

/* ── Micro-interactions ── */
.motion-lift {
    transition:
        transform 0.45s var(--ease-premium),
        box-shadow 0.45s var(--ease-premium),
        border-color 0.3s ease;
}

.motion-lift:hover {
    transform: perspective(900px) rotateX(var(--tilt-x, 0)) rotateY(var(--tilt-y, 0)) translateY(-3px);
}

.motion-ripple,
.press-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(59, 130, 246, 0.18);
    transform: scale(0);
    animation: motionRipple 0.72s var(--ease-premium) forwards;
}

@keyframes motionRipple {
    to {
        transform: scale(1);
        opacity: 0;
    }
}

.is-pressing {
    transform: scale(0.985) !important;
    transition: transform 0.22s var(--ease-soft) !important;
}

.is-releasing {
    transition: transform 0.48s var(--ease-premium) !important;
}

/* ── Lightbox cinematic ── */
body.lightbox-open {
    overflow: hidden;
}

.lightbox.motion-lightbox-open img,
.lightbox.active img {
    transform: scale(1) translateZ(0);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }

    .motion-reveal,
    .scroll-reveal,
    .motion-load,
    .page-stagger,
    .hero-stagger {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    body.page-enter #main-content,
    body.page-leaving #main-content {
        filter: none !important;
        transform: none !important;
    }

    .page-curtain,
    .page-progress,
    .ambient-particles {
        display: none !important;
    }

    .motion-lift:hover {
        transform: none;
    }
}