/* Custom styles for Pau's Place Coffee & More */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0f0912;
}
::-webkit-scrollbar-thumb {
  background: #5e3057;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #D4A017;
}

/* Selection color */
::selection {
  background: rgba(212, 160, 23, 0.3);
  color: #f5f0f7;
}

/* Hero orb animations */
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -30px) scale(1.05); }
}
@keyframes float-medium {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-15px, 20px) scale(1.03); }
}
@keyframes float-fast {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10px, -15px) scale(1.02); }
}

.hero-orb.orb-1 { animation: float-slow 12s ease-in-out infinite; }
.hero-orb.orb-2 { animation: float-medium 10s ease-in-out infinite; }
.hero-orb.orb-3 { animation: float-fast 8s ease-in-out infinite; }

/* Scroll reveal base — content is visible by default */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 1;
  transform: none;
}

/* Only animate when JS adds the class, and only if user prefers motion */
@media (prefers-reduced-motion: no-preference) {
  .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal-up.revealed,
  .reveal-left.revealed,
  .reveal-right.revealed {
    opacity: 1;
    transform: none;
  }
}

/* Navbar scrolled state */
nav.scrolled {
  background: rgba(15, 9, 18, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 160, 23, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

nav.scrolled .logo-text {
  color: #fde68a;
}

/* Mobile menu transition */
#mobile-menu {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Button hover glow effect */
button:hover,
a:hover {
  /* handled by individual element classes */
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid #D4A017;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Image lazy loading fade */
img[loading="lazy"] {
  transition: opacity 0.3s ease;
}
img[loading="lazy"]:not(.loaded) {
  opacity: 0;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

/* Print styles */
@media print {
  nav, #contact, .hero-orb { display: none; }
  body { background: white; color: black; }
  section { padding: 20px 0; }
}