/* Homepage Specific Styling - RouteworksSEO Home Layout */

.font-hero-heading {
  font-family: 'Outfit', sans-serif;
  line-height: 0.95;
  letter-spacing: -2px;
}

/* Background grid repeating pattern */
.bg-grid-overlay {
  position: absolute;
  inset: 0;
  background-size: 55px 55px;
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
  opacity: 1 !important;
  z-index: 0;
  pointer-events: none;
}
[data-theme="dark"] .bg-grid-overlay {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  opacity: 1 !important;
}

/* Testimonials Carousel Wrapper */
.carousel-track-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.carousel-track {
  display: flex;
  gap: 24px;
  width: max-content;
}

/* Text Splitting animation effects */
.split-line {
  overflow: hidden;
}
.split-char {
  display: inline-block;
  transform: translateY(105%);
}

/* Continuous 3D Floating Animations */
@keyframes float-1 {
  0%, 100% { transform: translateY(0px) rotate(2deg); }
  50% { transform: translateY(-12px) rotate(0deg); }
}
@keyframes float-2 {
  0%, 100% { transform: translateY(0px) rotate(-1.5deg); }
  50% { transform: translateY(-16px) rotate(1deg); }
}
@keyframes float-3 {
  0%, 100% { transform: translateY(0px) rotate(0.5deg); }
  50% { transform: translateY(-10px) rotate(-1.5deg); }
}
.animate-float-1 {
  animation: float-1 6s ease-in-out infinite;
}
.animate-float-2 {
  animation: float-2 7.5s ease-in-out infinite;
}
.animate-float-3 {
  animation: float-3 9s ease-in-out infinite;
}

/* Subtle background moving gradient */
@keyframes bgMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.animate-bg-move {
  background-size: 200% 200%;
  animation: bgMove 15s ease infinite;
}

/* Glassmorphism containers that blend properly across themes */
.dashboard-glass {
  background-color: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}