/* Company Name Styling */
/*--------------------------------------------------------------
# Hero Section Cleanup
--------------------------------------------------------------*/
/* Remove unused slider styles */
.hero .company-name {
  font-size: 3.5rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.5rem;
}

.hero .hero-slogan {
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  margin-bottom: 2rem;
}

.hero-image-container {
  position: relative;
  height: 100%;
  padding: 15px;
}

.hero-image-container img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 768px) {
  .hero .company-name {
    font-size: 2.5rem;
  }
  .hero .hero-slogan {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  .hero .hero-slogan {
    font-size: 1.2rem;
  }
}


/* Tow Truck GIF Styling */
.hero .tow-truck-gif {
  max-width: 200px;
  margin: 0 auto 1.5rem;
}

.hero .tow-truck-gif img {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

@media (max-width: 768px) {
  .hero .tow-truck-gif {
    max-width: 150px;
  }
}


.hero-image-container {
  position: relative;
  z-index: 1;
}

.hero-image-container img {
  max-height: 500px;
  width: 100%;
  object-fit: cover;
  border: 3px solid var(--secondary-color);
}

@media (max-width: 768px) {
  .hero-image-container img[src*="siren.gif"] {
    width: 80px !important;
  }
}


/* Random Entrance Animations */
@keyframes randomEntrance {
  0% {
    opacity: 0;
    transform: translate(calc(-100% + random()*200%), calc(-100% + random()*200%));
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

.animate-pop {
  animation: randomEntrance 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
  animation-delay: 0.3s;
}

.animate-slide {
  animation: slideIn 0.6s ease-out both;
  animation-delay: 0.6s;
}

.animate-scale {
  animation: scaleUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.9s;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(calc(-50% + random()*100%));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(calc(-10deg + random()*20deg));
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}


/* Text Slider Styles */
.text-slider-container {
  overflow: hidden;
  height: 40px;
  position: relative;
}

.slider-track {
  position: absolute;
  width: 100%;
  animation: textSlider 12s infinite;
}

.slide-item {
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(100%);
  position: absolute;
  padding: 5px 15px;
  border-radius: 25px;
  background: rgba(255,255,255,0.1);
  animation: slideItem 12s infinite;
}

@keyframes textSlider {
  0%, 100% { transform: translateY(0); }
  25%, 50%, 75% { transform: translateY(-25%); }
}

@keyframes slideItem {
  0% { opacity: 0; transform: translateY(100%); }
  5% { opacity: 1; transform: translateY(0); }
  20% { opacity: 1; transform: translateY(0); }
  25% { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 0; transform: translateY(-100%); }
}

.slide-item:nth-child(1) { animation-delay: 0s; }
.slide-item:nth-child(2) { animation-delay: 3s; }
.slide-item:nth-child(3) { animation-delay: 6s; }
.slide-item:nth-child(4) { animation-delay: 9s; }

@media (max-width: 768px) {
  .slide-item {
    font-size: 1rem;
    padding: 3px 10px;
  }
  .text-slider-container {
    height: 35px;
  }
}