/* ============================================
   Amish Honey — Custom Styles
   Plum + Amber palette, Playfair Display + Inter
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* --- Hero floating stat cards --- */
.stat-card {
  animation: float 6s ease-in-out infinite;
}
.stat-card.card-1 { animation-delay: 0s; }
.stat-card.card-2 { animation-delay: -2s; }
.stat-card.card-3 { animation-delay: -4s; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* --- Menu tab buttons --- */
.menu-tab {
  background: transparent;
  color: #a369b0;
  border: 1.5px solid #56275b;
  cursor: pointer;
}
.menu-tab:hover {
  color: #f5a623;
  border-color: #f5a623;
}
.menu-tab.active {
  background: #f5a623;
  color: #260f2a;
  border-color: #f5a623;
}

/* --- Menu item card hover --- */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
}

/* --- Mobile menu animation --- */
.menu-line {
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-open .menu-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.menu-open .menu-line:nth-child(2) {
  opacity: 0;
}
.menu-open .menu-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Scroll reveal (progressive enhancement) --- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Fallback: ensure content is visible even if JS is disabled */
@media not all and (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Navbar scroll state --- */
.nav-scrolled {
  box-shadow: 0 4px 30px rgba(38, 15, 42, 0.5);
}

/* --- Selection color --- */
::selection {
  background: #f5a623;
  color: #260f2a;
}
</style>