/* ConvertFlow Animations */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  body {
    animation: pageIn 0.4s ease both;
  }

  @keyframes pageIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .hero__badge,
  .hero h1,
  .hero__subtitle,
  .hero__actions,
  .hero__stats {
    animation: riseIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .hero__badge { animation-delay: 0.05s; }
  .hero h1 { animation-delay: 0.12s; }
  .hero__subtitle { animation-delay: 0.2s; }
  .hero__actions { animation-delay: 0.28s; }
  .hero__stats { animation-delay: 0.36s; }

  .hero-mockup {
    animation: riseIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }

  @keyframes riseIn {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-in {
    animation: riseIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .animate-in[data-delay="1"] { animation-delay: 0.06s; }
  .animate-in[data-delay="2"] { animation-delay: 0.12s; }
  .animate-in[data-delay="3"] { animation-delay: 0.18s; }
  .animate-in[data-delay="4"] { animation-delay: 0.24s; }
  .animate-in[data-delay="5"] { animation-delay: 0.3s; }
  .animate-in[data-delay="6"] { animation-delay: 0.36s; }
  .animate-in[data-delay="7"] { animation-delay: 0.42s; }

  .section-header {
    animation: riseIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .tool-header,
  .workflow-steps,
  .upload-card {
    animation: riseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .workflow-steps { animation-delay: 0.06s; }
  .upload-card { animation-delay: 0.12s; }

  .workflow-step {
    transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
  }

  .workflow-step--active {
    animation: stepPop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes stepPop {
    0% { transform: scale(0.96); }
    60% { transform: scale(1.03); }
    100% { transform: scale(1); }
  }

  .card--interactive {
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  }

  .card--interactive:active {
    transform: translateY(-1px) scale(0.99);
  }

  .btn--primary:not(:disabled) {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  }

  .faq-item__content {
    display: grid;
    grid-template-rows: 0fr;
    padding: 0 var(--space-6);
    transition: grid-template-rows 0.3s ease, padding 0.3s ease;
    overflow: hidden;
  }

  .faq-item__content > p {
    overflow: hidden;
    margin-bottom: 0;
  }

  .faq-item--open .faq-item__content {
    grid-template-rows: 1fr;
    padding: 0 var(--space-6) var(--space-5);
  }

  .faq-item--open .faq-item__content > p {
    margin-bottom: 0;
  }

  .faq-item__trigger svg {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .download-area:not([hidden]) {
    animation: riseIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .file-info {
    animation: riseIn 0.3s ease both;
  }

  .global-drop-overlay__panel {
    animation: none;
  }

  .global-drop-overlay--active .global-drop-overlay__panel {
    animation: dropIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes dropIn {
    from {
      opacity: 0;
      transform: scale(0.92) translateY(12px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .nav-mobile {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-mobile-overlay {
    animation: fadeIn 0.25s ease both;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

@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; }

  .faq-item__content {
    display: none;
    padding: 0 var(--space-6) var(--space-5);
  }

  .faq-item--open .faq-item__content { display: block; }
}