/* ========================================
   SONNENAUFGANG-EFFEKT
   Frühlingssonnenaufgang von unten rechts
   SMOOTH Übergang durch Farb-Gradient
   ======================================== */

#sunrise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: none;
  outline: none;
  will-change: opacity;

  /* Position für dynamische Bewegung beim Scrollen */
  --sunrise-y: 95%;

  /* FRÜHLINGSSONNENAUFGANG - Smooth Farb-Übergang von unten rechts */
  background:
    /* Radialer Gradient - BEWEGT SICH beim Scrollen */
    radial-gradient(
      ellipse 200% 180% at 85% var(--sunrise-y),
      /* Zentrum: Dezentes Gelb */
      rgba(255, 240, 180, 0.48) 0%,
      rgba(255, 225, 140, 0.45) 4%,
      rgba(255, 210, 110, 0.42) 8%,
      /* Orange */
      rgba(255, 185, 85, 0.44) 12%,
      rgba(252, 165, 70, 0.45) 16%,
      rgba(248, 145, 62, 0.46) 20%,
      rgba(242, 125, 58, 0.46) 24%,
      /* Orange zu Rosa */
      rgba(232, 108, 65, 0.45) 28%,
      rgba(218, 95, 75, 0.43) 32%,
      rgba(202, 85, 88, 0.41) 36%,
      /* Lila */
      rgba(185, 78, 102, 0.38) 40%,
      rgba(168, 75, 115, 0.35) 44%,
      rgba(150, 72, 125, 0.32) 48%,
      rgba(132, 70, 132, 0.29) 52%,
      rgba(115, 68, 138, 0.26) 56%,
      /* Lila zu Blau */
      rgba(98, 68, 142, 0.23) 60%,
      rgba(82, 70, 145, 0.20) 64%,
      rgba(68, 72, 145, 0.17) 68%,
      rgba(55, 74, 142, 0.14) 72%,
      /* Blau - SMOOTH zu transparent */
      rgba(45, 75, 138, 0.11) 76%,
      rgba(38, 72, 130, 0.08) 80%,
      rgba(32, 68, 120, 0.06) 84%,
      rgba(26, 62, 108, 0.04) 88%,
      rgba(22, 55, 95, 0.02) 92%,
      rgba(18, 48, 82, 0.01) 96%,
      transparent 100%
    ),
    /* Dezente Sonne - BEWEGT SICH mit */
    radial-gradient(
      ellipse 35% 25% at 88% calc(var(--sunrise-y) - 3%),
      rgba(255, 252, 230, 0.50) 0%,
      rgba(255, 245, 195, 0.40) 15%,
      rgba(255, 235, 160, 0.30) 30%,
      rgba(255, 220, 130, 0.22) 45%,
      rgba(255, 205, 110, 0.14) 60%,
      rgba(250, 185, 100, 0.07) 78%,
      transparent 100%
    ),
    /* Lila/Blau Hauch oben links - SMOOTH */
    radial-gradient(
      ellipse 140% 120% at 0% 0%,
      rgba(35, 48, 95, 0.22) 0%,
      rgba(45, 55, 110, 0.18) 15%,
      rgba(55, 62, 120, 0.14) 30%,
      rgba(65, 68, 125, 0.10) 45%,
      rgba(75, 72, 125, 0.07) 60%,
      rgba(85, 76, 120, 0.04) 75%,
      rgba(92, 78, 112, 0.02) 88%,
      transparent 100%
    );

  transition: opacity 0.8s ease-out;
  mix-blend-mode: normal;
  box-shadow: none;
}

/* Sonnenglow - dezent */
#sunrise-overlay::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65%;
  height: 50%;
  background: radial-gradient(
    ellipse 80% 70% at 92% 98%,
    rgba(255, 250, 220, 0.45) 0%,
    rgba(255, 240, 180, 0.35) 15%,
    rgba(255, 225, 145, 0.26) 30%,
    rgba(255, 205, 115, 0.18) 45%,
    rgba(250, 180, 100, 0.11) 60%,
    rgba(240, 155, 95, 0.05) 78%,
    transparent 100%
  );
  opacity: var(--before-opacity, 0);
  animation: sunriseGlow 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes sunriseGlow {
  0%, 100% {
    opacity: calc(var(--before-opacity, 0) * 0.75);
    transform: scale(1);
  }
  50% {
    opacity: var(--before-opacity, 0);
    transform: scale(1.02);
  }
}

#sunrise-overlay::after {
  content: none;
  display: none;
}

/* Mobile */
@media (max-width: 768px) {
  #sunrise-overlay {
    background:
      radial-gradient(
        ellipse 220% 180% at 85% 95%,
        rgba(255, 235, 170, 0.44) 0%,
        rgba(252, 175, 78, 0.44) 15%,
        rgba(232, 115, 72, 0.40) 28%,
        rgba(195, 85, 95, 0.35) 42%,
        rgba(145, 72, 125, 0.28) 56%,
        rgba(85, 70, 140, 0.18) 72%,
        rgba(42, 62, 115, 0.08) 88%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 40% 30% at 88% 92%,
        rgba(255, 250, 215, 0.48) 0%,
        rgba(255, 232, 155, 0.32) 35%,
        rgba(255, 205, 110, 0.15) 70%,
        transparent 100%
      );
  }

  #sunrise-overlay::before {
    width: 70%;
    height: 48%;
  }
}

/* Große Bildschirme */
@media (min-width: 1200px) {
  #sunrise-overlay {
    background:
      radial-gradient(
        ellipse 190% 170% at 85% 94%,
        /* Dezentes Gelb */
        rgba(255, 242, 185, 0.50) 0%,
        rgba(255, 228, 145, 0.47) 4%,
        rgba(255, 212, 112, 0.44) 8%,
        /* Orange */
        rgba(255, 188, 88, 0.46) 12%,
        rgba(252, 168, 72, 0.47) 16%,
        rgba(248, 148, 62, 0.48) 20%,
        rgba(242, 128, 58, 0.48) 24%,
        /* Orange zu Rosa */
        rgba(232, 110, 65, 0.46) 28%,
        rgba(218, 96, 76, 0.44) 32%,
        rgba(202, 86, 90, 0.41) 36%,
        /* Lila */
        rgba(185, 78, 105, 0.38) 40%,
        rgba(168, 74, 118, 0.35) 44%,
        rgba(150, 72, 128, 0.32) 48%,
        rgba(132, 70, 136, 0.28) 52%,
        rgba(115, 68, 142, 0.25) 56%,
        /* Lila zu Blau */
        rgba(98, 68, 146, 0.22) 60%,
        rgba(82, 70, 148, 0.19) 64%,
        rgba(68, 72, 148, 0.16) 68%,
        rgba(55, 74, 145, 0.13) 72%,
        /* Blau - SMOOTH zu transparent */
        rgba(45, 75, 140, 0.10) 76%,
        rgba(38, 72, 132, 0.07) 80%,
        rgba(32, 68, 122, 0.05) 84%,
        rgba(26, 62, 110, 0.03) 88%,
        rgba(22, 55, 98, 0.02) 92%,
        rgba(18, 48, 85, 0.01) 96%,
        transparent 100%
      ),
      /* Dezente Sonne */
      radial-gradient(
        ellipse 32% 24% at 90% 92%,
        rgba(255, 252, 235, 0.52) 0%,
        rgba(255, 248, 200, 0.42) 15%,
        rgba(255, 238, 165, 0.32) 30%,
        rgba(255, 225, 135, 0.22) 45%,
        rgba(255, 212, 115, 0.14) 60%,
        rgba(252, 195, 102, 0.07) 78%,
        transparent 100%
      ),
      /* Blau/Lila Hauch oben links */
      radial-gradient(
        ellipse 145% 125% at 0% 0%,
        rgba(32, 45, 92, 0.26) 0%,
        rgba(42, 52, 108, 0.21) 15%,
        rgba(52, 60, 120, 0.16) 30%,
        rgba(62, 66, 128, 0.12) 45%,
        rgba(72, 72, 128, 0.08) 60%,
        rgba(82, 76, 125, 0.05) 75%,
        rgba(90, 78, 118, 0.02) 90%,
        transparent 100%
      );
  }
}