/* Kodza — Show More
   Long content kept short until asked: a text cut by a soft fade, or a list that shows its
   first items (data-visible) and says how many are left. It opens at its real height, the
   fade melts away, the hidden items rise in turn and the button's words roll. Closing brings
   the top back into view if you had scrolled past it. With no more to show, no button.
   Everything is tuned with the --kz-more-* variables. */
.kodza-more {
  --kz-more-fg: #0a0a0a;
  --kz-more-muted: rgba(10, 10, 10, 0.64);
  --kz-more-line: rgba(10, 10, 10, 0.12);
  --kz-more-soft: rgba(10, 10, 10, 0.05);
  --kz-more-height: 9.6em;
  --kz-more-fade: 4em;
  --kz-more-width: auto; /* 100%: the content fills the width, for blocks (cards, a table) */
  --kz-more-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: grid;
  justify-items: start;
  gap: 14px;
  color: var(--kz-more-fg);
  font-size: 15px;
  line-height: 1.6;
}

/* The text, cut by a fade that melts away once open */
.kodza-more__content {
  width: var(--kz-more-width);
  max-height: var(--kz-more-height);
  margin: 0;
  overflow: hidden;
  color: var(--kz-more-muted);
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - var(--kz-more-fade)), transparent) top / 100% 100% no-repeat;
  mask: linear-gradient(to bottom, #000 calc(100% - var(--kz-more-fade)), transparent) top / 100% 100% no-repeat;
  transition: -webkit-mask-size 0.6s var(--kz-more-ease), mask-size 0.6s var(--kz-more-ease);
}

.kodza-more__content > p {
  margin: 0 0 0.8em;
  text-wrap: pretty;
}

.kodza-more.is-open .kodza-more__content,
.kodza-more.is-short .kodza-more__content {
  max-height: none;
  -webkit-mask-size: 100% 400%;
  mask-size: 100% 400%;
}

/* Closing: the fade comes back while the text folds */
.kodza-more.is-closing .kodza-more__content {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.kodza-more.is-short .kodza-more__toggle {
  display: none;
}

/* The list: the first items only, no fade */
.kodza-more--list .kodza-more__content {
  max-height: none;
  padding: 0;
  list-style: none;
  -webkit-mask: none;
  mask: none;
}

.kodza-more--list .kodza-more__content > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--kz-more-line);
  color: var(--kz-more-fg);
}

.kodza-more--list .kodza-more__content > li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.kodza-more--list .kodza-more__content > li.is-extra {
  display: none;
}

.kodza-more--list.is-open .kodza-more__content > li.is-extra {
  display: flex;
}

/* The button: its words roll, its chevron turns */
.kodza-more__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-left: -12px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--kz-more-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.kodza-more__toggle:hover {
  background: var(--kz-more-soft);
}

.kodza-more__toggle:focus-visible {
  outline: 2px solid var(--kz-more-fg);
  outline-offset: 2px;
}

.kodza-more__words {
  display: inline-grid;
  overflow: hidden;
}

.kodza-more__words > span {
  grid-area: 1 / 1;
  transition: transform 0.45s var(--kz-more-ease), opacity 0.25s ease;
}

.kodza-more__words > span:nth-child(2),
.kodza-more__toggle[aria-expanded="true"] .kodza-more__words > span:first-child {
  opacity: 0;
  transform: translateY(-110%);
}

.kodza-more__words > span:nth-child(2) {
  transform: translateY(110%);
}

.kodza-more__toggle[aria-expanded="true"] .kodza-more__words > span:nth-child(2) {
  opacity: 1;
  transform: none;
}

.kodza-more__toggle svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--kz-more-ease);
}

.kodza-more__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .kodza-more__content,
  .kodza-more__words > span,
  .kodza-more__toggle svg {
    transition-duration: 0.01ms !important;
  }
}

/* Theming example — on a dark background:
.dark-section .kodza-more {
  --kz-more-fg: #f2f2f0;
  --kz-more-muted: rgba(242, 242, 240, 0.64);
  --kz-more-line: rgba(255, 255, 255, 0.12);
  --kz-more-soft: rgba(255, 255, 255, 0.08);
}
*/