.o-scene {
  width: min(100%, 600px);
  aspect-ratio: 1 / 1;
  perspective: 1100px;
  position: relative;
  margin: 0 auto;
}
.o-stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(62deg) rotateZ(-12deg);
}
.o-unit, .o-enter, .o-bob, .o-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.o-unit.r2 { inset: 12%; }
.o-unit.r3 { inset: 24%; }

.o-enter {
  transform: rotateZ(-150deg) scale(.01);
  animation: o-enter 1.3s cubic-bezier(.5, 0, .15, 1) forwards;
}
.r1 .o-enter { animation-delay: 0s; }
.r2 .o-enter { animation-delay: .22s; }
.r3 .o-enter { animation-delay: .44s; }

.o-bob { animation: o-ripple 2.2s ease-in-out infinite; }
.r3 .o-bob { animation-delay: 1.6s; }
.r2 .o-bob { animation-delay: 1.97s; }
.r1 .o-bob { animation-delay: 2.34s; }

.o-flip { animation: cubic-bezier(.6, 0, .25, 1) infinite; }
.r1 .o-flip { animation-name: o-flip-a; animation-duration: 12s; animation-delay: 3.2s; }
.r2 .o-flip { animation-name: o-flip-b; animation-duration: 9.5s; animation-delay: 5.6s; }
.r3 .o-flip { animation-name: o-flip-c; animation-duration: 8s; animation-delay: 7.4s; }

.o-ringsvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.o-ring {
  fill: none;
  stroke: #0A0A0A;
  stroke-width: 1.6;
}
.o-orb {
  transform-origin: 100px 100px;
  animation: o-spin linear infinite;
}
.r1 .o-orb { animation-duration: 15s; }
.r2 .o-orb { animation-duration: 10s; animation-direction: reverse; }
.r3 .o-orb { animation-duration: 7s; }
.o-dot { fill: #0A0A0A; }
.o-dot.blue { fill: #0F6E56; }

.o-tag {
  position: absolute;
  left: -999px;
  top: -999px;
  transform: translate(-50%, -100%);
  font-family: var(--wp--preset--font-family--body-font, sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #0A0A0A;
  background: #FDF1EA;
  padding: 2px 8px;
  white-space: nowrap;
  opacity: 0;
  animation: o-fade .5s ease 1.8s forwards;
  pointer-events: none;
}

@keyframes o-enter { to { transform: rotateZ(0deg) scale(1); } }
@keyframes o-ripple {
  0%, 100% { transform: translateZ(0px); }
  20% { transform: translateZ(48px); }
  50% { transform: translateZ(-20px); }
  75% { transform: translateZ(8px); }
}
@keyframes o-flip-a { 0%, 55% { transform: rotate3d(1, .35, 0, 0deg); } 80%, 100% { transform: rotate3d(1, .35, 0, 360deg); } }
@keyframes o-flip-b { 0%, 58% { transform: rotate3d(.4, 1, 0, 0deg); } 84%, 100% { transform: rotate3d(.4, 1, 0, -360deg); } }
@keyframes o-flip-c { 0%, 60% { transform: rotate3d(1, -.6, 0, 0deg); } 86%, 100% { transform: rotate3d(1, -.6, 0, 360deg); } }
@keyframes o-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes o-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .o-enter, .o-bob, .o-flip, .o-orb { animation: none !important; }
  .o-enter { transform: none; }
  .o-tag { animation: none !important; opacity: 1 !important; }
}