@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --ariston-red: #dc2626;
  --service-black: #000000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif !important;
}

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

/* --- Animasi Riding Text (Marquee) --- */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.marquee-text-black {
  color: var(--service-black);
}

.marquee-text-red {
  color: var(--ariston-red);
}

/* --- Efek Denyut Pin Peta --- */
@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 15px rgba(220, 38, 38, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.pulse-pin {
  animation: pulse-red 2s infinite;
}

/* --- Pola Latar Belakang --- */
.bg-pattern {
  background-image: radial-gradient(var(--ariston-red) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  opacity: 0.1;
}

/* --- Utility Classes --- */
.text-shadow-glow {
  text-shadow: 0 0 10px rgba(220, 38, 38, 0.3);
}

.glass-morphism {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Smooth Transition for Hover Effects */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
}