/* Comportamentos que na versão original vinham de React (framer-motion + Radix).
   Reimplementados em CSS/JS puro, mantendo o mesmo visual. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Reveal on scroll (equivalente ao whileInView do framer-motion) */
[data-reveal] {
  transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* Accordion do FAQ */
.md-faq-panel {
  height: 0;
  overflow: hidden;
  transition: height .28s cubic-bezier(.4, 0, .2, 1);
}

/* Dropdown de seleção (equivalente ao Radix Select) */
.md-select-menu {
  animation: md-select-in .12s ease-out;
}
@keyframes md-select-in {
  from { opacity: 0; transform: translateY(-.25rem) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.md-option:hover,
.md-option[data-active] {
  background: var(--accent);
  color: var(--accent-foreground);
}

/* Radio do formulário */
[data-radio-dot][data-state="checked"]::after {
  content: "";
  display: block;
  width: .5rem;
  height: .5rem;
  border-radius: 9999px;
  background: currentColor;
}

/* Estado de erro dos campos */
[aria-invalid="true"] {
  border-color: var(--destructive);
}