/* ============================================
   GOOD PEOPLE GENERAL STORE — CUSTOM STYLES
   ============================================ */

/* Base reset & smooth scrolling */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  overflow-x: hidden;
}

/* Selection color */
::selection {
  background: rgba(149, 213, 173, 0.25);
  color: #f2faf7;
}

/* Focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1px solid rgba(149, 213, 173, 0.5);
  outline-offset: 2px;
}

/* ============================================
   NAVIGATION
   ============================================ */

#nav {
  background: transparent;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

#nav.scrolled {
  background: rgba(13, 18, 32, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(149, 213, 173, 0.06);
}

/* Mobile menu animation */
#mobileMenu.open {
  opacity: 1;
  pointer-events: all;
}

#mobileMenu .mobile-link {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
}

#mobileMenu.open .mobile-link {
  opacity: 1;
  transform: translateY(0);
}

#mobileMenu.open .mobile-link:nth-child(1) { transition-delay: 0.05s; }
#mobileMenu.open .mobile-link:nth-child(2) { transition-delay: 0.1s; }
#mobileMenu.open .mobile-link:nth-child(3) { transition-delay: 0.15s; }
#mobileMenu.open .mobile-link:nth-child(4) { transition-delay: 0.2s; }

/* Hamburger animation */
.menu-line {
  display: block;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

#menuToggle[aria-expanded="true"] .menu-line:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

#menuToggle[aria-expanded="true"] .menu-line:nth-child(2) {
  opacity: 0;
}

#menuToggle[aria-expanded="true"] .menu-line:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
  width: 1.5rem;
}

/* ============================================
   HERO
   ============================================ */

/* Subtle parallax on hero background */
#top .absolute.inset-0:first-child {
  will-change: transform;
}

/* Accent card hover */
.absolute.-bottom-6.-left-6.bg-mint-400 {
  transition: transform 0.5s ease;
}

.absolute.-bottom-6.-left-6.bg-mint-400:hover {
  transform: translateY(-4px);
}

/* ============================================
   SCROLL REVEAL (below fold only)
   ============================================ */

.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
}

/* ============================================
   PRODUCT CARDS
   ============================================ */

.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* ============================================
   CONTACT FORM
   ============================================ */

input::placeholder,
textarea::placeholder {
  color: rgba(149, 213, 173, 0.15);
}

input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #1a2740 inset !important;
  -webkit-text-fill-color: #f2faf7 !important;
}

/* ============================================
   DIVIDER LINES
   ============================================ */

.max-w-7xl.mx-auto.px-6.lg\:px-8 > .w-full.h-px.bg-mint-400\/10 {
  opacity: 1;
}

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */

@media (max-width: 640px) {
  .font-serif {
    line-height: 1.1;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}