/* ===== BLACK HOLE IDENTITY — free in space, no box ===== */

.about-visual.bh,
.about-visual {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  margin: 0 auto;
  /* NO border, NO card fill, NO rounded panel */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  opacity: 1;
  transform-style: preserve-3d;
}

/* soft gravity well glow only */
.bh-field {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, rgba(0, 0, 0, 0.95) 0%, rgba(10, 4, 24, 0.7) 28%, rgba(124, 58, 237, 0.25) 48%, transparent 68%);
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
  animation: bhPulse 6s ease-in-out infinite;
}
@keyframes bhPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.04); opacity: 1; }
}

/* gravitational lensing halo */
.bh-lens {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(167, 139, 250, 0.15) 40deg,
    transparent 80deg,
    rgba(251, 113, 133, 0.12) 140deg,
    transparent 180deg,
    rgba(233, 213, 255, 0.1) 240deg,
    transparent 300deg,
    rgba(124, 58, 237, 0.15) 340deg,
    transparent 360deg
  );
  animation: sealSpin 40s linear infinite;
  z-index: 1;
  mask-image: radial-gradient(circle, transparent 38%, #000 42%, #000 58%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, transparent 38%, #000 42%, #000 58%, transparent 62%);
  pointer-events: none;
}

/* accretion disks — tilted in space */
.bh-disk {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 88%;
  height: 28%;
  margin-left: -44%;
  margin-top: -14%;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
  z-index: 2;
  transform: rotateX(72deg);
  transform-style: preserve-3d;
}
.bh-disk-a {
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    transparent 42%,
    rgba(167, 139, 250, 0.15) 50%,
    rgba(251, 113, 133, 0.25) 58%,
    rgba(233, 213, 255, 0.35) 62%,
    rgba(124, 58, 237, 0.2) 70%,
    transparent 78%
  );
  box-shadow:
    0 0 40px rgba(124, 58, 237, 0.35),
    inset 0 0 30px rgba(167, 139, 250, 0.2);
  animation: bhDisk 12s linear infinite;
  filter: blur(0.5px);
}
.bh-disk-b {
  width: 72%;
  height: 22%;
  margin-left: -36%;
  margin-top: -11%;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 48%,
    rgba(233, 213, 255, 0.2) 55%,
    rgba(167, 139, 250, 0.35) 60%,
    transparent 70%
  );
  animation: bhDiskRev 8s linear infinite;
  opacity: 0.85;
}
.bh-disk-c {
  width: 98%;
  height: 32%;
  margin-left: -49%;
  margin-top: -16%;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 50%,
    rgba(124, 58, 237, 0.08) 60%,
    transparent 75%
  );
  filter: blur(4px);
  animation: bhDisk 18s linear infinite reverse;
}
@keyframes bhDisk {
  to { transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes bhDiskRev {
  to { transform: rotateX(72deg) rotateZ(-360deg); }
}

/* photon sphere */
.bh-photon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 44%;
  margin: -22% 0 0 -22%;
  border-radius: 50%;
  border: 1.5px solid rgba(233, 213, 255, 0.45);
  box-shadow:
    0 0 20px rgba(233, 213, 255, 0.4),
    0 0 60px rgba(124, 58, 237, 0.5),
    inset 0 0 30px rgba(167, 139, 250, 0.25);
  z-index: 3;
  animation: bhPhoton 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bhPhoton {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

/* polar jets */
.bh-jets {
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 3px;
  margin-left: -1.5px;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(167, 139, 250, 0.15) 15%,
    transparent 35%,
    transparent 65%,
    rgba(251, 113, 133, 0.12) 85%,
    transparent 100%
  );
  filter: blur(1px);
  pointer-events: none;
  animation: icBeam 4s ease-in-out infinite;
}
.bh-jets::before,
.bh-jets::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 40px;
  height: 28%;
  margin-left: -20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(167, 139, 250, 0.35), transparent 70%);
  filter: blur(6px);
}
.bh-jets::before { top: 0; }
.bh-jets::after {
  bottom: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(251, 113, 133, 0.25), transparent 70%);
}

/* SVG ellipses */
.bh-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.bh-ell-1 { animation: bhEll 14s linear infinite; transform-origin: 200px 210px; }
.bh-ell-2 { animation: bhEllRev 9s linear infinite; transform-origin: 200px 210px; }
.bh-ell-3 { animation: bhEll 20s linear infinite reverse; transform-origin: 200px 208px; }
@keyframes bhEll {
  to { transform: rotate(360deg); }
}
@keyframes bhEllRev {
  to { transform: rotate(-360deg); }
}

/* matter spiral inward */
.bh-spiral {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.bh-spiral i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px;
  border-radius: 50%;
  background: #e9d5ff;
  box-shadow: 0 0 8px #a78bfa, 0 0 16px rgba(124, 58, 237, 0.6);
  animation: bhInfall linear infinite;
  opacity: 0;
}
@keyframes bhInfall {
  0% {
    transform: rotate(0deg) translateY(-180px) scale(1);
    opacity: 0;
  }
  15% { opacity: 1; }
  85% { opacity: 0.8; }
  100% {
    transform: rotate(280deg) translateY(-40px) scale(0.2);
    opacity: 0;
  }
}

/* distant stars */
.bh-stars {
  position: absolute;
  inset: -5%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bh-stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  animation: bhTwinkle ease-in-out infinite;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}
@keyframes bhTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 0.9; transform: scale(1.2); }
}

/* EVENT HORIZON */
.bh-horizon {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 36%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 5;
}
.bh-shadow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, #000 40%, transparent 70%);
  filter: blur(8px);
  z-index: 0;
}
.bh-rim {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    conic-gradient(from 0deg, #a78bfa, #e9d5ff, #fb7185, #7c3aed, #a78bfa) border-box;
  animation: sealSpin 10s linear infinite;
  z-index: 1;
  opacity: 0.7;
  mask: radial-gradient(circle, transparent 62%, #000 63%, #000 70%, transparent 71%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 70%, transparent 71%);
  pointer-events: none;
}

.bh-horizon .ic-core {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  left: auto;
  top: auto;
  transform: none;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  border: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.9),
    0 0 40px rgba(124, 58, 237, 0.6),
    0 0 80px rgba(0, 0, 0, 0.9),
    inset 0 0 40px rgba(0, 0, 0, 0.6);
  background: #000;
}
.bh-horizon .ic-core img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  filter: contrast(1.1) brightness(0.95);
}
.bh-horizon .ic-scan {
  position: absolute;
  inset: -30%;
  z-index: 2;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(167, 139, 250, 0.35) 50%,
    transparent 58%
  );
  animation: sealScan 3.5s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
.bh-horizon .ic-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.15), transparent 45%);
  z-index: 3;
  pointer-events: none;
}
.bh-horizon .ic-core::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  box-shadow: 0 0 30px 8px rgba(124, 58, 237, 0.35);
  animation: sealPulse 3s ease-out infinite;
  pointer-events: none;
  border: 0;
}

/* free floating sats — no cards */
.ic-sat {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: #e9d5ff;
  background: rgba(5, 3, 12, 0.55);
  border: 1px solid rgba(167, 139, 250, 0.4);
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.35);
  white-space: nowrap;
  backdrop-filter: blur(10px);
  will-change: transform;
  transform: translate(-50%, -50%);
}
.ic-sat-1 { color: var(--ok); border-color: rgba(52, 211, 153, 0.5); animation: icSat1 14s linear infinite; }
.ic-sat-2 { animation: icSat2 17s linear infinite; }
.ic-sat-3 { color: #fda4af; border-color: rgba(251, 113, 133, 0.5); animation: icSat3 20s linear infinite; }
.ic-sat-4 { animation: icSat4 16s linear infinite; }
.ic-sat-5 { color: #fbbf24; border-color: rgba(251, 191, 36, 0.45); animation: icSat5 12s linear infinite; font-size: 7px; }
.ic-sat-6 { color: var(--ok); border-color: rgba(52, 211, 153, 0.4); animation: icSat6 22s linear infinite; }

@keyframes icSat1 {
  from { transform: translate(-50%, -50%) rotate(0deg) translateY(-165px) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg) translateY(-165px) rotate(-360deg); }
}
@keyframes icSat2 {
  from { transform: translate(-50%, -50%) rotate(60deg) translateY(-185px) rotate(-60deg); }
  to { transform: translate(-50%, -50%) rotate(420deg) translateY(-185px) rotate(-420deg); }
}
@keyframes icSat3 {
  from { transform: translate(-50%, -50%) rotate(120deg) translateY(-150px) rotate(-120deg); }
  to { transform: translate(-50%, -50%) rotate(480deg) translateY(-150px) rotate(-480deg); }
}
@keyframes icSat4 {
  from { transform: translate(-50%, -50%) rotate(180deg) translateY(-175px) rotate(-180deg); }
  to { transform: translate(-50%, -50%) rotate(540deg) translateY(-175px) rotate(-540deg); }
}
@keyframes icSat5 {
  from { transform: translate(-50%, -50%) rotate(240deg) translateY(-138px) rotate(-240deg); }
  to { transform: translate(-50%, -50%) rotate(600deg) translateY(-138px) rotate(-600deg); }
}
@keyframes icSat6 {
  from { transform: translate(-50%, -50%) rotate(300deg) translateY(-192px) rotate(-300deg); }
  to { transform: translate(-50%, -50%) rotate(660deg) translateY(-192px) rotate(-660deg); }
}

/* floating text tags */
.bh-tag {
  position: absolute;
  z-index: 4;
  top: 50%;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.4em;
  color: rgba(233, 213, 255, 0.3);
  writing-mode: vertical-rl;
  transform: translateY(-50%);
  text-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
  pointer-events: none;
}
.bh-tag-l { left: 0; color: rgba(251, 113, 133, 0.45); }
.bh-tag-r { right: 0; color: rgba(52, 211, 153, 0.45); }

/* free readouts — no boxes, just type in space */
.bh-readout {
  position: absolute;
  z-index: 6;
  font-family: var(--mono);
  text-align: center;
  pointer-events: none;
}
.bh-readout em {
  display: block;
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.28em;
  color: rgba(233, 213, 255, 0.35);
  margin-bottom: 0.2rem;
}
.bh-readout b {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #e9d5ff;
  text-shadow: 0 0 20px rgba(167, 139, 250, 0.7);
}
.bh-ro-1 { left: 2%; top: 22%; }
.bh-ro-2 { right: 2%; top: 28%; text-align: right; }
.bh-ro-3 { left: 8%; bottom: 24%; }

.bh-status {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ok);
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(52, 211, 153, 0.5);
  pointer-events: none;
}
.bh-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 12px var(--ok);
  animation: pipeBlink 1.3s ease-in-out infinite;
}

.bh-sig {
  position: absolute;
  top: 6%;
  right: 8%;
  z-index: 6;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(167, 139, 250, 0.5);
  pointer-events: none;
}

/* kill any leftover panel rules from old CSS in sections.css */
.about-visual .ic-frame,
.about-visual .ic-rail,
.about-visual .ic-metric,
.about-visual .ic-hud-tl,
.about-visual .ic-hud-tr,
.about-visual .ic-hud-bl,
.about-visual .ic-hud-br,
.about-visual .ic-barcode,
.about-visual .ic-wave,
.about-visual .ic-log,
.about-visual .ic-grid,
.about-visual .ic-hex,
.about-visual .ic-noise,
.about-visual .ic-ring,
.about-visual .ic-beam,
.about-visual .ic-reticle,
.about-visual .ic-pole {
  /* overridden by absence in new HTML */
}

@media (max-width: 900px) {
  .about-visual {
    max-width: 360px;
  }
}
@media (max-width: 520px) {
  .bh-tag,
  .bh-ro-1,
  .bh-ro-2,
  .ic-sat-5,
  .ic-sat-6 {
    display: none;
  }
}

html.reduced .bh-field,
html.reduced .bh-lens,
html.reduced .bh-disk,
html.reduced .bh-photon,
html.reduced .bh-jets,
html.reduced .bh-ell,
html.reduced .bh-spiral i,
html.reduced .bh-stars span,
html.reduced .bh-rim,
html.reduced .ic-sat,
html.reduced .ic-scan,
html.reduced .bh-status i,
html.reduced .bh-horizon .ic-core::after {
  animation: none !important;
}