/* ============================================================
   Bewegung der Szenen
   Nur transform und opacity — beides läuft auf dem Compositor, damit
   achtzehn Kacheln gleichzeitig nicht den Hauptthread blockieren.
   ============================================================ */

.szene{display:block;width:100%;height:100%}

/* Schneefall */
@keyframes rieseln{
  from{ transform:translateY(0) translateX(0); opacity:0 }
  10% { opacity:.9 }
  90% { opacity:.9 }
  to  { transform:translateY(165px) translateX(14px); opacity:0 }
}
.flocke{fill:#fff;animation:rieseln linear infinite}

/* Abfahrt: quer durchs Bild und wieder von vorn */
@keyframes abfahrt{
  from{ transform:translate(255px,104px) }
  to  { transform:translate(45px,140px) }
}
.skifahrer{animation:abfahrt 7s cubic-bezier(.4,0,.6,1) infinite}

@keyframes spurZeichnen{
  from{ stroke-dasharray:0 400 }
  to  { stroke-dasharray:400 0 }
}
.spur{animation:spurZeichnen 7s linear infinite}

/* Wanderer auf dem Pfad */
@keyframes steigen{
  from{ transform:translate(38px,148px) }
  to  { transform:translate(258px,102px) }
}
.wanderer{animation:steigen 13s ease-in-out infinite alternate}

@keyframes pfadFliessen{ to{ stroke-dashoffset:-52 } }
.pfad{animation:pfadFliessen 4s linear infinite}

/* Wolken ziehen */
@keyframes ziehen{
  from{ transform:translateX(-70px) }
  to  { transform:translateX(390px) }
}
.wolke{animation:ziehen linear infinite}

/* Sonne und Mond atmen */
@keyframes pulsen{
  0%,100%{ opacity:.85; transform:scale(1) }
  50%    { opacity:1;   transform:scale(1.07) }
}
.sonne{animation:pulsen 6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.mond {animation:pulsen 9s ease-in-out infinite;transform-origin:center;transform-box:fill-box}

/* Wellengang */
@keyframes wogen{ to{ transform:translateX(320px) } }
.welle{animation:wogen linear infinite}

/* Der Wasserfall.

   Drei Bewegungen, die zusammen fallendes Wasser ergeben: Straehnen, die
   nach unten laufen und dabei ausbleichen; Gischt, die am Fuss aufsteigt
   und vergeht; Ringe, die sich auf dem Becken ausbreiten.

   Das Boot, das hier stand, ist mit der Seeszene entfallen — es schaukelte
   auf einer Kachel, die „Wasserfall" heisst. */
@keyframes fallen{
  from{ transform:translateY(0);              opacity:.1 }
  20% { opacity:1 }
  to  { transform:translateY(var(--fall,54px)); opacity:0 }
}
.faellt{animation:fallen linear infinite}

@keyframes spritzen{
  from{ transform:translateY(0) scale(.5);   opacity:0 }
  30% { opacity:.65 }
  to  { transform:translateY(-26px) scale(1.5); opacity:0 }
}
.gischt{animation:spritzen ease-out infinite}

@keyframes ringen{
  from{ transform:scale(.4); opacity:.6 }
  to  { transform:scale(4);  opacity:0 }
}
.ring{animation:ringen 4.2s linear infinite;transform-origin:center;transform-box:fill-box}

/* Vögel über der Burg */
@keyframes fliegen{
  from{ transform:translateX(-30px) }
  to  { transform:translateX(350px) }
}
.vogel{animation:fliegen linear infinite}

/* Fackel flackert */
@keyframes flackern{
  0%,100%{ opacity:.55; transform:scale(.9) }
  35%    { opacity:1;   transform:scale(1.25) }
  70%    { opacity:.75; transform:scale(1.05) }
}
.fackel{animation:flackern 1.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}

/* Stadtfenster gehen an und aus */
@keyframes leuchten{
  0%,45% { opacity:.15 }
  55%,100%{ opacity:.95 }
}
.fenster{animation:leuchten 5s ease-in-out infinite alternate}

/* Bäume wiegen sich */
@keyframes wiegen{
  0%,100%{ transform:rotate(-1.4deg) }
  50%    { transform:rotate(1.4deg) }
}
.baum{animation:wiegen ease-in-out infinite}

@keyframes wabern{
  0%,100%{ opacity:.12; transform:translateX(-12px) }
  50%    { opacity:.26; transform:translateX(12px) }
}
.nebel{animation:wabern 14s ease-in-out infinite}

/* Dampf über dem Becken */
@keyframes aufsteigen{
  from{ transform:translateY(0) scale(.6); opacity:0 }
  25% { opacity:.5 }
  to  { transform:translateY(-58px) scale(1.7); opacity:0 }
}
.dampf{animation:aufsteigen ease-out infinite}

@keyframes kreisen{
  0%,100%{ transform:scale(1);   opacity:.7 }
  50%    { transform:scale(1.12); opacity:.35 }
}
.kringel{animation:kreisen 5s ease-in-out infinite;transform-origin:center;transform-box:fill-box}

/* Wer keine Bewegung will, bekommt trotzdem das Bild — nur eben still. */
@media(prefers-reduced-motion:reduce){
  .szene *{animation:none !important}
  .flocke{opacity:.8}
  .skifahrer{transform:translate(150px,122px)}
  .wanderer{transform:translate(148px,125px)}
  .boot{transform:translate(160px,103px)}
  .wolke{transform:translateX(160px)}
  .vogel{transform:translateX(160px)}
  .dampf{opacity:.3}
  .fenster{opacity:.9}
}


/* Regen vor dem Museum. Er faellt schraeg und beginnt oberhalb des Bildes;
   die Straehnen sind kurz, sonst sieht es aus wie Schnuere. */
@keyframes regnen{
  from{ transform:translate(0,-16px);  opacity:0 }
  15% { opacity:1 }
  to  { transform:translate(-34px,166px); opacity:0 }
}
.regen{animation:regnen linear infinite}

/* Banner an der Fassade. Stoff an einer Hauswand weht nicht, er atmet. */
@keyframes atmen{
  0%,100%{ transform:scaleX(1)    skewX(0deg) }
  50%    { transform:scaleX(.92)  skewX(-3deg) }
}
.banner{animation:atmen 5.5s ease-in-out infinite;transform-origin:top center;transform-box:fill-box}