/*
 * Actual vanilla ports of 21st.dev components:
 * Interactive Hover Button — Dillion Verma / Magic UI, MIT.
 * Accordion and Animated Group — Julien Thibeaut / ibelick, MIT.
 * Original TSX, pinned provenance, source links and licenses: ./vendor21st/.
 * Keep vendor21st/magicui/LICENSE.md and vendor21st/motion-primitives/LICENCE.md.
 */

.primary.interactive-button {
  --ihb-fill: var(--copper, #c69355);
  --ihb-ink: var(--ink, #20251e);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 52px;
  border-radius: 6px;
  background: var(--ihb-ink);
  color: var(--paper, #f4efe5);
  transition: transform 180ms ease;
}
.primary.interactive-button:hover { background: var(--ihb-ink); }
.interactive-button .ihb-base {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
}
.interactive-button .ihb-dot {
  z-index: -1;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ihb-fill);
  transition: transform 300ms ease;
}
.interactive-button .ihb-label {
  display: inline-block;
  transition: transform 300ms ease, opacity 300ms ease;
}
.interactive-button .ihb-hover {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: inherit;
  color: var(--ihb-ink);
  opacity: 0;
  transform: translateX(48px);
  transition: transform 300ms ease, opacity 300ms ease;
  pointer-events: none;
}
.primary.interactive-button .ihb-hover .icon {
  filter: brightness(0);
  transform: none;
}
.primary.interactive-button:focus-visible { outline: 2px solid var(--copper-dark, #775022); outline-offset: 5px; }
.interactive-button:not(:disabled):focus-visible .ihb-dot { transform: scale(180); }
.interactive-button:not(:disabled):focus-visible .ihb-label { transform: translateX(48px); opacity: 0; }
.interactive-button:not(:disabled):focus-visible .ihb-hover { transform: translateX(0); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .interactive-button:not(:disabled):hover .ihb-dot { transform: scale(180); }
  .interactive-button:not(:disabled):hover .ihb-label { transform: translateX(48px); opacity: 0; }
  .interactive-button:not(:disabled):hover .ihb-hover { transform: translateX(0); opacity: 1; }
}

/* Native details remains operable without this module; no global hidden state. */
:is(details[data-accordion], details.plan-details) > summary { min-height: 56px; }
:is(details[data-accordion], details.plan-details).accordion-is-animating { overflow: hidden; }
.accordion-panel { display: flow-root; }
/* Component defaults stay below the chapter's own responsive insets. */
:where(.faq-list) .accordion-panel > p {
  max-width: 680px;
  padding: 0 40px 22px 0;
  color: var(--muted, #686b61);
  font-size: 14px;
  line-height: 1.7;
}
.accordion-panel > :last-child { margin-bottom: 0; }

/* Reveals use WAAPI only after successful observation; base content stays visible. */
@media (prefers-reduced-motion: reduce) {
  .interactive-button .ihb-dot,
  .interactive-button .ihb-label,
  .interactive-button .ihb-hover { transition: none; }
  .interactive-button .ihb-label,
  .interactive-button .ihb-hover { transform: none !important; }
}
@media (forced-colors: active) {
  .primary.interactive-button { border: 1px solid ButtonText; }
  .interactive-button .ihb-dot,
  .interactive-button .ihb-hover { display: none; }
  .interactive-button .ihb-label { opacity: 1 !important; transform: none !important; }
}