/* Shared motion: small distances, finite animations, no animated blur or shadows. */
:root {
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --motion-short: 130ms;
    --motion-panel: 380ms;
}
@keyframes journal-arrive {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes journal-card-arrive {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
}
.site-shell .journey-heading,
.site-shell .page-heading-row,
.site-shell .album-topline,
.site-shell .admin-page-title {
    animation: journal-arrive 400ms var(--motion-ease) backwards;
}
.site-shell .timeline-rail-body {
    animation: none;
}
.site-shell .album-intro,
.site-shell .memory-form-layout,
.site-shell .admin-table {
    animation: journal-arrive 440ms var(--motion-ease) 60ms backwards;
}
.site-shell .map-featured-card,
.site-shell .timeline-mobile-btn,
.site-shell .upload-queue-dock:not([hidden]) {
    animation: journal-card-arrive var(--motion-panel) var(--motion-ease) backwards;
}
/* Only the first few album covers enter. Large media grids stay still. */
.site-shell .place-card,
.site-shell .media-tile { animation: none; }
.site-shell .gallery-grid > .place-card:nth-child(-n+6) {
    animation: journal-arrive 420ms var(--motion-ease) var(--enter-delay, 0ms) backwards;
}
.site-shell :is(.btn, .album-page-button, .album-back, .album-edit,
    .back-link, .transport-chip, .map-featured-close, .lightbox-close,
    .lightbox-nav, .gallery-close, .gallery-nav, .queue-summary-close,
    .upload-queue-actions button, .theme-toggle, .nav-logout button) {
    transition: transform var(--motion-short) var(--motion-ease),
        background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.site-shell :is(.nav-sections a, .mobile-tabbar a, .map-mode-switch a,
    .memory-editor-steps a) {
    transition: transform var(--motion-short) var(--motion-ease),
        background-color 200ms ease, color 200ms ease;
}
.site-shell .featured-cta {
    transition: background-color 200ms ease, color 200ms ease;
}
.site-shell .featured-cta svg {
    transition: transform 240ms var(--motion-ease);
}
.site-shell .journey-home .tl-item {
    transition: transform 260ms var(--motion-ease),
        background-color 200ms ease, border-color 200ms ease;
}
.site-shell .tl-item-dot {
    transition: transform 320ms var(--motion-ease), background-color 200ms ease;
}
.site-shell .tl-item.is-current .tl-item-dot { transform:scale(1.06); }
.site-shell .memory-page .place-card,
.site-shell.memory-page .place-card {
    transition: transform 280ms var(--motion-ease), border-color 220ms ease;
}
.site-shell .card-img,
.site-shell .media-tile img {
    transition: transform 400ms var(--motion-ease);
}
.site-shell .media-tile:hover img { filter: none; }
.site-shell :is(.btn, .album-page-button, .album-back, .album-edit,
    .transport-chip, .map-featured-close, .lightbox-close, .lightbox-nav,
    .gallery-close, .gallery-nav, .queue-summary-close, .theme-toggle,
    .nav-sections a, .mobile-tabbar a, .map-mode-switch a):active:not(:disabled) {
    transform: scale(.97);
}
.site-shell .journey-home .tl-item:active { transform: scale(.992); }
@media (hover: hover) and (pointer: fine) {
    .site-shell :is(.btn, .album-page-button, .album-back, .album-edit,
        .back-link, .nav-sections a):hover { transform: translateY(-1px); }
    .site-shell .journey-home .tl-item:hover { transform: translateX(3px); }
    .site-shell.memory-page .place-card:hover { transform: translateY(-4px); }
    .site-shell .place-card:hover .card-img,
    .site-shell .media-tile:hover img { transform: scale(1.02); }
    .site-shell .map-featured-open:hover .featured-cta svg { transform: translateX(3px); }
    .site-shell .theme-toggle:hover { transform: rotate(-12deg); }
    .site-shell :is(.map-featured-close, .lightbox-close, .gallery-close):hover { transform: scale(1.04); }
}
/* The drawer has one moving surface; its header and media do not animate separately. */
.site-shell .journey-home .timeline-drawer {
    transition: transform 340ms var(--motion-ease), visibility 340ms;
}
.site-shell .lightbox { animation: none; }
.site-shell #gallery-overlay { transition: none; visibility: hidden; }
.site-shell #gallery-overlay.active { visibility: visible; }
.site-shell .lightbox[inert],
.site-shell #gallery-overlay[inert] { pointer-events: none; }
.site-shell .gallery-backdrop {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.site-shell .map-place-preview {
    transition: opacity 220ms ease, transform 260ms var(--motion-ease), visibility 220ms;
}
.site-shell .upload-task-list:not([hidden]),
.site-shell .upload-queue-list:not([hidden]) {
    animation: journal-arrive 260ms var(--motion-ease) backwards;
}
.site-shell :is(.queue-summary-fill, .upload-queue-fill) {
    transition: width 300ms var(--motion-ease);
}
.site-shell .queue-cloud { transition: color 200ms ease; }
.site-shell .upload-queue-icon { transition: background-color 200ms ease, color 200ms ease; }
.site-shell .upload-queue-dock[data-phase=done] .queue-cloud { color: #438b87; }
.site-shell .queue-chevron { transition: transform 240ms var(--motion-ease); }
.site-shell .flash-msg { animation: journal-arrive 300ms var(--motion-ease) backwards; }
.site-shell .flash-msg { transition:opacity 180ms ease, transform 180ms var(--motion-ease); }
.site-shell .upload-limit-dialog[open] {
    animation: journal-card-arrive 280ms var(--motion-ease) backwards;
}
.site-shell .upload-limit-actions button {
    transition: transform var(--motion-short) var(--motion-ease),
        background-color 200ms ease, border-color 200ms ease;
}
.site-shell .upload-limit-actions button:active { transform: scale(.97); }

@keyframes journal-timeline-arrive {
    from { opacity:0; transform:translateX(-6px); }
    to { opacity:1; transform:none; }
}
.site-shell .motion-timeline-enter { animation:journal-timeline-arrive 380ms var(--motion-ease) var(--enter-delay,0ms) backwards; }
/* Initial motion is retired even when a cached view was hidden during its entry. */
.site-shell.motion-boot-complete :is(.journey-heading,.page-heading-row,.album-topline,
    .admin-page-title,.album-intro,.memory-form-layout,.admin-table,.map-featured-card,
    .timeline-mobile-btn,.place-card,.motion-timeline-enter) { animation:none; }
.site-shell.motion-boot-complete .gallery-grid > .place-card { animation:none; }

/* One small moving highlight; the map canvas and tiles remain stationary. */
.map-mode-switch.has-motion-indicator > a { position:relative; z-index:1; }
.map-mode-switch.has-motion-indicator > a.active { background:transparent; }
.motion-mode-indicator { position:absolute; left:0; top:0; z-index:0; border-radius:20px;
    background:#b4edf5; pointer-events:none; }
.site-shell .map-mode-switch a:hover { color:var(--fresh-ink,#245774); }
.site-shell .journey-heading-copy::after { transform-origin:left; }
.site-shell .trajectory-transport-marker,
.site-shell .trajectory-transport-marker.transport-ship .transport-marker-icon { animation:none; will-change:auto; }
.site-shell .trajectory-transport-marker { transform:none; transition:transform 180ms var(--motion-ease); }
.site-shell .map-loading.is-hidden .loading-ring { animation:none; }
@media (hover:hover) and (pointer:fine) {
    .site-shell .trajectory-transport-marker:hover { transform:translateY(-1px); }
}

@keyframes journal-confirm {
    0% { transform:translateY(2px) scale(.94); }
    45% { transform:translateY(-1px) scale(1.05); }
    100% { transform:none; }
}
.site-shell .upload-queue-dock[data-phase=done] .queue-cloud { animation:journal-confirm 420ms var(--motion-ease); }
.site-shell :is(.album-page-button,.gallery-nav,.lightbox-nav):disabled { transform:none; }
.site-shell :is(input:not([type=checkbox]):not([type=radio]),textarea,select) {
    transition:border-color 180ms ease, background-color 180ms ease;
}
/* Interaction surfaces keep the existing geometry and inherit the control color. */
.motion-ink-host{position:relative}
.motion-ink-surface{position:absolute;inset:0;z-index:2;display:block;overflow:hidden;border-radius:inherit;pointer-events:none;color:inherit;contain:paint}
.motion-ink-wave{position:absolute;display:block;background:currentColor;border-radius:50%;pointer-events:none;opacity:0;transform:scale(0)}
.motion-disclosing{overflow:hidden;will-change:height}
.motion-disclosure-body{min-width:0;display:flow-root}
:is(.site-shell,.auth-page) details>summary:focus-visible{outline-offset:-3px;border-radius:10px}
@keyframes journal-dialog-open{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes journal-menu-open{from{opacity:.2;transform:translateY(var(--menu-enter-y,4px))}to{opacity:1;transform:none}}
@keyframes journal-heart-tap{0%,100%{transform:none}40%{transform:scale(1.09)}70%{transform:scale(.98)}}
:is(.site-shell,.auth-page) .site-confirm[open]{animation:journal-dialog-open 220ms var(--motion-ease) both}
.ui-menu-positioned{animation:journal-menu-open 180ms var(--motion-ease) both}
.ui-menu-positioned[data-motion-placement=above]{--menu-enter-y:-4px}
.auth-page .flash-msg{animation:journal-arrive 280ms var(--motion-ease) backwards}
.site-shell .admin-card-grid>:is(.journal-countdown,.concert-entry):nth-child(-n+4){animation:journal-arrive 300ms var(--motion-ease) backwards}
.site-shell .admin-card-grid>:is(.journal-countdown,.concert-entry):nth-child(2){animation-delay:35ms}
.site-shell .admin-card-grid>:is(.journal-countdown,.concert-entry):nth-child(3){animation-delay:70ms}
.site-shell .admin-card-grid>:is(.journal-countdown,.concert-entry):nth-child(4){animation-delay:105ms}
.site-shell.motion-boot-complete .admin-card-grid>:is(.journal-countdown,.concert-entry){animation:none}
:is(.site-shell,.auth-page) :is(.btn,.admin-text-link,.journey-edit,.password-toggle,.cover-btn,.delete-btn,.upload-remove-btn,[data-dismiss-flash],summary){transition:transform 130ms var(--motion-ease),background-color 180ms ease,border-color 180ms ease,color 180ms ease}
:is(.site-shell,.auth-page) :is(.btn,.journey-edit,.password-toggle,.cover-btn,.delete-btn,.upload-remove-btn,[data-dismiss-flash]):active:not(:disabled){transform:scale(.97)}
:is(.site-shell,.auth-page) :is(.btn,.admin-text-link,.card-title-row,.password-toggle) svg{transition:transform 180ms var(--motion-ease)}
.site-shell .workspace-nav nav a{transition:background-color 180ms ease,color 180ms ease,transform 180ms var(--motion-ease)}
.site-shell .journal-navbar .nav-sections a::after{transition:background-color 160ms ease,transform 160ms var(--motion-ease);transform:scaleX(.45)}
.site-shell .journal-navbar .nav-sections a.active::after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){
    .site-shell .page-redesign .place-card:hover,.site-shell.page-redesign .place-card:hover{transform:translateY(-2px)}
    .site-shell .place-card:hover .card-title-row>svg{transform:translate(2px,-2px)}
    .site-shell .admin-text-link:hover svg{transform:translateX(2px)}
    .site-shell .workspace-nav nav a:hover{transform:translateX(2px)}
    .site-shell .journal-navbar .nav-sections a:not(.active):hover::after{background:#b4e7f0;transform:scaleX(1)}
    .site-shell .journal-navbar .logo:hover .brand-heart{animation:journal-heart-tap 460ms var(--motion-ease)}
    .site-shell .lightbox-prev:hover svg,.site-shell .gallery-prev:hover svg{transform:translateX(-2px)}
    .site-shell .lightbox-next:hover svg,.site-shell .gallery-next:hover svg{transform:translateX(2px)}
}
/* Respect the system setting, including legacy hover effects and transitions. */
@media (prefers-reduced-motion: reduce) {
    .motion-mode-indicator { display:none; }
    .map-mode-switch.has-motion-indicator > a.active { background:#b4edf5; }
    .site-shell *, .site-shell *::before, .site-shell *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .auth-page *, .auth-page *::before, .auth-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .motion-ink-surface{display:none!important}
    :is(.site-shell,.auth-page) :is(.btn,.workspace-nav nav a,.password-toggle,.cover-btn,.delete-btn,.upload-remove-btn,[data-dismiss-flash]):is(:hover,:active){transform:none!important}
    :is(.site-shell,.auth-page) :is(.admin-text-link svg,.card-title-row>svg,.brand-heart,.lightbox-nav svg,.gallery-nav svg){transform:none!important}
    .site-shell :is(.btn, .tl-item, .tl-item-dot, .place-card, .card-img,
        .media-tile img, .featured-cta svg, .album-page-button, .album-back,
        .album-edit, .back-link, .transport-chip, .map-featured-close,
        .lightbox-close, .lightbox-nav, .gallery-close, .gallery-nav,
        .queue-summary-close, .theme-toggle, .trajectory-transport-marker, .nav-sections a,
        .mobile-tabbar a, .map-mode-switch a, .upload-limit-actions button):is(:hover, :active) {
        transform: none !important;
    }
}