html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 5.5rem;
}

body {
  font-family: 'Inter', sans-serif;
}

.font-display {
  font-family: 'Space Grotesk', sans-serif;
}

#site-header {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

::selection {
  background-color: #00A19B;
  color: #ffffff;
}

.hero-blob {
  background: radial-gradient(circle at 30% 30%, rgba(0, 161, 155, 0.35), rgba(24, 90, 125, 0.15) 60%, transparent 70%);
}

.pattern-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

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

.animate-float {
  animation: float 5s ease-in-out infinite;
}

.branch-card.is-active {
  border-color: #00A19B;
  box-shadow: 0 0 0 2px rgba(0, 161, 155, 0.35), 0 8px 16px -6px rgba(8, 31, 44, 0.15);
}

#branch-map {
  z-index: 0;
}

.leaflet-popup-content-wrapper {
  border-radius: 12px;
}

.leaflet-popup-content {
  margin: 12px 14px;
}

@keyframes pin-pulse {
  0% { transform: scale(0.6); opacity: 0.6; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

.pin-pulse {
  animation: pin-pulse 2.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

.leaflet-tooltip.city-label {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #103D56;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 6px #fff;
  pointer-events: none;
}

.leaflet-tooltip.city-label::before {
  display: none;
}

.anniversary-bg {
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #144C69 0%, #103D56 45%, #081F2C 100%);
}

.anniversary-number {
  background: linear-gradient(100deg, #FFFFFF 0%, #B8ECE9 30%, #2CB8B1 50%, #B8ECE9 70%, #FFFFFF 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(44, 184, 177, 0.45));
  animation: shimmer 6s ease-in-out infinite;
}

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

.anniversary-blob-1 {
  background: radial-gradient(circle, rgba(0, 161, 155, 0.4), transparent 70%);
  filter: blur(10px);
  animation: drift-1 10s ease-in-out infinite;
}

.anniversary-blob-2 {
  background: radial-gradient(circle, rgba(94, 234, 212, 0.3), transparent 70%);
  filter: blur(10px);
  animation: drift-2 12s ease-in-out infinite;
}

@keyframes drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, 4%) scale(1.08); }
}

@keyframes drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-3%, -3%) scale(1.06); }
}

.anniversary-wave {
  animation: wave-drift 14s ease-in-out infinite;
}

@keyframes wave-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2%); }
}