/* Tablet app – shared motion tokens & animation utilities */

:root {
    --tablet-anim-fast: 150ms;
    --tablet-anim-normal: 250ms;
    --tablet-anim-slow: 400ms;
    --tablet-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --tablet-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --tablet-stagger-step: 50ms;
    --tablet-stagger-base: 40ms;
}

/* --------------------------------------------------------------------------
   Page stagger (21)
   -------------------------------------------------------------------------- */
body.tablet-stagger-pending .tablet-container > *,
body.tablet-stagger-pending .tablet-connect-container > * {
    opacity: 0;
}

.tablet-stagger-item {
    --tablet-stagger-index: 0;
    animation: tablet-stagger-in var(--tablet-anim-normal) var(--tablet-ease-out) both;
    animation-delay: calc(var(--tablet-stagger-base) + var(--tablet-stagger-index) * var(--tablet-stagger-step));
}

@keyframes tablet-stagger-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   Modal enter/exit (6)
   -------------------------------------------------------------------------- */
.modal,
.pin-code-modal,
.confirmation-modal,
.loyalty-modal,
.pwa-install-popup {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--tablet-anim-fast) ease, visibility var(--tablet-anim-fast) ease;
}

.modal.is-open,
.pin-code-modal.is-open,
.confirmation-modal.is-open,
.loyalty-modal.is-open,
.pwa-install-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content,
.pin-code-modal-content,
.confirmation-modal-content,
.loyalty-modal-content,
.pwa-install-card {
    transform: translateY(16px) scale(0.97);
    transition: transform var(--tablet-anim-normal) var(--tablet-ease-out);
}

.modal.is-open .modal-content,
.pin-code-modal.is-open .pin-code-modal-content,
.confirmation-modal.is-open .confirmation-modal-content,
.loyalty-modal.is-open .loyalty-modal-content,
.pwa-install-popup.is-open .pwa-install-card {
    transform: translateY(0) scale(1);
}

.modal-overlay,
.pin-code-modal-overlay,
.confirmation-modal-overlay,
.loyalty-modal-overlay,
.pwa-install-popup-overlay {
    opacity: 0;
    transition: opacity var(--tablet-anim-fast) ease;
}

.modal.is-open .modal-overlay,
.pin-code-modal.is-open .pin-code-modal-overlay,
.confirmation-modal.is-open .confirmation-modal-overlay,
.loyalty-modal.is-open .loyalty-modal-overlay,
.pwa-install-popup.is-open .pwa-install-popup-overlay {
    opacity: 1;
}

/* Confirmation modal stagger (7.3) */
.confirmation-modal-stagger {
    opacity: 0;
    transform: translateY(8px);
}

.confirmation-modal.is-open .confirmation-modal-stagger {
    animation: tablet-stagger-in var(--tablet-anim-fast) var(--tablet-ease-out) both;
}

.confirmation-modal.is-open .confirmation-modal-header.confirmation-modal-stagger {
    animation-delay: 0ms;
}

.confirmation-modal.is-open .confirmation-modal-body.confirmation-modal-stagger {
    animation-delay: 40ms;
}

.confirmation-modal.is-open .confirmation-modal-footer.confirmation-modal-stagger {
    animation-delay: 80ms;
}

/* PIN modal (8) */
.pin-code-input.tablet-pin-pulse {
    animation: tablet-pin-pulse 0.2s var(--tablet-ease-spring);
}

@keyframes tablet-pin-pulse {
    50% { transform: scale(1.04); }
}

.pin-code-input-group.tablet-shake,
.tablet-connect-form.tablet-shake {
    animation: tablet-shake 0.45s ease;
}

.pin-code-error {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--tablet-anim-normal) ease, opacity var(--tablet-anim-normal) ease, margin var(--tablet-anim-normal) ease;
}

.pin-code-error.is-visible {
    max-height: 4rem;
    opacity: 1;
    margin-top: 0.75rem;
}

.tablet-connect-error {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--tablet-anim-normal) ease, opacity var(--tablet-anim-normal) ease;
}

.tablet-connect-error.is-visible {
    max-height: 4rem;
    opacity: 1;
}

/* Discount modal steps (9) */
.tablet-modal-step {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--tablet-anim-fast) ease, transform var(--tablet-anim-fast) ease;
}

.tablet-modal-step.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.tablet-modal-step.is-exiting {
    display: block;
    opacity: 0;
    transform: translateY(-6px);
}

.tablet-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--sa-border);
    border-top-color: var(--sa-primary);
    border-radius: 50%;
    animation: tablet-spin 0.7s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes tablet-spin {
    to { transform: rotate(360deg); }
}

.generated-code-display.tablet-code-reveal {
    animation: tablet-code-pop 0.45s var(--tablet-ease-spring);
}

@keyframes tablet-code-pop {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    70% {
        transform: scale(1.03);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#copy-code-btn.tablet-copy-success {
    background: var(--sa-success) !important;
    transition: background var(--tablet-anim-fast) ease;
}

/* Order row status flash (2.2, 2.3) */
.order-row.order-row--status-flash {
    animation: tablet-row-flash var(--tablet-anim-slow) ease;
}

.order-row.order-row--flash-confirmed,
.order-row.order-row--flash-ready {
    --tablet-flash-color: var(--sa-success-soft);
}

.order-row.order-row--flash-completed {
    --tablet-flash-color: rgba(59, 130, 246, 0.25);
}

@keyframes tablet-row-flash {
    0%, 100% { background-color: transparent; }
    30% { background-color: var(--tablet-flash-color, var(--sa-success-soft)); }
}

.order-row .tablet-icon-pop {
    display: inline-block;
    animation: tablet-icon-pop 0.4s var(--tablet-ease-spring);
}

@keyframes tablet-icon-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Urgency pulse (4.3) */
.order-pickup-time--urgent {
    color: var(--sa-warning);
    font-weight: 700;
}

.order-pickup-time--urgent i {
    animation: tablet-urgency-pulse 1.8s ease-in-out infinite;
}

@keyframes tablet-urgency-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(1.08); }
}

/* Loyalty stamps (10, 11) */
.loyalty-stamp-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
    min-height: 2.5rem;
}

.loyalty-stamp-slot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--sa-border);
    background: var(--sa-bg);
    transition: transform var(--tablet-anim-fast) var(--tablet-ease-spring), background var(--tablet-anim-fast) ease, border-color var(--tablet-anim-fast) ease;
}

.loyalty-stamp-slot.is-filled {
    background: var(--sa-primary);
    border-color: var(--sa-primary);
}

.loyalty-stamp-slot.is-filling {
    animation: tablet-stamp-fill 0.45s var(--tablet-ease-spring);
}

.loyalty-stamp-slot.is-removing {
    animation: tablet-stamp-deflate 0.35s ease forwards;
}

@keyframes tablet-stamp-fill {
    from {
        transform: scale(0);
        opacity: 0;
    }
    70% {
        transform: scale(1.15);
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes tablet-stamp-deflate {
    to {
        transform: scale(0);
        opacity: 0;
    }
}

.loyalty-stamp-floater {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--sa-primary);
    font-weight: 700;
    font-size: 1.1rem;
    pointer-events: none;
    animation: tablet-stamp-float 0.7s ease forwards;
}

@keyframes tablet-stamp-float {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-28px);
    }
}

.loyalty-modal-stamps {
    position: relative;
}

.loyalty-count-roll {
    display: inline-block;
    animation: tablet-count-roll 0.35s var(--tablet-ease-out);
}

@keyframes tablet-count-roll {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* QR scanner (13) */
.loyalty-scan-area {
    position: relative;
    overflow: visible;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--tablet-anim-slow) var(--tablet-ease-out), opacity var(--tablet-anim-normal) ease, margin var(--tablet-anim-slow) ease;
}

.loyalty-scan-area.is-camera-active {
    max-height: 680px;
    opacity: 1;
    margin-bottom: 0.5rem;
}

.loyalty-scan-frame {
    position: absolute;
    top: 2%;
    right: 2%;
    bottom: 2%;
    left: 2%;
    pointer-events: none;
    z-index: 2;
    border-radius: var(--sa-radius-sm);
}

.loyalty-scan-frame::before,
.loyalty-scan-frame::after,
.loyalty-scan-frame .loyalty-scan-corner-bl,
.loyalty-scan-frame .loyalty-scan-corner-br {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: var(--sa-primary);
    border-style: solid;
    transition: border-color var(--tablet-anim-fast) ease;
}

.loyalty-scan-frame::before {
    top: 0;
    left: 0;
    border-width: 3px 0 0 3px;
}

.loyalty-scan-frame::after {
    top: 0;
    right: 0;
    border-width: 3px 3px 0 0;
}

.loyalty-scan-frame .loyalty-scan-corner-bl {
    bottom: 0;
    left: 0;
    border-width: 0 0 3px 3px;
}

.loyalty-scan-frame .loyalty-scan-corner-br {
    bottom: 0;
    right: 0;
    border-width: 0 3px 3px 0;
}

.loyalty-scan-area.is-scanning .loyalty-scan-frame::before,
.loyalty-scan-area.is-scanning .loyalty-scan-frame::after,
.loyalty-scan-area.is-scanning .loyalty-scan-frame .loyalty-scan-corner-bl,
.loyalty-scan-area.is-scanning .loyalty-scan-frame .loyalty-scan-corner-br {
    animation: tablet-scan-pulse 1.4s ease-in-out infinite;
}

.loyalty-scan-area.is-scan-success .loyalty-scan-frame::before,
.loyalty-scan-area.is-scan-success .loyalty-scan-frame::after,
.loyalty-scan-area.is-scan-success .loyalty-scan-frame .loyalty-scan-corner-bl,
.loyalty-scan-area.is-scan-success .loyalty-scan-frame .loyalty-scan-corner-br {
    border-color: var(--sa-success);
}

.loyalty-scan-area.is-scan-error .loyalty-scan-frame::before,
.loyalty-scan-area.is-scan-error .loyalty-scan-frame::after,
.loyalty-scan-area.is-scan-error .loyalty-scan-frame .loyalty-scan-corner-bl,
.loyalty-scan-area.is-scan-error .loyalty-scan-frame .loyalty-scan-corner-br {
    border-color: var(--sa-danger);
}

.loyalty-scan-area.is-scan-error {
    animation: tablet-shake 0.45s ease;
}

.loyalty-scan-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 2px solid var(--sa-success);
    animation: tablet-scan-ripple 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 3;
}

@keyframes tablet-scan-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@keyframes tablet-scan-ripple {
    from {
        transform: scale(0.5);
        opacity: 0.9;
    }
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.loyalty-scan-status {
    transition: opacity var(--tablet-anim-fast) ease, color var(--tablet-anim-fast) ease;
}

.loyalty-scan-status.is-updating {
    opacity: 0;
}

/* Maak Kaart banner (14) */
.tablet-maak-kaart-banner {
    transform: translateY(-12px);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition:
        transform var(--tablet-anim-normal) var(--tablet-ease-out),
        opacity var(--tablet-anim-normal) ease,
        max-height var(--tablet-anim-slow) ease,
        margin var(--tablet-anim-slow) ease,
        padding var(--tablet-anim-slow) ease;
}

.tablet-maak-kaart-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
    max-height: 5rem;
    margin: -20px 0 20px;
    padding: 12px 16px;
}

.tablet-maak-kaart-banner.is-hiding {
    transform: translateY(-8px);
    opacity: 0;
}

.tablet-maak-kaart-banner.tablet-shake {
    animation: tablet-shake 0.45s ease;
}

/* Order pressure color morph (15.1) */
.btn-order-pressure {
    transition:
        background var(--tablet-anim-slow) ease,
        border-color var(--tablet-anim-slow) ease,
        color var(--tablet-anim-slow) ease;
}

/* UI scale (18) */
html.tablet-scale-transform body {
    transition: transform var(--tablet-anim-normal) ease, width var(--tablet-anim-normal) ease;
}

html[data-tablet-scale] {
    transition: zoom var(--tablet-anim-normal) ease;
}

.btn-tablet-scale-value.tablet-scale-tick {
    animation: tablet-scale-tick 0.35s var(--tablet-ease-spring);
}

@keyframes tablet-scale-tick {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Sound test ripple (20.1) */
.btn-test-sound {
    position: relative;
    overflow: visible;
}

.btn-test-sound .tablet-sound-ripple {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--sa-primary);
    animation: tablet-sound-ripple 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes tablet-sound-ripple {
    from {
        transform: scale(1);
        opacity: 0.7;
    }
    to {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Connect page (23) */
.tablet-connect-field {
    animation: tablet-stagger-in var(--tablet-anim-normal) var(--tablet-ease-out) both;
}

.tablet-connect-field:nth-child(1) { animation-delay: 0.12s; }
.tablet-connect-field:nth-child(2) { animation-delay: 0.18s; }

.tablet-connect-submit.tablet-loading {
    pointer-events: none;
    opacity: 0.85;
}

/* Order details (24) */
.order-item-row.tablet-stagger-item,
.option-badge.tablet-stagger-item {
    animation-duration: var(--tablet-anim-fast);
}

.btn-back.tablet-stagger-item {
    animation-delay: 0ms;
}

/* Discount codes (25) */
.discount-code-row.tablet-stagger-item {
    animation-duration: var(--tablet-anim-fast);
}

.badge-active,
.badge-used {
    transition: background var(--tablet-anim-normal) ease, color var(--tablet-anim-normal) ease, transform var(--tablet-anim-normal) var(--tablet-ease-spring);
}

/* PWA install (30) */
.btn-pwa-install.tablet-pwa-attention {
    animation: tablet-pwa-attention 1.2s var(--tablet-ease-spring) 2;
}

@keyframes tablet-pwa-attention {
    0%, 100% { transform: scale(1); box-shadow: none; }
    35% { transform: scale(1.06); box-shadow: 0 0 0 4px var(--sa-primary-soft); }
}

.btn-pwa-install.tablet-pwa-installed {
    background: var(--sa-success-soft) !important;
    border-color: var(--sa-success) !important;
    color: var(--sa-success) !important;
}

.pwa-install-card {
    animation: none;
}

/* Shared shake */
@keyframes tablet-shake {
    0%, 100% { transform: translateX(0); }
    18% { transform: translateX(-6px); }
    36% { transform: translateX(6px); }
    54% { transform: translateX(-4px); }
    72% { transform: translateX(4px); }
}

/* Pin success – orders list fade */
.tablet-container.tablet-content-fade-in {
    animation: tablet-fade-in 0.35s ease;
}

@keyframes tablet-fade-in {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tablet-stagger-item,
    .order-row.order-row--status-flash,
    .order-pickup-time--urgent i,
    .loyalty-scan-area.is-scanning .loyalty-scan-frame::before,
    .loyalty-scan-area.is-scanning .loyalty-scan-frame::after,
    .loyalty-scan-area.is-scanning .loyalty-scan-frame .loyalty-scan-corner-bl,
    .loyalty-scan-area.is-scanning .loyalty-scan-frame .loyalty-scan-corner-br,
    .btn-pwa-install.tablet-pwa-attention {
        animation: none !important;
    }

    .modal-content,
    .pin-code-modal-content,
    .confirmation-modal-content,
    .loyalty-modal-content,
    .pwa-install-card,
    .modal,
    .pin-code-modal,
    .confirmation-modal,
    .loyalty-modal,
    .pwa-install-popup,
    .tablet-maak-kaart-banner,
    .loyalty-scan-area,
    html.tablet-scale-transform body,
    html[data-tablet-scale] {
        transition: none !important;
    }

    .confirmation-modal-stagger {
        opacity: 1;
        transform: none;
    }
}