/* ==========================================================================
   Background Styles (from background.scss + core.component.scss)
   ========================================================================== */

#background {
  background: radial-gradient(circle, #1b1b1b 0%, #131313 15%, #0a0a0a 50%, black 100%);
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
}

#background::before {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

#background:after {
  display: block;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .03;
  animation: 15s blink 20s ease-in infinite;
  pointer-events: none;
}

@media (min-width: 768px) {
  #background {
    height: 100vh;
    overflow: hidden;
  }
}

#background .page-wrapper {
  z-index: 10;
}

#background .black-disk {
  position: absolute;
  z-index: 1;
  background: radial-gradient(circle, black 0%, rgba(53, 50, 50, 0.5) 25%, rgba(53, 50, 50, 0) 50%);
  width: 100px;
  height: 100px;
  margin: auto;
  top: calc(50vh - 50px);
  left: calc(50vw - 50px);
  border-radius: 100px;
  -webkit-animation: GrowingDisk 5s linear infinite;
  -moz-animation: GrowingDisk 5s linear infinite;
  animation: GrowingDisk 5s linear infinite;
}

#background .white-circle {
  position: absolute;
  z-index: 1;
  top: calc(50vh - 250px);
  left: calc(50vw - 250px);
  width: 500px;
  height: 500px;
  box-shadow: 4px 4px 1px 4px #38383857;
  border-radius: 500px;
  animation: GrowingCircle 9s linear infinite alternate;
}

/* ==========================================================================
   Part-Specific Backgrounds (from core.component.scss)
   ========================================================================== */

#background.occult:after {
  background: url(/img/bg/occult.png) no-repeat fixed;
  background-size: 100% 100%;
}

#background.skalenda {
  background: radial-gradient(circle, #0a0018 0%, #060016 15%, rgb(4 0 24 / 96%) 40%, #000012 100%);
}
#background.skalenda:after {
  background: url(/img/bg/skalenda.jpg) no-repeat fixed;
  background-size: 100% 100%;
}

#background.vodenda {
  background: radial-gradient(circle, #222016 0%, #16140b 15%, rgb(24 23 7 / 96%) 40%, #100702 100%);
}
#background.vodenda:after {
  background: url(/img/bg/vodenda.png) no-repeat fixed;
  background-size: 100% 100%;
}

#background.kienda {
  background: radial-gradient(circle, #20120c 0%, #2a1a0a 15%, rgb(10 13 18 / 96%) 40%, #001006 100%);
}
#background.kienda:after {
  background: url(/img/bg/kienda.jpg) no-repeat fixed;
  background-size: 100% 100%;
}

#background.raos {
  background: radial-gradient(circle, #442222 0%, #220606 15%, rgb(14 0 0 / 96%) 40%, #1a0000 100%);
}
#background.raos:after {
  background: url(/img/bg/raos.jpg) no-repeat fixed;
  background-size: 100% 100%;
}

#background.duukram {
  background: radial-gradient(circle, rgba(36, 22, 0, 0.88) 0%, rgba(66, 34, 0, 0.89) 15%, rgb(34 20 0 / 89%) 40%, #160900 100%);
}
#background.duukram:after {
  background: url(/img/bg/duukram.jpg) no-repeat fixed;
  background-size: 100% 100%;
}

#background.faehelbek {
  background: radial-gradient(circle, rgb(23 0 24 / 88%) 0%, rgb(33 15 42 / 89%) 15%, rgb(32 19 36 / 89%) 40%, #201026 100%);
}
#background.faehelbek:after {
  background: url(/img/bg/faehelbek.jpg) no-repeat fixed;
  background-size: 100% 100%;
}

#background.botjo {
  background: radial-gradient(circle, rgb(0 22 2 / 88%) 0%, rgb(10 34 18 / 89%) 15%, rgb(0 34 25 / 89%) 40%, #001613 100%);
}
#background.botjo:after {
  background: url(/img/bg/botjo.jpg) no-repeat fixed;
  background-size: 100% 100%;
}

#background.zatjo {
  background: radial-gradient(circle, rgb(60 60 60 / 88%) 0%, rgb(44 42 40 / 89%) 15%, rgb(32 32 32 / 89%) 40%, #0c0c0c 100%);
}
#background.zatjo:after {
  background: url(/img/bg/zatjo.png) no-repeat fixed;
  background-size: 100% 100%;
}

#background.sato {
  background: radial-gradient(circle, rgb(64 50 19 / 88%) 0%, rgb(30 29 5 / 89%) 15%, rgb(30 25 4 / 89%) 40%, #1e1402 100%);
}
#background.sato:after {
  background: url(/img/bg/sato.jpg) no-repeat fixed;
  background-size: 100% 100%;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Hide decorative animations on mobile to prevent overflow issues */
@media (max-width: 767px) {
  #background .black-disk,
  #background .white-circle {
    display: none;
  }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes blink {
  33% { opacity: 0.03; }
  35% { opacity: 0.2; }
  37% { opacity: 0.03; }
}

@keyframes GrowingDisk {
  0%   { width: 100px; height: 100px; top: calc(50vh - 50px); left: calc(50vw - 50px); }
  50%  { width: 50px; height: 50px; top: calc(50vh - 25px); left: calc(50vw - 25px); }
  100% { width: 100px; height: 100px; top: calc(50vh - 50px); left: calc(50vw - 50px); }
}

@keyframes GrowingCircle {
  0%   { transform: rotate(0deg); opacity: 1; }
  50%  { transform: rotate(360deg); opacity: 0.3; }
  100% { transform: rotate(0deg); opacity: 1; }
}

@keyframes flicker {
  0%   { opacity: .1; }
  100% { opacity: .9; }
}