/* MICRO-INTERACTIONS */
/* Utility transitions — applied only to elements that need them */
@keyframes skeleton-loading {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* Used by app/static/js/kiosk.js (loading skeleton for pricing table) */
.skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 1000px 100%;
    animation: skeleton-loading 2s infinite;
}

/* SCROLL REVEAL ANIMATIONS */
.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ACCESSIBILITY ENHANCEMENTS */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

body.dark-mode :focus-visible { outline-color: var(--dark-accent); }
:focus:not(:focus-visible) { outline: none; }

.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-accent);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 1000;
    font-weight: bold;
}

.skip-to-main:focus {
    top: 0;
    outline: 2px dashed white;
    outline-offset: -2px;
}

body .btn:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible,
body a:focus-visible {
    outline: 2px dashed var(--color-accent);
    outline-offset: 2px;
}

body.dark-mode .btn:focus-visible,
body.dark-mode input:focus-visible,
body.dark-mode textarea:focus-visible,
body.dark-mode select:focus-visible,
body.dark-mode a:focus-visible {
    outline: 2px dashed var(--dark-accent);
    box-shadow: 0 0 16px rgba(255, 107, 53, 0.3);
}

@media (prefers-contrast: more) {
    body { font-weight: 500; }
    .btn { border-width: 2px; }
    :focus-visible { outline-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.btn:active { transform: scale(0.98); }
.btn:focus-visible { transform: none; }

input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

body.dark-mode input:focus-visible,
body.dark-mode textarea:focus-visible,
body.dark-mode select:focus-visible {
    outline-color: var(--dark-accent);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@media (pointer: coarse) {
    .btn, a, .social-link, button, input, textarea, select {
        min-height: 44px;
        min-width: 44px;
        padding: max(8px, (44px - 1em) / 2);
    }
}

a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

a:visited { opacity: 0.8; }
body.dark-mode a:visited { color: rgba(255, 107, 53, 0.8); }

.keyboard-nav :focus-visible {
    outline: 3px dashed currentColor;
    outline-offset: 3px;
}

main { min-height: 100vh; }
nav, footer { display: block; }