/* ============================================================
   Ferment-Wiki · Ferment-Icons
   Layouts für die animierten SVGs aus assets/icons/ —
   generiert aus den Icon-Vorlagen via tools/extract-icons.mjs.

   Die Loop-Animationen (Blinzeln, Bläschen, Dampf) stecken in
   den SVG-Dateien selbst; hier liegen nur Platzierungs-Layouts,
   Hover-Akzente und der Hero-Rotator.
   ============================================================ */

/* ---------- Stadien-Streifen: vier Gläser je Ferment ---------- */

.icon-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}
@media (min-width: 720px) {
  .icon-strip { grid-template-columns: repeat(4, 1fr); }
}

.icon-stage {
  margin: 0;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}
.icon-stage .stage-art {
  width: 104px;
  height: 104px;
  transition: transform var(--motion-fast) var(--ease-emphasized);
}
.icon-stage:hover .stage-art { transform: translateY(-4px) rotate(-2deg); }
.icon-stage .stage-name {
  display: block;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}
.icon-stage .stage-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-muted);
}

/* ---------- Hero-Rotator: die fünf Fermente im Wechsel ---------- */

.icon-rotator {
  position: relative;
  width: 168px;
  height: 168px;
}
.icon-rotator img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: icon-cycle 20s linear infinite;
}
/* Sicherheitshalber: das erste Glas sichtbar schalten, falls Animationen
   verzögert starten (z. B. unter Last) — die Keyframes übersteuern es. */
.icon-rotator img:first-child { opacity: 1; }
.icon-rotator img:nth-child(1) { animation-delay: 0s; }
.icon-rotator img:nth-child(2) { animation-delay: -4s; }
.icon-rotator img:nth-child(3) { animation-delay: -8s; }
.icon-rotator img:nth-child(4) { animation-delay: -12s; }
.icon-rotator img:nth-child(5) { animation-delay: -16s; }
@keyframes icon-cycle {
  0%   { opacity: 0; transform: scale(.92); }
  3%   { opacity: 1; transform: scale(1); }
  17%  { opacity: 1; transform: scale(1); }
  21%  { opacity: 0; transform: scale(.92); }
  100% { opacity: 0; transform: scale(.92); }
}

/* ---------- Ferment-Kacheln auf Übersichtskarten ---------- */

.tile img { width: 44px; height: 44px; }
.tile .tile-art { transition: transform var(--motion-fast) var(--ease-emphasized); }
.link-card:hover .tile-art { transform: scale(1.1) rotate(-4deg); }

/* ---------- Icon in Wissens-Karten (z. B. Joghurt, Miso, Ingwer-Bug) ---------- */

.icon-note {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.icon-note .note-art {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
}
.icon-note p { margin: 0; }

/* ---------- Barrierefreiheit: Bewegung auf Wunsch reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  .icon-rotator img {
    animation: none;
    opacity: 0;
  }
  .icon-rotator img:first-child { opacity: 1; }
  .icon-stage:hover .stage-art,
  .link-card:hover .tile-art { transform: none; }
}