/* Keep the original scene intact; animate light and sand inside its glass. */
.sand-stream {
  position: absolute;
  left: 49.5%;
  top: 42%;
  width: 1px;
  height: 145px;
  pointer-events: none;
  --fall: 135px;
}
.sand-stream i {
  position: absolute;
  width: 3px;
  height: 5px;
  border-radius: 50%;
  background: #ffe6a0;
  box-shadow: 0 0 3px #9b6520, 0 0 7px #ffd76b;
  animation: living-grain var(--duration) linear var(--delay) infinite;
}
.glass-light {
  position: absolute;
  left: calc(50% - 87px);
  top: 17%;
  width: 174px;
  height: 120px;
  border-radius: 45% 45% 55% 55%;
  overflow: hidden;
  pointer-events: none;
}
.glass-light::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: linear-gradient(110deg, transparent 40%, #fff8d577 48%, transparent 56%);
  animation: glass-reflection 7s ease-in-out infinite;
}
.future-light {
  position: absolute;
  left: calc(50% - 54px);
  top: 58%;
  width: 108px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff9bd99, #edb34b44 45%, transparent 72%);
  pointer-events: none;
  animation: future-breathe 4s ease-in-out infinite;
}
.item.enter {
  animation: enter 1s ease both, float 5s ease-in-out 1s infinite;
}
.pedestal small {
  color: #102641;
  background: rgba(250, 253, 255, .96);
  border: 1px solid #c4b28c;
  box-shadow: 0 2px 12px #13263b18;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .09em;
  margin-top: 8px;
  white-space: normal;
  width: max-content;
  max-width: 88vw;
}
[data-theme=dark] .pedestal small {
  color: #fff1d1;
  background: rgba(7, 21, 38, .96);
  border-color: #b99a60;
}
@keyframes living-grain {
  0% { opacity: 0; transform: translate(0, 0) scale(.65); }
  12% { opacity: 1; }
  75% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--drift), var(--fall)) scale(.9); }
}
@keyframes glass-reflection {
  0%, 15% { opacity: 0; transform: translateX(-75%); }
  45% { opacity: .8; }
  75%, 100% { opacity: 0; transform: translateX(75%); }
}
@keyframes future-breathe {
  0%, 100% { opacity: .4; transform: scale(.9); }
  50% { opacity: .9; transform: scale(1.1); }
}
@media (max-width: 760px) {
  .sand-stream { top: 173px; --fall: 92px; }
  .sand-stream i { width: 2.5px; height: 4px; }
  .sand-stream i:nth-child(n+25) { display: none; }
  .glass-light { top: 68px; left: calc(50% - 59px); width: 118px; height: 100px; }
  .future-light { top: 236px; left: calc(50% - 44px); width: 88px; height: 34px; }
  .pedestal { top: 306px; }
  .pedestal small { font-size: 12px; padding: 8px 11px; margin-top: 7px; }
  .stage { padding-top: 420px; }
  .age { max-width: 52px; left: min(calc(50% + 80px), calc(100% - 58px)); }
}
.paused .glass-light::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .sand-stream, .glass-light, .future-light { display: none; }
  .item.enter { animation: none; }
}