/* ============================================================
   CATALOG — v5 Tailwind neutral + Inter
   Minimal custom CSS: animations, map pins, Leaflet overrides
   ============================================================ */

/* --- Prevent scrollbar layout shift --- */
html { scrollbar-gutter: stable; }

/* --- Inter variable font --- */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1;
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

/* --- Selection --- */
::selection {
  background-color: #262626;
  color: #fff;
}

/* --- Text wrap on headings --- */
h1, h2, h3, h4, h5, h6 {
  text-wrap: pretty;
}

/* --- Scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: none; }

/* --- Hero Ken Burns --- */
.hero-bg-slide {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center 35%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity, transform;
}
.hero-bg-slide.active {
  opacity: 1;
  animation: kenBurns 8s ease-in-out forwards;
}
@keyframes kenBurns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06) translate(-0.4%, -0.6%); }
}

/* --- Hero entry animations --- */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-hero-up   { animation: heroUp 1s cubic-bezier(0.16,1,0.3,1) 0.3s both; }
.anim-hero-up-2 { animation: heroUp 1s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
.anim-hero-up-3 { animation: heroUp 1s cubic-bezier(0.16,1,0.3,1) 0.6s both; }
.anim-hero-fade { animation: heroFade 0.8s cubic-bezier(0.16,1,0.3,1) 0.8s both; }

/* --- Hero scroll pulse --- */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1; transform: scaleY(1); }
}
.hero-scroll-line {
  animation: scrollPulse 2.5s ease-in-out infinite;
}

/* --- Hero title fade --- */
.hero-title-fade {
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.hero-title-fade.fade-out {
  opacity: 0;
  transform: translateY(8px);
}
.hero-title-fade.fade-in {
  opacity: 0;
  transform: translateY(-8px);
}

/* --- Hero progress bar --- */
#hero-progress-bar {
  transform: scaleX(0);
  transform-origin: left;
}

/* --- Nav scroll blur --- */
#nav {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}
#nav.nav-scrolled {
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 0 rgba(10, 10, 10, 0.10);
}

/* --- Mobile hamburger animation --- */
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Filter select arrow --- */
.filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' fill='none'%3E%3Cpath d='M1 1l3.5 3L8 1' stroke='%23a3a3a3' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
}

/* --- Map pin styles --- */
.map-pin-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #262626;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.map-pin-circle:hover,
.map-pin-circle.active {
  background: #000;
  transform: scale(1.15);
}

/* --- Map panel transition --- */
.map-panel {
  transform: translateX(calc(100% + 24px));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.map-panel.open { transform: translateX(0); pointer-events: auto; }

/* --- Leaflet desaturation --- */
.catalog-map {
  filter: saturate(0.12) brightness(1.06) contrast(0.9);
  transition: filter 0.6s ease;
}
.map-wrap:hover .catalog-map {
  filter: saturate(0.22) brightness(1.04) contrast(0.92);
}

/* --- Leaflet zoom control overrides --- */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  border: 1px solid #e5e5e5 !important;
  background: #fff !important;
  color: #262626 !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: border-color 0.2s, background 0.2s;
}
.leaflet-control-zoom a:hover {
  background: #fafafa !important;
  border-color: #a3a3a3 !important;
  color: #262626 !important;
}

/* --- Hide Leaflet attribution --- */
.leaflet-control-attribution { display: none !important; }

/* --- No-results (JS toggled) --- */
.no-results { display: none; }

/* --- Focus ring --- */
:focus-visible {
  outline: 2px solid #262626;
  outline-offset: 3px;
}