/* ==========================================================================
   LiveHost marketing interactions
   --------------------------------------------------------------------------
   Pure-CSS state + keyframes that, together with embed/site_interactions-*.js,
   replace the Webflow JS runtime (jQuery + webflow.js: IX2 scroll reveals,
   the Tabs widget, the Dropdown/accordion widget and the Slider widget).
   The JS only toggles classes and wires events; all visual state lives here.
   ========================================================================== */

/* --- Scroll reveals -------------------------------------------------------
   The hidden state is gated on html.reveal-ready, which the head bootstrap
   adds synchronously (so there is no flash of hidden content). If the JS never
   runs, the class is never added and every [data-reveal] keeps its natural
   opacity:1 — the page degrades to fully visible rather than blank. As a
   second guarantee, html.reveal-fallback (set on a timer the main JS cancels
   once it boots) force-reveals everything. */
html.reveal-ready [data-reveal] {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
}
html.reveal-ready [data-reveal="left"]     { transform: translate3d(-30px, 0, 0); }
html.reveal-ready [data-reveal="right"]    { transform: translate3d(30px, 0, 0); }
html.reveal-ready [data-reveal="up"]       { transform: translate3d(0, 30px, 0); }
html.reveal-ready [data-reveal="left-sm"]  { transform: translate3d(-15px, 0, 0); }
html.reveal-ready [data-reveal="right-sm"] { transform: translate3d(15px, 0, 0); }
html.reveal-ready [data-reveal="fade"]     { transform: none; }

html.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* Collapse every direction to a gentle fade-up on narrow screens so a
   horizontal translate can never introduce sideways overflow. */
@media (max-width: 991px) {
  html.reveal-ready [data-reveal]       { transform: translate3d(0, 16px, 0); }
  html.reveal-ready [data-reveal].is-in { transform: none; }
}

html.reveal-fallback [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal] { transition-duration: .001ms; transform: none; }
}

/* --- Hero customer-logo ticker -------------------------------------------
   The track (.ticker-content-h) is duplicated three times in markup inside a
   flex, overflow-hidden row; translating each by one full width loops
   seamlessly. Replaces a Webflow IX2 loop. */
.ticker-content-h { animation: lh-ticker 28s linear infinite; }
.ticker-h:hover .ticker-content-h { animation-play-state: paused; }
@keyframes lh-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-content-h { animation: none; }
}

/* --- FAQ accordion --------------------------------------------------------
   Replaces the Webflow Dropdown widget. Closed by default; .is-open expands
   the answer via a grid-rows transition (auto height, no magic numbers). The
   plus icon rotates into a cross. */
.accordion-list {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .35s ease;
}
.accordion.is-open .accordion-list { grid-template-rows: 1fr; }
/* The answer is the only grid row; collapse its padding too when closed so no
   residual sliver shows, and restore the spacing when open. */
.accordion-list > * { min-height: 0; padding-top: 0; transition: padding-top .35s ease; }
.accordion.is-open .accordion-list > * { padding-top: var(--_sizes---general--xs); }
.accordion-button { transition: transform .3s ease; }
.accordion.is-open .accordion-button { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .accordion-list { transition: none; }
  .accordion-button { transition: none; }
}

/* --- Mobile testimonial carousel -----------------------------------------
   Replaces the Webflow Slider widget with native scroll-snap. Swipe + dots +
   arrows work without JS; autoplay/dot-sync are wired in the JS. */
.testimonial-slider .w-slider-mask {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.testimonial-slider .w-slider-mask::-webkit-scrollbar { display: none; }
.testimonial-slider .w-slide { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .testimonial-slider .w-slider-mask { scroll-behavior: auto; }
}

/* --- Feature tabs: animate the content in on switch ----------------------
   The Webflow tab widget cross-faded the panes; that JS is gone, so re-create
   a fade + lift on the newly-active pane (also plays for the default tab). */
.w-tab-content .w-tab-pane.w--tab-active {
  animation: lh-tab-in .4s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes lh-tab-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .w-tab-content .w-tab-pane.w--tab-active { animation: none; }
}

/* --- Process cards: hover-to-focus accordion ----------------------------
   Replaces the Webflow IX2 hover interaction. Hovering a card expands it to
   ~50% and reveals its image; the others collapse to ~25% with image hidden.
   Default focus stays on card 1. Desktop + real pointer only — the cards
   stack full-width on mobile, where there is no hover. */
@media (hover: hover) and (min-width: 992px) {
  .process-card { transition: width .45s cubic-bezier(.22, .61, .36, 1); }
  .process:hover .process-card { width: 25%; }
  .process:hover .process-card:hover { width: 50%; }
  .process:hover .process-card .process-image-wrap { display: none; }
  .process:hover .process-card:hover .process-image-wrap { display: flex; }
}

/* --- Primary-button arrow shuffle on hover ------------------------------
   Webflow IX2 MOUSE_OVER: the visible arrow slides out to the right while a
   second arrow slides in from the left (parked at left:-20px) to centre. */
.primary-button .slide-in-icon,
.primary-button .slide-out-icon { transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.primary-button:hover .slide-in-icon { transform: translateX(27px); }
.primary-button:hover .slide-out-icon { transform: translateX(20px); }

/* --- Case-study card hover: thumbnail zoom ------------------------------
   Webflow IX2 MOUSE_OVER scaled the thumbnail to 1.15 (clipped by the wrap). */
.case-study .thumbnail { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.case-study:hover .thumbnail { transform: scale(1.15); }

/* --- Hero UI cards keep their built-in tilt -----------------------------
   The cards rest at rotate(2deg) / rotate(-3deg); the generic reveal's
   transform:none would flatten them, so carry the rotation through both
   reveal states (slide in on desktop, fade-up on mobile, always angled). */
html.reveal-ready .hero-ui-card[data-reveal]          { transform: translate3d(30px, 0, 0) rotate(2deg); }
html.reveal-ready .hero-ui-card[data-reveal].is-in    { transform: rotate(2deg); }
html.reveal-ready .hero-ui-card-2[data-reveal]        { transform: translate3d(30px, 0, 0) rotate(-3deg); }
html.reveal-ready .hero-ui-card-2[data-reveal].is-in  { transform: rotate(-3deg); }
@media (max-width: 991px) {
  html.reveal-ready .hero-ui-card[data-reveal]   { transform: translate3d(0, 16px, 0) rotate(2deg); }
  html.reveal-ready .hero-ui-card-2[data-reveal] { transform: translate3d(0, 16px, 0) rotate(-3deg); }
}