/* Mikrointerakcje „jak w aplikacji”. Tylko transform i opacity.
 *
 * Klasa `.tap` (albo atrybut `data-press`) na każdym klikalnym elemencie:
 * przycisk, kafel, karta-odnośnik, ikona, kropka karuzeli.
 * - wciśnięcie: w dół od razu (90 ms), powrót płynny (220 ms);
 * - dotyk: bez szarego błysku i bez opóźnienia podwójnego stuknięcia;
 * - uniesienie przy najechaniu TYLKO z myszą — na telefonie „hover” zostaje
 *   po stuknięciu i element wisi uniesiony;
 * - wybór (radio-kafel): krótki puls w chwili zaznaczenia (press.js);
 * - zajętość (wysyłka w tle): przygaszenie + oddech (aria-busy).
 */

:root {
    --press-scale: 0.96;
    --press-in: 90ms cubic-bezier(0.3, 0, 0.5, 1);
    --press-out: 220ms cubic-bezier(0.22, 1, 0.36, 1);
    --lift: -2px;
    --lift-shadow: 0 14px 30px -18px rgba(10, 20, 40, 0.45);
}

.tap,
[data-press] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform var(--press-out),
        opacity var(--press-out),
        box-shadow var(--press-out),
        background-color var(--press-out),
        color var(--press-out);
}

/* Wciśnięcie — szybko w dół, łagodnie z powrotem. */
.tap:active,
[data-press]:active {
    transform: scale(var(--press-scale));
    transition: transform var(--press-in), opacity var(--press-in);
}

/* Uniesienie kart i przycisków — tylko prawdziwy wskaźnik. */
@media (hover: hover) and (pointer: fine) {
    .tap[data-lift]:hover,
    [data-press][data-lift]:hover {
        transform: translateY(var(--lift));
        box-shadow: var(--lift-shadow);
    }
    .tap[data-lift]:active,
    [data-press][data-lift]:active { transform: scale(var(--press-scale)); }

    /* Zdjęcie w karcie delikatnie najeżdża (rodzic z overflow: hidden). */
    .tap:hover [data-zoom] { transform: scale(1.04); }
}
[data-zoom] { transition: transform 0.4s ease-out; }

/* Strzałka „dalej” przesuwa się w prawo — ten sam kierunek w całym serwisie. */
.tap [data-nudge] { transition: transform var(--press-out); }
@media (hover: hover) and (pointer: fine) {
    .tap:hover [data-nudge] { transform: translateX(3px); }
}

/* Chwila zaznaczenia: kafel wyboru krótko pulsuje (klasę daje press.js). */
@keyframes press-pick {
    0% { transform: scale(0.95); }
    60% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
.is-picked { animation: press-pick 260ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Wysyłka w tle — przycisk przygasa i oddycha, dopóki serwer nie odpowie. */
@keyframes press-busy {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.85; }
}
[aria-busy="true"] button[type="submit"],
button[aria-busy="true"],
.tap[aria-busy="true"] {
    animation: press-busy 1s ease-in-out infinite;
    cursor: progress;
    pointer-events: none;
}

/* Powiadomienie jak w aplikacji (press.js: window.toast("…")). */
.toast {
    position: fixed; left: 50%; z-index: 70;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--toast-offset, 0px));
    max-width: min(92vw, 420px); padding: 10px 16px; border-radius: 12px;
    background: #111; color: #fff; font-size: 14px; font-weight: 600;
    transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .tap, [data-press], [data-zoom], .tap [data-nudge], .toast { transition: none; }
    .tap:active, [data-press]:active,
    .tap[data-lift]:hover, [data-press][data-lift]:hover,
    .tap:hover [data-zoom], .tap:hover [data-nudge] { transform: none; }
    .is-picked { animation: none; }
    /* Zajętość zostaje widoczna — bez oddechu, samo przygaszenie. */
    [aria-busy="true"] button[type="submit"], button[aria-busy="true"], .tap[aria-busy="true"] { animation: none; opacity: 0.6; }
    .toast { transform: translate(-50%, 0); }
}