/* css/crab.css
   Cluster "crab": Eine kleine rote Krabbe läuft gelegentlich über den Strand
   vorne links ins Bild und wieder hinaus. Das Markup liegt in der
   Strand-Ebene (index.html, #Strand), die Krabbe läuft also mit der Parallaxe
   mit. Es wird nur transform animiert. Ein Durchgang dauert 80 s, davon ist
   die Krabbe etwa 20 s im Bild (Rest: außerhalb links, unsichtbar).
   Alle Klassen beginnen mit "crab-". */

.crab-walk {
    transform: translate(-60px, 1075px);
    animation: crab-path 80s linear infinite;
    /* Negativer Start: Die erste Krabbe zeigt sich ca. 12 s nach dem Laden,
       nicht erst nach über einer Minute. */
    animation-delay: -24s;
}

/* Weg in Szenenkoordinaten: links außerhalb des Bildes (hinter der Palme)
   -> schräg nach vorne rechts auf den Sand -> auf demselben Weg zurück. */
@keyframes crab-path {
    0%,
    45% { transform: translate(-60px, 1075px); }
    57% { transform: translate(360px, 1170px); }
    69%,
    100% { transform: translate(-60px, 1075px); }
}

/* Farben */
.crab-shadow { fill: rgba(80, 60, 40, 0.25); }
.crab-body   { fill: #d4372c; }
.crab-belly  { fill: #a82a22; }
.crab-shine  { fill: #ef6a5c; opacity: 0.55; }
.crab-claw   { fill: #d4372c; }
.crab-notch  { fill: none; stroke: #8f2019; stroke-width: 1.6; stroke-linecap: round; }
.crab-eye    { fill: #fff; }
.crab-pupil  { fill: #222; }

.crab-leg,
.crab-arm,
.crab-stalk {
    fill: none;
    stroke: #b02b23;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crab-leg   { stroke-width: 2.2; }
.crab-arm   { stroke-width: 2.6; }
.crab-stalk { stroke-width: 1.2; }

/* Beine: Dreifuß-Gang. Die beiden Gruppen schwingen gegenläufig um die
   Hüfte (transform-origin je Bein inline in index.html); fill-box bezieht
   den Drehpunkt auf das einzelne Bein. */
.crab-leg {
    transform-box: fill-box;
    animation: crab-step 0.34s ease-in-out infinite alternate;
}

.crab-leg--b {
    animation-direction: alternate-reverse;
}

@keyframes crab-step {
    from { transform: rotate(-12deg); }
    to { transform: rotate(12deg); }
}

/* Der Körper wippt dazu minimal im Takt der Schritte. */
.crab-upper {
    animation: crab-bob 0.34s ease-in-out infinite alternate;
}

@keyframes crab-bob {
    from { transform: translateY(0); }
    to { transform: translateY(-1px); }
}

/* js/crab.js setzt .is-paused, solange die Krabbe nicht im Bild ist. Nur die
   Beine ruhen, der Weg läuft weiter, damit sie pünktlich wieder erscheint. */
.crab.is-paused * {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .crab-walk {
        display: none;
    }
}