/**
 * This CSS was automatically generated from a source file.
 * Editing this file directly isn't recommended. Modifying the styles of this module can be done
 * with an external stylesheet attached to the page or module.
 */

@property --orbit {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}
@keyframes orbit {
  from {
    --orbit: 0turn;
    rotate: 0turn;
  }
  to {
    --orbit: 1turn;
    rotate: 1turn;
  }
}
@keyframes pulse {
  10% {
    scale: 0;
    opacity: 0;
  }
  40% {
    opacity: 0.3;
  }
  80% {
    opacity: 0.3;
  }
  95% {
    scale: 1;
    opacity: 0;
  }
}
.harmony-animation {
  --first-color: var(--palette-highlight-quaternary-100-color);
  --first-outer-color: var(--palette-highlight-quaternary-50-color);
  --second-color: var(--palette-highlight-tertiary-100-color);
  --second-outer-color: var(--palette-highlight-tertiary-50-color);
  --third-color: var(--palette-highlight-secondary-100-color);
  --third-outer-color: var(--palette-highlight-secondary-50-color);
  --final-color: var(--palette-highlight-primary-100-color);
  --final-outer-color: var(--palette-highlight-primary-50-color);
  --circle-color: var(--first-color);
  --outer-color: var(--first-outer-color);
  --orbit-duration: 30s;
  --logo-diameter: 174px;
  --pulse-diameter: 240px;
  --pulse-duration: 2s;
  --dots-diameter: 380px;
  --outer-diameter: 304px;
  --color-transition: 0.4s background-color ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .harmony-animation {
    --circle-color: var(--final-color);
    --outer-color: var(--final-outer-color);
    --outer-diameter: 888px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .harmony-animation[data-stage="1"] {
    --outer-diameter: 414px;
    --circle-color: var(--second-color);
    --outer-color: var(--second-outer-color);
  }
  .harmony-animation[data-stage="2"], .harmony-animation[data-stage="3"] {
    --outer-diameter: 536px;
    --circle-color: var(--third-color);
    --outer-color: var(--third-outer-color);
  }
  .harmony-animation.dots-done {
    --outer-diameter: 888px;
    --circle-color: var(--final-color);
    --outer-color: var(--final-outer-color);
  }
}
@media (min-width: 64rem) {
  .harmony-animation {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr minmax(500px, 1fr);
    gap: 60px;
  }
  .harmony-animation__canvas {
    grid-column: 2;
    grid-row: 1;
  }
  .harmony-animation__content {
    grid-column: 1;
    grid-row: 1;
  }
  .harmony-animation__content.is-visible {
    transition-delay: calc(var(--animation-delay) + var(--animation-duration));
  }
}
@media (min-width: 80rem) {
  .harmony-animation {
    gap: 108px;
  }
}
@media not screen and (min-width: 64rem) {
  .harmony-animation__canvas {
    margin-bottom: 40px;
  }
}
.harmony-animation__canvas {
  height: 627px;
  width: 100%;
  background-color: #F6F3EE;
  border-radius: 16px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.harmony-animation__dots, .harmony-animation__logo-wrapper {
  grid-column: 1;
  grid-row: 1;
}
.harmony-animation__dots {
  --turn: calc(1turn / var(--total-items));
  width: var(--dots-diameter);
  height: var(--dots-diameter);
  position: relative;
  z-index: 100;
}
@media (prefers-reduced-motion: no-preference) {
  .harmony-animation__dots {
    animation: orbit var(--orbit-duration) infinite linear;
  }
}
.harmony-animation__dots::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 1000px;
  z-index: 0;
  border: 1px solid;
}
@media (prefers-reduced-motion: no-preference) {
  .harmony-animation__dots::before {
    opacity: 0;
    transition: 0.4s 1s ease-out opacity;
  }
  .dots-done .harmony-animation__dots::before {
    opacity: 1;
  }
}
.harmony-animation__dot-wrapper {
  --orbit-position: calc(var(--turn) * var(--index));
  position: absolute;
  inset: 0;
  margin: auto;
  transform: rotate(var(--orbit-position)) translateY(calc(var(--dots-diameter) / 2));
}
.harmony-animation__dot {
  width: 20px;
  height: 20px;
  background-color: var(--circle-color);
  display: block;
  transition: var(--color-transition);
  position: relative;
  border-radius: 1000px;
}
@media (prefers-reduced-motion: no-preference) {
  .harmony-animation__dot {
    transform: translateX(-500px);
    transition: 1s transform cubic-bezier(0.33, 0.03, 0.22, 1.16);
  }
  .harmony-animation__dot.init {
    transform: none;
  }
}
.harmony-animation__dot-label {
  transform: translate(-50%, -50%) rotate(calc(1turn - var(--orbit) - var(--orbit-position)));
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  border-radius: 1000px;
  font-weight: bold;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .harmony-animation__dot-label {
    padding: 9px 18px;
    background-color: var(--circle-color);
    border-radius: 50px;
    color: white;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .harmony-animation__dot-label {
    max-width: 0;
    color: transparent;
    transition: 1s ease-out;
    transition-delay: 0.5s, 1s;
    transition-property: color, max-width, width, padding;
    overflow: hidden;
  }
  [data-stage="3"] .harmony-animation__dot-label {
    background-color: var(--circle-color);
    border-radius: 50px;
    max-width: 150px;
  }
  .dots-done .harmony-animation__dot-label {
    color: white;
    padding: 9px 18px;
  }
  @supports (width: calc-size(auto)) {
    .harmony-animation__dot-label {
      max-width: none;
      width: 0;
    }
    [data-stage="3"] .harmony-animation__dot-label {
      max-width: none;
      width: calc-size(auto);
    }
  }
}
.harmony-animation__logo-wrapper {
  position: relative;
  z-index: 0;
}
.harmony-animation__logo-wrapper::before, .harmony-animation__logo-wrapper::after {
  --offset: calc((var(--logo-diameter) - var(--diameter)) / 2);
  content: "";
  position: absolute;
  background-color: var(--circle-color);
  transform-origin: center;
  border-radius: 1000px;
  width: var(--diameter);
  height: var(--diameter);
  left: var(--offset);
  top: var(--offset);
  transition: var(--color-transition);
}
.harmony-animation__logo-wrapper::before {
  --diameter: var(--pulse-diameter);
  opacity: 0.3;
  z-index: 50;
}
@media (prefers-reduced-motion: no-preference) {
  .harmony-animation__logo-wrapper::before {
    opacity: 0;
  }
  .is-visible .harmony-animation__logo-wrapper::before {
    animation: pulse infinite var(--pulse-duration) 1s ease-out forwards;
  }
}
.harmony-animation__logo-wrapper::after {
  --diameter: var(--outer-diameter);
  background-color: var(--outer-color);
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .harmony-animation__logo-wrapper::after {
    scale: 0;
    opacity: 0;
    transition: 0.8s 0.4s ease-out, var(--color-transition);
  }
  .is-visible .harmony-animation__logo-wrapper::after {
    scale: 1;
    opacity: 1;
  }
}
.harmony-animation__logo {
  background-color: var(--circle-color);
  width: var(--logo-diameter);
  height: var(--logo-diameter);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1000px;
  position: relative;
  transition: var(--color-transition);
  z-index: 100;
}
@media (prefers-reduced-motion: no-preference) {
  .harmony-animation__logo {
    scale: 0.8;
    opacity: 0;
    transition: 0.4s 0.1s ease-out, var(--color-transition);
  }
  .is-visible .harmony-animation__logo {
    scale: 1;
    opacity: 1;
  }
}
.harmony-animation__benefits {
  list-style: none;
  padding: 0;
  margin-top: 30px;
  margin-bottom: 0;
}
.harmony-animation__benefits li {
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
  display: flex;
  align-items: center;
  gap: 16px;
}
.harmony-animation__benefits li + li {
  margin-top: 20px;
}
.harmony-animation .collapsible-content {
  --padding: 24px;
  padding-bottom: calc(var(--padding) - 8px);
}
.harmony-animation .collapsible-content__title-wrapper {
  padding-bottom: 8px;
}
.harmony-animation .collapsible-content__content {
  padding-bottom: 8px;
  padding-right: 40px;
}
.harmony-animation .collapsible-content__content > :first-child {
  margin-top: 0;
}
.harmony-animation .collapsible-content__title {
  padding-right: 20px;
}
.harmony-animation .collapsible-content__title::before, .harmony-animation .collapsible-content__title::after {
  transition: 0.2s opacity;
  width: 20px;
  height: 2px;
}