/* ===== ANIMATIONS CSS ===== */

/* Trim slider — animation playhead */
@keyframes trimPlayhead {
  0% { left: 20%; }
  100% { left: 70%; }
}

.trim__playhead {
  animation: trimPlayhead 3s ease-in-out infinite alternate;
}

/* Trim handles — légère pulsation */
@keyframes trimPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 180, 37, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(231, 180, 37, 0); }
}

.trim__handle {
  animation: trimPulse 2s ease-in-out infinite;
}

/* Waveform bars — légère animation */
@keyframes waveformBounce {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.7); }
}

.trim__waveform span:nth-child(odd) {
  animation: waveformBounce 2s ease-in-out infinite;
}

.trim__waveform span:nth-child(even) {
  animation: waveformBounce 2s ease-in-out 0.3s infinite;
}

/* Transition thème smooth */
body,
.nav,
.demo__mockup,
.demo__titlebar,
.feature-card,
.format-card,
.privacy-card,
.pricing-card,
.trim__visual,
.trim__track,
.footer {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Hero visuals — transitions fluides */
.hero__window {
  transition: z-index 0s, opacity 0.6s ease, filter 0.6s ease;
}

/* Nav theme toggle — rotation */
.nav__theme-toggle {
  transition: transform 0.3s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav__theme-toggle:active {
  transform: rotate(30deg);
}

/* Feature cards — apparition au scroll (états initiaux gérés par GSAP) */
.feature-card,
.format-card,
.privacy-card,
.pricing-card {
  will-change: transform, opacity;
}

/* Section titles — apparition */
.section-title,
.section-subtitle {
  will-change: transform, opacity;
}

/* Hover cards subtle glow */
.feature-card:hover {
  box-shadow: 0 16px 48px rgba(231, 180, 37, 0.08);
}

[data-theme="light"] .feature-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
}

/* Theme section cards — transition */
.theme-section__card {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.theme-section__card:hover {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .theme-section__card:hover {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.1);
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

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

  html {
    scroll-behavior: auto;
  }
}