/* ============================================
   FLOATING BACKGROUND EYES
   Drifting evil eyes across every page
   ============================================ */

.floating-eyes-layer {
  position: absolute;
  top: 0; left: 0; right: 0;
  /* height set dynamically by JS to match full page */
  pointer-events: none;
  z-index: 10; /* above section bg colors, below nav (9998) */
}

/* body needs to be the positioning context */
body { position: relative; }

.float-eye {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.float-eye img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

/* ---- SIZE VARIANTS ---- */
.float-eye.size-sm  { width: 38px;  height: 38px;  }
.float-eye.size-md  { width: 62px;  height: 62px;  }
.float-eye.size-lg  { width: 90px;  height: 90px;  }
.float-eye.size-xl  { width: 120px; height: 120px; }

/* Ornate eye variants are square */
.float-eye.ornate.size-sm  { width: 48px;  height: 48px;  }
.float-eye.ornate.size-md  { width: 72px;  height: 72px;  }
.float-eye.ornate.size-lg  { width: 100px; height: 100px; }
.float-eye.ornate.size-xl  { width: 130px; height: 130px; }

/* ---- DRIFT KEYFRAMES ---- */
/* Each eye drifts in a unique organic path using translate + slight rotate */

@keyframes drift-1 {
  0%   { transform: translate(0px, 0px)      rotate(0deg);   opacity: 0;    }
  8%   { opacity: 0.18; }
  25%  { transform: translate(55px, -80px)   rotate(8deg);   opacity: 0.22; }
  50%  { transform: translate(120px, -30px)  rotate(-5deg);  opacity: 0.18; }
  75%  { transform: translate(60px, -120px)  rotate(12deg);  opacity: 0.20; }
  92%  { opacity: 0.15; }
  100% { transform: translate(0px, -160px)   rotate(0deg);   opacity: 0;    }
}

@keyframes drift-2 {
  0%   { transform: translate(0px, 0px)      rotate(0deg);   opacity: 0;    }
  8%   { opacity: 0.15; }
  30%  { transform: translate(-70px, -60px)  rotate(-10deg); opacity: 0.20; }
  55%  { transform: translate(-140px, -20px) rotate(6deg);   opacity: 0.16; }
  80%  { transform: translate(-80px, -110px) rotate(-8deg);  opacity: 0.18; }
  92%  { opacity: 0.12; }
  100% { transform: translate(0px, -150px)   rotate(0deg);   opacity: 0;    }
}

@keyframes drift-3 {
  0%   { transform: translate(0px, 0px)      rotate(0deg);   opacity: 0;    }
  10%  { opacity: 0.20; }
  35%  { transform: translate(90px, -50px)   rotate(-6deg);  opacity: 0.22; }
  60%  { transform: translate(40px, -130px)  rotate(10deg);  opacity: 0.17; }
  85%  { transform: translate(110px, -90px)  rotate(-4deg);  opacity: 0.20; }
  92%  { opacity: 0.14; }
  100% { transform: translate(30px, -170px)  rotate(0deg);   opacity: 0;    }
}

@keyframes drift-4 {
  0%   { transform: translate(0px, 0px)      rotate(0deg);   opacity: 0;    }
  8%   { opacity: 0.16; }
  28%  { transform: translate(-50px, -90px)  rotate(14deg);  opacity: 0.18; }
  52%  { transform: translate(30px, -60px)   rotate(-7deg);  opacity: 0.22; }
  76%  { transform: translate(-90px, -130px) rotate(5deg);   opacity: 0.16; }
  92%  { opacity: 0.10; }
  100% { transform: translate(-20px, -180px) rotate(0deg);   opacity: 0;    }
}

@keyframes drift-5 {
  0%   { transform: translate(0px, 0px)      rotate(0deg);   opacity: 0;    }
  10%  { opacity: 0.14; }
  33%  { transform: translate(80px, -40px)   rotate(-12deg); opacity: 0.18; }
  58%  { transform: translate(150px, -100px) rotate(8deg);   opacity: 0.14; }
  82%  { transform: translate(70px, -80px)   rotate(-6deg);  opacity: 0.16; }
  92%  { opacity: 0.10; }
  100% { transform: translate(20px, -160px)  rotate(0deg);   opacity: 0;    }
}

@keyframes drift-6 {
  0%   { transform: translate(0px, 0px)      rotate(0deg);   opacity: 0;    }
  8%   { opacity: 0.12; }
  30%  { transform: translate(-100px,-70px)  rotate(10deg);  opacity: 0.16; }
  60%  { transform: translate(-50px, -140px) rotate(-8deg);  opacity: 0.14; }
  85%  { transform: translate(-120px,-100px) rotate(6deg);   opacity: 0.12; }
  92%  { opacity: 0.08; }
  100% { transform: translate(-30px,-170px)  rotate(0deg);   opacity: 0;    }
}

@keyframes drift-7 {
  0%   { transform: translate(0px, 0px)      rotate(0deg);   opacity: 0;    }
  10%  { opacity: 0.18; }
  40%  { transform: translate(60px, -110px)  rotate(-14deg); opacity: 0.20; }
  65%  { transform: translate(130px, -60px)  rotate(7deg);   opacity: 0.16; }
  88%  { transform: translate(50px, -150px)  rotate(-3deg);  opacity: 0.14; }
  95%  { opacity: 0.08; }
  100% { transform: translate(10px, -190px)  rotate(0deg);   opacity: 0;    }
}

@keyframes drift-8 {
  0%   { transform: translate(0px, 0px)      rotate(0deg);   opacity: 0;    }
  8%   { opacity: 0.14; }
  35%  { transform: translate(-80px, -50px)  rotate(9deg);   opacity: 0.18; }
  62%  { transform: translate(-160px,-110px) rotate(-11deg); opacity: 0.14; }
  87%  { transform: translate(-90px,-80px)   rotate(4deg);   opacity: 0.16; }
  95%  { opacity: 0.08; }
  100% { transform: translate(-10px,-160px)  rotate(0deg);   opacity: 0;    }
}

/* Apply drift animations + durations */
.float-eye:nth-child(1)  { animation-name: drift-1; animation-duration: 22s; animation-delay:  0s;   }
.float-eye:nth-child(2)  { animation-name: drift-2; animation-duration: 28s; animation-delay: -8s;  }
.float-eye:nth-child(3)  { animation-name: drift-3; animation-duration: 19s; animation-delay: -3s;  }
.float-eye:nth-child(4)  { animation-name: drift-4; animation-duration: 33s; animation-delay: -15s; }
.float-eye:nth-child(5)  { animation-name: drift-5; animation-duration: 25s; animation-delay: -5s;  }
.float-eye:nth-child(6)  { animation-name: drift-6; animation-duration: 30s; animation-delay: -20s; }
.float-eye:nth-child(7)  { animation-name: drift-7; animation-duration: 21s; animation-delay: -11s; }
.float-eye:nth-child(8)  { animation-name: drift-8; animation-duration: 27s; animation-delay: -7s;  }
.float-eye:nth-child(9)  { animation-name: drift-1; animation-duration: 35s; animation-delay: -18s; }
.float-eye:nth-child(10) { animation-name: drift-3; animation-duration: 24s; animation-delay: -2s;  }
.float-eye:nth-child(11) { animation-name: drift-5; animation-duration: 29s; animation-delay: -13s; }
.float-eye:nth-child(12) { animation-name: drift-7; animation-duration: 20s; animation-delay: -9s;  }

/* Subtle spin for the blue evil eye (it's circular) */
.float-eye.blue-eye {
  animation-timing-function: ease-in-out;
}

@keyframes spin-slow {
  from { transform: rotate(0deg);  }
  to   { transform: rotate(360deg); }
}

/* Ensure floaters stay behind all content — exclude .nav so it keeps
   its own position:fixed and high z-index for the mobile nav drawer */
body > *:not(.floating-eyes-layer):not(.nav) {
  position: relative;
  z-index: 1;
}

/* Slightly more visible in saints light theme */
[data-theme="saints"] .float-eye {
  filter: opacity(0.7);
}