/* ===== CHECKPULSE ANIMATIONS ===== */
/* Sammelt reine UI-Animationen getrennt vom Hauptlayout */

/* ===== TRAINING COUNTDOWN ===== */

.training-countdown-overlay {
  --countdown-accent: var(--color-primary); /* Wird vor dem Start aus der gewählten Zielzone gesetzt */
  position: absolute; /* Legt den Countdown über den Player */
  inset: 0; /* Deckt die komplette Playerfläche ab */
  display: flex; /* Zentriert den Countdown-Inhalt */
  align-items: center; /* Zentriert vertikal */
  justify-content: center; /* Zentriert horizontal */
  background: rgba(0, 0, 0, 0.72); /* Dunkelt den Player modern ab */
  backdrop-filter: blur(8px); /* Gibt dem Overlay Tiefe */
  z-index: 50; /* Legt den Countdown über Player und HUD */
} /* Ende von .training-countdown-overlay */

.training-countdown-overlay[hidden] {
  display: none; /* Versteckt das Overlay sicher */
} /* Ende von .training-countdown-overlay[hidden] */

/* Im nativen und simulierten Fullscreen muss der Start-Countdown vor jedem
   HUD-Element liegen. Die Shell-Geometrie selbst bleibt unangetastet. */
.player-shell:is(:fullscreen, .is-simulated-fullscreen)
  .training-countdown-overlay:not([hidden]) {
  z-index: 2147483647 !important;
  pointer-events: auto;
  isolation: isolate;
}

.training-countdown-content {
  display: flex; /* Stapelt Text und Kreis */
  flex-direction: column; /* Ordnet Text und Zahl untereinander an */
  align-items: center; /* Zentriert alle Inhalte */
  gap: 1.25rem; /* Gibt Abstand zwischen Text und Countdown */
} /* Ende von .training-countdown-content */

.training-countdown-label {
  margin: 0; /* Entfernt Standardabstand */
  font-size: clamp(1.1rem, 3vw, 2rem); /* Skaliert responsiv */
  font-weight: 700; /* Macht den Text kräftig */
  letter-spacing: 0.08em; /* Gibt dem Text Kino-Feeling */
  text-transform: uppercase; /* Macht den Hinweis visuell klar */
  color: var(--countdown-accent); /* Verbindet den Start-Hinweis mit der Zielzone */
} /* Ende von .training-countdown-label */

.training-countdown-circle {
  width: clamp(160px, 28vw, 280px); /* Skaliert den Kreis responsiv */
  aspect-ratio: 1; /* Hält den Kreis rund */
  border-radius: 50%; /* Macht das Element rund */
  display: grid; /* Zentriert die Zahl im Kreis */
  place-items: center; /* Zentriert horizontal und vertikal */
  background: conic-gradient(
    var(--countdown-accent) 360deg,
    rgba(255, 255, 255, 0.18) 0deg
  ); /* Zeichnet den runden Countdown-Balken */
  box-shadow: 0 0 44px color-mix(in srgb, var(--countdown-accent) 42%, transparent); /* Gibt dem Kreis zonenfarbige Tiefe */
} /* Ende von .training-countdown-circle */

.training-countdown-circle.is-running {
  animation: countdownCircleDrain 1s linear forwards; /* Lässt den Kreis in einer Sekunde zurücklaufen */
} /* Ende von .training-countdown-circle.is-running */

.training-countdown-inner {
  width: 78%; /* Erstellt den inneren Kreis */
  aspect-ratio: 1; /* Hält den inneren Kreis rund */
  border-radius: 50%; /* Macht den inneren Kreis rund */
  display: grid; /* Zentriert die Zahl */
  place-items: center; /* Zentriert horizontal und vertikal */
  background: rgba(10, 10, 14, 0.92); /* Erzeugt den modernen Innenkreis */
} /* Ende von .training-countdown-inner */

.training-countdown-number {
  font-size: clamp(3rem, 10vw, 7rem); /* Macht die Zahl groß und responsiv */
  font-weight: 900; /* Macht die Zahl sehr kräftig */
  line-height: 1; /* Verhindert unnötige Höhe */
  color: var(--countdown-accent); /* Färbt Zahl beziehungsweise LOS wie die Zielzone */
  text-shadow: 0 0 28px color-mix(in srgb, var(--countdown-accent) 48%, transparent);
} /* Ende von .training-countdown-number */

.training-countdown-overlay.is-finished .training-countdown-number {
  font-size: clamp(2.4rem, 8vw, 5rem); /* Macht LOS groß, aber stabil */
} /* Ende von .training-countdown-overlay.is-finished .training-countdown-number */

@keyframes countdownCircleDrain {
  from {
    background: conic-gradient(
      var(--countdown-accent) 360deg,
      rgba(255, 255, 255, 0.18) 0deg
    ); /* Startet mit vollem Kreis */
  }

  to {
    background: conic-gradient(
      var(--countdown-accent) 0deg,
      rgba(255, 255, 255, 0.18) 0deg
    ); /* Endet mit leerem Kreis */
  }
} /* Ende von countdownCircleDrain */

/* ===== ENDE TRAINING COUNTDOWN ===== */

/* ===== BUTTON SHINE ===== */

.button-shine-once {
  position: relative; /* Macht den Button zum Bezugspunkt für den Lichtreflex */
  overflow: hidden; /* Verhindert, dass der Lichtreflex aus dem Button herausragt */
} /* Ende von button-shine-once */

.button-shine-once::after {
  content: ""; /* Erstellt den Lichtreflex */
  position: absolute; /* Positioniert den Reflex im Button */
  top: 0; /* Startet oben */
  left: -80%; /* Startet links ausserhalb des Buttons */

  width: 45%; /* Breite des Lichtreflexes */
  height: 100%; /* Nutzt die volle Buttonhöhe */

  background: linear-gradient(
    120deg,
    transparent,
    rgba(12, 186, 230, 0.75),
    transparent
  ); /* Türkiser Lichtreflex */

  transform: skewX(-22deg); /* Schräger Reflex wie bei Premium-UI */
  animation: buttonShineSweep 0.75s ease-out forwards; /* Lässt den Reflex einmal über den Button laufen */
} /* Ende von button-shine-once after */

.button-heartbeat-once {
  animation: buttonHeartbeat 1.2s ease-out; /* Lässt den Button mit einem natürlichen Doppelschlag reagieren */
} /* Ende von button-heartbeat-once */

@keyframes buttonShineSweep {
  from {
    left: -80%; /* Startet links ausserhalb */
  }

  to {
    left: 130%; /* Endet rechts ausserhalb */
  }
} /* Ende von buttonShineSweep */

@keyframes buttonHeartbeat {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(12, 186, 230, 0);
  }

  /* Warten bis der Shine vorbei ist */
  52% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(12, 186, 230, 0);
  }

  /* BUM */
  62% {
    transform: scale(1.06);
    box-shadow: 0 0 5px rgba(12, 186, 230, 0.13);
  }

  68% {
    transform: scale(0.96);
  }

  /* BUM */
  76% {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(12, 186, 230, 0.18);
  }

  84% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(12, 186, 230, 0);
  }
} /* Ende von buttonHeartbeat */

/* ===== ENDE BUTTON SHINE ===== */

/* ===== ENDE CHECKPULSE ANIMATIONS ===== */