/*
 * TranspoLink motion layer.
 * Load after liquid-glass.css.
 */

:root {
    --dur-fast: 220ms;
    --dur-base: 600ms;
    --dur-slow: 700ms;
    --dur-count: 1200ms;
    --stagger: 70ms;

    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-blob: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.2, .85, .25, 1.12);

    --motion-distance: 14px;
    --motion-blur: 12px;
}

/* Native navigation remains intact. */
@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation: none;
}

::view-transition-old(root) {
    animation: tl-page-out 200ms ease both;
    mix-blend-mode: normal;
}

::view-transition-new(root) {
    animation: tl-page-in var(--dur-base) var(--ease-out) both;
    mix-blend-mode: normal;
}

@keyframes tl-page-out {
    to {
        opacity: 0;
        filter: blur(4px);
    }
}

@keyframes tl-page-in {
    from {
        opacity: 0;
        filter: blur(6px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* Theme snapshots are animated by motion.js. */
html.tl-theme-transition::view-transition-old(root),
html.tl-theme-transition::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

html.tl-theme-transition::view-transition-old(root) {
    z-index: 1;
}

html.tl-theme-transition::view-transition-new(root) {
    z-index: 2;
}

/* Freeze existing color transitions while taking snapshots. */
html.tl-theme-transition body,
html.tl-theme-transition body * {
    transition: none !important;
}

/* Added by JS only after initialization. */
.tl-motion-wait {
    opacity: 0;
}

.tl-motion-running {
    will-change: transform, opacity, filter;
}

/* Full-screen fallback. No layout participation. */
.tl-motion-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
}

/* Preserve all existing dimensions and positions. */
body:is(.passenger-ui, .driver-ui, .admin-ui)
:is(.button, .navigation a, .booking-card, .theme-toggle) {
    transition:
        transform var(--dur-fast) var(--ease-out),
        opacity var(--dur-fast) ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body:is(.passenger-ui, .driver-ui, .admin-ui)
    :is(.button, .navigation a, .booking-card):hover {
        transform: translateY(-2px);
    }
}

body:is(.passenger-ui, .driver-ui, .admin-ui)
.button:active {
    transform: scale(.97);
}

/* Only the known recent-location blue markers pulse.
   Marker transforms remain controlled by Leaflet. */
.tl-motion-live-marker {
    animation: tl-marker-pulse 2400ms ease-in-out infinite;
}

@keyframes tl-marker-pulse {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 2px rgba(0, 106, 245, .25));
    }

    50% {
        opacity: .82;
        filter: drop-shadow(0 0 7px rgba(0, 106, 245, .65));
    }
}

@media (max-width: 760px) {
    :root {
        --motion-blur: 4px;
    }

    .tl-motion-live-marker {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 150ms;
        --dur-base: 150ms;
        --dur-slow: 150ms;
        --stagger: 0ms;
        --motion-distance: 0px;
        --motion-blur: 0px;
    }

    .tl-motion-live-marker {
        animation: none;
    }

    body:is(.passenger-ui, .driver-ui, .admin-ui)
    :is(.button, .navigation a, .booking-card, .theme-toggle) {
        transition: opacity 150ms ease;
    }

    body:is(.passenger-ui, .driver-ui, .admin-ui)
    :is(.button, .navigation a, .booking-card):hover,
    body:is(.passenger-ui, .driver-ui, .admin-ui)
    .button:active {
        transform: none;
    }

    ::view-transition-old(root) {
        animation: tl-reduced-out 150ms ease both;
    }

    ::view-transition-new(root) {
        animation: tl-reduced-in 150ms ease both;
    }
}

@keyframes tl-reduced-out {
    to { opacity: 0; }
}

@keyframes tl-reduced-in {
    from { opacity: 0; }
    to { opacity: 1; }
}