/* Timer Styles - Material Design 3 */

.timer-container {
  padding: 0;
}

.timer-display {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--spacing-lg) 0;
}

.timer-circle {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  filter: drop-shadow(0 2px 8px rgba(63, 81, 181, 0.3));
}

.progress-ring-bg {
  fill: none;
  stroke: var(--md-sys-color-surface-variant);
  stroke-width: 8;
}

.progress-ring-fill {
  fill: none;
  stroke: url(#gradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 596.9;
  stroke-dashoffset: 596.9;
  transition: stroke-dashoffset 1s linear;
}

.timer-time {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 40px;
  font-weight: 500;
  color: var(--md-sys-color-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Pulsing animation when timer is running */
.timer-circle.running .progress-ring {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    filter: drop-shadow(0 2px 8px rgba(63, 81, 181, 0.3));
  }
  50% {
    filter: drop-shadow(0 4px 16px rgba(63, 81, 181, 0.5));
  }
}

/* Responsive adjustments */
@media (max-width: 380px) {
  .timer-circle {
    width: 200px;
    height: 200px;
  }

  .progress-ring {
    width: 200px;
    height: 200px;
  }

  .progress-ring-bg,
  .progress-ring-fill {
    r: 90;
  }

  .timer-time {
    font-size: 36px;
  }
}

@media (min-width: 768px) {
  .timer-circle {
    width: 260px;
    height: 260px;
  }

  .progress-ring {
    width: 260px;
    height: 260px;
  }

  .timer-time {
    font-size: 48px;
  }
}