:root {
    --ak-motion-standard: cubic-bezier(.2, 0, 0, 1);
    --ak-motion-decelerate: cubic-bezier(0, 0, 0, 1);
    --ak-motion-accelerate: cubic-bezier(.3, 0, 1, 1);
    --ak-safe-top: env(safe-area-inset-top, 0px);
    --ak-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    min-height: 100%;
    background: #f8fafc;
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* Header and bottom navigation are persistent DOM nodes; snapshotting them is
   unnecessary and expensive on Android WebView. */
header.app-top-header,
nav.app-bottom-nav { view-transition-name: none !important; }
main {
    view-transition-name: ak-page-content;
    contain: paint;
}

/* The legacy per-page root animation is intentionally neutralized. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none !important;
}

::view-transition-group(ak-page-content) {
    overflow: clip;
    animation-duration: 170ms;
    animation-timing-function: var(--ak-motion-standard);
}

html[data-ak-navigation="forward"]::view-transition-old(ak-page-content) {
    animation: 150ms var(--ak-motion-standard) both ak-page-forward-out;
}

html[data-ak-navigation="forward"]::view-transition-new(ak-page-content) {
    animation: 170ms var(--ak-motion-decelerate) both ak-page-forward-in;
}

html[data-ak-navigation="back"]::view-transition-old(ak-page-content) {
    animation: 150ms var(--ak-motion-standard) both ak-page-back-out;
}

html[data-ak-navigation="back"]::view-transition-new(ak-page-content) {
    animation: 170ms var(--ak-motion-decelerate) both ak-page-back-in;
}

html[data-ak-navigation="tab"]::view-transition-old(ak-page-content) {
    animation: 100ms ease-out both ak-page-fade-out;
}

html[data-ak-navigation="tab"]::view-transition-new(ak-page-content) {
    animation: 140ms ease-out both ak-page-fade-in;
}

@keyframes ak-page-forward-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 1; transform: translate3d(-6px, 0, 0); }
}
@keyframes ak-page-forward-in {
    from { opacity: .94; transform: translate3d(10px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ak-page-back-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 1; transform: translate3d(10px, 0, 0); }
}
@keyframes ak-page-back-in {
    from { opacity: .94; transform: translate3d(-6px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes ak-page-fade-out { to { opacity: 0; } }
@keyframes ak-page-fade-in { from { opacity: 0; } }

/* Lightweight live-DOM animation used for back navigation. It avoids the
   expensive old/new bitmap snapshots created by the View Transition API. */
.ak-back-enter {
    animation: ak-live-back-in 155ms var(--ak-motion-decelerate) both;
    will-change: transform;
    backface-visibility: hidden;
}

@keyframes ak-live-back-in {
    from { transform: translate3d(-6px, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

/* A thin progress indicator masks network latency without blocking the old page. */
#ak-navigation-progress {
    position: fixed;
    z-index: 10000;
    inset: var(--ak-safe-top) auto auto 0;
    width: 0;
    height: 3px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #0066ff, #4f8cff, #ff1e27);
    box-shadow: 0 1px 8px rgba(0, 102, 255, .35);
    transition: width 360ms var(--ak-motion-standard), opacity 120ms ease;
}

html.ak-is-navigating #ak-navigation-progress {
    width: 72%;
    opacity: 1;
}

html.ak-page-ready #ak-navigation-progress {
    width: 100%;
    opacity: 0;
}

.ak-pressed {
    transform: scale(.975) !important;
    opacity: .86 !important;
    transition: transform 70ms ease-out, opacity 70ms ease-out !important;
}

/* Actual WebView/mobile rendering should not look like a phone mockup. */
@media (max-width: 600px), (display-mode: standalone) {
    body {
        width: 100%;
        background: #f8fafc !important;
    }

    body > div.max-w-\[430px\],
    body > div.max-w-\[480px\] {
        width: 100% !important;
        max-width: none !important;
        min-height: 100dvh !important;
        box-shadow: none !important;
    }

    header.app-top-header,
    nav.app-bottom-nav {
        max-width: none !important;
    }

    header.app-top-header {
        padding-top: var(--ak-safe-top);
        height: calc(3.5rem + var(--ak-safe-top));
    }

    nav.app-bottom-nav {
        padding-bottom: max(.35rem, var(--ak-safe-bottom)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: 1ms !important;
    }

    #ak-navigation-progress { transition: none; }
}