/* === Animations === */

/* Fade-in-up animation */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
.observe-fade {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

/* Card hover polish */
.card-animate {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-animate:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 32px rgba(79, 70, 229, 0.18);
}

/* Button micro-animation */
.btn-animate {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-animate:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.25);
}

/* Gradient text for Chinmay credit */
.chinmay-link {
  background: linear-gradient(90deg, #a855f7, #ec4899, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  transition: background-position 0.5s ease;
  text-decoration: none;
}
.chinmay-link:hover {
  background-position: right center;
}

/* Go to Top Button - redesigned */
#toTopBtn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(15,23,42,0.12);
  background: linear-gradient(180deg, #4F46E5 0%, #4338CA 100%);
  color: white;
  border: none;
  cursor: pointer;
  transition: transform 150ms ease, opacity 150ms ease;
  opacity: 0.95;
}
#toTopBtn:hover { transform: translateY(-4px); opacity: 1; }
#toTopBtn:focus { outline: 2px solid rgba(99,102,241,0.35); outline-offset: 3px; }

/* simple up arrow inside button */
#toTopBtn svg { width: 18px; height: 18px; }

/* --- Scroll Animations --- */
/* --- Scroll Animations --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.fade-up, .fade-left, .fade-right, .fade-scale { opacity: 0; }
.fade-up.show { animation: fadeUp 0.8s ease-out forwards; }
.fade-left.show { animation: fadeLeft 0.8s ease-out forwards; }
.fade-right.show { animation: fadeRight 0.8s ease-out forwards; }
.fade-scale.show { animation: fadeScale 0.8s ease-out forwards; }

/* --- Mobile Menu --- */
#mobileMenu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 350ms ease, opacity 250ms ease;
}
#mobileMenu.show {
  max-height: 520px; /* adjust if more links */
  opacity: 1;
}
.menu-link {
  transform: translateY(-6px);
  opacity: 0;
  transition: transform 250ms ease, opacity 250ms ease;
}
#mobileMenu.show .menu-link {
  transform: translateY(0);
  opacity: 1;
}

/* Prevent background scroll when menu open */
.no-scroll {
  overflow: hidden;
}



/* Mobile-first tweaks */
@media (max-width: 640px) {
  header .h-10 { height: 40px; }
  .max-w-7xl { padding-left: 12px; padding-right: 12px; }
  #toTopBtn { right: 12px; bottom: 12px; width:42px; height:42px; border-radius:9px; }
  .text-3xl { font-size: 1.45rem; } /* slightly smaller on very small screens */
}