/* styles/neon-home.css
   Neon/Cyber-Glow-Look NUR fuer die MaSeL Toolbox Hauptseite (index.php).
   Statisch — keine neuen Animationen. */

/* ============================================================
   Body & Hintergrund
   ============================================================ */

body.neon-home {
  background-color: #000;
}

/* Ersetzt body::before aus base.css durch ein starkes, symmetrisches
   Leuchtkreuz plus zentraler Facette. */
body.neon-home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    /* vertikaler Lichtstrahl oben */
    radial-gradient(ellipse 55% 32% at 50% -6%, rgba(58, 228, 255, 0.28), transparent 68%),
    /* vertikaler Lichtstrahl unten (mint) */
    radial-gradient(ellipse 55% 32% at 50% 106%, rgba(74, 242, 197, 0.17), transparent 68%),
    /* horizontaler Lichtstrahl links */
    radial-gradient(ellipse 32% 55% at -8% 50%, rgba(58, 228, 255, 0.13), transparent 68%),
    /* horizontaler Lichtstrahl rechts (purple) */
    radial-gradient(ellipse 32% 55% at 108% 50%, rgba(179, 136, 255, 0.13), transparent 68%),
    /* zentrale Facette (wie der Poly-Core im Bild) */
    radial-gradient(circle at 50% 44%, rgba(58, 228, 255, 0.15) 0%, rgba(74, 242, 197, 0.08) 16%, transparent 40%),
    /* zusaetzliche Ecken-Glows */
    radial-gradient(circle at 20% 0%, rgba(58, 228, 255, 0.13), transparent 42%),
    radial-gradient(circle at 85% 100%, rgba(179, 136, 255, 0.15), transparent 48%),
    linear-gradient(to bottom, #020306 0%, #000000 100%);
  pointer-events: none;
}

/* Subtiles, statisches Kreuz-Raster HINTER den Inhalten. */
body.neon-home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  background:
    linear-gradient(
      90deg,
      transparent calc(50% - 1px),
      rgba(58, 228, 255, 0.10) calc(50% - 1px),
      rgba(58, 228, 255, 0.10) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      0deg,
      transparent calc(50% - 1px),
      rgba(58, 228, 255, 0.08) calc(50% - 1px),
      rgba(58, 228, 255, 0.08) calc(50% + 1px),
      transparent calc(50% + 1px)
    );
  pointer-events: none;
}

/* ============================================================
   Hero
   ============================================================ */

.neon-home .hero {
  background:
    linear-gradient(180deg, rgba(9, 13, 25, 0.78), rgba(3, 5, 12, 0.68)),
    rgba(5, 7, 14, 0.62);
  border-color: rgba(58, 228, 255, 0.18);
  box-shadow:
    0 0 28px rgba(58, 228, 255, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.neon-home .hero-bg__svg {
  opacity: 0.12;
  filter: none;
}

.neon-home .hero-tagline {
  color: rgba(207, 248, 255, 0.84);
  text-shadow: none;
}

/* ============================================================
   Hero-Glyphs
   ============================================================ */

.neon-home .hero-glyph {
  opacity: 0.84;
  filter: drop-shadow(0 0 5px rgba(58, 228, 255, 0.85));
}

.neon-home .hero-glyph--center {
  filter: drop-shadow(0 0 14px rgba(58, 228, 255, 0.95));
}

.neon-home .hero-glyph-link {
  opacity: 0.55;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(58, 228, 255, 0.7) 50%,
    transparent 100%);
}

.neon-home .hero-glyph-link::after {
  box-shadow: 0 0 8px var(--accent), 0 0 14px var(--accent);
}

/* ============================================================
   Navigation
   ============================================================ */

.neon-home .tools-nav {
  border-color: rgba(58, 228, 255, 0.18);
  box-shadow: 0 0 24px rgba(58, 228, 255, 0.07);
}

.neon-home .pill-nav:hover {
  background: rgba(58, 228, 255, 0.08);
  border-color: rgba(58, 228, 255, 0.55);
  box-shadow: 0 0 14px rgba(58, 228, 255, 0.18);
}

.neon-home .pill-nav.is-active {
  box-shadow:
    0 0 16px rgba(58, 228, 255, 0.58),
    0 4px 18px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Panels / Cards
   ============================================================ */

.neon-home .panel {
  background:
    radial-gradient(ellipse 130% 85% at 50% 0%, rgba(58, 228, 255, 0.07), transparent 48%),
    var(--glass-bg-soft);
  border-color: rgba(58, 228, 255, 0.16);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 0 32px rgba(58, 228, 255, 0.06);
}

.neon-home .panel:focus-within {
  border-color: rgba(58, 228, 255, 0.4);
  box-shadow:
    0 0 24px rgba(58, 228, 255, 0.12),
    0 0 44px rgba(58, 228, 255, 0.06);
}

.neon-home #about-masel {
  border-color: rgba(58, 228, 255, 0.20);
  box-shadow:
    0 0 48px rgba(58, 228, 255, 0.08),
    inset 0 0 60px rgba(58, 228, 255, 0.03);
}

/* ============================================================
   Typo / Ueberschriften
   ============================================================ */

.neon-home h1,
.neon-home h2,
.neon-home h3 {
  text-shadow: 0 0 14px rgba(58, 228, 255, 0.22);
}

.neon-home .about-content .panel-header:first-child h1 {
  text-shadow: 0 0 18px rgba(58, 228, 255, 0.42);
}

.neon-home .about-content .panel-header:first-child h1::before {
  color: rgba(58, 228, 255, 0.9);
  text-shadow: 0 0 10px rgba(58, 228, 255, 0.6);
}

.neon-home .panel-header.second h2 {
  text-shadow: 0 0 12px rgba(58, 228, 255, 0.3);
}

/* ============================================================
   Tool-Icons
   ============================================================ */

.neon-home .tool-title-icon {
  filter: drop-shadow(0 0 4px currentColor);
}

/* ============================================================
   Buttons / CTAs
   ============================================================ */

.neon-home .about-cta-btn--primary {
  box-shadow:
    0 0 24px rgba(58, 228, 255, 0.72),
    0 8px 22px rgba(0, 0, 0, 0.35);
}

.neon-home .install-btn {
  background: rgba(58, 228, 255, 0.08);
  border-color: rgba(58, 228, 255, 0.35);
}

.neon-home .install-btn:hover:not(:disabled) {
  background: rgba(58, 228, 255, 0.14);
  border-color: rgba(58, 228, 255, 0.65);
  box-shadow: 0 0 14px rgba(58, 228, 255, 0.22);
}

/* ============================================================
   Support / PDF Strips
   ============================================================ */

.neon-home .support-strip-inner,
.neon-home .pdf-export-inner {
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(58, 228, 255, 0.05), transparent 45%),
    var(--glass-bg-soft);
  border-color: rgba(58, 228, 255, 0.14);
  box-shadow: 0 0 18px rgba(58, 228, 255, 0.05);
}

/* ============================================================
   Footer
   ============================================================ */

.neon-home .footer {
  color: rgba(154, 177, 198, 0.78);
}

/* ============================================================
   Video-Showcase (Installationen)
   ============================================================ */

.neon-home .video-showcase {
  border-color: rgba(58, 228, 255, 0.18);
  background:
    radial-gradient(ellipse 130% 85% at 50% 0%, rgba(58, 228, 255, 0.07), transparent 48%),
    var(--glass-bg-soft);
  box-shadow:
    0 0 42px rgba(58, 228, 255, 0.08),
    0 8px 28px rgba(0, 0, 0, 0.32);
}

.neon-home .video-showcase__title h2 {
  text-shadow: 0 0 14px rgba(58, 228, 255, 0.35);
}

.neon-home .video-count {
  background: rgba(58, 228, 255, 0.12);
  border-color: rgba(58, 228, 255, 0.35);
  box-shadow: 0 0 10px rgba(58, 228, 255, 0.18);
}

.neon-home .video-card {
  border-color: rgba(58, 228, 255, 0.14);
  box-shadow: 0 0 22px rgba(58, 228, 255, 0.06);
}

.neon-home .video-card:hover {
  border-color: rgba(58, 228, 255, 0.42);
  box-shadow: 0 0 34px rgba(58, 228, 255, 0.16);
}