/* =============================================================================
 * responsive.css — Mangal Electronics
 *
 * The compiled Tailwind build (style.css) already contains every responsive
 * utility and keyframe used by the React app (animate-in/out, slide-in-from-*,
 * spin, pulse, etc.), so this file is intentionally small.
 *
 * It only holds:
 *   1. Fallback keyframes/animations for JS-injected UI (toasts, carousel) so
 *      they still animate cleanly if a utility ever goes missing from style.css.
 *   2. Any custom tweak that isn't expressible with a Tailwind utility.
 * ========================================================================== */

/* ---- Toast: graceful exit transition applied by main.js (ME.toast) --------- */
.me-toast {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ---- Hero carousel: cross-fade fallback for [data-hero-slide] --------------- */
[data-hero-slide] {
  transition: opacity 0.7s ease-in-out;
}

/* ---- Fallback keyframes (only used if style.css utilities are absent) ------- */
@keyframes me-spin {
  to {
    transform: rotate(360deg);
  }
}