/* ========================================
   Bíblia Comentada - Animations & Transitions
   ======================================== */

/* --- Splash Screen --- */
@keyframes splash-fade-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes splash-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes splash-fade-out {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}

.splash-enter { animation: splash-fade-in 600ms ease forwards; }
.splash-exit { animation: splash-fade-out 500ms ease forwards; }

/* --- Screen Transitions --- */
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slide-out-right {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.slide-in {
  animation: slide-in-right 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.slide-out {
  animation: slide-out-right 250ms ease-in forwards;
}

/* --- Cards & Interactive --- */
.card {
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.card:active {
  transform: scale(0.97);
}

.tab-item {
  transition: color 200ms ease;
}

.tab-item svg {
  transition: transform 200ms ease;
}

.tab-item.active svg {
  transform: scale(1.1);
}

/* --- Progress --- */
@keyframes progress-fill {
  from { width: 0; }
}

.progress-bar-fill {
  animation: progress-fill 800ms ease-out;
}

@keyframes circular-progress {
  from { stroke-dashoffset: 283; }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

/* --- Fade In / Out --- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes pulse-soft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes bounce-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* --- Bottom Sheet / Drawer / Modal --- */
@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

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

.bottom-sheet {
  animation: sheet-up 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-sheet.closing {
  animation: sheet-down 200ms ease-in forwards;
}

.modal-overlay {
  animation: backdrop-in 200ms ease;
}

.modal-overlay.closing {
  animation: backdrop-out 200ms ease forwards;
}

/* --- Audio Player Waveform --- */
@keyframes waveform {
  0%, 100% { height: 4px; }
  50% { height: var(--wave-height, 16px); }
}

.waveform-bar {
  animation: waveform var(--wave-duration, 1s) ease-in-out infinite;
}

.waveform-bar:nth-child(1)  { --wave-duration: 0.8s;  --wave-height: 20px; }
.waveform-bar:nth-child(2)  { --wave-duration: 1.1s;  --wave-height: 14px; }
.waveform-bar:nth-child(3)  { --wave-duration: 0.9s;  --wave-height: 22px; }
.waveform-bar:nth-child(4)  { --wave-duration: 1.3s;  --wave-height: 12px; }
.waveform-bar:nth-child(5)  { --wave-duration: 0.7s;  --wave-height: 24px; }
.waveform-bar:nth-child(6)  { --wave-duration: 1.0s;  --wave-height: 16px; }
.waveform-bar:nth-child(7)  { --wave-duration: 1.2s;  --wave-height: 20px; }
.waveform-bar:nth-child(8)  { --wave-duration: 0.85s; --wave-height: 26px; }
.waveform-bar:nth-child(9)  { --wave-duration: 1.15s; --wave-height: 14px; }
.waveform-bar:nth-child(10) { --wave-duration: 0.95s; --wave-height: 22px; }
.waveform-bar:nth-child(11) { --wave-duration: 1.05s; --wave-height: 18px; }
.waveform-bar:nth-child(12) { --wave-duration: 0.75s; --wave-height: 20px; }
.waveform-bar:nth-child(13) { --wave-duration: 1.25s; --wave-height: 12px; }
.waveform-bar:nth-child(14) { --wave-duration: 0.9s;  --wave-height: 16px; }
.waveform-bar:nth-child(15) { --wave-duration: 1.1s;  --wave-height: 10px; }

.audio-player.paused .waveform-bar {
  animation-play-state: paused;
}

/* --- Staggered List Items --- */
.stagger-item {
  opacity: 0;
  animation: fade-in-up 400ms ease forwards;
}

.stagger-item:nth-child(1)  { animation-delay: 50ms; }
.stagger-item:nth-child(2)  { animation-delay: 100ms; }
.stagger-item:nth-child(3)  { animation-delay: 150ms; }
.stagger-item:nth-child(4)  { animation-delay: 200ms; }
.stagger-item:nth-child(5)  { animation-delay: 250ms; }
.stagger-item:nth-child(6)  { animation-delay: 300ms; }
.stagger-item:nth-child(7)  { animation-delay: 350ms; }
.stagger-item:nth-child(8)  { animation-delay: 400ms; }
.stagger-item:nth-child(9)  { animation-delay: 450ms; }
.stagger-item:nth-child(10) { animation-delay: 500ms; }
.stagger-item:nth-child(11) { animation-delay: 550ms; }
.stagger-item:nth-child(12) { animation-delay: 600ms; }

/* --- Chips / Filters --- */
.chip {
  transition: background-color 200ms ease, color 200ms ease, transform 150ms ease;
}

.chip:active {
  transform: scale(0.95);
}

/* --- Streak / Gamification --- */
@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.05) rotate(-2deg); }
  75% { transform: scale(0.98) rotate(2deg); }
}

.streak-flame {
  animation: flame-flicker 2s ease-in-out infinite;
  display: inline-block;
}

@keyframes badge-unlock {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes heatmap-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.heatmap-cell {
  animation: heatmap-pop 300ms ease forwards;
}

/* --- Custom Scrollbar --- */
.screen-container::-webkit-scrollbar {
  width: 3px;
}

.screen-container::-webkit-scrollbar-thumb {
  background: #E5E7EB;
  border-radius: 3px;
}

.trails-scroll::-webkit-scrollbar,
.filter-chips::-webkit-scrollbar {
  display: none;
}

.trails-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.filter-chips {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}