/* global.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




/* ============== Animations (Global Classes) ============== */
.fade-in,
.slide-in,
.bounce {
  opacity: 0; /* hidden until .show is added by JS */
  will-change: opacity, transform;
}


/* Base state for slide-ins */
.slide-in-left,
.slide-in-right,
.slide-in-top,
.slide-in-bottom {
  opacity: 0;
  will-change: transform, opacity;
}

/* When visible (.show added by JS) */
.slide-in-left.show    { animation: slideInLeft 0.9s ease-out forwards; }
.slide-in-right.show   { animation: slideInRight 0.9s ease-out forwards; }
.slide-in-top.show     { animation: slideInTop 0.9s ease-out forwards; }
.slide-in-bottom.show  { animation: slideInBottom 0.9s ease-out forwards; }

/* Keyframes */
@keyframes slideInLeft {
  from { transform: translateX(-40px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInTop {
  from { transform: translateY(-40px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes slideInBottom {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Triggered states */
.fade-in.show { animation: fadeIn 0.9s ease-out forwards; }
.slide-in.show { animation: slideIn 0.9s ease-out forwards; }
.bounce.show    { animation: bounce 1.6s ease-out both infinite; opacity: 1; }

/* Keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Slide from left a bit so it works nicely on mobile */
@keyframes slideIn {
  from { transform: translateX(-24px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-18px); }
  60% { transform: translateY(-9px); }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .slide-in, .bounce { animation: none !important; opacity: 1 !important; transform: none !important; }
}




#mobile-menu {
  display: none;
}

#mobile-menu.open {
  display: block !important; /* or flex depending on your design */
}

#mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;  /* adjust */
  height: 100%;
  background: white; /* or your theme color */
  transition: right 0.3s ease-in-out;
  z-index: 9999;
}

#mobile-menu.open {
  right: 0;
}