/* welcome_scene.css — gemeinsame Willkommens-Szene (Main-Seite + Login).
   Markup wird von /static/js/welcome_scene.js in den Container injiziert
   (WelcomeScene.mount). Der Container trägt die Klasse .welcome-scene;
   Positionierung/Größe des Containers bestimmt die jeweilige Seite
   (.main-page: relative + min-height, Login .scene-background: fixed). */

.welcome-scene {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    #cfe6f4 0%,
    #b3d5eb 28%,
    #9cc7e2 52%,
    #85b6d6 74%,
    #6ea6cb 100%
  );
}

/* ===== SONNE ===== */
.welcome-scene .sun-container {
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  animation: sunRise 22s ease-out 0.4s forwards;
  opacity: 0;
}
.welcome-scene .sun-container svg {
  width: 300px;
  height: 300px;
  overflow: visible;
}
.welcome-scene .sun-rays-group {
  animation: sunSpin 60s linear infinite;
  transform-origin: 100px 100px;
}
.welcome-scene .sun-core {
  animation: sunGlow 5s ease-in-out infinite;
}
@keyframes sunRise {
  0%   { transform: translateX(calc(-50% - 32vw)) translateY(58vh) scale(0.9); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
@keyframes sunSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes sunGlow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 238, 190, 0.45)); }
  50%      { filter: drop-shadow(0 0 26px rgba(255, 224, 150, 0.6)); }
}

/* Morgendämmerung: Szene wird mit dem Sonnenaufgang heller */
.welcome-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #1c3a55 0%, #2d5273 55%, #3d6584 100%);
  opacity: 0.55;
  z-index: 20;
  pointer-events: none;
  animation: dawnFade 24s ease-out 0.4s forwards;
}
@keyframes dawnFade {
  0%   { opacity: 0.55; }
  100% { opacity: 0; }
}

/* ===== WOLKEN ===== */
.welcome-scene .cloud {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.welcome-scene .cloud svg { width: 100%; height: auto; display: block; }
.welcome-scene .cloud-1 { width: 190px; top: 10%; opacity: 0.95; }
.welcome-scene .cloud-2 { width: 130px; top: 5%;  opacity: 0.8; }
.welcome-scene .cloud-3 { width: 100px; top: 21%; opacity: 0.65; }
.welcome-scene .cloud-4 { width: 240px; top: 32%; opacity: 0.4; }
.welcome-scene .cloud-5 { width: 150px; top: 3%;  opacity: 0.85; }

/* ===== GRIECHISCHE INSEL ===== */
.welcome-scene .island {
  position: absolute;
  right: 3%;
  bottom: 17%;
  width: 430px;
  z-index: 3;
  pointer-events: none;
}
.welcome-scene .island svg { width: 100%; height: auto; display: block; }
.welcome-scene .windmill-blades {
  animation: millSpin 14s linear infinite;
  transform-origin: 101px 71px;
}
@keyframes millSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== GLEITSCHIRMFLIEGER ===== */
.welcome-scene .paraglider {
  position: absolute;
  top: 11%;
  z-index: 3;
  pointer-events: none;
  width: 110px;
  height: 118px;
}
.welcome-scene .paraglider img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scaleX(-1); filter: drop-shadow(0 4px 8px rgba(20, 63, 99, 0.18)); }

/* ===== WASSER (3 Wellen-Ebenen, Parallax) ===== */
.welcome-scene .wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  /* app.css setzt global `body * { max-width: 100% }` — würde die
     200%-Kachelbreite kappen und rechts eine Lücke reißen */
  max-width: none;
  pointer-events: none;
  will-change: transform;
}
.welcome-scene .wave svg { width: 100%; height: 100%; display: block; }
.welcome-scene .wave-back  { height: 27%; z-index: 4; animation: waveDrift 90s linear infinite; }
.welcome-scene .wave-mid   { height: 22%; z-index: 5; animation: waveDrift 65s linear infinite; animation-delay: -20s; }
.welcome-scene .wave-front { height: 17%; z-index: 7; animation: waveDrift 45s linear infinite; animation-delay: -10s; }
@keyframes waveDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== BOOT ===== */
.welcome-scene .boat {
  position: absolute;
  bottom: 11%;
  z-index: 6;
  pointer-events: none;
  width: 250px;
  height: 290px;
  transform-origin: 50% 92%;
}
.welcome-scene .boat svg { width: 100%; height: 100%; overflow: visible; }

/* ===== FISCHE ===== */
.welcome-scene .fish {
  position: absolute;
  bottom: 15%;
  z-index: 6;
  pointer-events: none;
  width: 58px;
  height: 38px;
  opacity: 0;
}
.welcome-scene .fish svg { width: 100%; height: 100%; overflow: visible; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .welcome-scene .sun-container svg { width: 190px; height: 190px; }
  .welcome-scene .boat { width: 170px; height: 200px; }
  .welcome-scene .fish { width: 40px; height: 27px; }
  .welcome-scene .cloud-1 { width: 130px; }
  .welcome-scene .cloud-2 { width: 90px; }
  .welcome-scene .cloud-3 { width: 70px; }
  .welcome-scene .cloud-4 { width: 160px; }
  .welcome-scene .cloud-5 { width: 100px; }
  .welcome-scene .paraglider { width: 76px; height: 82px; }
  .welcome-scene .island { width: 260px; bottom: 20%; }
}
@media (max-width: 375px) {
  .welcome-scene .sun-container svg { width: 150px; height: 150px; }
  .welcome-scene .boat { width: 130px; height: 155px; }
}