/* =====================================================================
   MWI testimonials marquee  (2026-08-01)

   Motion + glass only. Every piece of CONTENT (avatar, name, role,
   quote, stars) is an ordinary Elementor widget inside the cards, and
   every card is an ordinary Elementor container -- widths, spacing,
   colours and typography stay editable in the editor. This file must
   never set text content, and should avoid !important except where the
   marquee track geometry has to beat Elementor's own flex output.

   Palette: antique gold #B9924E / soft gold #DCC48F / ivory #F6F1E7 /
   cloud #FBF8F3 / espresso #241A12. No rose gold -- the active design
   direction forbids it (confirmed with the client 2026-08-01).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Section shell: hairlines top and bottom, edge fade, no overflow
   --------------------------------------------------------------------- */
.mwi-testi-section{
  position:relative;
  overflow:hidden;
  --mwi-testi-x: -50%;
  --mwi-testi-dur: 60s;
}

/* Gold hairline above and below -- the same quiet rule the rest of the
   site uses to separate bands. */
.mwi-testi-section::before,
.mwi-testi-section::after{
  content:'';
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
              transparent,
              rgba(185,146,78,.30) 18%,
              rgba(220,196,143,.55) 50%,
              rgba(185,146,78,.30) 82%,
              transparent);
  pointer-events:none;
}
.mwi-testi-section::before{ top:0; }
.mwi-testi-section::after { bottom:0; }

/* Cards dissolve into the page at both ends instead of being cut. */
.mwi-testi-viewport{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
@media (max-width:767px){
  .mwi-testi-viewport{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}

/* ---------------------------------------------------------------------
   2. The moving track

   Elementor writes the row direction and the gap from the container's
   own controls, so those stay editable. Only the two things that would
   otherwise break a marquee are forced here: the track may not wrap and
   may not be clamped to the viewport width.
   --------------------------------------------------------------------- */
.mwi-testi-track{
  flex-wrap:nowrap !important;
  width:max-content !important;
  max-width:none !important;
  will-change:transform;
  /* The track is itself a flex item of .mwi-testi-viewport, and Elementor
     writes flex-shrink:var(--flex-shrink) at .elementor-element.e-con --
     higher specificity than a bare class. Without these the track is
     squeezed back to the viewport width and every card collapses to its
     minimum. This is the one place the marquee has to overrule Elementor. */
  flex-grow:0 !important;
  flex-shrink:0 !important;
  flex-basis:auto !important;
}
.mwi-testi-section.is-ready .mwi-testi-track{
  animation:mwiTestiMarquee var(--mwi-testi-dur) linear infinite;
}

/* Pause: hover, keyboard focus, or scrolled out of view. */
.mwi-testi-section.is-ready:hover .mwi-testi-track,
.mwi-testi-section.is-ready:focus-within .mwi-testi-track,
.mwi-testi-section.is-paused .mwi-testi-track{
  animation-play-state:paused;
}

@keyframes mwiTestiMarquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(var(--mwi-testi-x),0,0); }
}

/* ---------------------------------------------------------------------
   3. The card: warm glass, gold hairline, no pure-black shadow
   --------------------------------------------------------------------- */
.mwi-testi-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* Same reason as the track: the card keeps the width Elementor gives it
     (--width, editable per breakpoint) instead of being shrunk to fit. */
  flex-grow:0 !important;
  flex-shrink:0 !important;
  flex-basis:auto !important;
  background:linear-gradient(158deg, rgba(251,248,243,.90) 0%, rgba(246,241,231,.74) 62%, rgba(246,241,231,.66) 100%);
  border:1px solid rgba(185,146,78,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(185,146,78,.10),
    0 16px 30px -26px rgba(36,26,18,.42);
  -webkit-backdrop-filter:blur(7px) saturate(1.04);
          backdrop-filter:blur(7px) saturate(1.04);
  transition:box-shadow .55s var(--mwi-ease-silk, cubic-bezier(.22,.61,.22,1)),
             border-color .55s var(--mwi-ease-silk, cubic-bezier(.22,.61,.22,1)),
             transform .55s var(--mwi-ease-silk, cubic-bezier(.22,.61,.22,1));
}
.mwi-testi-card:hover{
  transform:translateY(-2px);
  border-color:rgba(185,146,78,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 20px 38px -26px rgba(36,26,18,.50);
}

/* ---------------------------------------------------------------------
   4. The site's light sweep, reused verbatim in geometry

   Same rotated gradient bar as .mwi-logo-wrap::after (section 2 of
   mwi-motion.css) so the light on these cards reads as the same light.
   Cards are staggered so the sweep travels along the row rather than
   flashing every card at once.
   --------------------------------------------------------------------- */
.mwi-testi-card > .mwi-testi-sheen{ display:none; }
.mwi-testi-card::before{
  content:'';
  position:absolute; top:-60%; left:-70%;
  width:34%; height:220%;
  background:linear-gradient(100deg,
              transparent,
              rgba(255,255,255,.70) 44%,
              rgba(220,196,143,.82) 58%,
              transparent);
  transform:rotate(18deg);
  pointer-events:none;
  opacity:0;
  z-index:2;
}
.mwi-testi-section.is-ready .mwi-testi-card::before{
  animation:mwiTestiSheen 11s var(--mwi-ease-silk, cubic-bezier(.22,.61,.22,1)) infinite;
}
.mwi-testi-section.is-ready .mwi-testi-card:nth-child(4n+2)::before{ animation-delay:1.1s; }
.mwi-testi-section.is-ready .mwi-testi-card:nth-child(4n+3)::before{ animation-delay:2.2s; }
.mwi-testi-section.is-ready .mwi-testi-card:nth-child(4n+4)::before{ animation-delay:3.3s; }

@keyframes mwiTestiSheen{
  0%  { left:-70%; opacity:0; }
  4%  { opacity:.85; }
  17% { left:130%;  opacity:.85; }
  21% { opacity:0; }
  100%{ left:130%;  opacity:0; }
}

/* ---------------------------------------------------------------------
   5. Pieces inside the card

   Sizes here are floors, not laws -- Elementor's own controls override
   them because Elementor writes higher-specificity selectors.
   --------------------------------------------------------------------- */
.mwi-testi-ava img{
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(185,146,78,.45);
  box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 6px 14px -10px rgba(36,26,18,.45);
}

.mwi-testi-name .elementor-heading-title{ line-height:1.25; }
.mwi-testi-role .elementor-heading-title{
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
}

/* A hairline quote mark, drawn in CSS so no image asset is needed. */
.mwi-testi-quote{ position:relative; }
.mwi-testi-quote::before{
  content:'\201C';
  position:absolute; top:-.34em; left:-.06em;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:2.6em;
  line-height:1;
  color:rgba(185,146,78,.24);
  pointer-events:none;
}

.mwi-testi-stars .elementor-heading-title{
  letter-spacing:.18em;
  line-height:1;
}

/* ---------------------------------------------------------------------
   6. Elementor editor: never animate, always reachable

   Inside the editor the JS never runs (the loader's editor guard), so
   .is-ready is absent and the track is static. The mask and the clipping
   are dropped too, so every card can be selected and edited.
   --------------------------------------------------------------------- */
body.elementor-editor-active .mwi-testi-section{ overflow-x:auto; }
body.elementor-editor-active .mwi-testi-viewport{
  overflow-x:auto;
  -webkit-mask-image:none;
          mask-image:none;
}
body.elementor-editor-active .mwi-testi-track{ transform:none !important; animation:none !important; }

/* ---------------------------------------------------------------------
   7. Reduced motion: no travel, no sheen -- the cards simply wrap
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mwi-testi-section .mwi-testi-track{
    animation:none !important;
    transform:none !important;
    flex-wrap:wrap !important;
    width:auto !important;
    justify-content:center;
  }
  .mwi-testi-card::before{ animation:none !important; opacity:0 !important; }
  .mwi-testi-viewport{
    -webkit-mask-image:none;
            mask-image:none;
  }
}
.mwi-testi-section.is-static .mwi-testi-track{
  flex-wrap:wrap !important;
  width:auto !important;
  justify-content:center;
}