@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700;800;900&display=swap');

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --brand-orange: #E86024;
}

body {
  font-family: var(--font-sans);
}

.font-display {
  font-family: var(--font-display);
}

/* Custom transitions and states for simulator steps */
.step-container {
  display: none;
  animation: fadeIn 0.4s ease-out forwards;
}

.step-container.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Accordion transition helper */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-content.open {
  max-height: 500px;
}

/* Product cards filter transitions */
.product-card {
  transition: all 0.3s ease;
}

.product-card.hidden {
  display: none;
  opacity: 0;
  transform: scale(0.95);
}