@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* Base overlay - positioned within .em-media (video container) */
.workout-cue-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;  /* Above video but within em-media */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;  /* Not skippable by default */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.workout-cue-overlay.visible {
  opacity: 1;
}

.workout-cue-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Video greyscale filter during cue - partial desaturation to maintain some color */
.em-player.cue-active,
.em-player.cue-active iframe {
  filter: grayscale(40%);
  transition: filter 0.3s ease;
}

/* === COUNTDOWN CUE STYLES === */

/* Countdown number styling - clean solid black */
.cue-number {
  font-family: 'Anton', sans-serif;
  font-size: clamp(120px, 25vw, 200px);
  color: #000;
  animation: cueFade 1s ease-out;
  line-height: 1;
}

/* === ANIMATIONS === */

@keyframes cueFade {
  0% { opacity: 0; transform: translateY(10px); }
  20% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 1; }
}

/* Future: fade out animation for prompts */
@keyframes cueFadeOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* === FUTURE CUE STYLES (placeholder) === */

/* Rest timer - will have different styling */
.cue-rest-timer {
  /* Future: smaller text, countdown seconds */
}

/* Text prompt - motivational messages */
.cue-prompt {
  /* Future: different font, animation */
}