/* ===========================================
   Bilingual Journal — Animations
   =========================================== */

/* Button hover/tap */
.btn-hover {
  transition: opacity 0.2s ease, transform 0.1s ease;
}
.btn-hover:hover { opacity: 0.9; }
.btn-hover:active { transform: scale(0.98); }

/* Card hover/tap */
/* 背景色ベースの hover は card-surface（--bg-surface）と同値で無反応になるため border ベースへ統一 */
.card-hover {
  transition: border-color var(--motion-base) ease;
}
.card-hover:hover { background-color: var(--accent-cta-bg); }
.card-hover:active { opacity: 0.95; }

/* Screen transition */
.screen-enter {
  animation: screen-fade-in 200ms ease-out;
}

@keyframes screen-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sheet-overlay {
  animation: screen-fade-in 150ms ease-out;
}

.day-detail-sheet {
  animation: sheet-slide-up 200ms ease-out;
}

@media (min-width: 1024px) {
  .calendar-detail-pane .sheet-overlay,
  .calendar-detail-pane .day-detail-sheet {
    animation: none;
  }
}

@keyframes sheet-slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Pulse ring (mic button active) */
.pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--accent-cta);
  opacity: 0;
  animation: pulse-expand 1.5s infinite;
}

.pulse-ring-delayed {
  animation-delay: 0.5s;
  animation-duration: 2s;
}

@keyframes pulse-expand {
  0% {
    opacity: 0.15;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Waiting dots */
.waiting-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-muted);
  animation: dot-blink 1.2s infinite;
}

.waiting-dot:nth-child(2) { animation-delay: 0.2s; }
.waiting-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Waveform bar (base style, height set via JS) */
.waveform-bar {
  width: 3px;
  border-radius: 2px;
  transition: height 100ms ease;
}

/* Subtitle text confirmation */
.text-confirming { opacity: 0.6; }
.text-confirmed {
  opacity: 1;
  transition: opacity 150ms;
}

/* Loading spinner */
.loading-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-cta);
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

/* 日記生成中の進捗表示 */
.diary-generation-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-48) 0;
  text-align: center;
}

.diary-generation-animation {
  display: grid;
  place-items: center;
  margin-bottom: var(--space-8);
}

.diary-generation-animation > * {
  grid-area: 1 / 1;
}

.diary-generation-animation .loading-spinner {
  width: 88px;
  height: 88px;
  border-width: 3px;
  animation-duration: 1.2s;
}

.diary-generation-progress .waiting-dot {
  background-color: var(--accent-cta);
}

@media (prefers-reduced-motion: reduce) {
  .diary-generation-progress .loading-spinner,
  .diary-generation-progress .waiting-dot {
    animation: none;
  }
}