/*
 * Refines Elementor's stock entrance animations (fadeInUp, zoomIn)
 *   - 8px travel distance (was Elementor's 100%-of-element-height)
 *   - cubic-bezier(0.45, 0, 0.55, 1): a symmetric ease-in-out curve, not a
 *     decelerate-only curve — nothing snaps to attention, it settles evenly.
 *   - position and opacity run as two separate animations with slightly
 *     different durations (0.7s / 0.9s), not one merged keyframe — this
 *     desync is part of why Apple's reveals read as considered rather than
 *     mechanical.
 * The zoomIn scale (0.98) and the fast/slow duration pairs are not directly
 * sourced from Apple — they're extrapolated to stay consistent with the
 * same "much smaller movement than we first guessed" principle.
 * Must be enqueued after Elementor's stylesheet (source-order override).
 */

@keyframes fadeInUp-position {
  from {
    transform: translate3d(0, 8px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp-opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomIn-position {
  from {
    transform: scale3d(0.98, 0.98, 0.98);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes zoomIn-opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*
 * !important is required here specifically: Elementor conditionally loads a
 * separate per-animation-type stylesheet (e.g. assets/lib/animations/styles/
 * fadeInUp.min.css, registered as handle `e-animation-fadeInUp`) only on
 * pages that actually use that animation. Its exact enqueue timing isn't
 * controllable via a dependency array (its registration point varies, and it
 * redeclares `.fadeInUp { animation-name: fadeInUp; }` itself) — confirmed
 * empirically via document.styleSheets that it loads after this file and
 * silently resets animation-name back to Elementor's own single keyframe.
 * The @keyframes above use unique names (not reused from Elementor), so
 * there's no equivalent collision for the keyframes themselves — this
 * !important only needs to cover the one property that actually collides.
 */
.fadeInUp {
  animation-name: fadeInUp-position, fadeInUp-opacity !important;
}

.zoomIn {
  animation-name: zoomIn-position, zoomIn-opacity !important;
}

.animated {
  animation-duration: 0.7s, 0.9s;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1), cubic-bezier(0.45, 0, 0.55, 1);
}
.animated.animated-slow {
  animation-duration: 0.9s, 1.1s;
}
.animated.animated-fast {
  animation-duration: 0.5s, 0.7s;
}