/* Transitions.dev — Accordion expand. Native details remains the state owner. */
:root {
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Let the grid finish closing after the native open attribute is removed.
   JavaScript makes the closed panel inert and hides it from assistive tech. */
[data-disclosure-motion]::details-content {
  content-visibility: visible;
}

.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}

.t-acc[data-open="true"] > .t-acc-panel {
  grid-template-rows: 1fr;
  transition-duration: var(--acc-expand);
}

.t-acc-panel-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}

.t-acc[data-open="true"] > .t-acc-panel > .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition-duration: var(--acc-expand);
}

.t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}

.t-acc-chevron path {
  vector-effect: non-scaling-stroke;
}

.t-acc[data-open="true"] > summary .t-acc-chevron {
  transform: scaleY(-1);
}

[data-disclosure-immediate] > .t-acc-panel,
[data-disclosure-immediate] > .t-acc-panel > .t-acc-panel-inner,
[data-disclosure-immediate] > summary .t-acc-chevron {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-acc-panel,
  .t-acc-panel-inner,
  .t-acc-chevron {
    transition: none !important;
  }
}