/* ==========================================================================
   Frederick Healthcare — motion and app shell.
   Layered on top of the site's own design files without changing them:
   page-to-page transitions, a product shot that travels from the catalogue
   card into its product page, tactile press feedback, and on phones an
   app-style bottom tab bar with a header that tucks away while reading.
   ========================================================================== */

/* ---------- page-to-page transitions (Chrome, Edge, Android WebView, Safari 18.2+) ---------- */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }
.app-tabbar { view-transition-name: app-tabbar; }

/* The page itself moves as the root snapshot. Content wrappers are never
   named: a view-transition-name makes a stacking context, which would trap
   fixed overlays (filter drawer, dialogs) under the header and tab bar. */
::view-transition-old(root) { animation: app-page-out .18s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: app-page-in .42s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes app-page-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes app-page-in { from { opacity: 0; transform: translateY(16px); } }

/* the product shot morphs from its card into the product page */
.product-page__media img { view-transition-name: product-shot; }
::view-transition-group(product-shot) { animation-duration: .5s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); z-index: 50; }
::view-transition-old(product-shot), ::view-transition-new(product-shot) { animation-duration: .5s; mix-blend-mode: normal; height: 100%; object-fit: contain; }

/* ---------- reveal: the site's own reveal, with a focus pull ---------- */
.js .reveal { filter: blur(6px); transform: translateY(18px); }
/* If a script error stops site.js before the reveal observer starts, content
   still appears after a moment instead of staying invisible. */
.js:not(.reveal-ready) .reveal { animation: app-reveal-failsafe 0s 2.5s forwards; }
@keyframes app-reveal-failsafe { to { opacity: 1; transform: none; filter: none; } }
.js .reveal.is-in {
    filter: none;
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1), filter .6s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

/* catalogue cards arrive as a list when filters change or the page loads */
.js .product-card.is-arriving { animation: app-card-in .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--arrive-delay, 0ms); }
@keyframes app-card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* ---------- tactile press feedback ---------- */
.btn, .chip, .tab, .link-arrow, .product-card, .teaser, .area-card, .media-card, .hero-banner__nav, .app-tabbar__item {
    -webkit-tap-highlight-color: transparent;
}
.btn:active, .chip:active, .tab:active { transform: scale(.97); transition-duration: .08s; }
.product-card:active, .teaser:active, .area-card:active, .media-card:active { transform: scale(.985); transition-duration: .1s; }

/* ---------- phones: app shell ---------- */
.app-tabbar { display: none; }

@media (max-width: 760px) {
    :root { --app-tabbar-h: 64px; }

    body { padding-bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom, 0px)); }

    /* the header tucks away while scrolling down and returns on the way up */
    .site-header { transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease; }
    .site-header.is-tucked:not(.is-open) { transform: translateY(-100%); }
    .site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(11, 31, 63, .35); }

    .app-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        height: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding: 6px 4px env(safe-area-inset-bottom, 0px);
        background: rgba(255, 255, 255, .94);
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 24px -16px rgba(11, 31, 63, .3);
    }
    .app-tabbar__item {
        position: relative;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        padding: 0; border: 0; background: none; cursor: pointer;
        color: var(--ink-500);
        font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: 0;
        text-decoration: none;
        transition: color .2s var(--ease);
    }
    .app-tabbar__icon {
        display: grid; place-items: center;
        width: 54px; height: 30px; border-radius: var(--radius-pill);
        transition: background-color .25s var(--ease), transform .18s var(--ease), color .2s var(--ease);
    }
    .app-tabbar__icon svg { width: 22px; height: 22px; }
    .app-tabbar__item:active .app-tabbar__icon { transform: scale(.88); }
    .app-tabbar__item[aria-current="page"] { color: var(--brand-700); }
    .app-tabbar__item[aria-current="page"] .app-tabbar__icon { background: var(--brand-100); color: var(--brand-600); }
    .app-tabbar__item[aria-current="page"] .app-tabbar__icon svg { animation: app-tab-pop .36s cubic-bezier(.16, 1, .3, 1); }
    @keyframes app-tab-pop { from { transform: scale(.82); } }

    /* lift floating UI above the tab bar */
    .dialog-panel { margin-bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* Full-screen app wrappers (installed PWA, iOS WebView) draw under the notch;
   env() is 0 everywhere else, so this is safe unconditionally. */
.site-header { padding-top: env(safe-area-inset-top, 0px); }

@media (prefers-reduced-motion: reduce) {
    .js .reveal { filter: none; transform: none; animation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .site-header.is-tucked:not(.is-open) { transform: none; }
    .btn:active, .chip:active, .tab:active, .product-card:active, .teaser:active, .area-card:active, .media-card:active { transform: none; }
}