/* FlaroCity ambient motion layer
   Lightweight, fixed, non-interactive and safe behind all page content. */
.fc-ambient {
  --fc-parallax-x: 0px;
  --fc-parallax-y: 0px;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: 1;
}

.fc-ambient__canvas,
.fc-ambient__glow,
.fc-ambient__sweep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fc-ambient__canvas {
  display: block;
  opacity: .78;
  mix-blend-mode: screen;
  filter: saturate(1.18);
}

.fc-ambient__glow {
  inset: -12%;
  width: 124%;
  height: 124%;
  opacity: .26;
  filter: blur(42px) saturate(1.25);
  mix-blend-mode: screen;
  transform: translate3d(var(--fc-parallax-x), var(--fc-parallax-y), 0) scale(1.04);
  will-change: transform, opacity;
}

.fc-ambient__glow--violet {
  background:
    radial-gradient(circle at 13% 19%, rgba(162, 76, 255, .34), transparent 19%),
    radial-gradient(circle at 7% 72%, rgba(84, 62, 255, .2), transparent 20%);
  animation: fcAmbientBreathe 16s ease-in-out infinite alternate;
}

.fc-ambient__glow--cyan {
  opacity: .23;
  background:
    radial-gradient(circle at 91% 73%, rgba(37, 194, 255, .3), transparent 20%),
    radial-gradient(circle at 68% 7%, rgba(35, 105, 255, .14), transparent 18%);
  animation: fcAmbientBreathe 20s ease-in-out -7s infinite alternate-reverse;
}

.fc-ambient__glow--gold {
  opacity: .2;
  background:
    radial-gradient(circle at 88% 13%, rgba(255, 170, 49, .31), transparent 17%),
    radial-gradient(circle at 76% 42%, rgba(255, 85, 183, .08), transparent 19%);
  animation: fcAmbientGold 24s ease-in-out -11s infinite alternate;
}

.fc-ambient__sweep {
  inset: -35%;
  width: 170%;
  height: 170%;
  opacity: .16;
  mix-blend-mode: screen;
  background:
    linear-gradient(
      112deg,
      transparent 39%,
      rgba(93, 73, 255, .02) 45%,
      rgba(63, 218, 255, .16) 49.6%,
      rgba(255, 88, 190, .08) 51.4%,
      transparent 57%
    );
  transform: translate3d(-24%, -10%, 0) rotate(-2deg);
  animation: fcAmbientSweep 23s cubic-bezier(.45, 0, .3, 1) infinite;
  will-change: transform, opacity;
}

body > .site-header,
body > main,
body > .site-footer {
  position: relative;
}

@keyframes fcAmbientBreathe {
  0% {
    opacity: .17;
    transform: translate3d(calc(var(--fc-parallax-x) - 10px), calc(var(--fc-parallax-y) + 5px), 0) scale(1.02);
  }
  52% { opacity: .31; }
  100% {
    opacity: .23;
    transform: translate3d(calc(var(--fc-parallax-x) + 14px), calc(var(--fc-parallax-y) - 10px), 0) scale(1.08);
  }
}

@keyframes fcAmbientGold {
  0% {
    opacity: .12;
    transform: translate3d(calc(var(--fc-parallax-x) + 6px), calc(var(--fc-parallax-y) - 8px), 0) scale(1.02);
  }
  100% {
    opacity: .28;
    transform: translate3d(calc(var(--fc-parallax-x) - 12px), calc(var(--fc-parallax-y) + 11px), 0) scale(1.1);
  }
}

@keyframes fcAmbientSweep {
  0%, 12% {
    opacity: 0;
    transform: translate3d(-30%, -12%, 0) rotate(-2deg);
  }
  22% { opacity: .14; }
  55% { opacity: .19; }
  88%, 100% {
    opacity: 0;
    transform: translate3d(27%, 11%, 0) rotate(-2deg);
  }
}

@media (max-width: 980px) {
  .fc-ambient__canvas { opacity: .64; }
  .fc-ambient__glow { filter: blur(34px); }
  .fc-ambient__sweep { opacity: .11; }
}

@media (max-width: 640px) {
  .fc-ambient__canvas { opacity: .52; }
  .fc-ambient__glow--gold { opacity: .13; }
  .fc-ambient__sweep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-ambient__canvas { display: none; }
  .fc-ambient__glow,
  .fc-ambient__sweep {
    animation: none !important;
    transform: none !important;
  }
  .fc-ambient__glow { opacity: .13; }
  .fc-ambient__sweep { display: none; }
}