/* =========================================================
   123media — effects layer (fx)
   Loaded after style.css. Purely additive: removing this file
   leaves the base site fully functional.
   ========================================================= */
:root {
  --glow-brand: rgba(244, 93, 14, 0.28);
}

/* ---------------------------------------------------------
   Hero: soft brand wash behind the hero
   --------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 2; }

.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 70%;
  height: 130%;
  background: radial-gradient(ellipse at center,
    rgba(244, 93, 14, 0.05), rgba(255, 170, 90, 0.03) 45%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -15%;
  width: 55%;
  height: 100%;
  background: radial-gradient(ellipse at center,
    rgba(244, 140, 40, 0.03), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Headline entrance (one-shot, triggered by fx.js on load)
   --------------------------------------------------------- */
.fx-anim .decode { animation: decode-in 700ms var(--ease) both; }
@keyframes decode-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------- */
.fx-anim .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
.fx-anim .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------
   Buttons + card lift
   --------------------------------------------------------- */
.fx-anim .btn-primary:hover {
  box-shadow: 0 10px 28px -10px var(--glow-brand);
}

.fx-anim .card:hover,
.fx-anim .plan-card:hover { transform: translateY(-3px); }