/* ==========================================================================
   Bold background effects
   All of it sits behind the content, is pointer-transparent, and is
   switched off entirely under prefers-reduced-motion (see motion.css).
   ========================================================================== */

.fx{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- Particle network canvas ------------------------------------------- */

.fx-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
}

/* --- Drifting colour orbs ---------------------------------------------- */

.fx-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}

.fx-orb-1{
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  top: -14vw; right: -10vw;
  background: var(--orb-1);
  animation: orb-a 26s ease-in-out infinite alternate;
}

.fx-orb-2{
  width: 38vw; height: 38vw;
  min-width: 260px; min-height: 260px;
  bottom: -12vw; left: -8vw;
  background: var(--orb-2);
  animation: orb-b 32s ease-in-out infinite alternate;
}

.fx-orb-3{
  width: 28vw; height: 28vw;
  min-width: 200px; min-height: 200px;
  top: 42%; left: 52%;
  background: var(--orb-3);
  animation: orb-c 38s ease-in-out infinite alternate;
}

@keyframes orb-a{
  from{ transform: translate3d(0,0,0) scale(1); }
  to  { transform: translate3d(-6vw, 8vh, 0) scale(1.14); }
}
@keyframes orb-b{
  from{ transform: translate3d(0,0,0) scale(1); }
  to  { transform: translate3d(7vw, -6vh, 0) scale(1.2); }
}
@keyframes orb-c{
  from{ transform: translate3d(0,0,0) scale(1); }
  to  { transform: translate3d(-8vw, -10vh, 0) scale(.86); }
}

/* --- Grid, faded at the edges ------------------------------------------ */

.fx-grid{
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
}

/* --- Film grain --------------------------------------------------------- */

.fx-noise{
  position: absolute;
  inset: -200%;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}

@keyframes grain{
  0%  { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
  100%{ transform: translate(0,0); }
}

/* --- Content sits above the effects ------------------------------------ */

.masthead,
.page,
.footer{ position: relative; z-index: 1; }

/* --- Gradient display type --------------------------------------------- */
/* Solid colour is declared first so a failed background-clip still reads. */

.grad{
  color: var(--text);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .grad{
    background: linear-gradient(102deg, var(--text) 12%, var(--accent) 62%, var(--violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* --- Cursor spotlight on cards ----------------------------------------- */

.spot{ position: relative; isolation: isolate; }

.spot::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--mid) ease;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    var(--accent-soft),
    transparent 72%
  );
}
.spot:hover::before{ opacity: 1; }

/* --- Glow divider ------------------------------------------------------- */

.glow-line{
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}