/* =====================================================================
   Interface feel for the staff booking console (/admin/bookings): the
   motion tokens, the speaker button's base, and the shared keyframes.
   Paired with static/js/ui_feel.js; admin_bookings_feel.css (loaded
   after this) styles the console's own elements and colours.

   Rules: paint and transform/opacity only (no layout moves), nothing loops,
   nothing animates on first paint, every transition is interruptible, and
   prefers-reduced-motion turns all of it off (bottom of file).
   ===================================================================== */

:root {
    --ease-out: cubic-bezier(.16, 1, .3, 1);  /* arrivals */
    --ease-ui: cubic-bezier(.4, 0, .2, 1);    /* toggles, chips, small state changes */
    --ease-in: cubic-bezier(.7, 0, .84, 0);   /* exits only */
    --dur-press: 120ms;                       /* button press and release */
    --dur-ui: 180ms;                          /* small state changes */
    --dur-step: 320ms;                        /* section and dialog arrivals */
}

/* ---- sound toggle (box and colours come from admin_bookings_feel.css) - */
.ffg-sound-toggle {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: 0;
}

.ffg-sound-toggle .ffg-sound-waves,
.ffg-sound-toggle[aria-pressed="true"] .ffg-sound-mute {
    opacity: 0;
}

.ffg-sound-toggle[aria-pressed="true"] .ffg-sound-waves {
    opacity: 1;
}

.ffg-sound-toggle .ffg-sound-waves,
.ffg-sound-toggle .ffg-sound-mute {
    transition: opacity var(--dur-ui) var(--ease-ui);
}

@keyframes ffg-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ffg-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes ffg-rise-small {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* ---- reduced motion: every state change is instant -------------------- */
@media (prefers-reduced-motion: reduce) {
    .ffg-sound-toggle .ffg-sound-waves,
    .ffg-sound-toggle .ffg-sound-mute {
        transition: none;
    }
}