/* Mathe-Aquarium: Bewegung der Korallenriffe aus riffe.js (Claude, 30.09.2026).
   Nur transform und opacity. SVG-Gruppen (g.rf-b) drehen/skalieren um transform-origin in viewBox-Einheiten
   (inline gesetzt), ganze Teile wiegen als HTML-Hülle (.pflanze, transform-origin 50% 100% aus styles.css).
   Dauer und Versatz stehen inline am Element, damit nichts im Gleichschritt läuft.
   .becken.is-2d: nur die großen Teile wiegen. prefers-reduced-motion: keine Bewegung. */

.rf-ding, .rf-blasen { pointer-events: none; }
g.rf-b { transform-box: view-box; animation-iteration-count: infinite; }

/* ganze Teile wiegen um den Fuß (Weichkorallen, Peitschen, Seegras-Büschel) */
.rf-wiegen { animation: rf-wiegen 7s ease-in-out infinite alternate; }
@keyframes rf-wiegen {
  from { transform: rotate(calc(var(--rf-w, 2.5deg) * -1)); }
  to { transform: rotate(var(--rf-w, 2.5deg)); }
}

/* Fächerkorallen schwingen leicht (Drehen plus Scheren, wie ein Blatt in der Strömung) */
.rf-faecher { animation: rf-faecher 7s ease-in-out infinite alternate; }
@keyframes rf-faecher {
  from { transform: rotate(-1.4deg) skewX(1.6deg); }
  to { transform: rotate(1.2deg) skewX(-1.8deg); }
}

/* Seegras-Gruppen und Polypenbüschel der Bäumchen-Weichkoralle */
g.rf-halm { animation: rf-halm 5s ease-in-out infinite alternate; }
@keyframes rf-halm {
  from { transform: rotate(-4deg) skewX(3deg); }
  to { transform: rotate(4deg) skewX(-3deg); }
}

/* Anemonen: jedes Tentakelbündel weht für sich */
g.rf-tentakel { animation: rf-tentakel 3.2s ease-in-out infinite alternate; }
@keyframes rf-tentakel {
  from { transform: rotate(-6deg) skewX(5deg); }
  to { transform: rotate(6deg) skewX(-5deg); }
}

/* Pumpkoralle (Xenia): Polypen schließen sich im Takt und öffnen sich wieder */
g.rf-pumpen { animation: rf-pumpen 2s ease-in-out infinite; }
@keyframes rf-pumpen {
  0%, 100% { transform: scale(1); }
  42%, 56% { transform: scale(.4, .58); }
}

/* Röhrenwürmer: selten blitzschnell ins Loch, dann langsam wieder heraus */
g.rf-wurm { animation: rf-wurm 30s linear infinite; }
@keyframes rf-wurm {
  0%, 80% { transform: scale(1); opacity: 1; animation-timing-function: ease-in; }
  80.6% { transform: scale(.1, .04); opacity: 0; }
  85% { transform: scale(.1, .04); opacity: 0; animation-timing-function: ease-in-out; }
  90% { opacity: 1; }
  96%, 100% { transform: scale(1); opacity: 1; }
}

/* Teppichanemone und Mantel der Riesenmuschel heben und senken sich */
g.rf-atmen { animation: rf-atmen 6s ease-in-out infinite alternate; }
@keyframes rf-atmen {
  from { transform: scale(1, 1); }
  to { transform: scale(1.02, .86); }
}

/* Blasen aus dem Riff: je Stelle drei kurz nacheinander, dann lange Pause.
   Die Säule ist 420 % der Bodenleiste hoch, die Blase sitzt unten; translateY(-100%) = ganze Säule. */
.rf-blasen { position: absolute; inset: 0; }
.rf-blase {
  position: absolute;
  bottom: 60%;
  width: var(--g, 7px);
  height: 420%;
  background: radial-gradient(circle at 36% 34%, rgba(255, 255, 255, .95) 0 16%, rgba(255, 255, 255, .28) 22% 58%, rgba(255, 255, 255, .8) 64% 72%, rgba(255, 255, 255, 0) 76%) 50% 100% / var(--g, 7px) var(--g, 7px) no-repeat;
  opacity: 0;
  animation: rf-blase 12s linear infinite;
}
@keyframes rf-blase {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  1.5% { opacity: .9; }
  10% { transform: translate3d(calc(var(--x, 6px) * -.6), -30%, 0); }
  20% { transform: translate3d(var(--x, 6px), -65%, 0); opacity: .75; }
  28%, 100% { transform: translate3d(calc(var(--x, 6px) * .3), -100%, 0); opacity: 0; }
}

/* zweiter, ferner Schwarm in Gegenrichtung (nicht in jedem Riff) */
.rf-schwarm2 {
  position: absolute;
  top: 34%;
  left: 0;
  width: clamp(90px, 10%, 170px);
  opacity: .16;
  animation: rf-schwarm2 64s linear infinite;
  animation-delay: -20s;
}
.rf-schwarm2 svg { width: 100%; height: auto; transform: scaleX(-1); }
@keyframes rf-schwarm2 { from { transform: translate3d(110vw, 0, 0); } to { transform: translate3d(-30vw, 5vh, 0); } }

/* Licht je Riff: flaches Riffdach und Lagune heller, Weichkorallen-Riff tiefer */
.kaustik.rf-kaustik-hell { opacity: .24; }
.kaustik.rf-kaustik-matt { opacity: .1; }
.kaustik-sand.rf-kaustik-hell { opacity: .3; }
.kaustik-sand.rf-kaustik-matt { opacity: .14; }

/* schmale Becken (Handy): Nebenteile weglassen, damit sich nicht alles überdeckt */
@media (max-width: 700px) {
  .rf-nb { display: none; }
}

/* 2D: nur die großen Teile wiegen */
.becken.is-2d g.rf-b, .becken.is-2d .rf-blase, .becken.is-2d .rf-schwarm2 { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .rf-wiegen, .rf-faecher, g.rf-b, .rf-blase, .rf-schwarm2 { animation: none !important; }
}