/*
 * Salesio universal template — effects.css
 *
 * OPT-IN visual + motion library. Each effect is a single class that
 * a renderer adds when a template sets a corresponding prop on a
 * section. NOTHING in this file applies by default — templates must
 * explicitly opt in to every effect they want.
 *
 * Naming:
 *   .sx-fx-enter-<name>   — entrance animation when section enters viewport
 *                            (works alongside .sx-reveal; the IO flips
 *                            .sx-revealed and these rules animate to
 *                            the resting state)
 *   .sx-fx-hover-<name>   — hover effect on cards / items inside a section
 *                            (selectors target nested .sx-card, .sx-value-card,
 *                            .sx-service-card etc.)
 *   .sx-fx-idle-<name>    — continuous motion on the section root
 *   .sx-fx-bg-<name>      — decorative background overlay / pattern
 *
 * How to consume from a template's site.json:
 *   "props": {
 *     "entrance": "slide-left",   // .sx-fx-enter-slide-left
 *     "hover":    "lift-glow",     // .sx-fx-hover-lift-glow
 *     "idle":     "float",         // .sx-fx-idle-float
 *     "bg_fx":    "dots"           // .sx-fx-bg-dots
 *   }
 *
 * The shared sections.js helper `fxCls(p)` walks the props and emits
 * the class string — renderers just append it to the <section> root.
 *
 * Accessibility: every effect below is wrapped (transitively, via
 * the @media prefers-reduced-motion block at the BOTTOM of this
 * file) so reduce-motion users see content INSTANTLY, no transitions.
 */

/* ═════════════════════════════════════════════════════════════════ */
/* SECTION ENTRANCE EFFECTS                                          */
/*   Activated by .sx-revealed (added by IntersectionObserver in     */
/*   runtime.js — see the existing .sx-reveal infrastructure).       */
/*   Each pairs the initial offset / filter with a transition; the   */
/*   .sx-revealed companion class removes the offset.                */
/* ═════════════════════════════════════════════════════════════════ */

/* fade-up — current default look, kept here so all entrances live in
   one file. Equivalent to legacy .sx-reveal alone, but explicit. */
.sx-fx-enter-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-fx-enter-fade-up.sx-revealed { opacity: 1; transform: none; }

/* fade-down — drops in from above; nice for navbars / hero subtext */
.sx-fx-enter-fade-down {
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-fx-enter-fade-down.sx-revealed { opacity: 1; transform: none; }

/* slide-left — slides in from the right edge (subject travels leftward) */
.sx-fx-enter-slide-left {
  opacity: 0;
  transform: translateX(64px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-fx-enter-slide-left.sx-revealed { opacity: 1; transform: none; }

/* slide-right — mirror of slide-left */
.sx-fx-enter-slide-right {
  opacity: 0;
  transform: translateX(-64px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-fx-enter-slide-right.sx-revealed { opacity: 1; transform: none; }

/* scale-up — gentle zoom-in, good for hero / centerpiece images */
.sx-fx-enter-scale-up {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-fx-enter-scale-up.sx-revealed { opacity: 1; transform: none; }

/* blur-in — defocused → focused; reads as "comes into clarity" */
.sx-fx-enter-blur {
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.8s ease, filter 0.8s ease;
}
.sx-fx-enter-blur.sx-revealed { opacity: 1; filter: none; }

/* clip-up — curtain wipe from bottom to top (clip-path drives it,
   no layout reflow). Feels editorial / cinematic. */
.sx-fx-enter-clip-up {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.3, 1);
}
.sx-fx-enter-clip-up.sx-revealed { clip-path: inset(0); }

/* rotate-tilt — small rotational entrance, playful */
.sx-fx-enter-rotate {
  opacity: 0;
  transform: rotate(-3deg) translateY(20px);
  transform-origin: left top;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sx-fx-enter-rotate.sx-revealed { opacity: 1; transform: none; }


/* ═════════════════════════════════════════════════════════════════ */
/* HOVER EFFECTS                                                      */
/*   Target the items inside the section. We hit several common card */
/*   classes so the effect "just works" whether the section uses     */
/*   sx-card, sx-value-card, sx-service-card, sx-trust__item, etc.   */
/* ═════════════════════════════════════════════════════════════════ */

.sx-fx-hover-lift > * { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sx-fx-hover-lift .sx-card:hover,
.sx-fx-hover-lift .sx-value-card:hover,
.sx-fx-hover-lift .sx-service-card:hover,
.sx-fx-hover-lift .sx-trust__item:hover,
.sx-fx-hover-lift .sx-faq__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.08);
}

/* glow — colored shadow in brand primary */
.sx-fx-hover-glow .sx-card,
.sx-fx-hover-glow .sx-value-card,
.sx-fx-hover-glow .sx-service-card,
.sx-fx-hover-glow .sx-trust__item {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.sx-fx-hover-glow .sx-card:hover,
.sx-fx-hover-glow .sx-value-card:hover,
.sx-fx-hover-glow .sx-service-card:hover,
.sx-fx-hover-glow .sx-trust__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px color-mix(in srgb, var(--sx-color-primary) 28%, transparent);
}

/* zoom — whole card scales subtly */
.sx-fx-hover-zoom .sx-card,
.sx-fx-hover-zoom .sx-value-card,
.sx-fx-hover-zoom .sx-service-card,
.sx-fx-hover-zoom .sx-gallery__item {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sx-fx-hover-zoom .sx-card:hover,
.sx-fx-hover-zoom .sx-value-card:hover,
.sx-fx-hover-zoom .sx-service-card:hover,
.sx-fx-hover-zoom .sx-gallery__item:hover {
  transform: scale(1.03);
}

/* image-zoom — only the <img> inside an item scales (card frame
   stays put — the image grows within its clip). Great for galleries. */
.sx-fx-hover-image-zoom :is(.sx-card,.sx-gallery__item,.sx-service-card) {
  overflow: hidden;
}
.sx-fx-hover-image-zoom :is(.sx-card,.sx-gallery__item,.sx-service-card) img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-fx-hover-image-zoom :is(.sx-card,.sx-gallery__item,.sx-service-card):hover img {
  transform: scale(1.08);
}

/* shine — diagonal highlight sweeps across the card on hover */
.sx-fx-hover-shine :is(.sx-card,.sx-value-card,.sx-service-card,.sx-trust__item) {
  position: relative;
  overflow: hidden;
}
.sx-fx-hover-shine :is(.sx-card,.sx-value-card,.sx-service-card,.sx-trust__item)::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transition: left 0.7s ease;
  pointer-events: none;
}
.sx-fx-hover-shine :is(.sx-card,.sx-value-card,.sx-service-card,.sx-trust__item):hover::after {
  left: 130%;
}


/* ═════════════════════════════════════════════════════════════════ */
/* IDLE MOTION                                                        */
/*   Continuous gentle animation on the section root or its children. */
/*   Always paused by prefers-reduced-motion (block at bottom).      */
/* ═════════════════════════════════════════════════════════════════ */

@keyframes sx-fx-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.sx-fx-idle-float :is(.sx-card,.sx-value-card,.sx-service-card,.sx-trust__item,.sx-trust__icon) {
  animation: sx-fx-float 5s ease-in-out infinite;
}
.sx-fx-idle-float :is(.sx-card,.sx-value-card,.sx-service-card,.sx-trust__item,.sx-trust__icon):nth-child(2n)  { animation-delay: 0.7s; }
.sx-fx-idle-float :is(.sx-card,.sx-value-card,.sx-service-card,.sx-trust__item,.sx-trust__icon):nth-child(3n)  { animation-delay: 1.4s; }
.sx-fx-idle-float :is(.sx-card,.sx-value-card,.sx-service-card,.sx-trust__item,.sx-trust__icon):nth-child(4n)  { animation-delay: 2.1s; }

@keyframes sx-fx-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}
.sx-fx-idle-pulse :is(.sx-card,.sx-value-card,.sx-service-card,.sx-trust__icon) {
  animation: sx-fx-pulse 3.5s ease-in-out infinite;
}

@keyframes sx-fx-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}
.sx-fx-idle-breathe :is(.sx-card,.sx-value-card,.sx-service-card) {
  animation: sx-fx-breathe 4.5s ease-in-out infinite;
}


/* ═════════════════════════════════════════════════════════════════ */
/* BACKGROUND DECORATION                                              */
/*   Decorative overlay rendered as a ::before on the section root.   */
/*   pointer-events:none so they never block clicks. z-index:0 so any */
/*   .sx-container inside (which is naturally on top) reads cleanly.  */
/* ═════════════════════════════════════════════════════════════════ */

.sx-fx-bg-dots,
.sx-fx-bg-grid,
.sx-fx-bg-mesh,
.sx-fx-bg-noise {
  position: relative;
  isolation: isolate;
}
.sx-fx-bg-dots::before,
.sx-fx-bg-grid::before,
.sx-fx-bg-mesh::before,
.sx-fx-bg-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sx-fx-bg-dots > * { position: relative; z-index: 1; }
.sx-fx-bg-grid > * { position: relative; z-index: 1; }
.sx-fx-bg-mesh > * { position: relative; z-index: 1; }
.sx-fx-bg-noise > * { position: relative; z-index: 1; }

/* dots — subtle dotted grid, brand-color tinted */
.sx-fx-bg-dots::before {
  background-image:
    radial-gradient(color-mix(in srgb, var(--sx-color-primary) 22%, transparent) 1.2px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.5;
}

/* grid — light hairline grid */
.sx-fx-bg-grid::before {
  background-image:
    linear-gradient(to right,  var(--sx-color-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sx-color-border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.6;
}

/* mesh — animated gradient blob behind content (slow drift) */
@keyframes sx-fx-mesh-drift {
  0%   { transform: translate(0%,  0%)  rotate(0); }
  50%  { transform: translate(-4%, 3%)  rotate(8deg); }
  100% { transform: translate(0%,  0%)  rotate(0); }
}
.sx-fx-bg-mesh::before {
  background:
    radial-gradient(60% 50% at 15% 25%, color-mix(in srgb, var(--sx-color-primary) 18%, transparent) 0%, transparent 60%),
    radial-gradient(45% 45% at 85% 75%, color-mix(in srgb, var(--sx-color-accent)  20%, transparent) 0%, transparent 60%);
  filter: blur(40px);
  animation: sx-fx-mesh-drift 14s ease-in-out infinite;
}

/* noise — film-grain via inline SVG, very subtle */
.sx-fx-bg-noise::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.06;
  mix-blend-mode: multiply;
}


/* ═════════════════════════════════════════════════════════════════ */
/* TEXT-LEVEL VARIANTS (extends the existing .sx-text-fx in base.css) */
/* ═════════════════════════════════════════════════════════════════ */

/* gradient-slide — H2 fill is a gradient that pans on reveal */
.sx-text-fx.sx-fx-text-gradient .sx-h2,
.sx-text-fx .sx-fx-text-gradient.sx-h2 {
  background: linear-gradient(110deg, var(--sx-color-ink) 0%, var(--sx-color-primary) 50%, var(--sx-color-ink) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-text-fx.sx-fx-text-gradient.sx-revealed .sx-h2 { background-position: 0 0; }


/* ═════════════════════════════════════════════════════════════════ */
/* MARQUEE SCROLLER — opt-in via .sx-marquee on a wrapper.           */
/* HTML pattern:                                                     */
/*   <div class="sx-marquee">                                        */
/*     <div class="sx-marquee__track">                               */
/*       <span>Logo A</span><span>Logo B</span> ... (duplicate set)  */
/*     </div></div>                                                  */
/* The track must contain TWO copies of the items so the loop is     */
/* seamless. Pauses on hover. Mask fades edges for a clean look.     */
/* ═════════════════════════════════════════════════════════════════ */
@keyframes sx-marquee-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.sx-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sx-marquee__track {
  display: flex;
  gap: 48px;
  width: max-content;
  align-items: center;
  animation: sx-marquee-flow 30s linear infinite;
  will-change: transform;
}
.sx-marquee:hover .sx-marquee__track { animation-play-state: paused; }
.sx-marquee--slow .sx-marquee__track { animation-duration: 60s; }
.sx-marquee--fast .sx-marquee__track { animation-duration: 18s; }
.sx-marquee--reverse .sx-marquee__track { animation-direction: reverse; }


/* ═════════════════════════════════════════════════════════════════ */
/* BUTTON-WITH-ARROW HOVER — opt-in via .sx-btn--arrow on any .sx-btn. */
/* The arrow sits hidden to the right; on hover it slides in and the */
/* button reserves extra padding so the label doesn't shift jarringly.*/
/* ═════════════════════════════════════════════════════════════════ */
.sx-btn--arrow {
  position: relative;
  overflow: hidden;
  padding-right: 28px;
  transition: padding-right 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s, color 0.2s, border-color 0.2s;
}
.sx-btn--arrow::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-btn--arrow:hover {
  padding-right: 42px;
}
.sx-btn--arrow:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}


/* ═════════════════════════════════════════════════════════════════ */
/* CAPTION-RISE on image cards — opt-in via .sx-img-rise on a tile.  */
/* HTML pattern:                                                     */
/*   <figure class="sx-img-rise">                                    */
/*     <img src="...">                                               */
/*     <figcaption class="sx-img-rise__cap">Title or text</figcaption>*/
/*   </figure>                                                       */
/* Image zooms slightly + dark overlay fades in + caption slides up. */
/* ═════════════════════════════════════════════════════════════════ */
.sx-img-rise {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--sx-radius-lg, 10px);
}
.sx-img-rise > img,
.sx-img-rise picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-img-rise::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7));
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.sx-img-rise__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 24px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  transform: translateY(28px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  z-index: 1;
}
.sx-img-rise:hover > img,
.sx-img-rise:hover picture > img { transform: scale(1.06); }
.sx-img-rise:hover::after { opacity: 1; }
.sx-img-rise:hover .sx-img-rise__cap { transform: translateY(0); opacity: 1; }


/* ═════════════════════════════════════════════════════════════════ */
/* DECO RING — rotating dashed circle as a decorative idle element.  */
/* Pure-CSS, no JS. Drop a div anywhere with .sx-deco-ring.          */
/*   <div class="sx-deco-ring" aria-hidden="true"></div>             */
/* Color inherits from --sx-color-primary; size + speed via modifier */
/* classes (--sm/--lg/--slow/--fast). Pairs well as bg accent inside */
/* sections that need a touch of movement.                           */
/* ═════════════════════════════════════════════════════════════════ */
@keyframes sx-deco-ring-spin { to { transform: rotate(360deg); } }
.sx-deco-ring {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px dashed var(--sx-color-primary);
  opacity: 0.35;
  animation: sx-deco-ring-spin 20s linear infinite;
  will-change: transform;
  pointer-events: none;
}
.sx-deco-ring--sm   { width: 80px;  height: 80px; }
.sx-deco-ring--lg   { width: 280px; height: 280px; }
.sx-deco-ring--slow { animation-duration: 40s; }
.sx-deco-ring--fast { animation-duration: 8s; }
.sx-deco-ring--solid { border-style: solid; opacity: 0.20; }
.sx-deco-ring--accent { border-color: var(--sx-color-accent); }


/* ═════════════════════════════════════════════════════════════════ */
/* MASK CLIP-PATH REVEAL — alternative to fade-up entrance. Element   */
/* starts fully clipped from the bottom and "wipes" open on reveal.   */
/* Opt-in by adding BOTH .sx-reveal AND .sx-fx-mask-up to an element. */
/* IntersectionObserver flips .sx-revealed when in view (existing).   */
/* Pairs especially well with hero titles, images, and pull-quotes.   */
/* ═════════════════════════════════════════════════════════════════ */
.sx-fx-mask-up {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  opacity: 1;            /* override .sx-reveal opacity:0 — mask handles it */
  transform: none;       /* override .sx-reveal translateY */
  transition: -webkit-clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
                      clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-fx-mask-up.sx-revealed {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.sx-fx-mask-down {
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
  opacity: 1;
  transform: none;
  transition: -webkit-clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
                      clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-fx-mask-down.sx-revealed {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.sx-fx-mask-left {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  transition: -webkit-clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
                      clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.sx-fx-mask-left.sx-revealed {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}


/* ═════════════════════════════════════════════════════════════════ */
/* a11y: reduce-motion users get instant content, zero animations.   */
/* Catches every effect class added in this file.                    */
/* ═════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  [class*="sx-fx-enter-"],
  [class*="sx-fx-idle-"],
  [class*="sx-fx-hover-"] *,
  [class*="sx-fx-mask-"],
  .sx-marquee__track,
  .sx-deco-ring,
  .sx-img-rise > img,
  .sx-img-rise::after,
  .sx-img-rise__cap,
  .sx-btn--arrow,
  .sx-btn--arrow::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
}