/*
 * Component styles that utilities cannot express cleanly: keyframe motion,
 * scroll-driven animation, native dialog/popover transitions, and long-form
 * prose. Everything respects prefers-reduced-motion (see base.css).
 *
 * Motion durations: 120ms micro, 200ms standard, 320ms emphasis, 480ms page.
 */

:root {
    --duration-micro: 120ms;
    --duration-standard: 200ms;
    --duration-emphasis: 320ms;
    --duration-page: 480ms;
    --row-pad: 0.875rem;
}

[data-density='compact'] {
    --row-pad: 0.5rem;
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 55%, transparent);
    }

    70%,
    100% {
        box-shadow: 0 0 0 0.5rem color-mix(in oklab, currentColor 0%, transparent);
    }
}

@keyframes route-draw {
    from {
        stroke-dashoffset: var(--route-length, 1000);
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes route-travel {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

@keyframes reveal-up {
    from {
        opacity: 0;
        translate: 0 1.5rem;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes toast-in {
    from {
        opacity: 0;
        translate: 0 0.75rem;
        scale: 0.96;
    }
}

@layer components {
    /* Signature route line: an SVG path drawn from pickup to destination. */
    .route-line__path {
        stroke-dasharray: var(--route-length, 1000);
        stroke-dashoffset: 0;
        animation: route-draw 1.6s var(--ease-standard) both;
    }

    .route-line__traveller {
        offset-rotate: 0deg;
        animation: route-travel 3.2s var(--ease-standard) 1.2s infinite;
    }

    /* Skeleton loaders. */
    .skeleton {
        background: linear-gradient(
                90deg,
                var(--surface-sunken) 25%,
                color-mix(in oklab, var(--surface-sunken) 55%, var(--surface)) 37%,
                var(--surface-sunken) 63%
            )
            0 0 / 200% 100%;
        animation: shimmer 1.4s linear infinite;
    }

    /* Native <dialog> modals, drawers, and bottom sheets. */
    .dialog {
        opacity: 0;
        transition:
            opacity var(--duration-standard) var(--ease-standard),
            translate var(--duration-emphasis) var(--ease-standard),
            overlay var(--duration-emphasis) allow-discrete,
            display var(--duration-emphasis) allow-discrete;
    }

    .dialog[open] {
        opacity: 1;
        translate: 0 0;
    }

    @starting-style {
        .dialog[open] {
            opacity: 0;
        }
    }

    .dialog::backdrop {
        opacity: 0;
        transition:
            opacity var(--duration-emphasis) var(--ease-standard),
            overlay var(--duration-emphasis) allow-discrete,
            display var(--duration-emphasis) allow-discrete;
    }

    .dialog[open]::backdrop {
        opacity: 1;
    }

    @starting-style {
        .dialog[open]::backdrop {
            opacity: 0;
        }
    }

    .dialog--modal {
        translate: 0 1rem;
    }

    @starting-style {
        .dialog--modal[open] {
            translate: 0 1rem;
        }
    }

    .dialog--right {
        translate: 100% 0;
    }

    @starting-style {
        .dialog--right[open] {
            translate: 100% 0;
        }
    }

    .dialog--left {
        translate: -100% 0;
    }

    @starting-style {
        .dialog--left[open] {
            translate: -100% 0;
        }
    }

    .dialog--bottom {
        translate: 0 100%;
    }

    @starting-style {
        .dialog--bottom[open] {
            translate: 0 100%;
        }
    }

    /* Popover API panels. */
    .popover {
        opacity: 0;
        scale: 0.97;
        transition:
            opacity var(--duration-standard) var(--ease-standard),
            scale var(--duration-standard) var(--ease-standard),
            overlay var(--duration-standard) allow-discrete,
            display var(--duration-standard) allow-discrete;
    }

    .popover:popover-open {
        opacity: 1;
        scale: 1;
    }

    @starting-style {
        .popover:popover-open {
            opacity: 0;
            scale: 0.97;
        }
    }

    @supports (anchor-name: --a) {
        .popover[data-anchored] {
            inset: auto;
            margin: 0.5rem 0 0;
            position-area: bottom span-right;
            position-try-fallbacks: flip-block, flip-inline;
        }
    }

    .toast-enter {
        animation: toast-in var(--duration-emphasis) var(--ease-emphasis) both;
    }

    /* Scroll-revealed sections. Never apply to the LCP element. */
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .reveal {
                animation: reveal-up linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 60%;
            }
        }
    }

    /* Long-form content (CMS pages, travel guide posts, legal documents). */
    .prose {
        color: var(--ink);
        max-width: 70ch;
        font-size: var(--text-body);
        line-height: 1.7;
    }

    .prose > * + * {
        margin-top: 1.1em;
    }

    .prose :where(h2) {
        margin-top: 2em;
        font-size: var(--text-h3);
        line-height: var(--text-h3--line-height);
        font-weight: 700;
    }

    .prose :where(h3) {
        margin-top: 1.6em;
        font-size: var(--text-h4);
        line-height: var(--text-h4--line-height);
        font-weight: 600;
    }

    .prose :where(a) {
        color: var(--link);
        text-decoration: underline;
        text-underline-offset: 0.2em;
        text-decoration-thickness: 1px;
    }

    .prose :where(a:hover) {
        color: var(--link-hover);
        text-decoration-thickness: 2px;
    }

    .prose :where(ul, ol) {
        padding-inline-start: 1.4em;
    }

    .prose :where(ul) {
        list-style: disc;
    }

    .prose :where(ol) {
        list-style: decimal;
    }

    .prose :where(li + li) {
        margin-top: 0.4em;
    }

    .prose :where(li)::marker {
        color: var(--ink-subtle);
    }

    .prose :where(blockquote) {
        border-inline-start: 3px solid var(--accent);
        padding-inline-start: 1em;
        color: var(--ink-muted);
        font-style: italic;
    }

    .prose :where(strong) {
        font-weight: 600;
    }

    .prose :where(code) {
        font-family: var(--font-mono);
        font-size: 0.9em;
        background: var(--surface-sunken);
        border-radius: var(--radius-xs);
        padding: 0.1em 0.35em;
    }

    .prose :where(hr) {
        border-color: var(--line);
        margin-block: 2em;
    }

    .prose :where(img, figure) {
        border-radius: var(--radius-lg);
    }

    .prose :where(table) {
        width: 100%;
        font-size: var(--text-small);
        border-collapse: collapse;
    }

    .prose :where(th, td) {
        border-bottom: 1px solid var(--line);
        padding: 0.6em 0.75em;
        text-align: start;
    }
}