/* ==========================================================================
   Market Your Daycare — Childcare Marketing Agency Victoria
   Production Stylesheet (Tailwind CSS Companion)
   ========================================================================== */

:root {
  /* Brand Red Palette */
  --brand-red: #E31B23;
  --brand-red-hover: #c8151c;
  --brand-red-50: #FEF2F2;
  --brand-red-100: #FDE3E2;
  --brand-red-200: #FAC5C2;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Continuous Marquee / Carousel Animations
   ========================================================================== */
.trusted-carousel,
.testimonial-carousel {
  mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.trusted-carousel-track {
  display: flex;
  width: max-content;
  animation: trusted-scroll 30s linear infinite;
}

.trusted-carousel:hover .trusted-carousel-track,
.trusted-carousel:focus-within .trusted-carousel-track {
  animation-play-state: paused;
}

@keyframes trusted-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.testimonial-carousel-track {
  display: flex;
  width: max-content;
  animation: testimonial-scroll 34s linear infinite;
}

.testimonial-carousel:hover .testimonial-carousel-track,
.testimonial-carousel:focus-within .testimonial-carousel-track {
  animation-play-state: paused;
}

@keyframes testimonial-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 0.75rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .trusted-carousel-track,
  .testimonial-carousel-track {
    animation: none;
  }
}

/* Responsive adjustments for carousels */
@media (max-width: 640px) {
  .trusted-carousel,
  .testimonial-carousel {
    mask-image: none;
    -webkit-mask-image: none;
  }
}