/* ==========================================================================
   BanterGaming — Shared Site Background
   Link this on every page: <link rel="stylesheet" href="/css/background.css">
   Put it AFTER your page's own <style> block (or after any other stylesheets)
   so it takes over the background layer cleanly.

   Just make sure your page's main content wrapper has:
     position: relative;
     z-index: 1;
   so it sits above the background layers below (which live at z-index: 0).
   ========================================================================== */

/* ==========================================================================
   BanterGaming — Shared Site Background
   Link this on every page: <link rel="stylesheet" href="/css/background.css">
   Put it AFTER your page's own <style> block (or after any other stylesheets)
   so it takes over the background layer cleanly.

   Just make sure your page's main content wrapper has:
     position: relative;
     z-index: 1;
   so it sits above the background layers below (which live at z-index: 0).
   ========================================================================== */

:root{
  --bg: #0d0605;
  --blood-deep: #4a0a0a;
  --blood: #7a1012;
  --blood-bright: #b3181a;
}

html, body{
  background-color: var(--bg);
}

body{
  position: relative;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 550px at 20% -10%, rgba(122, 16, 18, 0.38), transparent 60%),
    radial-gradient(ellipse 750px 550px at 100% 100%, rgba(74, 10, 10, 0.32), transparent 55%);
  min-height: 100vh;
}

/* Fine film grain, no motion, no repeating dot pattern */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Dripping edge along the top of the page + dark vignette */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='46' viewBox='0 0 220 46'%3E%3Cpath d='M0,0 H220 V14 C210,14 206,34 198,34 C192,34 189,20 180,20 C170,20 168,44 158,44 C150,44 148,24 138,24 C128,24 126,40 116,40 C108,40 106,18 96,18 C86,18 84,42 74,42 C66,42 64,16 54,16 C44,16 42,38 32,38 C24,38 22,22 12,22 C6,22 3,14 0,14 Z' fill='%237a1012'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: top left;
  background-size: 220px 46px;
  box-shadow: inset 0 0 240px rgba(0, 0, 0, 0.65);
}

/* Container for JS-injected animated layers (see background-effects.js) */
.bg-effects{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.blood-drop{
  position: absolute;
  top: -20px;
  width: 6px;
  height: 14px;
  background: var(--rust-bright);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  opacity: 0;
  animation-name: drop-fall;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

@keyframes drop-fall{
  0%{ transform: translateY(0) rotate(45deg); opacity: 0; }
  10%{ opacity: 0.55; }
  85%{ opacity: 0.3; }
  100%{ transform: translateY(70vh) rotate(45deg); opacity: 0; }
}

.zombie-figure{
  position: absolute;
  bottom: 6%;
  left: -80px;
  width: 60px;
  height: 100px;
  color: #2a0f10;
  opacity: 0.16;
  animation: zombie-walk 42s linear infinite, zombie-bob 1.6s ease-in-out infinite;
}

.zombie-figure--static{
  animation: none;
  left: 20%;
}

@keyframes zombie-walk{
  0%{ left: -80px; }
  100%{ left: 110%; }
}

@keyframes zombie-bob{
  0%, 100%{ transform: translateY(0) rotate(6deg); }
  50%{ transform: translateY(-4px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce){
  .zombie-figure{ animation: none; }
  .blood-drop{ display: none; }
}