/* Team Midnite About (v2)
   This file intentionally uses !important in a few places to override existing inline styles
   without requiring a full HTML rewrite. */

.about-page {
  /* Compatibility vars used by navbar/footer inline styles */
  --primary-yellow: #ffd600;
  --primary-purple: #8a4dff;
  --primary-cyan: #45e3ff;
  --dark-bg: #05060a;
  --dark-surface: rgba(10, 11, 20, 0.88);
  --darker-surface: rgba(7, 8, 14, 0.90);
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.70);
  --gradient-primary: linear-gradient(135deg, rgba(138, 77, 255, 0.95) 0%, rgba(69, 227, 255, 0.55) 55%, rgba(255, 214, 0, 0.30) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--primary-yellow) 0%, var(--primary-purple) 100%);

  --a-bg0: #05060a;
  --a-bg1: #0a0b14;
  --a-surface: rgba(18, 20, 35, 0.72);
  --a-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  --a-ring: 0 0 0 1px rgba(69, 227, 255, 0.24), 0 10px 40px rgba(69, 227, 255, 0.10);

  color: rgba(255, 255, 255, 0.95);
  background: radial-gradient(1200px 900px at 18% 8%, rgba(138, 77, 255, 0.16), transparent 58%),
    radial-gradient(900px 700px at 82% 18%, rgba(69, 227, 255, 0.12), transparent 60%),
    radial-gradient(1100px 900px at 70% 90%, rgba(255, 214, 0, 0.10), transparent 62%),
    linear-gradient(180deg, var(--a-bg0), var(--a-bg1));
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.about-page .navbar {
  background: rgba(10, 11, 20, 0.80) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-page .about-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.about-page .about-bg::before {
  content: "";
  position: absolute;
  inset: -200px;
  background:
    radial-gradient(circle at 20% 12%, rgba(69, 227, 255, 0.12), transparent 42%),
    radial-gradient(circle at 78% 22%, rgba(255, 214, 0, 0.10), transparent 44%),
    radial-gradient(circle at 55% 92%, rgba(138, 77, 255, 0.10), transparent 42%);
  filter: blur(18px);
  opacity: 0.95;
  transform: translateZ(0);
}

.about-page .about-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.20;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  transform: translateZ(0);
}

/* Headings */
.about-page h1,
.about-page h2,
.about-page h3,
.about-page .about-title {
  font-family: "Tektur", system-ui, sans-serif;
}

/* Hero */
.about-page .hero-about {
  background: linear-gradient(135deg, rgba(138, 77, 255, 0.18), rgba(69, 227, 255, 0.06), rgba(255, 214, 0, 0.04)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Sections: make them feel lighter and more glassy */
.about-page .values-section {
  background: transparent !important;
}

.about-page .stats-section {
  background: linear-gradient(135deg, rgba(138, 77, 255, 0.28), rgba(69, 227, 255, 0.10), rgba(255, 214, 0, 0.06)) !important;
}

.about-page .mission-section {
  background: transparent !important;
}

.about-page .teams-section {
  background: transparent !important;
}

/* Cards */
.about-page .value-card,
.about-page .timeline-content,
.about-page .mission-point,
.about-page .team-showcase,
.about-page .hero-visual {
  background: linear-gradient(180deg, rgba(11, 12, 22, 0.86), rgba(7, 8, 14, 0.66)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px) !important;
}

.about-page .value-card:hover,
.about-page .timeline-content:hover,
.about-page .mission-point:hover {
  border-color: rgba(69, 227, 255, 0.18) !important;
  box-shadow: var(--a-ring) !important;
}

/* Text tweaks */
.about-page p {
  color: rgba(255, 255, 255, 0.86);
}

.about-page [style*="color: var(--text-secondary)"] {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Scroll reveal hooks (existing markup uses .fade-in) */
.about-page .fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.about-page .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 991.98px) {
  .about-page .hero-about {
    padding: 92px 0 46px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}