/* timer.css — timer view */

/* ─── TIMER VIEW ─── */
#view-timer {
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
}

.timer-title { font-size: 13px; font-family: var(--font-ui); letter-spacing: 0.2em; color: var(--text-dim); }
.timer-ritual-name { font-family: var(--font-display); font-size: 36px; font-weight: 300; font-style: italic; color: var(--text); }

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

.timer-svg { position: absolute; inset: 0; }

.timer-bg-circle { fill: none; stroke: var(--text-muted); stroke-width: 2; opacity: 0.3; }

.timer-progress-circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 628;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 8px rgba(217,119,87,0.6));
  transform-origin: center;
  transform: rotate(-90deg);
}

.timer-time {
  font-size: 52px;
  font-weight: 300;
  font-family: var(--font-ui);
  color: var(--gold2);
  letter-spacing: -0.02em;
  position: relative; z-index: 1;
}

.timer-controls { display: flex; gap: 16px; }

.btn {
  padding: 12px 32px;
  border: 1px solid var(--border-bright);
  background: none;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.2s;
}

.btn:hover { background: var(--glow); border-color: var(--gold); }
.btn.primary { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.btn.primary:hover { background: var(--gold2); }

.timer-presets { display: flex; gap: 8px; }
.preset-btn {
  padding: 6px 16px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.preset-btn:hover, .preset-btn.active { border-color: var(--gold); color: var(--gold); }

/* pulse animation on timer running */
@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(217,119,87,0.5)); }
  50% { filter: drop-shadow(0 0 16px rgba(217,119,87,0.9)); }
}
.timer-running .timer-progress-circle { animation: pulse-glow 2s ease-in-out infinite; }