/* CyberMatrix-Particles integration for F-SJ Blog.
   Upstream: https://github.com/arsanjani/CyberMatrix-Particles
   License: MIT, see /vendor/cyber-matrix/LICENSE
*/

#cyber-matrix-canvas {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  opacity: 0.56;
  animation: none !important;
  animation-name: none !important;
  animation-duration: 0s !important;
  transition: none !important;
  mix-blend-mode: screen;
  filter: brightness(1.32) saturate(1.14);
}

.fsj-cyber-matrix-ambient #cyber-matrix-canvas {
  animation: fsj-cyber-ambient-breathe 3s ease-in-out infinite !important;
}

.fsj-cyber-matrix-article #cyber-matrix-canvas {
  opacity: 0.50;
  animation: none !important;
  filter: brightness(1.22) saturate(1.08);
}

@keyframes fsj-cyber-ambient-breathe {
  0%,
  100% {
    opacity: 0.38;
    filter: brightness(1.02) saturate(1.02);
  }

  50% {
    opacity: 0.76;
    filter: brightness(1.62) saturate(1.26);
  }
}

#web_bg,
.fsj-cyber-matrix-enabled #web_bg {
  opacity: 0.04;
}

#body-wrap,
.fsj-cyber-matrix-enabled #body-wrap,
[data-theme='dark'] #body-wrap,
[data-theme='light'] #body-wrap {
  background:
    radial-gradient(circle at 24% -8%, rgba(96, 165, 250, 0.16), transparent 34rem),
    radial-gradient(circle at 90% 8%, rgba(94, 234, 212, 0.08), transparent 32rem),
    linear-gradient(180deg, rgba(17, 27, 42, 0.30) 0%, rgba(16, 24, 39, 0.36) 48%, rgba(15, 23, 32, 0.46) 100%);
}

#web_bg.bg-animation,
.fsj-cyber-matrix-enabled #web_bg.bg-animation,
.fsj-cyber-matrix-enabled #page-header,
.fsj-cyber-matrix-enabled #page-header::before {
  animation: none !important;
  animation-name: none !important;
  animation-duration: 0s !important;
  transition: none !important;
}

.fsj-cyber-matrix-enabled #page-header {
  background-color: rgba(15, 23, 32, 0.08) !important;
  background-blend-mode: soft-light;
}

.fsj-cyber-matrix-enabled #page-header::before {
  background:
    linear-gradient(180deg, rgba(7, 12, 20, 0.02) 0%, rgba(7, 12, 20, 0.08) 60%, rgba(7, 12, 20, 0.18) 100%),
    radial-gradient(circle at 50% 24%, rgba(232, 238, 247, 0.10), transparent 34rem);
}

@property --fsj-title-scan-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --fsj-title-scan-hue {
  syntax: "<angle>";
  inherits: true;
  initial-value: 190deg;
}

.fsj-cyber-matrix-ambient {
  --fsj-title-scan-x: 18%;
  --fsj-title-scan-hue: 190deg;
  animation: fsj-title-scan-source 3s linear infinite alternate;
}

.fsj-cyber-matrix-ambient #page-header.full_page #site-title,
.fsj-cyber-matrix-ambient #page-header.full_page #site-subtitle {
  display: block;
  width: var(--fsj-title-scan-track);
  max-width: calc(100vw - 2rem);
  margin-right: auto;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.96);
  background-image: radial-gradient(
    ellipse var(--fsj-title-scan-core) 140% at var(--fsj-title-scan-x) 50%,
    hsl(calc(var(--fsj-title-scan-hue) + 28deg) 96% 94%) 0%,
    hsl(var(--fsj-title-scan-hue) 96% 74%) 22%,
    hsl(calc(var(--fsj-title-scan-hue) - 30deg) 90% 64%) 38%,
    rgba(255, 255, 255, 0.96) 70%
  );
  background-size: 100% 100%;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 16px rgba(232, 238, 247, 0.18);
  -webkit-text-fill-color: transparent;
}

.fsj-cyber-matrix-ambient #page-header.full_page #site-subtitle {
  text-shadow: 0 0 12px rgba(232, 238, 247, 0.14);
}

.fsj-cyber-matrix-ambient #page-header.full_page #site-info {
  position: relative;
  --fsj-title-scan-track: clamp(14rem, 34vw, 28rem);
  --fsj-title-scan-core: clamp(2.9rem, 7.2vw, 5.8rem);
}

.fsj-cyber-matrix-ambient #page-header.full_page #site-info::before,
.fsj-cyber-matrix-ambient #page-header.full_page #site-info::after {
  content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
  border-radius: 999px;
  transform: translateX(-50%);
}

.fsj-cyber-matrix-ambient #page-header.full_page #site-info::before {
  bottom: -1.85rem;
  width: var(--fsj-title-scan-track);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.42), rgba(94, 234, 212, 0.30), transparent);
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.24);
  opacity: 0.82;
}

.fsj-cyber-matrix-ambient #page-header.full_page #site-info::after {
  bottom: calc(-1.85rem - 1px);
  width: var(--fsj-title-scan-track);
  height: 3px;
  background: radial-gradient(
    ellipse var(--fsj-title-scan-core) 100% at var(--fsj-title-scan-x) 50%,
    hsl(calc(var(--fsj-title-scan-hue) + 28deg) 96% 94%) 0%,
    hsl(var(--fsj-title-scan-hue) 96% 74%) 34%,
    hsl(calc(var(--fsj-title-scan-hue) - 30deg) 90% 64% / 0.72) 56%,
    transparent 76%
  );
  filter:
    drop-shadow(0 0 10px rgba(125, 211, 252, 0.66))
    drop-shadow(0 0 20px rgba(94, 234, 212, 0.30));
}

@keyframes fsj-title-scan-source {
  0% {
    --fsj-title-scan-x: 18%;
    --fsj-title-scan-hue: 190deg;
  }

  50% {
    --fsj-title-scan-hue: 222deg;
  }

  100% {
    --fsj-title-scan-x: 82%;
    --fsj-title-scan-hue: 276deg;
  }
}

@media (max-width: 768px) {
  .fsj-cyber-matrix-ambient #page-header.full_page #site-info {
    --fsj-title-scan-track: min(74vw, 19rem);
    --fsj-title-scan-core: 3.6rem;
  }

  .fsj-cyber-matrix-ambient #page-header.full_page #site-info::before {
    bottom: -1.55rem;
  }

  .fsj-cyber-matrix-ambient #page-header.full_page #site-info::after {
    bottom: calc(-1.55rem - 1px);
  }

  #cyber-matrix-canvas {
    opacity: 0.34;
  }

  .fsj-cyber-matrix-article #cyber-matrix-canvas {
    opacity: 0.30;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fsj-cyber-matrix-ambient {
    --fsj-title-scan-x: 50%;
    --fsj-title-scan-hue: 190deg;
    animation: none !important;
  }

  .fsj-cyber-matrix-ambient #page-header.full_page #site-title,
  .fsj-cyber-matrix-ambient #page-header.full_page #site-subtitle {
    color: rgba(255, 255, 255, 0.96);
    animation: none !important;
    background-image: none;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
  }

  .fsj-cyber-matrix-ambient #page-header.full_page #site-info::after {
    animation: none !important;
    opacity: 0.58;
  }

  #cyber-matrix-canvas,
  .fsj-cyber-matrix-ambient #cyber-matrix-canvas,
  .fsj-cyber-matrix-article #cyber-matrix-canvas {
    opacity: 0.14 !important;
    animation: none !important;
    filter: brightness(1.12) saturate(1.04);
  }
}