:host {
  --slide-header-block-padding: 32px;
  --slide-footer-block: 16px 64px;
  --slide-footer-block-last-slide: 16px 40px;
  --slide-footer-navigation-hide-transition: var(--timing-fast);
  display: grid;
  block-size: 100%;
  inline-size: 100%;
  overflow: auto;
  padding: var(--spacing-padding-xxl);
  box-sizing: border-box;
  padding: var(--spacing-padding-xxxl);
}

.main {
  display: grid;
  place-self: center;
  inline-size: 100%;
  max-inline-size: 1100px;
  background-color: var(--color-accent-surface-elevation-1);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-accent-surface-elevation-1);
  inset-block-start: 0;
  transition: opacity var(--slide-fade-duration);
  opacity: 0;
  pointer-events: none;
}
.main--border-glow {
  animation: borderColorCycle 2s infinite;
}
.main--visible {
  pointer-events: visible;
  opacity: 1;
}

.slide {
  display: grid;
  block-size: 100%;
  grid-template-areas: "header header" "slide-wrapper slide-wrapper" "footer footer";
  grid-template-rows: max-content 1fr max-content;
}
.slide__header {
  padding-inline: var(--spacing-padding-xl);
  padding-block: var(--spacing-padding-xxl) var(--spacing-padding-xxl);
  display: flex;
  flex-direction: row-reverse;
  grid-area: header;
}
.slide__container {
  display: contents;
}
.slide__wrapper {
  display: grid;
  column-gap: 48px;
  grid-template-areas: "header header" "illustration copy" "footer footer";
  grid-template-rows: max-content 1fr max-content;
  grid-template-columns: 1fr 1fr;
  grid-area: slide-wrapper;
  transition: opacity var(--timing-fast);
  padding-inline: 48px;
  opacity: 1;
  z-index: 1;
}
.slide__wrapper:not(.active) {
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.slide__illustration {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-area: illustration;
  place-items: center;
  inline-size: 100%;
}
.slide__illustration-img {
  object-fit: contain;
  block-size: 100%;
  inline-size: 100%;
}
.slide__copy {
  grid-area: copy;
  place-self: center;
  justify-self: flex-start;
}
.slide__copy-container {
  display: grid;
  gap: var(--spacing-gap-xl);
  max-inline-size: calc(256px * 2 + 12px);
}
.slide__copy-header {
  display: grid;
  gap: var(--spacing-gap-xl);
}
.slide__copy-title {
  letter-spacing: 0.02em;
}
.slide__copy-description {
  display: grid;
  gap: var(--spacing-gap-xl);
}
.slide__list {
  display: grid;
  gap: var(--spacing-gap-xl);
  list-style: none;
  padding: 0;
  margin: 0;
}
.slide__word {
  transition: var(--timing-regular) opacity;
  opacity: 0;
}
.slide__word--visible {
  opacity: 1;
}
.slide__footer {
  grid-area: footer;
  display: grid;
  padding-block: var(--slide-footer-block);
  opacity: 1;
}
.slide__footer-last-slide {
  opacity: 0;
  transition: calc(var(--timing-fast) + 200ms) opacity;
  pointer-events: none;
  animation: footerPaddingBlockLastSlide var(--timing-regular) ease-out forwards calc(var(--timing-fast) + 200ms);
}
.slide__footer-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: var(--spacing-gap-xl);
  align-items: center;
  justify-content: center;
  transition: var(--timing-regular) opacity;
  opacity: 1;
}
.slide__footer-wrapper-hidden {
  opacity: 0;
}
.slide__dots {
  display: grid;
  gap: var(--spacing-gap-xs);
  list-style: none;
  padding: 0;
  margin: 0;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
}
.slide__dots-inactive {
  pointer-events: none;
}
.slide__dot {
  display: grid;
  padding: var(--spacing-padding-m);
  cursor: pointer;
}
.slide__dot::before {
  content: "";
  place-self: center;
  inline-size: 12px;
  block-size: 12px;
  border-radius: calc(12px / 2);
  background-color: var(--color-neutral-1500);
}
.slide__dot:hover::before {
  background-color: var(--color-icon-primary-hover);
}
.slide__dot.active {
  cursor: auto;
}
.slide__dot.active::before {
  background-color: var(--color-accent-primary-default);
  cursor: auto;
}
.slide__dot-inactive {
  pointer-events: none;
}

.close-icon {
  transition: all var(--timing-fast);
}
.close-icon:hover {
  filter: brightness(1.5);
}
.close-icon ch-image {
  --ch-image-size: 24px;
}

.start-button {
  justify-self: start;
  margin-block-start: var(--spacing-padding-xxl);
}

@keyframes ellipseFadeInOut {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes ellipseRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes polygonRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes borderColorCycle {
  0% {
    border-color: var(--color-accent-surface-elevation-1);
  }
  50% {
    border-color: var(--color-primary-800);
  }
  100% {
    border-color: var(--color-accent-surface-elevation-1);
  }
}
@keyframes footerPaddingBlockLastSlide {
  0% {
    padding-block: var(--slide-footer-block);
  }
  100% {
    padding-block: var(--slide-footer-block-last-slide);
  }
}
.fade-out {
  animation: fadeOut var(--timing-regular) forwards var(--timing-fast);
}