/* ============================================================
   SmartVend — fx.css  ·  "forge-glow" effects layer
   Additive & reversible. All effects live under .fx and respect
   prefers-reduced-motion. Base state = final state.
   ============================================================ */

/* Hero cinematic video */
.fx .hero__video{width:100%;height:100%;object-fit:cover;display:block}

/* Product video (machines) */
.fx .mrow__video{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);
  max-width:440px;margin-inline:auto;display:block}

/* 3D magnetic tilt */
.fx .tilt{transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
  will-change:transform;transform-style:preserve-3d}
.fx .tilt.tilted{transition:transform 90ms linear,box-shadow var(--dur-2) var(--ease)}
.fx .mrow__media.tilt.tilted{box-shadow:0 30px 70px -30px #000,0 0 0 1px rgba(255,138,43,.25),0 0 40px -8px rgba(255,106,0,.35)}
.fx .mcard.tilt.tilted{box-shadow:0 34px 74px -34px #000,0 0 0 1px rgba(255,138,43,.22)}

/* Breathing forge glow on CTA */
@media (prefers-reduced-motion:no-preference){
  .fx .cta-band::before{animation:forgeBreathe 6s var(--ease) infinite alternate}
  @keyframes forgeBreathe{from{opacity:.32}to{opacity:.72}}
}

/* Count-up: reserve width so numbers don't reflow */
.fx [data-count]{font-variant-numeric:tabular-nums;display:inline-block}

/* Reduced motion: neutralise everything extra */
@media (prefers-reduced-motion:reduce){
  .fx .tilt{transition:none}
  .fx .cta-band::before{animation:none}
}

/* Video in image bands & split media (product/context motion) */
.fx .split__media video{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.fx .imgband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}

/* 21st-adapted: word reveal + forge sparks */
.fx .fxw{display:inline-block}
.fx .fxw>span{display:inline-block;opacity:0;transform:translateY(.55em);
  transition:opacity .55s var(--ease-expo),transform .55s var(--ease-expo)}
.fx .section__head h2.in .fxw>span{opacity:1;transform:none}
.fx .btn--primary{position:relative}
.fx-spark{position:absolute;width:5px;height:5px;border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle,#FFE0B0,#FF6A00 62%,rgba(255,106,0,0));
  box-shadow:0 0 6px 1px rgba(255,138,43,.85)}
@media(prefers-reduced-motion:reduce){.fx .fxw>span{opacity:1;transform:none;transition:none}}