/* Content stays visible without JavaScript. Movement is a progressive enhancement. */
.ritual,
.chapter,
.audience-card {
  transition: translate .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease, border-color .32s ease;
}

.ritual-icon,
.chapter-num,
.audience-symbol {
  transition: transform .38s cubic-bezier(.2, .8, .2, 1);
  transform-origin: center;
}

/* Separate translate lets the pointer response coexist with entry animations. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ritual:hover,
  .chapter:hover,
  .audience-card:hover {
    transform: none;
    translate: 0 -8px;
    box-shadow: 0 16px 30px -13px #78503138;
  }

  .ritual:hover .ritual-icon { transform: translateY(-3px) rotate(-6deg); }
  .chapter:hover .chapter-num { transform: rotate(-9deg) scale(1.08); }
  .audience-card:hover .audience-symbol { transform: translateX(4px); }
}

.chapter:focus-within,
.audience-card:focus-within {
  box-shadow: 0 8px 22px -10px #78503130;
}

/* Keep the disclosure control stable and make its state change visible. */
.audience-more > span[aria-hidden='true'] {
  display: inline-block;
  margin-left: 6px;
  font-size: 17px;
  line-height: 1;
  transition: transform .3s ease;
}

.chapter details summary::after,
.question summary::after {
  content: '+';
  transition: transform .3s ease;
}

.chapter details[open] summary::after,
.question[open] summary::after {
  content: '+';
  transform: rotate(45deg);
}

.audience-card[open] .audience-more > span[aria-hidden='true'] { transform: rotate(45deg); }

.chapter details[data-motion-state='closed'] summary::after,
.question[data-motion-state='closed'] summary::after,
.audience-card[data-motion-state='closed'] .audience-more > span[aria-hidden='true'] {
  transform: rotate(0);
}

@media (prefers-reduced-motion: reduce) {
  .ritual,
  .chapter,
  .audience-card,
  .ritual-icon,
  .chapter-num,
  .audience-symbol,
  .audience-more > span[aria-hidden='true'],
  .chapter details summary::after,
  .question summary::after {
    animation: none !important;
    transition: none !important;
    translate: none !important;
  }
}