/* Guild Salamander — smooth native <details> transitions (V4.4.9) */
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }

  details::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transform: translateY(-6px);
    transition:
      block-size .34s cubic-bezier(.22,1,.36,1),
      opacity .22s ease,
      transform .34s cubic-bezier(.22,1,.36,1),
      content-visibility .34s allow-discrete;
  }

  details[open]::details-content {
    block-size: auto;
    opacity: 1;
    transform: translateY(0);
  }
}

/* The trigger itself should also feel responsive instead of snapping. */
details > summary {
  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

/* Existing chevrons use the same timing as the content. */
.pack summary svg,
.match-chevron {
  transition: transform .34s cubic-bezier(.22,1,.36,1) !important;
}

/* Dota 2 hero-history block has no icon in its summary, so give it a subtle one. */
.hero-stats-collapsible > summary {
  position: relative;
  padding-right: 38px;
  list-style: none;
}
.hero-stats-collapsible > summary::-webkit-details-marker { display: none; }
.hero-stats-collapsible > summary::after {
  content: '⌄';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: 50% 50%;
  color: #b789d8;
  font-size: 18px;
  line-height: 1;
  transition: transform .34s cubic-bezier(.22,1,.36,1), color .22s ease;
}
.hero-stats-collapsible[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Respect the site's accessibility/effects switches. */
@media (prefers-reduced-motion: reduce) {
  details::details-content,
  details > summary,
  .pack summary svg,
  .match-chevron,
  .hero-stats-collapsible > summary::after {
    transition: none !important;
  }
}
html[data-effects="off"] details::details-content,
html[data-effects="off"] details > summary,
html[data-effects="off"] .pack summary svg,
html[data-effects="off"] .match-chevron,
html[data-effects="off"] .hero-stats-collapsible > summary::after {
  transition: none !important;
}