/* Subtle background effects for Home and /work. Switch each one on or off in fx/effects.js.
   Brand colours only: Deep Teal #0F5257, Amber #F2A541, Off-White #F8F7F4. Animations move only transform and opacity. */

/* ─── 1. Hero: light travelling along the circuit lines ─── */
.fx-pulse-halo { fill: #F2A541; opacity: 0.18; }
.fx-pulse-core { fill: #F2A541; opacity: 0.75; }

/* ─── 2. Dark "Sample builds" sections: dot grid with one slow teal glow ─── */
.fx-grid {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background-image: radial-gradient(rgba(248, 247, 244, 0.07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 35%, transparent 100%);
}
.fx-grid-glow {
  position: absolute; top: 18%; left: -24rem; width: 48rem; height: 48rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 82, 87, 0.6), rgba(15, 82, 87, 0));
  animation: fx-drift 44s ease-in-out infinite alternate;
  will-change: transform;
}
.fx-grid.is-paused .fx-grid-glow { animation-play-state: paused; }
@keyframes fx-drift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(55vw, 6rem, 0); }
  100% { transform: translate3d(105vw, -3rem, 0); }
}

/* ─── 3. Cards: amber glow on the border that follows the mouse (mouse and trackpad only) ─── */
[data-fx~="glow"] { position: relative; }
.fx-ring { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fx-ring {
    display: block; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; overflow: hidden;
    pointer-events: none; opacity: 0; transition: opacity 0.35s var(--ease-out, ease);
    /* show only a 1.5px ring at the card's edge */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
  [data-fx~="glow"]:hover > .fx-ring { opacity: 1; }
  .fx-ring-glow {
    position: absolute; left: 0; top: 0; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(242, 165, 65, 0.95), rgba(242, 165, 65, 0));
    will-change: transform;
  }
  /* Reduced motion: the whole border lights up evenly instead of tracking the cursor */
  .fx-ring.is-static { background: rgba(242, 165, 65, 0.45); }
  .fx-ring.is-static .fx-ring-glow { display: none; }
}

/* Reduced motion: effects stay visible but nothing moves */
@media (prefers-reduced-motion: reduce) {
  .fx-grid-glow { animation: none !important; transform: translate3d(30vw, 3rem, 0); }
}