/* Day/Night artwork visual helpers (ripples, keyframes) */

@keyframes artworkRipple {
  to {
    transform: translate(-50%, -50%) scale(20);
    opacity: 0;
  }
}

.artwork-ripple {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
  transform: translate(-50%, -50%) scale(0);
  animation: artworkRipple 0.8s ease-out forwards;
  pointer-events: none;
  z-index: 100;
}
/* Hauptbutton - Rundes Kunstwerk */
.day-night-artwork {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #87ceeb 0%,
    /* Himmelblau oben */ #ffe4b5 45%,
    /* Sonnenuntergangsorange */ #98fb98 100% /* Sanftes Grün unten */
  );
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform-style: preserve-3d;
}

.day-night-artwork:focus {
  outline: 2px solid var(--accent-primary, #007acc);
  outline-offset: 3px;
}

.day-night-artwork:hover {
  transform: scale(1.05) rotateX(5deg);
  box-shadow:
    0 6px 25px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.day-night-artwork:active {
  transform: scale(0.98);
}

/* Night Mode Background */
[data-theme="dark"] .day-night-artwork {
  background: linear-gradient(
    180deg,
    #191970 0%,
    /* Mitternachtsblau oben */ #483d8b 30%,
    /* Dunkles Slate Blau */ #2f4f4f 70%,
    /* Dunkles Schiefer Grau */ #228b22 100% /* Waldgrün unten */
  );
}

/* Sky Canvas - Basis für alle Elemente */
.sky-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

/* === SONNE === */
.sun {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, #ffd700 0%, #ffa500 50%, #ff8c00 100%);
  border-radius: 50%;
  transition: all 0.8s ease;
  opacity: 1;
  transform: scale(1);
  box-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 20px rgba(255, 140, 0, 0.3);
}

/* Sonnenstrahlen */
.sun-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  animation: sunRotate 4s linear infinite;
}

.ray {
  position: absolute;
  width: 1px;
  height: 6px;
  background: linear-gradient(to bottom, #ffd700, transparent);
  transform-origin: bottom center;
}

.ray-1 {
  transform: rotate(0deg) translateY(-12px);
}
.ray-2 {
  transform: rotate(45deg) translateY(-12px);
}
.ray-3 {
  transform: rotate(90deg) translateY(-12px);
}
.ray-4 {
  transform: rotate(135deg) translateY(-12px);
}
.ray-5 {
  transform: rotate(180deg) translateY(-12px);
}
.ray-6 {
  transform: rotate(225deg) translateY(-12px);
}
.ray-7 {
  transform: rotate(270deg) translateY(-12px);
}
.ray-8 {
  transform: rotate(315deg) translateY(-12px);
}

/* Night Mode - Sonne verstecken */
[data-theme="dark"] .sun {
  opacity: 0;
  transform: scale(0.3) translateY(30px);
}

/* === MOND === */
.moon {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: radial-gradient(
    circle at 30% 30%,
    #f5f5dc 0%,
    #e6e6fa 40%,
    #d3d3d3 100%
  );
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.3) translateY(-30px);
  transition: all 0.8s ease;
  box-shadow:
    0 0 15px rgba(245, 245, 220, 0.4),
    inset -2px -2px 0 rgba(0, 0, 0, 0.1);
}

/* Mondkrater */
.moon-craters {
  position: relative;
  width: 100%;
  height: 100%;
}

.crater {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.1),
    transparent
  );
}

.crater-1 {
  width: 4px;
  height: 4px;
  top: 20%;
  left: 30%;
}
.crater-2 {
  width: 3px;
  height: 3px;
  top: 50%;
  right: 25%;
}
.crater-3 {
  width: 2px;
  height: 2px;
  bottom: 30%;
  left: 40%;
}
.crater-4 {
  width: 3px;
  height: 3px;
  top: 35%;
  left: 60%;
}

/* Night Mode - Mond zeigen */
[data-theme="dark"] .moon {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* === STERNE === */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.star-1 {
  top: 15%;
  left: 25%;
  animation: twinkle 2s infinite;
}
.star-2 {
  top: 25%;
  right: 20%;
  animation: twinkle 2.5s infinite 0.5s;
}
.star-3 {
  top: 40%;
  left: 15%;
  animation: twinkle 3s infinite 1s;
}
.star-4 {
  top: 60%;
  right: 30%;
  animation: twinkle 2.2s infinite 0.8s;
}
.star-5 {
  bottom: 30%;
  left: 35%;
  animation: twinkle 2.8s infinite 1.5s;
}
.star-6 {
  bottom: 45%;
  right: 15%;
  animation: twinkle 2.3s infinite 0.3s;
}
.star-7 {
  top: 35%;
  left: 70%;
  animation: twinkle 2.7s infinite 1.2s;
}
.star-8 {
  bottom: 25%;
  left: 60%;
  animation: twinkle 2.4s infinite 0.7s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes sunRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Night Mode - Sterne zeigen */
[data-theme="dark"] .stars {
  opacity: 1;
}

/* === WOLKEN === */
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cloud {
  position: absolute;
  opacity: 0.7;
}

.cloud-part {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50px;
}

/* Wolke 1 */
.cloud-1 {
  top: 20%;
  right: 5%;
  animation: cloudFloat1 8s ease-in-out infinite;
}

.cloud-1 .part-1 {
  width: 8px;
  height: 6px;
  top: 0;
  left: 0;
}
.cloud-1 .part-2 {
  width: 6px;
  height: 4px;
  top: 2px;
  left: 6px;
}
.cloud-1 .part-3 {
  width: 5px;
  height: 4px;
  top: 3px;
  left: 3px;
}

/* Wolke 2 */
.cloud-2 {
  bottom: 35%;
  left: 10%;
  animation: cloudFloat2 10s ease-in-out infinite;
}

.cloud-2 .part-1 {
  width: 6px;
  height: 4px;
  top: 0;
  left: 0;
}
.cloud-2 .part-2 {
  width: 4px;
  height: 3px;
  top: 1px;
  left: 4px;
}

@keyframes cloudFloat1 {
  0%,
  100% {
    transform: translateX(0px) translateY(0px);
  }
  50% {
    transform: translateX(5px) translateY(-2px);
  }
}

@keyframes cloudFloat2 {
  0%,
  100% {
    transform: translateX(0px) translateY(0px);
  }
  50% {
    transform: translateX(-3px) translateY(2px);
  }
}

/* Night Mode - Wolken dunkler */
[data-theme="dark"] .cloud-part {
  background: rgba(100, 100, 120, 0.6);
}

/* === LANDSCHAFT === */
.landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35%;
}

/* Berge */
.mountains {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  height: 15px;
}

.mountain {
  position: absolute;
  bottom: 0;
  border-style: solid;
  border-color: transparent transparent #228b22 transparent;
}

.mountain-1 {
  left: 10%;
  border-width: 0 8px 12px 8px;
  border-bottom-color: #32cd32;
}

.mountain-2 {
  right: 20%;
  border-width: 0 6px 10px 6px;
  border-bottom-color: #228b22;
}

.mountain-3 {
  right: 5%;
  border-width: 0 5px 8px 5px;
  border-bottom-color: #2e8b57;
}

/* Night Mode - Berge dunkler */
[data-theme="dark"] .mountain-1 {
  border-bottom-color: #1c5f1c;
}
[data-theme="dark"] .mountain-2 {
  border-bottom-color: #0f4f0f;
}
[data-theme="dark"] .mountain-3 {
  border-bottom-color: #1a4a1a;
}

/* Bäume */
.trees {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  height: 12px;
}

.tree {
  position: absolute;
  bottom: 0;
}

.trunk {
  width: 2px;
  height: 8px;
  background: #8b4513;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.leaves {
  width: 8px;
  height: 6px;
  background: #228b22;
  border-radius: 50%;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.tree-1 {
  left: 30%;
  animation: treeWave 6s ease-in-out infinite;
}

.tree-2 {
  right: 35%;
  animation: treeWave 5s ease-in-out infinite 1s;
}

@keyframes treeWave {
  0%,
  100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(1px);
  }
}

/* Night Mode - Bäume dunkler */
[data-theme="dark"] .trunk {
  background: #5d2f07;
}
[data-theme="dark"] .leaves {
  background: #0f4f0f;
}

/* === ATMOSPHÄRISCHE EFFEKTE === */
.atmosphere {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
}

/* Nebel */
.mist {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.8s ease;
}

[data-theme="dark"] .mist {
  background: linear-gradient(to top, rgba(100, 100, 150, 0.3), transparent);
  opacity: 1;
}

/* Lichtstrahlen */
.light-rays {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 75% 25%,
    rgba(255, 215, 0, 0.1),
    transparent 50%
  );
  opacity: 1;
  transition: opacity 0.8s ease;
}

[data-theme="dark"] .light-rays {
  background: radial-gradient(
    ellipse at 25% 25%,
    rgba(245, 245, 220, 0.1),
    transparent 50%
  );
  opacity: 0.7;
}