@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles from original HTML */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;800&display=swap');

html { 
  scroll-behavior: smooth; 
}

body { 
  font-family: 'Heebo', system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans Hebrew', sans-serif; 
}

/* Brand gold */
.text-gold { 
  color: #d4af37; 
}

.bg-gold { 
  background: #d4af37; 
}

.from-gold { 
  --tw-gradient-from: #d4af37; 
  --tw-gradient-to: rgb(212 175 55 / 0); 
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); 
}

.to-dark { 
  --tw-gradient-to: #0b0b0b; 
}

/* Reveal animations */
.reveal { 
  opacity: 0; 
  transform: translateY(24px); 
  transition: opacity .8s ease, transform .8s ease; 
}

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

.reveal[data-animate="slide-left"] { 
  transform: translateX(24px); 
}

.reveal[data-animate="slide-right"] { 
  transform: translateX(-24px); 
}

.reveal.show[data-animate="slide-left"], 
.reveal.show[data-animate="slide-right"] { 
  transform: translateX(0); 
}

/* Lightbox */
.lightbox { 
  position: fixed; 
  inset: 0; 
  display: grid; 
  place-items: center; 
  background: rgba(0,0,0,.85); 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity .25s ease; 
  z-index: 60; 
}

.lightbox.open { 
  opacity: 1; 
  visibility: visible; 
}

.lightbox__img { 
  max-width: 92vw; 
  max-height: 82vh; 
  border-radius: 16px; 
  box-shadow: 0 10px 40px rgba(0,0,0,.6); 
}

.lightbox__btn { 
  position: absolute; 
  top: 20px; 
  background: rgba(0,0,0,.45); 
  backdrop-filter: blur(4px); 
  border: 1px solid rgba(255,255,255,.2); 
  color: #fff; 
  padding: .5rem .75rem; 
  border-radius: 999px; 
  display: inline-flex; 
  align-items: center; 
  gap: .5rem; 
}

.lightbox__btn:hover { 
  background: rgba(0,0,0,.65); 
}

.lightbox__close { 
  left: 20px; 
}

.lightbox__prev { 
  right: 100px; 
}

.lightbox__next { 
  right: 20px; 
}

/* Sticky header elevated after scroll */
.nav-solid { 
  background-color: rgba(12,12,12, .9); 
  backdrop-filter: saturate(1.2) blur(6px); 
  box-shadow: 0 10px 30px rgba(0,0,0,.2); 
}

/* Hide map until user interacts (performance) */
.map-skeleton { 
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%); 
  background-size: 400% 100%; 
  animation: shimmer 1.4s ease infinite; 
}

@keyframes shimmer { 
  0% { background-position: 200% 0 } 
  100% { background-position: -200% 0 } 
}