/* Deliberate four-stage reveal, locked to the supplied night-sky reference. */
.calculation {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 39%, #efc6e72d 0, #121a2dcc 42%, #100b17f5 78%),
    linear-gradient(180deg, #0b1625d9, #1b111de8),
    url('/astro/reference-mountains.jpg') center 64% / cover no-repeat;
}

.calculation::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 17%, #bcdcff 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 39%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 58%, #dcb9ed 0 1px, transparent 1.5px);
  background-size: 137px 151px, 181px 173px, 223px 197px, 251px 229px;
  opacity: .28;
}

.calculation-chart,
.calculation p,
.calculation > span {
  position: relative;
  z-index: 1;
}

.calculation p {
  display: grid;
  min-height: 58px;
  margin-bottom: 8px;
  align-content: end;
  text-wrap: balance;
}

.calculation p::before {
  display: block;
  margin-bottom: 9px;
  color: #d9a9d0;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .22em;
}

.calculation[data-phase='0'] p::before { content: 'BERECHNUNG · 01 / 04'; }
.calculation[data-phase='1'] p::before { content: 'BERECHNUNG · 02 / 04'; }
.calculation[data-phase='2'] p::before { content: 'BERECHNUNG · 03 / 04'; }
.calculation[data-phase='3'] p::before { content: 'BERECHNUNG · 04 / 04'; }

.calculation.phase-change p,
.calculation.phase-change > span {
  animation: calculation-copy .38s cubic-bezier(.16, 1, .3, 1) both;
}

.calculation-ring {
  transition: border-color .42s ease-out, box-shadow .42s ease-out, filter .42s ease-out;
}

.calculation-dot {
  transition: background-color .42s ease-out, box-shadow .42s ease-out, opacity .42s ease-out;
}

.calculation[data-phase='0'] .ring-one {
  border-color: #f2cee99c;
  box-shadow: 0 0 28px #efc7e51a;
}

.calculation[data-phase='1'] .ring-two {
  border-color: #f1cbe8c2;
  box-shadow: 0 0 31px #efc7e527;
}

.calculation[data-phase='2'] .ring-three {
  border-color: #fff0fbcb;
  box-shadow: inset 0 0 24px #edc4e61c;
}

.calculation[data-phase='3'] .calculation-dot {
  background: #fff5fd;
  box-shadow: 0 0 0 5px #f6d9f02e, 0 0 24px #f9dff3;
}

.calculation[data-phase='3'] .calculation-star {
  filter: drop-shadow(0 0 12px #f4c5ec);
}

.calculation.is-active .ring-one { animation-duration: 1.05s; }
.calculation.is-active .ring-two { animation-duration: 1.1s; animation-delay: .22s; }
.calculation.is-active .ring-three { animation-duration: 1s; animation-delay: .44s; }
.calculation.is-active .calculation-chart::before { animation-duration: .8s; animation-delay: 1.84s; }
.calculation.is-active .calculation-chart::after { animation-duration: .8s; animation-delay: 2.02s; }
.calculation.is-active .dot-one { animation-delay: 1.05s; }
.calculation.is-active .dot-two { animation-delay: 1.35s; }
.calculation.is-active .dot-three { animation-delay: 1.65s; }
.calculation.is-active .calculation-star { animation-duration: .75s; animation-delay: 2.75s; }
.calculation.is-active .glyph-one { animation-delay: .65s; }
.calculation.is-active .glyph-two { animation-delay: 1.1s; }
.calculation.is-active .glyph-three { animation-delay: 1.55s; }

@keyframes calculation-copy {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
  .calculation {
    padding: 24px 18px;
    background-position: center 70%;
  }

  .calculation-chart {
    width: 162px;
    height: 162px;
    margin-bottom: 16px;
  }

  .calculation p {
    min-height: 55px;
    font-size: 19px;
  }

  .calculation > span {
    max-width: 300px;
    font-size: 12px;
  }

  .ring-one { inset: 8px; }
  .ring-two { inset: 27px; }
  .ring-three { inset: 50px; }
  .dot-one { top: 23px; left: 77px; }
  .dot-two { right: 27px; bottom: 41px; }
  .dot-three { left: 28px; bottom: 43px; }
  .glyph-one { top: 5px; left: 75px; }
  .glyph-two { right: 7px; bottom: 33px; }
  .glyph-three { left: 9px; bottom: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .calculation.phase-change p,
  .calculation.phase-change > span { animation: none; }
  .calculation-ring,
  .calculation-dot { transition: none; }
}