/* ==========================================================================
   Animations: scroll reveal, keyframes, live-dot and glow effects.
   Section-specific animations (marquee, ECG line, gallery, stepper ...) live
   in assets/css/sections/*.css next to the sections that use them.
   ========================================================================== */

/*
 * Scroll reveal.
 * Add data-rv (or the class atlas-rv, which works in Elementor Free where
 * custom attributes are Pro-only) to any element. Content only hides once
 * JavaScript is running (html.atlas-js), so it is never lost without JS.
 * :where() keeps specificity at 0,1,0 so a component's own transition still wins,
 * exactly as the inline styles did in the original.
 */
:where(.atlas-js) [data-rv],
:where(.atlas-js) .atlas-rv {
  opacity: 0;
  transform: translateY(var(--rv-off,28px));
  transition: opacity var(--rv-dur,.95s) cubic-bezier(.16,1,.3,1), transform var(--rv-dur,.95s) cubic-bezier(.16,1,.3,1);
}

:where(.atlas-js) [data-rv].in,
:where(.atlas-js) .atlas-rv.in {
  opacity: 1;
  transform: none;
}

/* The article page reveals slightly faster and shorter */
.atlas-page--article {
  --rv-off: 26px;
  --rv-dur: .9s;
}

/* Never hide content inside the Elementor editor or its preview */
.elementor-editor-active [data-rv],
.elementor-editor-active .atlas-rv,
.atlas-no-reveal [data-rv],
.atlas-no-reveal .atlas-rv {
  opacity: 1 !important;
  transform: none !important;
}

/* WhatsApp "live" dot */
.wa-live {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #25D366;
  margin-right: 9px;
  flex: none;
  vertical-align: middle;
}

.wa-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: wa-ring 1.9s ease-out infinite;
}

@keyframes wa-ring {
  0% { transform: scale(1); opacity: .65; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Soft green glow on the WhatsApp call-to-action buttons */
.wa-cta {
  animation: wa-glow 2.8s ease-in-out infinite;
}

@keyframes wa-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  50% { box-shadow: 0 0 0 5px rgba(37,211,102,.16); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-live::after,
  .wa-cta {
    animation: none;
  }
}