.aura-scene {
  position: relative;
  block-size: 100%;
  overflow: hidden;
  border-radius: clamp(1rem, 2vw, 1.5rem);
  background: radial-gradient(circle at 50% 50%, oklch(0.16 0.02 280), oklch(0.07 0.01 280));
  display: grid;
  place-items: center;
}

.aura-blob {
  position: absolute;
  inline-size: clamp(16rem, 40vw, 32rem);
  block-size: clamp(16rem, 40vw, 32rem);
  border-radius: 50%;
  filter: blur(clamp(40px, 6vw, 90px));
  mix-blend-mode: screen;
  opacity: 0.6;
  will-change: transform;
}

.aura-blob-1 {
  background: oklch(0.75 0.16 340);
  top: -10%;
  left: -8%;
  animation: aura-drift-1 22s ease-in-out infinite;
}

.aura-blob-2 {
  background: oklch(0.72 0.14 250);
  bottom: -12%;
  right: -6%;
  animation: aura-drift-2 26s ease-in-out infinite;
}

.aura-blob-3 {
  background: oklch(0.8 0.13 70);
  top: 8%;
  right: 4%;
  animation: aura-drift-3 30s ease-in-out infinite;
}

.aura-blob-4 {
  background: oklch(0.78 0.12 190);
  bottom: 5%;
  left: 6%;
  animation: aura-drift-4 24s ease-in-out infinite;
}

@keyframes aura-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8%, 10%) scale(1.15); }
}

@keyframes aura-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10%, -6%) scale(1.1); }
}

@keyframes aura-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6%, 8%) scale(0.9); }
}

@keyframes aura-drift-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10%, -8%) scale(1.05); }
}

.aura-time {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: clamp(0.4rem, 1vw, 0.8rem);
}

.aura-time-text {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(4rem, 13vw, 10rem);
  letter-spacing: 0.06em;
  color: oklch(0.97 0.01 90);
  text-shadow: 0 4px 40px oklch(0.1 0 0 / 0.5);
  font-variant-numeric: tabular-nums;
}

.aura-meridiem {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(0.9 0.02 90 / 0.75);
}

.aura-meridiem:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .aura-blob {
    animation: none;
  }
}