/* Smooth opening and closing for AONOMA recruit tabs / FAQ accordions. */
.aonoma-recruit,
.aonoma-recruit-detail {
  interpolate-size: allow-keywords;
}

.aonoma-recruit details,
.aonoma-recruit-detail details {
  overflow: clip;
}

.aonoma-recruit details > summary,
.aonoma-recruit-detail details > summary {
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 320ms ease,
    border-color 320ms ease,
    color 320ms ease;
}

.aonoma-recruit details > summary svg,
.aonoma-recruit-detail details > summary svg {
  transition: transform 520ms cubic-bezier(0.2, 0.72, 0.18, 1);
}

.aonoma-recruit details > summary + *,
.aonoma-recruit-detail details > summary + * {
  transform-origin: top;
  will-change: opacity, transform, block-size, max-height;
}

@supports selector(::details-content) {
  .aonoma-recruit details::details-content,
  .aonoma-recruit-detail details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition:
      block-size 560ms cubic-bezier(0.2, 0.72, 0.18, 1),
      opacity 420ms ease,
      transform 520ms cubic-bezier(0.2, 0.72, 0.18, 1),
      content-visibility 560ms allow-discrete;
  }

  .aonoma-recruit details[open]::details-content,
  .aonoma-recruit-detail details[open]::details-content {
    block-size: auto;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@supports not selector(::details-content) {
  .aonoma-recruit details[open] > summary + *,
  .aonoma-recruit-detail details[open] > summary + * {
    animation: aonoma-accordion-panel-in 520ms cubic-bezier(0.2, 0.72, 0.18, 1) both;
  }
}

@keyframes aonoma-accordion-panel-in {
  0% {
    opacity: 0;
    transform: translate3d(0, -7px, 0);
    max-height: 0;
    clip-path: inset(0 0 100% 0);
  }
  54% {
    opacity: 0.86;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    max-height: 960px;
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aonoma-recruit details::details-content,
  .aonoma-recruit-detail details::details-content {
    transition: none !important;
  }

  .aonoma-recruit details[open] > summary + *,
  .aonoma-recruit-detail details[open] > summary + * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    max-height: none !important;
    clip-path: none !important;
  }
}