@import url("../shared/snippets/abyss-octopus.css");

.abyss-den {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 60%, rgba(255, 30, 50, 0.08), transparent),
    linear-gradient(180deg, #020204 0%, #080810 100%);
}

.abyss-den__clutter {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(255,255,255,0.02) 80px, rgba(255,255,255,0.02) 81px),
    radial-gradient(circle at 15% 80%, rgba(0,255,80,0.05) 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(255,0,60,0.06) 0%, transparent 35%);
}

.abyss-den__monitor {
  position: absolute;
  width: 12%;
  height: 10%;
  background: rgba(0, 20, 0, 0.4);
  border: 1px solid rgba(0, 255, 80, 0.2);
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(0, 255, 80, 0.1);
}

.abyss-den__monitor--1 { left: 8%; top: 20%; }
.abyss-den__monitor--2 { left: 5%; top: 55%; width: 10%; }
.abyss-den__monitor--3 { right: 38%; top: 18%; width: 8%; }

.abyss-octopus-svg {
  width: 100%;
  height: 100%;
}

.abyss-octopus-svg .tentacle {
  fill: none;
  stroke: var(--abyss-glow, #ff2244);
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0.85;
}

.abyss-octopus-svg .body {
  fill: var(--abyss-glow, #ff2244);
  opacity: 0.9;
}

.abyss-octopus-svg .eye {
  fill: #0a0008;
}

body[data-variant="b"] {
  --abyss-glow: #4488ff;
  --abyss-term: #aa66ff;
  --abyss-term-border: rgba(170, 102, 255, 0.35);
}

body[data-variant="b"] .abyss-octopus-svg .tentacle,
body[data-variant="b"] .abyss-octopus-svg .body {
  stroke: #4488ff;
  fill: #4488ff;
}

.abyss-terminal-inner {
  display: flex;
  height: 200%;
  gap: 4px;
}

.abyss-terminal-col {
  flex: 1;
  font-size: 0.5rem;
  line-height: 1.15;
  color: var(--abyss-term, #00ff55);
  white-space: pre;
  animation: abyss-scroll 6s linear infinite;
}

.abyss-terminal-col:nth-child(odd) { animation-duration: 7s; }
.abyss-terminal-col:nth-child(3) { animation-duration: 5s; }

@media (prefers-reduced-motion: reduce) {
  .abyss-terminal-col { animation: none; }
}