/* =====================================================================
   /lurk // the screen dims, two red eyes open, then drown in shadow + smoke.
   One 9.4s timeline (--lurk-ms). Everything animates opacity / transform
   only; nothing blocks input. Reduced motion gets a calm fade, lite mode
   drops the heaviest layers.
   ===================================================================== */
.lurk-layer {
  --lurk-ms: 9400ms;
  position: fixed;
  inset: 0;
  z-index: 2147482600;
  pointer-events: none;
  overflow: hidden;
  animation: lurk-layer var(--lurk-ms) linear both;
}
.lurk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* the dark: dimmed world with a heavy vignette */
.lurk-dark {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(6, 0, 2, .84) 0%, rgba(1, 0, 1, .96) 52%, #000 100%);
  -webkit-backdrop-filter: brightness(.28) saturate(.4);
          backdrop-filter: brightness(.28) saturate(.4);
}
@keyframes lurk-layer {
  0% { opacity: 0; }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; }
}

/* the eyes: two thin crescent slits, no boxes, glow comes from the svg itself */
.lurk-eyes {
  position: absolute;
  left: 50%;
  top: 46%;
  display: flex;
  gap: clamp(56px, 14vmin, 190px);
  transform: translate(-50%, -50%);
  animation: lurk-eyes var(--lurk-ms) ease-in-out both;
}
.lurk-eye { position: relative; width: clamp(80px, 16vmin, 210px); }
.lurk-eye-r { transform: scaleX(-1); }
.lurk-eye svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 62% 68%;
  animation: lurk-open var(--lurk-ms) cubic-bezier(.3, .1, .2, 1) both;
}
@keyframes lurk-eyes {
  0%, 12% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
  20%, 80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -53%) scale(1.06); }
}
/* the slits flare open, hold, one heavy half-blink, then sink shut */
@keyframes lurk-open {
  0%, 14% { opacity: 0; transform: scale(.55, .08); }
  27% { opacity: 1; transform: scale(1, 1); }
  44% { opacity: 1; transform: scale(1, 1); }
  46.5% { opacity: .4; transform: scale(1, .3); }
  50% { opacity: 1; transform: scale(1, 1); }
  68% { opacity: .9; transform: scale(1, 1); }
  88% { opacity: 0; transform: scale(.8, .12); }
  100% { opacity: 0; transform: scale(.8, .12); }
}
.lurk-eye .lurk-bloom, .lurk-eye .lurk-haze { animation: lurk-breathe 2.1s ease-in-out infinite; }
.lurk-eye .lurk-haze { animation-delay: -.7s; }
@keyframes lurk-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* smoke: soft, slow, rises over the eyes in the last third */
.lurk-smoke { position: absolute; inset: 0; }
.lurk-smoke i {
  position: absolute;
  width: 78vmax;
  height: 52vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 12, 18, .6), rgba(30, 6, 10, .38) 55%, transparent 100%);
  opacity: 0;
  animation: lurk-smoke var(--lurk-ms) ease-in-out both;
  will-change: transform, opacity;
}
.lurk-smoke .s1 { left: -30vmax; top: 18%; --dx: 38vmax; --dy: -6vmax; animation-delay: .4s; }
.lurk-smoke .s2 { right: -34vmax; top: 6%; --dx: -42vmax; --dy: 4vmax; animation-delay: 1.4s; }
.lurk-smoke .s3 { left: 6%; top: 38%; --dx: 10vmax; --dy: -16vmax; animation-delay: 2.6s; }
.lurk-smoke .s4 { right: -10%; top: 46%; --dx: -22vmax; --dy: -10vmax; animation-delay: 3.4s; }
.lurk-smoke .s5 { left: 28%; top: 20%; --dx: -6vmax; --dy: 6vmax; animation-delay: 4.2s; }
@keyframes lurk-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.8) rotate(0deg); }
  38% { opacity: .55; }
  74% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.25) rotate(14deg); }
}
.lurk-fog {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 46%;
  background: linear-gradient(0deg, rgba(48, 8, 12, .75), transparent);
  opacity: 0;
  animation: lurk-fog var(--lurk-ms) ease-in-out both;
}
@keyframes lurk-fog { 0%, 20% { opacity: 0; } 60%, 84% { opacity: .85; } 100% { opacity: 0; } }

html.asoc-lite .lurk-dark { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.asoc-lite .lurk-eye .lurk-bloom { display: none; }
html.asoc-lite .lurk-smoke .s4, html.asoc-lite .lurk-smoke .s5 { display: none; }
html.asoc-tab-hidden .lurk-layer * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .lurk-eye svg, .lurk-eye .lurk-bloom, .lurk-eye .lurk-haze, .lurk-smoke i, .lurk-fog { animation: none !important; }
  .lurk-smoke, .lurk-fog { display: none; }
  .lurk-eyes { animation: lurk-eyes-calm var(--lurk-ms) linear both; }
  @keyframes lurk-eyes-calm { 0%, 15% { opacity: 0; } 30%, 70% { opacity: 1; } 90%, 100% { opacity: 0; } }
}
@media (max-width: 560px) {
  .lurk-eyes { top: 42%; gap: 9vmin; }
  .lurk-eye { width: 22vw; }
}