/* animations.css — gedeelde, subtiele animaties voor Reservo.
   Gebruikt in admin.html, super-admin.html, login.html en widget.html.

   Uitgangspunt: merkbaar vloeiender, niet "speels" of afleidend. Geen lange
   animaties, geen bounces — korte, rustige overgangen die bij een strak,
   zakelijk ontwerp passen. */

/* Vloeiende overgangen op alles wat interactief is: kleur, rand, schaduw,
   transform. Dekt hover/focus/active-states overal af, ook waar de losse
   Tailwind-classes zelf geen 'transition' meekregen. */
button, a, input, select, textarea,
.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, tr {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Kleine, rustige "druk"-feedback bij het klikken van knoppen/links. */
button:not(:disabled):active, a:active {
    transform: scale(0.97);
}

@keyframes reservoFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes reservoModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Modals: de overlay (fixed inset-0 ... wordt 'flex' zodra geopend) faded
   in, en het kaartje erin schaalt tegelijk licht op — dit patroon is
   consistent door de hele app gebruikt voor elke modal. */
.fixed.inset-0.flex {
    animation: reservoFadeIn .15s ease-out;
}
.fixed.inset-0.flex > div {
    animation: reservoModalIn .22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Alles met een eigen id dat van hidden naar zichtbaar wisselt (tabbladen,
   weergave-containers, foutmeldingen, suggestieblokken, succes-schermen)
   faded rustig in i.p.v. abrupt te verschijnen. */
[id]:not(.hidden) {
    animation: reservoFadeIn .2s ease;
}

/* Voorkeur van bezoekers met "verminderde beweging" respecteren — dan alle
   animaties (op transitions na, die blijven kort en onopvallend) uitzetten. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}