/* Extras on top of app.css (the old site's compiled stylesheet, unchanged).
   These stand in for the framer-motion animations of the React build. */

/* Fade-up on scroll: add data-reveal (optional data-reveal-delay="0.1"). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 24px));
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-reveal="fade"] { --reveal-y: 0px; }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Mobile menu open/close */
.mobile-menu { animation: aa-menu-in 0.3s ease-in-out; }
@keyframes aa-menu-in { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 40rem; } }

/* Cart drawer */
.aa-overlay { animation: aa-fade-in 0.25s ease-out; }
.aa-drawer { animation: aa-slide-in 0.35s ease-out; }
.aa-overlay.is-closing { animation: aa-fade-out 0.25s ease-in forwards; }
.aa-drawer.is-closing { animation: aa-slide-out 0.3s ease-in forwards; }
@keyframes aa-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes aa-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes aa-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes aa-slide-out { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* Modals (product quick view etc.) */
.aa-modal { animation: aa-pop-in 0.3s ease-out; }
@keyframes aa-pop-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Toasts */
.aa-toast { animation: aa-toast-in 0.25s ease-out; }
.aa-toast.is-closing { animation: aa-toast-out 0.2s ease-in forwards; }
@keyframes aa-toast-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes aa-toast-out { to { opacity: 0; transform: translateX(-100%); } }

/* Lock page scroll while a drawer or modal is open */
body.aa-lock { overflow: hidden; }

[hidden] { display: none !important; }

/* Slide in from the left (old framer-motion x: -32 → 0). */
.js [data-reveal="left"] { transform: translateX(-32px); }

/* Buy 1 Free 1 badges and admin switch (classes not in the old stylesheet) */
.ml-2 { margin-left: 0.5rem; }
.\!mb-1 { margin-bottom: 0.25rem !important; }