/* ==========================================================================
   PREMIUM SECTION TRANSITIONS
   Elegante, geschwungene Übergänge für Light & Dark Mode
   ========================================================================== */

/* Basis-Übergangselement */
.section-transition {
  width: 100%;
  position: relative;
  z-index: 10;
  pointer-events: none;
}

/* ========================================================================
   Übergang: About KI → Parallax 1 (Spiegel)
   ======================================================================== */

.section-transition--mirror-top {
  height: 200px;
  margin-top: -200px;
  background: linear-gradient(
    to bottom,
    rgba(2, 6, 23, 0.0) 0%,
    rgba(2, 6, 23, 0.3) 30%,
    rgba(2, 6, 23, 0.7) 60%,
    rgba(2, 6, 23, 0.95) 90%,
    rgba(2, 6, 23, 1.0) 100%
  );
}


/* ========================================================================
   Übergang: Parallax 1 → Academy
   ======================================================================== */

.section-transition--mirror-bottom {
  height: 120px;
  margin-bottom: -1px;
  background: linear-gradient(
    to bottom,
    rgba(2, 6, 23, 1.0) 0%,
    rgba(15, 23, 42, 0.9) 50%,
    rgba(15, 23, 42, 0.0) 100%
  );
}


/* ========================================================================
   Übergang: Academy → Parallax 2 (Summit)
   ======================================================================== */

.section-transition--summit-top {
  height: 200px;
  margin-top: -200px;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.0) 0%,
    rgba(15, 23, 42, 0.5) 40%,
    rgba(2, 6, 23, 0.9) 80%,
    rgba(2, 6, 23, 1.0) 100%
  );
}


/* ========================================================================
   Übergang: Parallax 2 → Training
   ======================================================================== */

.section-transition--summit-bottom {
  height: 120px;
  margin-bottom: -1px;
  background: linear-gradient(
    to bottom,
    rgba(2, 6, 23, 1.0) 0%,
    rgba(241, 245, 249, 0.0) 100%
  );
}


/* ========================================================================
   Übergang: Training → Parallax 3 (Future)
   ======================================================================== */

.section-transition--future-top {
  height: 200px;
  margin-top: -200px;
  background: linear-gradient(
    to bottom,
    rgba(241, 245, 249, 0.0) 0%,
    rgba(2, 6, 23, 0.6) 60%,
    rgba(2, 6, 23, 1.0) 100%
  );
}


/* ========================================================================
   Übergang: Parallax 3 → Support
   ======================================================================== */

.section-transition--future-bottom {
  height: 120px;
  margin-bottom: -1px;
  background: linear-gradient(
    to bottom,
    rgba(2, 6, 23, 1.0) 0%,
    rgba(15, 23, 42, 0.0) 100%
  );
}

/* ==========================================================================
   CLEAN CUTS - No transitions in both modes for consistent design
   ========================================================================== */

.section-transition,
.section-transition--mirror-top,
.section-transition--mirror-bottom,
.section-transition--summit-top,
.section-transition--summit-bottom,
.section-transition--future-top,
.section-transition--future-bottom {
  display: none;
}