/*
 * Focus Marketing — decorative motion layer (see assets/js/fx.js).
 * Brand palette only: #071120 / #0D1B2A backgrounds, #FFC107 accent, white.
 */

/* Particle canvases: always behind the content, never clickable. */
.fx-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}
.fx-canvas--fixed { position: fixed; }

/* Blog / article heroes host their own small field. */
.fm-page-hero,
.fm-post-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Entrance reveal — only applied by fx.js to elements that start below the fold. */
.fx-js .fx-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-js .fx-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Buttons: a small lift on hover, same colours as before. */
.fl-page .elementor-button { transition: background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
.fl-page .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }

@media (prefers-reduced-motion: reduce) {
  .fx-js .fx-reveal { opacity: 1; transform: none; transition: none; }
  .fl-page .elementor-button:hover { transform: none; }
}