/* ============================================================
   Keshet Motion Layer v1.0
   Loaded only on pages 1983-1988 (mu-plugin keshet-motion.php).
   Safety model:
   - Entire sheet inert under prefers-reduced-motion.
   - Hidden states apply ONLY under html.kmo-on (added by JS).
     Without JS the site is 100% visible and static.
   - .kmo-lcp elements never animate opacity (LCP safe).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

/* ---------- 1. Scroll reveal choreography ---------- */
html.kmo-on .kmo {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s cubic-bezier(.16, 1, .3, 1),
    transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--kmo-d, 0ms);
}
html.kmo-on .kmo-in .kmo,
html.kmo-on .kmo-in.kmo {
  opacity: 1;
  transform: none;
}
/* LCP candidates (hero display heading / hero images): transform only */
html.kmo-on .kmo.kmo-lcp { opacity: 1; }
/* chips: small pop */
html.kmo-on .kmo.k-chip,
html.kmo-on .kmo.k-chip-sm { transform: translateY(12px) scale(.95); }
/* absolute decor (ghost digits, glows, arc): pure slow fade, no movement */
html.kmo-on .kmo-fade {
  opacity: 0;
  transform: none;
  transition: opacity 1.2s ease;
  transition-delay: var(--kmo-d, 0ms);
}
html.kmo-on .kmo-in .kmo-fade,
html.kmo-on .kmo-in.kmo-fade { opacity: 1; }
/* mobile: shorter travel */
@media (max-width: 767px) {
  html.kmo-on .kmo { transform: translateY(16px); }
}
/* industry page: intentionally faster rhythm (80/20 spec) */
html.kmo-on body.page-id-1985 .kmo,
html.kmo-on .page-id-1985 .kmo {
  transition-duration: .5s, .5s;
}

/* ---------- 2. Timeline line drawn by scroll (desktop) ---------- */
html.kmo-desktop .k-timeline::before,
html.kmo-desktop .kg-steps::before {
  transform-origin: right center;
  transform: scaleX(var(--kmo-p, 1));
}
/* home comet head appears as the line completes */
html.kmo-desktop .k-timeline::after {
  opacity: var(--kmo-cp, 1);
  transition: opacity .3s ease;
}

/* ---------- 3. Signature speed lines: live drift on navy ---------- */
/* home .k-line already drifts (kdrift in page CSS). Extend to the
   pseudo-element lines of the placement page. */
html.kmo-on .kg-hero::after,
html.kmo-on .kg-guarantee::before {
  animation: kmoDrift 8s ease-in-out infinite alternate;
}
@keyframes kmoDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(20px); }
}
@media (max-width: 767px) {
  html.kmo-on .kg-hero::after,
  html.kmo-on .kg-guarantee::before { animation: none; }
}

/* ---------- 4. Background parallax (desktop only) ---------- */
html.kmo-desktop .k-why,
html.kmo-desktop .keshet-about-hero { background-attachment: fixed; }

/* ---------- 5. Micro-interactions ---------- */
/* gradient shift on primary buttons: cyan->green slides to green->cyan */
html.kmo-on .k-btn-grad .elementor-button,
html.kmo-on .kg-btn-gradient .elementor-button,
html.kmo-on .keshet-btn-grad .elementor-button {
  background-image: linear-gradient(90deg, #00BEED 0%, #99D250 50%, #00BEED 100%) !important;
  background-size: 200% 100% !important;
  background-position: 0% 0 !important;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s, background-position .55s ease !important;
}
html.kmo-on .k-btn-grad .elementor-button:hover,
html.kmo-on .k-btn-grad .elementor-button:focus,
html.kmo-on .kg-btn-gradient .elementor-button:hover,
html.kmo-on .kg-btn-gradient .elementor-button:focus,
html.kmo-on .keshet-btn-grad .elementor-button:hover,
html.kmo-on .keshet-btn-grad .elementor-button:focus {
  background-position: 100% 0 !important;
}
/* accordion plus-icon rotation, site-wide (all FAQs use plus icons) */
html.kmo-on .elementor-accordion .elementor-accordion-icon {
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
html.kmo-on .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
  transform: rotate(45deg);
}

/* ---------- 6. Gentle glow pulse on closing-CTA buttons (1/6s) ---------- */
html.kmo-on .k-final .k-btn-grad .elementor-button,
html.kmo-on .kg-cta .kg-btn-gradient .elementor-button {
  position: relative;
}
html.kmo-on .k-final .k-btn-grad .elementor-button::after,
html.kmo-on .kg-cta .kg-btn-gradient .elementor-button::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  pointer-events: none;
  animation: kmoPulse 6s ease-in-out infinite;
}
@keyframes kmoPulse {
  0%, 82%, 100% { box-shadow: 0 0 0 0 rgba(0, 190, 237, 0); }
  90%           { box-shadow: 0 0 30px 4px rgba(0, 190, 237, .35); }
}
@media (max-width: 767px) {
  html.kmo-on .k-final .k-btn-grad .elementor-button::after,
  html.kmo-on .kg-cta .kg-btn-gradient .elementor-button::after { animation: none; }
}

} /* end prefers-reduced-motion: no-preference */

/* ---------- debug: ?no-anim (JS adds nothing, but belt & braces) ---------- */
html[data-no-anim] .kmo,
html[data-no-anim] .kmo-fade { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }