/* Motion.

   Two gates, deliberately. An element is only hidden when BOTH are true:
   html.kbx-motion  set by a tiny inline script before first paint, and only
                    when the user has not asked for reduced motion
   .kbx-reveal      added by kbx-motion.js as it registers each element

   So if the script fails, errors, or never loads, no element carries
   .kbx-reveal and the page renders in full. This is the opposite of
   Elementor's entrance animations, which set opacity to zero in CSS and
   relied on script to undo it. That is what rendered the hero blank. */

.kbx-motion .kbx-reveal {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

.kbx-motion .kbx-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 320ms cubic-bezier(0.22, 0.7, 0.3, 1),
    transform 320ms cubic-bezier(0.22, 0.7, 0.3, 1);
  transition-delay: var(--kbx-delay, 0ms);
}

/* Once it has arrived, stop promoting the layer. */
.kbx-motion .kbx-reveal.is-done {
  will-change: auto;
}

/* The hero visual settles a little further, so it reads as the anchor. */
.kbx-motion .kbx-reveal.kbx-visual {
  transform: translateY(18px) scale(0.985);
}

.kbx-motion .kbx-reveal.kbx-visual.is-in {
  transform: none;
  transition-duration: 520ms;
}

/* Micro-motion. Quiet, and only where it means something. */
@media (prefers-reduced-motion: no-preference) {
  .kbx-iconbox .elementor-icon {
    transition: transform 220ms cubic-bezier(0.22, 0.7, 0.3, 1),
      background-color 220ms ease-out;
  }

  .kbx-card:hover .elementor-icon {
    transform: translateY(-2px) scale(1.04);
  }

  /* The arrow leans toward where it is taking you. */
  .kbx-btn__icon {
    transition: transform 200ms cubic-bezier(0.22, 0.7, 0.3, 1);
  }

  .kbx-btn:hover .kbx-btn__icon {
    transform: translateX(3px);
  }

  /* Buttons acknowledge the press. */
  .elementor-button,
  .kbx-btn,
  .kbx-suite__tab {
    transition: transform 140ms ease-out, background-color 180ms ease-out,
      box-shadow 180ms ease-out, color 180ms ease-out;
  }

  .elementor-button:active,
  .kbx-btn:active,
  .kbx-suite__tab:active {
    transform: translateY(1px) scale(0.995);
  }

  /* Text links pull their underline in from the left rather than blinking on. */
  .elementor-widget-button .elementor-button-link[href]:hover .elementor-button-text {
    background-size: 100% 1px;
  }

  .elementor-widget-button .elementor-button-link[href] .elementor-button-text {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 240ms cubic-bezier(0.22, 0.7, 0.3, 1);
    padding-bottom: 2px;
  }
}

/* The sliding indicator behind the active dashboard tab. */
.kbx-suite__tabs {
  position: relative;
}

.kbx-suite__indicator {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 12px;
  background: var(--kbx-blue);
  box-shadow: 0 6px 18px rgba(82, 113, 255, 0.35);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}

.kbx-suite__indicator.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .kbx-suite__indicator.is-ready {
    transition: transform 340ms cubic-bezier(0.22, 0.7, 0.3, 1),
      width 340ms cubic-bezier(0.22, 0.7, 0.3, 1),
      height 340ms cubic-bezier(0.22, 0.7, 0.3, 1),
      opacity 180ms ease-out;
  }
}

/* With the indicator present the active cell no longer paints its own fill. */
.kbx-suite.has-indicator .kbx-suite__tab {
  position: relative;
  z-index: 1;
}

.kbx-suite.has-indicator .kbx-suite__tab.is-active {
  background: transparent;
  box-shadow: none;
}