.sun-proof {
  min-height: 600svh;
  background: #fffcf7;
}
.sun-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.sun-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #594a34;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,228,170,.48), transparent 46%),
    linear-gradient(180deg, #fff6e8 0%, #fffcf7 52%, #f4ead6 100%);
}
.sun-bloom {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 2;
  width: min(72vw, 320px);
  height: 62vh;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity .8s ease, transform 1s ease, filter .8s ease;
}
.sun-bloom img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  transform: translateX(-50%);
}
.sun-aura {
  position: absolute;
  left: 50%;
  top: 65%;
  z-index: 1;
  width: min(82vw, 360px);
  height: min(82vw, 360px);
  border-radius: 50%;
  opacity: .7;
  transform: translate(-50%, -50%) scale(.9);
  background: radial-gradient(circle, rgba(255,244,202,.72), rgba(232,196,110,.14) 48%, transparent 70%);
  transition: top 1s ease, width 1s ease, height 1s ease, opacity .8s ease, transform 1s ease;
  pointer-events: none;
}
.sun-motes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.sun-motes i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: .85;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff9dc 0 18%, #e9c765 38%, rgba(229,191,92,.2) 68%, transparent 76%);
  box-shadow: 0 0 14px rgba(234,199,110,.66);
  transition: left 1s ease, top 1s ease, opacity .7s ease, transform 1s ease;
}
.sun-motes i:nth-child(1) { --x: 31%; --y: 62%; --size: 12px; }
.sun-motes i:nth-child(2) { --x: 42%; --y: 55%; --size: 9px; }
.sun-motes i:nth-child(3) { --x: 58%; --y: 57%; --size: 11px; }
.sun-motes i:nth-child(4) { --x: 68%; --y: 64%; --size: 8px; }
.sun-motes i:nth-child(5) { --x: 39%; --y: 70%; --size: 8px; }
.sun-motes i:nth-child(6) { --x: 61%; --y: 72%; --size: 10px; }
.sun-mark {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 4;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.45);
  background: repeating-conic-gradient(from 0deg, rgba(198,155,56,.72) 0 3deg, transparent 3deg 45deg);
  filter: drop-shadow(0 0 9px rgba(226,188,88,.55));
  transition: top .9s ease, opacity .7s ease, transform .9s ease;
  pointer-events: none;
}
.sun-mark::before {
  content: "";
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  background: rgba(255,252,247,.88);
}
.sun-mark i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: #e5bd56;
  box-shadow: 0 0 14px rgba(231,194,93,.84);
}
.sun-message {
  position: absolute;
  left: 24px;
  right: 24px;
  z-index: 5;
  max-width: 350px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(8px);
  text-align: center;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.85;
  letter-spacing: .05em;
  text-shadow: 0 0 18px rgba(255,252,247,.96);
  transition: opacity .55s ease, transform .7s ease;
  pointer-events: none;
}
.sun-message p {
  margin: 0;
}
.sun-message-born {
  top: 10%;
}
.sun-record {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 48%;
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
.sun-action,
.sun-value {
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .7s ease;
}
.sun-action {
  color: #66553b;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: .1em;
}
.sun-value {
  margin-top: 18px;
  color: #987126;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .12em;
}
.sun-message-meaning {
  top: 20%;
}
.sun-meaning-main {
  margin-top: 30px !important;
  font-size: 19px;
}
.sun-meaning-note {
  margin-top: 26px !important;
  color: #76664f;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.95;
  letter-spacing: .04em;
}

.sun-stage[data-sun="0"] .sun-bloom {
  opacity: 1;
}
.sun-stage[data-sun="1"] .sun-bloom {
  opacity: .25;
  transform: translateX(-50%) translateY(28px) scale(.94);
  filter: blur(1px);
}
.sun-stage[data-sun="1"] .sun-aura {
  top: 47%;
  width: 190px;
  height: 190px;
  opacity: .78;
  transform: translate(-50%, -50%) scale(1);
}
.sun-stage[data-sun="1"] .sun-motes i {
  left: 50%;
  top: 47%;
  opacity: .48;
  transform: translate(-50%, -50%) scale(.65);
}
.sun-stage[data-sun="1"] .sun-mark,
.sun-stage[data-sun="2"] .sun-mark,
.sun-stage[data-sun="3"] .sun-mark,
.sun-stage[data-sun="4"] .sun-mark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.sun-stage[data-sun="1"] .sun-message-born {
  opacity: 1;
  transform: none;
}
.sun-stage[data-sun="2"] .sun-bloom,
.sun-stage[data-sun="3"] .sun-bloom,
.sun-stage[data-sun="4"] .sun-bloom,
.sun-stage[data-sun="2"] .sun-aura,
.sun-stage[data-sun="3"] .sun-aura,
.sun-stage[data-sun="4"] .sun-aura,
.sun-stage[data-sun="2"] .sun-motes,
.sun-stage[data-sun="3"] .sun-motes,
.sun-stage[data-sun="4"] .sun-motes {
  opacity: 0;
}
.sun-stage[data-sun="2"] .sun-mark,
.sun-stage[data-sun="3"] .sun-mark {
  top: 38%;
}
.sun-stage[data-sun="2"] .sun-action,
.sun-stage[data-sun="3"] .sun-action,
.sun-stage[data-sun="3"] .sun-value {
  opacity: 1;
  transform: none;
}
.sun-stage[data-sun="4"] .sun-mark {
  top: 13%;
}
.sun-stage[data-sun="4"] .sun-message-meaning {
  opacity: 1;
  transform: none;
}

@media (min-width: 900px) {
  .sun-bloom { width: min(28vw, 360px); }
  .sun-message { max-width: 500px; font-size: 27px; }
  .sun-action { font-size: 24px; }
  .sun-value { font-size: 20px; }
  .sun-meaning-main { font-size: 23px; }
  .sun-meaning-note { font-size: 16px; }
}
@media (max-width: 430px) {
  .sun-message { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sun-bloom,
  .sun-aura,
  .sun-motes i,
  .sun-mark,
  .sun-message,
  .sun-action,
  .sun-value {
    transition: none;
  }
}