/* ==================================================================
   CHIP-ANIMATIONEN — Fahndungsplan Saison 02
   ------------------------------------------------------------------
   Drei Vollbild-Spektakel beim Klick auf die Gefahren-Chips
   (Tauchen / Klettern / Graben). Reines Schau-Vergnuegen, keine
   Spielfunktion. Alle Klassen tragen das Praefix cfx-, die
   Effekt-Ebene (#cfx-ebene) wird von js/28-chip-animationen.js
   lazy erzeugt.

   Die Seiteneffekte (Tint, Neigung, Beben) wirken bewusst nur auf
   .rm-section: dort schaut der Nutzer hin, und die Sektion enthaelt
   keine fixed-Elemente, die ein Filter zum Springen bringen koennte
   (der Dampfer haengt am body).
   ================================================================== */

/* --- Chips klickbar machen --- */
.rm-chip { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rm-chip:focus-visible { outline: 2px dashed var(--stamp-red); outline-offset: 4px; }
.rm-chip.cfx-gesperrt { pointer-events: none; }

/* --- Seitenfaerbung je Effekt (nur waehrend cfx-uebergang weich) --- */
body.cfx-uebergang .rm-section {
  transition: filter 1.4s ease, transform 2.2s cubic-bezier(0.4, 0, 0.3, 1);
}
body.cfx-tauchen .rm-section {
  filter: saturate(0.75) hue-rotate(-14deg) brightness(0.8) blur(0.6px);
  animation: cfx-unterwasser-schwanken 3.4s ease-in-out infinite;
}
@keyframes cfx-unterwasser-schwanken {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(7px) rotate(0.25deg); }
}
body.cfx-klettern .rm-section {
  filter: saturate(0.85) brightness(1.04) contrast(0.98);
  transform: translateY(46px) rotate(-1.1deg) scale(1.015);
}
body.cfx-graben .rm-section { filter: sepia(0.28) brightness(0.94); }

/* --- Effekt-Ebene --- */
.cfx-ebene {
  position: fixed; inset: 0; z-index: 8000;
  pointer-events: none; overflow: hidden;
}

/* ==================================================
   TAUCHEN
   ================================================== */
.cfx-wasser {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  /* weiche, unaufgeregte Oberkante statt Wellenkamm */
  background: linear-gradient(180deg,
    rgba(38, 108, 122, 0) 0%,
    rgba(38, 108, 122, 0.42) 42px,
    rgba(10, 48, 64, 0.66) 100%);
  transition: height 1.7s cubic-bezier(0.3, 0.6, 0.3, 1), opacity 1.9s ease;
}
.cfx-wasser.cfx-voll { height: 118vh; }
/* Abgang: das Wasser laeuft nicht ab, es verliert sich einfach */
.cfx-wasser.cfx-verblasst { opacity: 0; }

.cfx-kaustik {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease;
  background:
    radial-gradient(ellipse 340px 200px at 22% 30%, rgba(190, 240, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 420px 240px at 74% 62%, rgba(190, 240, 255, 0.13), transparent 60%);
  mix-blend-mode: soft-light;
  animation: cfx-kaustik-wabern 5.5s ease-in-out infinite alternate;
}
.cfx-kaustik.cfx-an { opacity: 1; }
@keyframes cfx-kaustik-wabern {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 60px 34px, -70px -26px; }
}

.cfx-blase {
  position: absolute; bottom: -24px;
  border-radius: 50%;
  border: 1.5px solid rgba(220, 245, 255, 0.65);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0.06) 60%);
  animation: cfx-blase-steigen var(--d, 3.4s) ease-in forwards;
}
@keyframes cfx-blase-steigen {
  0%   { transform: translate(0, 0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: translate(var(--wx, 20px), -110vh) scale(1.05); opacity: 0; }
}

.cfx-schwimmer {
  position: absolute;
  animation: cfx-schwimmen-rechts var(--d, 6s) linear forwards;
}
.cfx-schwimmer img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 6px 12px rgba(4, 24, 32, 0.35));
  animation: cfx-schwimmer-wippen 2.2s ease-in-out infinite alternate;
}
.cfx-schwimmer.cfx-links { animation-name: cfx-schwimmen-links; }
.cfx-schwimmer.cfx-links img { transform: scaleX(-1); }
/* Start und Ziel liegen um die eigene Breite (--w) ausserhalb des
   Bildschirms, damit auf keinem Geraet ein Tier mitten im Bild
   erscheint oder verschwindet. */
@keyframes cfx-schwimmen-rechts { from { left: calc(var(--w, 200px) * -1.1); } to { left: 100vw; } }
@keyframes cfx-schwimmen-links  { from { left: 100vw; } to { left: calc(var(--w, 200px) * -1.1); } }
@keyframes cfx-schwimmer-wippen {
  from { margin-top: 0; }
  to   { margin-top: 14px; }
}

/* Abtauchen in die Tiefsee: alles verdunkelt sich zum Rand hin */
.cfx-dunkel {
  position: absolute; inset: 0; z-index: 6;
  opacity: 0; transition: opacity 2s ease;
  background: radial-gradient(ellipse 130% 100% at 50% 42%,
    rgba(2, 12, 20, 0.5) 0%,
    rgba(2, 10, 18, 0.72) 62%,
    rgba(1, 6, 12, 0.88) 100%);
}
.cfx-dunkel.cfx-an { opacity: 1; }

/* Tiefsee-Gaeste schwimmen ueber der Dunkelheits-Ebene, das Bild
   selbst wird abgedunkelt, nur die Laterne bleibt hell. */
.cfx-schwimmer.cfx-tiefsee { z-index: 7; }
.cfx-schwimmer.cfx-tiefsee img { filter: brightness(0.5) contrast(1.08) drop-shadow(0 6px 14px rgba(0, 8, 14, 0.5)); }
.cfx-schwimmer .cfx-lampe {
  position: absolute; top: 2%; right: -4%;
  width: 42%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 150, 0.55), rgba(244, 217, 122, 0.22) 40%, transparent 68%);
  filter: blur(2px);
  animation: cfx-lampe-pulsen 1.9s ease-in-out infinite alternate;
}
.cfx-schwimmer.cfx-links .cfx-lampe { right: auto; left: -4%; }
@keyframes cfx-lampe-pulsen {
  from { opacity: 0.55; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1.08); }
}

.cfx-pflanzen {
  position: absolute; bottom: -3vh;
  width: min(42vw, 430px);
  opacity: 0;
  transition: opacity 1.4s ease;
  transform-origin: bottom center;
  animation: cfx-pflanzen-wiegen 3.8s ease-in-out infinite alternate;
}
.cfx-pflanzen img { display: block; width: 100%; height: auto; }
.cfx-pflanzen.cfx-da { opacity: 0.92; }
.cfx-pflanzen.cfx-gespiegelt img { transform: scaleX(-1); }
@keyframes cfx-pflanzen-wiegen {
  from { transform: rotate(-1.4deg); }
  to   { transform: rotate(1.6deg); }
}

/* ==================================================
   KLETTERN
   ================================================== */
.cfx-frost {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease;
  background: linear-gradient(180deg, rgba(190, 214, 238, 0.24), rgba(190, 214, 238, 0.05) 55%, transparent);
}
.cfx-frost.cfx-an { opacity: 1; }

.cfx-wolke {
  position: absolute;
  width: var(--w, 420px);
  opacity: var(--o, 0.92);
  animation: cfx-wolke-ziehen var(--d, 7s) linear forwards;
}
.cfx-wolke img { display: block; width: 100%; height: auto; }
/* Wolkenbank dicht vor der Kamera: gross, weich, schnell */
.cfx-wolke.cfx-nah { filter: blur(3px) brightness(1.05); z-index: 6; }
@keyframes cfx-wolke-ziehen {
  from { left: 100vw; }
  to   { left: calc(var(--w, 400px) * -1.05); }
}

.cfx-flocke {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  animation: cfx-flocke-wehen var(--d, 2.4s) linear forwards;
}
@keyframes cfx-flocke-wehen {
  from { transform: translate(0, 0); opacity: 0.95; }
  to   { transform: translate(-110vw, var(--fy, 60px)); opacity: 0.4; }
}

.cfx-vogel {
  position: absolute;
  width: var(--w, 90px);
  animation: cfx-vogel-gleiten var(--d, 5s) linear forwards;
}
.cfx-vogel img {
  display: block; width: 100%; height: auto;
  animation: cfx-vogel-wippen 1.6s ease-in-out infinite alternate;
}
.cfx-vogel.cfx-links img { transform: scaleX(-1); }
.cfx-vogel.cfx-links { animation-name: cfx-vogel-gleiten-links; }
@keyframes cfx-vogel-gleiten { from { left: calc(var(--w, 90px) * -1.1); } to { left: 100vw; } }
@keyframes cfx-vogel-gleiten-links { from { left: 100vw; } to { left: calc(var(--w, 90px) * -1.1); } }
@keyframes cfx-vogel-wippen {
  from { margin-top: 0; }
  to   { margin-top: 18px; }
}

.cfx-gipfel {
  position: absolute; left: 50%; bottom: -46vh;
  width: min(78vw, 640px);
  transform: translateX(-50%);
  transition: bottom 1.8s cubic-bezier(0.3, 1.1, 0.4, 1);
  filter: drop-shadow(0 -6px 24px rgba(20, 30, 45, 0.35));
}
.cfx-gipfel.cfx-da { bottom: -4vh; }
.cfx-gipfel img { display: block; width: 100%; height: auto; }

/* ==================================================
   GRABEN
   ================================================== */
/* Nur die Fahndungsplan-Sektion bebt. Die Effekt-Ebene (und damit
   der Erdberg) bleibt ruhig, sonst huepft der Haufen bei jedem
   Stich mit. */
body.cfx-ruettelt .rm-section { animation: cfx-erd-ruetteln 0.32s ease; }
@keyframes cfx-erd-ruetteln {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-4px, 3px); }
  60% { transform: translate(3px, -3px); }
}

/* Der Haufen sitzt fest am Boden (transform-origin unten) und
   waechst pro Schaufelstich nur nach oben, kein Ueberschwingen. */
.cfx-haufen {
  position: absolute; left: 50%; bottom: -2vh;
  width: min(118vw, 1280px);
  transform: translateX(-50%) scale(0.85, 0);
  transform-origin: bottom center;
  transition: transform 0.55s cubic-bezier(0.3, 0.85, 0.35, 1);
  z-index: 3;
}
.cfx-haufen img { display: block; width: 100%; height: auto; }

/* Die Truhe sitzt im Haufenkamm. Der Kamm faellt an den Truhen-
   Raendern bis auf ~72% der Haufenhoehe ab, deshalb steht die
   Truhe mit ihrer Unterkante bei ~55% der Haufenhoehe: so steckt
   sie ueber die volle Breite im Erdreich, ohne zu schweben.
   (Haufenhoehe = 0.302 x Haufenbreite, Haufen-Unterkante -2vh) */
.cfx-truhe {
  position: absolute; left: 50%;
  bottom: calc(min(118vw, 1280px) * 0.166 - 2vh);
  width: min(48vw, 500px);
  transform: translate(-50%, 220%) scale(0.92);
  transition: transform 1.1s cubic-bezier(0.25, 1.1, 0.4, 1);
  z-index: 2;
}
.cfx-truhe img { display: block; width: 100%; height: auto; }
.cfx-truhe.cfx-da { transform: translate(-50%, 0) scale(1); }

.cfx-schaufel {
  position: absolute; right: 10vw; bottom: -2vh;
  width: min(20vw, 190px);
  transform: rotate(-34deg) translateY(118%);
  transform-origin: bottom right;
  z-index: 4;
  filter: drop-shadow(0 8px 16px rgba(30, 18, 8, 0.4));
}
.cfx-schaufel img { display: block; width: 100%; height: auto; }
.cfx-schaufel.cfx-sticht { animation: cfx-schaufel-stich 0.55s cubic-bezier(0.3, 0, 0.4, 1); }
/* Das Blatt sitzt im Bild unten, deshalb muss die Schaufel am
   Hoehepunkt komplett ueber den unteren Rand (negatives translateY),
   sonst sieht man nur den Stiel. */
@keyframes cfx-schaufel-stich {
  0%   { transform: rotate(-34deg) translateY(118%); }
  38%  { transform: rotate(-16deg) translateY(-6%); }
  62%  { transform: rotate(-22deg) translateY(5%); }
  100% { transform: rotate(-34deg) translateY(118%); }
}

.cfx-klumpen {
  position: absolute; bottom: 8vh;
  animation: cfx-klumpen-flug var(--d, 0.9s) cubic-bezier(0.25, 0.6, 0.6, 1) forwards;
  z-index: 3;
}
.cfx-klumpen img { display: block; width: 100%; height: auto; }
@keyframes cfx-klumpen-flug {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  45%  { transform: translate(var(--kx, 40px), -40vh) rotate(160deg); opacity: 1; }
  100% { transform: translate(calc(var(--kx, 40px) * 1.7), 10vh) rotate(340deg); opacity: 0; }
}

.cfx-staub {
  position: absolute; bottom: 4vh;
  width: 90px; height: 60px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(150, 120, 80, 0.4), transparent 70%);
  filter: blur(4px);
  animation: cfx-staub-puff 0.8s ease-out forwards;
  z-index: 3;
}
@keyframes cfx-staub-puff {
  from { transform: scale(0.4); opacity: 0.9; }
  to   { transform: scale(1.8) translateY(-30px); opacity: 0; }
}

.cfx-funke {
  position: absolute;
  color: #f4d97a; font-size: var(--fs, 22px); line-height: 1;
  text-shadow: 0 0 10px rgba(244, 217, 122, 0.9);
  animation: cfx-funke-blitzen 0.9s ease-in-out forwards;
  z-index: 5;
}
@keyframes cfx-funke-blitzen {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.15) rotate(24deg); }
}

/* --- Barrierefreiheit --- */
@media (prefers-reduced-motion: reduce) {
  body.cfx-tauchen .rm-section { animation: none; }
  .cfx-wasser { transition-duration: 0.3s; }
  .cfx-blase, .cfx-schwimmer, .cfx-wolke, .cfx-flocke, .cfx-klumpen, .cfx-vogel { animation-duration: 0.01s !important; }
  .cfx-schwimmer img, .cfx-vogel img, .cfx-pflanzen, .cfx-lampe { animation: none; }
}