/* =========================================================================
   Template Customization — native special animations (no Webflow IX2 / GSAP /
   webflow.js / jQuery). Loaded only on /template-customization.

   Replaces the behaviors the Webflow runtime used to drive:
     1. Hero category showcase  -> native tabs (auto-rotate + click) with
        progress pills, each pane an infinite horizontal marquee (pure CSS).
     2. Agency CTA Rive          -> @rive-app/canvas runtime (see JS).
     3. Customer testimonials     -> native one-card carousel (arrows, dots,
        swipe, wrap-around), replacing the Webflow .w-slider component.
   Page scope: every rule is prefixed with .template-customization-page.
   ========================================================================= */

/* The original template-customization export rendered the header in normal
   flow (no .header-position-absolute overlay wrapper). Keep it in flow so the
   hero is not tucked under the nav. */
.template-customization-page .header-position-absolute { position: static; }

/* =========================================================================
   1. HERO — category showcase (native tabs) + infinite marquee
   ========================================================================= */
.template-customization-page .ctm-hero__showcase { position: relative; }

/* Tab panes are stacked in a single grid cell so switching is a crossfade, not
   a reflow. Every pane stays rendered (so its images are already decoded — no
   load flash on switch); only opacity + blur animate. */
.template-customization-page .ctm-hero__panes {
  display: grid;
}
.template-customization-page .ctm-hero__pane {
  grid-area: 1 / 1;
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 1.5%, 0);
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.template-customization-page .ctm-hero__pane.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* Marquee row: one line holding two identical sets of screenshots. Translating
   by exactly one set (-50%) loops seamlessly. The clip window is the parent
   .ctm-hero__slider-wrapper (overflow: hidden) from the base theme. All panes'
   marquees run continuously so a crossfade never reveals a frozen row. */
.template-customization-page .infinity-marquee-wrapper-customiztion {
  width: max-content;
}
.template-customization-page .ctm-hero__pane .infinity-marquee-line {
  width: max-content;
  /* Trailing gap so the line measures 6 images + 6 gaps. Half of that is
     exactly 3 images + 3 gaps (one full set), making translateX(-50%) a
     perfectly seamless loop with no half-gap jump. */
  padding-right: var(--g-s);
  will-change: transform;
  animation: ctm-hero-marquee 45s linear infinite;
}
@keyframes ctm-hero-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Progress pills: native <button>s reusing the base .ctm-hero__tab-item look.
   Active pill widens + turns primary (mirrors the export's .w--current). */
.template-customization-page .ctm-hero__tab-item {
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}
.template-customization-page .ctm-hero__tab-item.is-active {
  background-color: var(--new--primary-color);
  max-width: 90px;
}

/* =========================================================================
   3. TESTIMONIALS — native one-card carousel
   ========================================================================= */
.template-customization-page .ctm-testimonials {
  position: relative;
  width: 100%;
}
.template-customization-page .ctm-testimonials__viewport {
  overflow: hidden;
}
.template-customization-page .ctm-testimonials__track {
  display: flex;
  align-items: stretch;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.template-customization-page .ctm-testimonials__track.is-dragging {
  transition: none;
}
.template-customization-page .ctm-testimonials__slide {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
  display: flex;
}
.template-customization-page .ctm-testimonials__slide .card.testimonial-slider-card {
  width: 100%;
}

/* Arrows: absolutely positioned just outside the 830px card column, reusing the
   base .btn-circle-secondary.slider-button look (Line Rounded Icons glyphs). */
.template-customization-page .ctm-testimonials__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.template-customization-page .ctm-testimonials__arrow:hover {
  transform: translateY(-50%) scale3d(0.94, 0.94, 1.01);
}

/* Mobile dots. */
.template-customization-page .ctm-testimonials__dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.template-customization-page .ctm-testimonials__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--new--neutral--color-400);
  cursor: pointer;
  transition: width 0.3s, background-color 0.3s;
}
.template-customization-page .ctm-testimonials__dot.is-active {
  width: 26px;
  border-radius: 32px;
  background-color: var(--new--primary-color);
}

@media screen and (max-width: 767px) {
  .template-customization-page .ctm-testimonials__arrow { display: none; }
  .template-customization-page .ctm-testimonials__dots { display: flex; }
}

/* =========================================================================
   Mobile/tablet vertical rhythm around the agency CTA band.

   - GAP A (services -> agency CTA): the grey services section ships a very
     large sz-20 bottom padding (~176px on phones) to host the CTA's -60px
     overlap. That is far too much room on small screens, so trim it.
   - GAP B (agency CTA -> testimonials): give the "Customer Testimonials"
     heading comfortable breathing room above it.
   ========================================================================= */
@media screen and (max-width: 991px) {
  .template-customization-page .sec.bg-grey.template-customization {
    padding-bottom: 116px;
  }
  .template-customization-page .cta-customization + .sec.o-hidden {
    padding-top: 64px;
  }
}
@media screen and (max-width: 767px) {
  .template-customization-page .sec.bg-grey.template-customization {
    padding-bottom: 120px;
  }
  .template-customization-page .cta-customization + .sec.o-hidden {
    padding-top: 44px;
  }
}

/* =========================================================================
   Accessibility: honor reduced-motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .template-customization-page .ctm-hero__pane .infinity-marquee-line {
    animation: none;
  }
  .template-customization-page .ctm-hero__pane {
    transition: opacity 0.2s ease;
    transform: none;
    filter: none;
  }
  .template-customization-page .ctm-testimonials__track {
    transition: none;
  }
}