/* Short, quiet feedback for touch tablets. QR images never scale or move. */
:root {
    --pad-motion-quick: 140ms;
    --pad-motion-open: 180ms;
    --pad-motion-page: 220ms;
    --pad-motion-ease: cubic-bezier(.2, .7, .3, 1);
}

body .tile,
body .home-events,
body .pad-control,
body .guide-close,
body .pad-phone-dialog > button,
body .checkout-btn,
body .taxi-confirm,
body .taxi-cancel-btn,
body .pin-btn {
    transition: transform var(--pad-motion-quick) var(--pad-motion-ease),
        opacity var(--pad-motion-quick) ease,
        background-color var(--pad-motion-quick) ease,
        border-color var(--pad-motion-quick) ease;
}

/* Touch feedback stays on the control; the QR surface remains pixel aligned. */
body .pad-phone-card,
body .pad-connection-header .wifi-card,
body .lang-picker .lang-btn,
body .guide-nav,
body .taxi-toggle button {
    transition: background-color var(--pad-motion-quick) ease,
        border-color var(--pad-motion-quick) ease,
        color var(--pad-motion-quick) ease;
}

body .tile:active,
body .home-events:active,
body .pad-control:active,
body .guide-close:active,
body .pad-phone-dialog > button:active,
body .checkout-btn:active,
body .taxi-confirm:active,
body .taxi-cancel-btn:active,
body .pin-btn:active {
    transform: translateY(1px);
}

body .pad-phone-card:active { background-color: #d9e3cc; }
body .pad-connection-header .wifi-card:active { background-color: #edf1e6; }

/* A touch tap must not leave a tile floating in its desktop hover state. */
@media (hover: none) {
    body .tile:hover:not(:active) {
        transform: none;
        background: #ffffffb8;
        border-color: #fff;
        box-shadow: 0 3px 12px #3a422b04;
    }
    body .tile-col-left .tile:first-child:hover:not(:active) {
        background: #53634c;
        border-color: #53634c;
        color: #fff;
    }
    body .pad-phone-card:hover:not(:active) { background: #e8edde; }
    body .pad-connection-header .wifi-card:hover:not(:active) { background: #fafbf5; }
    body .lang-picker .lang-btn:hover:not(.active):not(:active) {
        color: #606658;
        background: transparent;
    }
    body .lang-picker .lang-btn.active:hover { background: #e0e5d7; }
}

/* Hidden panels stop painting and leave keyboard navigation after the fade. */
body :is(.guide-overlay, .order-overlay, .taxi-overlay, .map-overlay,
    .chat-overlay, .tour-detail-overlay, .pin-overlay) {
    visibility: hidden;
    transition: opacity var(--pad-motion-quick) ease-out,
        visibility 0s linear var(--pad-motion-quick);
}
body :is(.guide-overlay, .order-overlay, .taxi-overlay, .map-overlay,
    .chat-overlay, .tour-detail-overlay, .pin-overlay).active {
    visibility: visible;
    transition: opacity var(--pad-motion-open) ease-out, visibility 0s;
}

body .chat-card,
body .tour-detail-card,
body .map-sheet {
    transform: translateY(8px);
    transition: transform var(--pad-motion-open) var(--pad-motion-ease);
}
body .chat-overlay.active .chat-card,
body .tour-detail-overlay.active .tour-detail-card,
body .map-overlay.active .map-sheet { transform: none; }

/* Native dialogs close immediately; opening does not delay focus or clicks. */
body :is(.pad-phone-dialog, .pad-wifi-dialog, .pad-image-dialog)[open] {
    animation: pad-surface-in var(--pad-motion-open) ease-out;
}
body :is(.pad-phone-dialog, .pad-wifi-dialog, .pad-image-dialog)[open]::backdrop {
    animation: pad-surface-in var(--pad-motion-quick) ease-out;
}
body .pad-phone-dialog::backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body .home #stage .enter {
    animation: pad-content-in var(--pad-motion-page) var(--pad-motion-ease) both;
}
/* The parent already reveals these together; avoid stacked staggered fades. */
body .home #stage .returning-fade { animation: none; }

body .guide-slide {
    transition: opacity var(--pad-motion-quick) ease-out,
        transform var(--pad-motion-open) var(--pad-motion-ease);
}
body .guide-slide.active {
    animation: pad-guide-forward var(--pad-motion-page) var(--pad-motion-ease);
}
body .guide-slide.active.turn-backward { animation-name: pad-guide-backward; }
body .guide-book-leaf.forward,
body .guide-book-leaf.backward {
    animation-duration: var(--pad-motion-page);
    animation-timing-function: var(--pad-motion-ease);
}

@keyframes pad-surface-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pad-content-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes pad-guide-forward {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes pad-guide-backward {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: none; }
}

/* Includes legacy pulse/stagger rules and dynamically inserted guide content. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    body .tile:hover,
    body .tile:active,
    body .home-events:active,
    body .pad-control:active,
    body .guide-close:active,
    body .pad-phone-dialog > button:active,
    body .checkout-btn:active,
    body .taxi-confirm:active,
    body .taxi-cancel-btn:active,
    body .pin-btn:active,
    body .chat-card,
    body .tour-detail-card,
    body .map-sheet { transform: none; }
}