/* ═══════════════════════════════════════════
   sections.css — About + Shared Section Styles
   Reduced backdrop opacity so WebGL world shows
   through as you scroll. Better readability.
═══════════════════════════════════════════ */
.section {
  position: relative; z-index: 2;
  padding: var(--s16) var(--s6);
}

/* Semi-transparent panels — world bleeds through subtly */
.section-alt {
  background: rgba(4, 10, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.section-rnd {
  background: rgba(2, 6, 14, 0.68);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s12); align-items: center;
}
.about-visual { position: relative; }
.sigil-wrap {
  position: relative; width: 200px; height: 200px; margin: 0 auto;
}
.sigil { width: 100%; height: 100%; animation: sigil-spin 80s linear infinite; }
.sigil-inner { animation: sigil-spin 40s linear infinite reverse; }
.sigil-glow {
  position: absolute; inset: -60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(61,255,208,0.06) 0%, transparent 65%);
  pointer-events: none;
  animation: sigil-glow 4s ease-in-out infinite;
}
@keyframes sigil-spin { to { transform: rotate(360deg); } }
@keyframes sigil-glow {
  0%,100% { opacity: 0.5; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.08); }
}

/* About text — improved readability */
.about-text p {
  color: var(--c-star);           /* upgraded from c-mist for readability */
  margin-bottom: var(--s2);
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.8;
}
.about-text p:last-child { margin-bottom: 0; }
.about-text em {
  color: var(--c-biolume-soft);
  font-style: normal;
}

.about-status {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: var(--t-sm);
  letter-spacing: 0.08em; color: var(--c-biolume) !important;
  margin-top: var(--s3) !important;
}

/* Section titles — ensure consistent color */
.section-title {
  color: var(--c-star) !important;
}

@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .about-visual { order: -1; }
}
@media (max-width: 720px) {
  .section { padding: var(--s12) 1.5rem; }
}