.odnova-mandala {
  min-height:min(100svh,680px);
  display:grid;
  place-items:center;
  padding:40px 20px;
  background:#f8f5ed;
  --ink:var(--odnova-ink);
  --dot:var(--odnova-dot);
}

.odnova-mandala .stage {
  width:min(100%,490px);
  margin:auto;
}

.odnova-mandala .stage svg {
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

.mandala .from-center {
  transform-box: fill-box;
  transform-origin: center;
}

.mandala.is-playing .sun {
  animation: odnova-mandala-sun-in .9s ease-out both;
}

.mandala.is-playing .halo {
  animation: odnova-mandala-fade-in 1.2s ease-out both;
}

.mandala.is-playing .reveal {
  animation: odnova-mandala-reveal 3.25s cubic-bezier(.22, .55, .3, 1) .5s both;
}

.mandala.is-playing .petal-group {
  animation: odnova-mandala-fade-in 2s cubic-bezier(.2, .5, .3, 1) var(--delay, .7s) both;
}

.mandala.is-playing .axis {
  animation: odnova-mandala-fade-in 1s ease 2.3s both;
}

.mandala.is-playing .axis-dot {
  animation: odnova-mandala-fade-in .65s ease var(--delay, 2.5s) both;
}

.mandala .dawn-light {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.mandala.with-dawn.is-playing .dawn-light {
  animation: odnova-mandala-dawn-in 3.54s ease-in-out .4s both;
}

@keyframes odnova-mandala-dawn-in {
  0% {
    opacity: 0;
    transform: scale(.16);
  }
  25% {
    opacity: .4;
    transform: scale(.45);
  }
  55% {
    opacity: .62;
    transform: scale(.78);
  }
  75% {
    opacity: .3;
    transform: scale(.98);
  }
  100% {
    opacity: 0;
    transform: scale(1.07);
  }
}

.mandala.is-suspended * {
  animation-play-state: paused !important;
}

@keyframes odnova-mandala-sun-in {
  from {
    opacity: 0;
    transform: scale(.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes odnova-mandala-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mandala.is-playing * {
    animation: none !important;
  }
}

.mandala .reveal {
  r:390px;
  transform-box:view-box;
  transform-origin:218px 255px
}

@keyframes odnova-mandala-reveal {
  from {
    transform:scale(.0256410256)
  }
  to {
    transform:scale(1)
  }
}