/* Animated hero background (same effect as the Business Internet hero, see splash.css)
   Add class="fx-hero" to a page's first section plus
   <div class="fx-hero__fx" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div> inside it. */
.fx-hero { position: relative; overflow: hidden; }
.fx-hero > .wrap { position: relative; z-index: 1; }
.fx-hero::before { content: ""; position: absolute; top: -60px; bottom: -60px; left: -120px; right: -120px; pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,0.035) 46px 47px);
  animation: bs-lines 6s linear infinite; }
.fx-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(221, 98, 38, 0.16), transparent 70%),
    radial-gradient(500px 260px at 10% 95%, rgba(221, 98, 38, 0.07), transparent 70%);
  animation: bs-glow 14s ease-in-out infinite alternate; }
.fx-hero__fx { position: absolute; left: 50%; top: 50%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; transform: rotate(-65deg); pointer-events: none; }
.fx-hero__fx i { position: absolute; left: 0; width: 260px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(221, 98, 38, 0.9) 70%, #ffd9c4);
  box-shadow: 0 0 10px rgba(221, 98, 38, 0.6);
  animation: bs-pulse 9s linear infinite; }
.fx-hero__fx i:nth-child(1) { top: 38%; animation-delay: 0s; }
.fx-hero__fx i:nth-child(2) { top: 45%; animation-delay: 3.2s; animation-duration: 11s; }
.fx-hero__fx i:nth-child(3) { top: 52%; animation-delay: 6.1s; }
.fx-hero__fx i:nth-child(4) { top: 58%; animation-delay: 1.7s; animation-duration: 12s; }
.fx-hero__fx i:nth-child(5) { top: 64%; animation-delay: 4.6s; animation-duration: 10s; }

/* Light heroes (About, Contact, self-assessments): darker lines, softer pulses */
:root:not([data-theme="dark"]) .fx-hero--light::before { background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(20,22,26,0.05) 46px 47px); }
:root:not([data-theme="dark"]) .fx-hero--light::after { opacity: 0.6; }
:root:not([data-theme="dark"]) .fx-hero--light .fx-hero__fx i { box-shadow: 0 0 8px rgba(221, 98, 38, 0.35); }

@keyframes bs-lines { from { transform: translateX(0); } to { transform: translateX(51.86px); } }
@keyframes bs-glow {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  50%  { transform: translate(-6%, 8%) scale(1.08); opacity: 0.75; }
  100% { transform: translate(-12%, 2%) scale(1); opacity: 1; }
}
@keyframes bs-pulse {
  0%   { transform: translateX(-300px); opacity: 0; }
  10%  { opacity: 0.8; }
  60%  { opacity: 0.8; }
  75%  { transform: translateX(180vmax); opacity: 0; }
  100% { transform: translateX(180vmax); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-hero::before, .fx-hero::after { animation: none; }
  .fx-hero__fx { display: none; }
}
html.a11y-reduce-motion .fx-hero::before, html.a11y-reduce-motion .fx-hero::after { animation: none; }
html.a11y-reduce-motion .fx-hero__fx { display: none; }