/* ==========================================================================
   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).
   Ausgelagert aus style.css (Modularisierung, Issue #94).
   ========================================================================== */

/* --------------------------------------------------------------------------
   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);
}

/* Pfeil-Entities ← → aus System-Sans-Serif rendern.
   Verhindert vertikalen Versatz wenn Inter noch nicht geladen ist (FOUT)
   oder der Nutzer einen Serif-Body-Font hat – Sans-Serif-Glyphen haben
   konsistentere vertikale Metrics über alle Plattformen hinweg. */
#prev-btn,
#next-btn {
  font-family: sans-serif;
}

#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: opake Glas-Basis bleibt, Akzent nur als Tint drüber.
   --glass-bg statt transparent: Overflow-Buttons schweben frei über der Karte,
   kein Container-Hintergrund dahinter – transparent würde die Karte
   durchscheinen lassen und den Button fast unsichtbar machen. */
#controls-overflow button.active {
  background:   color-mix(in srgb, var(--btn-active-color, var(--color-accent)) 20%, var(--glass-bg));
  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));
  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 2.4s ease-in-out infinite;
}

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

@keyframes pulse-feature-btn {
  0%, 100% {
    background:   color-mix(in srgb, var(--btn-active-color, var(--color-accent))  6%, 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%, 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);
  }
}