/* ==========================================================================
   EWB Radar -- buttons.css
   Gemeinsame Control-Button-Basis (#prev/#next, Feature-Buttons in #controls
   und #right-controls), Hover/Active-Zustände, generischer Aktiv-Zustand,
   Overflow-Active sowie Pulse-Animation (pulse-feature-btn).
   Die Leisten selbst -- Lage, Hintergrund, Anordnung -- stehen in controls.css
   und right_controls.css; hier steht nur, wie ein Button darin aussieht.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gemeinsame Control-Button-Basis
   Gilt für: prev, next, alle Feature-Buttons in #controls (group "bottom")
   sowie alle Buttons in #right-controls.
   #play-btn ist explizit ausgenommen (:not(#play-btn)) -- er hat eigene Styles.
   -------------------------------------------------------------------------- */
#prev-btn,
#next-btn,
#controls button:not(#play-btn),
#right-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);

  background: var(--glass-bg-2);
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;

  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

/* Warndreieck im Button wirkt bei exakt mittiger Flex-Zentrierung optisch zu
   tief (das Ausrufezeichen zieht den Blick nach unten) -- rein optischer
   Versatz nach oben, nur hier im Button. Der Toast nutzt dasselbe SVG,
   bleibt aber unangetastet (dort wirkt die Zentrierung bereits stimmig). */
#alerts-btn svg {
  position: relative;
  top: -3px;
}

#prev-btn:hover,
#next-btn:hover,
#controls button:not(#play-btn):hover,
#right-controls button:hover {
  background: var(--color-accent-dim);
  border-color: rgba(57, 208, 216, 0.30);
  color: var(--color-accent);
  transform: scale(1.06);
}

#prev-btn:active,
#next-btn:active,
#controls button:not(#play-btn):active,
#right-controls button:active {
  transform: scale(0.96);
  background: var(--color-accent-dim);
}

/* --------------------------------------------------------------------------
   Generischer Aktiv-Zustand für Feature-Buttons.

   JS setzt --btn-active-color via style.setProperty() direkt auf dem
   Button-Element (aus features[key].active_color). color-mix() baut daraus
   die nötigen Transparenzstufen -- kein hardcoded rgba() mehr nötig.
   Fallback: --color-accent (Cyan-Teal), falls kein active_color gesetzt ist.

   Gilt für Buttons in #controls UND #right-controls.

   transform: scale(0.97) statt none -- verhindert abrupten Layout-Sprung
   beim Wechsel zwischen hover (scale 1.06) und aktivem Zustand.
   -------------------------------------------------------------------------- */

/* active/hover -- Bottom-Bar + Right-Controls: Akzent-Tint über transparenter Basis.
   transparent passt hier, da der Controls-Bar- bzw. Right-Controls-Container
   den Hintergrund liefert. */
#controls button.active,
#right-controls button.active {
  background:   color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 12%, transparent);
  border-color: color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 35%, transparent);
  color:        var(--btn-active-color, var(--color-accent));
  box-shadow:   inset 0 2px 4px rgba(0, 0, 0, 0.35);
  transform:    scale(0.97);
}

#controls button.active:hover,
#right-controls button.active:hover {
  background:   color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 22%, transparent);
  border-color: color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 55%, transparent);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 0 10px color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 18%, transparent);
  transform: none;
}

/* active/hover -- Overflow: geschlossene Fläche bleibt, Akzent nur als Tint
   drüber. --glass-bg-solid statt transparent: Overflow-Buttons stehen frei über
   der Karte, kein Container dahinter -- transparent ließe das Radarbild
   durchscheinen und den Knopf je nach Wetterlage anders aussehen. */
#controls-overflow button.active {
  background:   color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 20%, var(--glass-bg-solid));
  border-color: color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 50%, transparent);
  color:        var(--btn-active-color, var(--color-accent));
  box-shadow:   inset 0 2px 4px rgba(0, 0, 0, 0.35);
  transform:    scale(0.97);
}

#controls-overflow button.active:hover {
  background:   color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 30%, var(--glass-bg-solid));
  border-color: color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 70%, transparent);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    0 0 10px color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 25%, transparent);
  transform: none;
}

/* Pulse-Animation -- nur wenn data-pulse auf dem Button gesetzt ist.
   Das Attribut wird von JS aus features[key].pulse gesteuert.
   Beim Hover wird die Animation unterbrochen, damit kein Flackern entsteht. */
#controls button[data-pulse].active,
#right-controls button[data-pulse].active,
#controls-overflow button[data-pulse].active {
  animation: pulse-feature-btn var(--pulse-duration) ease-in-out infinite;
}

/* ⚠️ Der Puls läuft auch dann, wenn das Gerät weniger Bewegung verlangt.
   Die globale Regel in style.css drückt jede Animation auf 0.01ms; eine
   Endlos-Animation steht damit nicht still, sondern bleibt im schwächsten
   Bild ihrer eigenen Kurve stehen (6% Fläche, 20% Rand) -- der Knopf wirkt
   durchsichtig und meldet nichts. Ein aktiver Layer, der etwas anzeigt,
   braucht diese Meldung aber gerade auf dem Telefon, wo der Puls die einzige
   Auskunft über den laufenden Live-Modus ist.
   Bewusste Ausnahme, und nur für diesen einen Puls: alle übrigen Animationen
   und Übergänge bleiben gedämpft. */
@media (prefers-reduced-motion: reduce) {
  #controls button[data-pulse].active,
  #right-controls button[data-pulse].active,
  #controls-overflow button[data-pulse].active {
    animation-duration: var(--pulse-duration) !important;
  }
}

#controls button[data-pulse].active:hover,
#right-controls button[data-pulse].active:hover,
#controls-overflow button[data-pulse].active:hover {
  animation: none;
}

/* Layer ist AN, kann aber nichts zeichnen -- gesetzt von layer.js
   (data-nodata, siehe LIGHTNING_FEEDBACK). Der Knopf bleibt aktiv, verliert
   aber seine Leuchtkraft: ein Layer über ruhigem Wetter und einer, dessen
   Quelle gerade nichts hergibt, sähen sonst gleich aus. Bewusst nur eine
   Dämpfung und kein eigenes Zeichen -- die Auskunft, WAS los ist, gibt der
   Toast, nicht der Knopf. */
#controls button[data-nodata="true"].active,
#right-controls button[data-nodata="true"].active,
#controls-overflow button[data-nodata="true"].active {
  opacity:   0.55;
  animation: none;
}

@keyframes pulse-feature-btn {
  0%, 100% {
    background:   color-mix(in srgb, var(--btn-active-color, var(--color-accent))  6%, var(--btn-pulse-base, transparent));
    border-color: color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 20%, transparent);
    box-shadow:   inset 0 2px 4px rgba(0, 0, 0, 0.35);
  }
  50% {
    background:   color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 20%, var(--btn-pulse-base, transparent));
    border-color: color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 50%, transparent);
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.35),
      0 0 8px color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 20%, transparent);
  }
}