/*
 * Source: assets/main.css lines 1393-1584
 * Purpose: Modal, stack cards, TOC, theme toggle, slider, glossary and voice states
 */

.modal-open {
  display: grid;
}

.modal-close {
  display: none;
}

.stack-cards {
  --stack-cards-gap: 24px;
}

.stack-cards__item {
  top: calc(var(--spacing) * 28);
  transform-origin: top;
  position: sticky;
  overflow: hidden;
}

@keyframes top-to-bottom {
  0% {
    top: -30%;
  }

  50% {
    top: 50%;
  }

  100% {
    top: 100%;
  }
}

.gradient-line-1 {
  animation: 6s linear infinite top-to-bottom;
}

.gradient-line-2 {
  animation: 6s linear .9s infinite top-to-bottom;
}

.gradient-line-3 {
  animation: 6s linear 1.5s infinite top-to-bottom;
}

.gradient-line-4 {
  animation: 6s linear 10ms infinite top-to-bottom;
}

.gradient-line-5 {
  animation: 6s linear 1.8s infinite top-to-bottom;
}

.gradient-line-6 {
  animation: 6s linear .6s infinite top-to-bottom;
}

.gradient-line-7 {
  animation: 6s linear 2s infinite top-to-bottom;
}

.gradient-line-8 {
  animation: 6s linear 1.2s infinite top-to-bottom;
}

.table-of-contents .table-of-list li {
  cursor: pointer;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
}

.table-of-contents .table-of-list li:hover span:first-child, .table-of-contents .table-of-list li:hover a span {
  color: var(--color-secondary);
}

:is(.table-of-contents .table-of-list li:hover span:first-child, .table-of-contents .table-of-list li:hover a span):where(.dark, .dark *) {
  color: var(--color-accent);
}

.table-of-contents .table-of-list li span:last-child {
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: .3s;
  --tw-ease: var(--ease-in-out);
  transition-duration: .3s;
  transition-timing-function: var(--ease-in-out);
}

.table-of-contents .table-of-list li:hover span:last-child {
  opacity: .6;
}

.hero-text-gradient {
  -webkit-text-fill-color: transparent;
  color: #0000;
  background-repeat: no-repeat;
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 5s linear infinite textAnimate;
  display: inline-block;
}

.hero-text-color-1 {
  background-image: linear-gradient(45deg, #a585ff, #ffc2ad, #a585ff);
}

.hero-text-color-2 {
  background-image: linear-gradient(45deg, #83e7ee, #f9eb57, #83e7ee);
}

@keyframes textAnimate {
  0% {
    background-position: 0%;
  }

  50% {
    background-position: 100%;
  }

  100% {
    background-position: 0%;
  }
}

#theme-toggle:before {
  height: 7px;
  width: calc(var(--spacing) * 3.5);
  --tw-gradient-position: circle at 0 100%, transparent 6px, var(--color-background-8) 7px;
  background-image: radial-gradient(var(--tw-gradient-stops, circle at 0 100%, transparent 6px, var(--color-background-8) 7px));
  --tw-content: "";
  content: var(--tw-content);
  background-repeat: no-repeat;
  background-size: 50% 100%;
  position: absolute;
  top: -3px;
  right: -4px;
  rotate: 90deg;
}

#theme-toggle:after {
  height: 7px;
  width: calc(var(--spacing) * 3.5);
  --tw-gradient-position: circle at 0 100%, transparent 6px, var(--color-background-8) 7px;
  background-image: radial-gradient(var(--tw-gradient-stops, circle at 0 100%, transparent 6px, var(--color-background-8) 7px));
  --tw-content: "";
  content: var(--tw-content);
  background-repeat: no-repeat;
  background-size: 50% 100%;
  position: absolute;
  bottom: -7px;
  right: -7px;
  rotate: none;
}

.dark #theme-toggle:before, .dark #theme-toggle:after {
  --tw-gradient-position: circle at 0 100%, transparent 6px, #fff 7px;
  background-image: radial-gradient(var(--tw-gradient-stops, circle at 0 100%, transparent 6px, #fff 7px));
}

.after {
  clip-path: inset(0 50% 0 0);
}

.slider-handle.no-transition, .slider-handle.no-transition .handle-circle {
  transition: none !important;
}

.glossary-card {
  display: none;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.voice-sample-item-active {
  background-color: var(--color-ns-linen);
}