/* A 15-second light cycle that follows the existing raster ring geometry. */
.h3-hero-art .orbit-animation {
  position: relative;
  z-index: 1;
  width: min(560px, 110%);
  max-width: none;
  aspect-ratio: 1230 / 1278;
  isolation: isolate;
  pointer-events: none;
  filter: drop-shadow(0 28px 46px rgb(26 0 63 / 20%));
}
.orbit-animation__visual {
  position: relative;
  width: 100%;
  height: 100%;
  animation: orbit-breathe 15s ease-in-out infinite;
}
.h3-hero-art .orbit-animation__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: none;
}
.orbit-animation__ring-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  -webkit-mask: url('/assets/hero-orbit.webp') center / 100% 100% no-repeat;
  mask: url('/assets/hero-orbit.webp') center / 100% 100% no-repeat;
}
.orbit-animation__lightpass {
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg 45deg, rgb(255 255 255 / 12%) 68deg, rgb(255 204 249 / 72%) 88deg, rgb(248 0 206 / 34%) 105deg, transparent 138deg 360deg);
  mix-blend-mode: screen;
  animation: orbit-lightpass 15s linear infinite;
}
.orbit-animation__sheen {
  position: absolute;
  inset: 0;
  background: url('/assets/hero-orbit.webp') center / 100% 100% no-repeat;
  filter: brightness(1.32) saturate(1.3);
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation-duration: 15s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.orbit-animation__sheen--top {
  -webkit-mask-image: radial-gradient(ellipse 30% 27% at 52% 31%, #000 4%, transparent 100%);
  mask-image: radial-gradient(ellipse 30% 27% at 52% 31%, #000 4%, transparent 100%);
  animation-name: orbit-top-light;
}
.orbit-animation__sheen--left {
  -webkit-mask-image: radial-gradient(ellipse 33% 29% at 29% 68%, #000 4%, transparent 100%);
  mask-image: radial-gradient(ellipse 33% 29% at 29% 68%, #000 4%, transparent 100%);
  animation-name: orbit-left-light;
}
.orbit-animation__sheen--right {
  -webkit-mask-image: radial-gradient(ellipse 33% 29% at 75% 68%, #000 4%, transparent 100%);
  mask-image: radial-gradient(ellipse 33% 29% at 75% 68%, #000 4%, transparent 100%);
  animation-name: orbit-right-light;
}
.orbit-animation__junction {
  position: absolute;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgb(255 244 253 / 76%) 0, rgb(248 0 206 / 28%) 28%, transparent 70%);
  filter: blur(14px);
  mix-blend-mode: screen;
  animation-duration: 15s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.orbit-animation__junction--crown { left: 42%; top: 31%; animation-name: orbit-top-light; }
.orbit-animation__junction--left { left: 33%; top: 38%; animation-name: orbit-left-light; }
.orbit-animation__junction--right { left: 51%; top: 38%; animation-name: orbit-right-light; }
.orbit-animation__junction--heart {
  left: 42%; top: 45%; width: 18%;
  background: radial-gradient(circle, rgb(255 231 252 / 45%) 0, rgb(194 232 18 / 16%) 34%, transparent 72%);
  animation-name: orbit-heart-light;
}
@keyframes orbit-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes orbit-lightpass { to { transform: rotate(360deg); } }
@keyframes orbit-top-light {
  0%, 34%, 100% { opacity: 0; }
  9%, 23% { opacity: .7; }
}
@keyframes orbit-left-light {
  0%, 32%, 68%, 100% { opacity: 0; }
  43%, 57% { opacity: .62; }
}
@keyframes orbit-right-light {
  0%, 65%, 100% { opacity: 0; }
  76%, 89% { opacity: .62; }
}
@keyframes orbit-heart-light {
  0%, 15%, 33%, 48%, 66%, 82%, 100% { opacity: .06; }
  9%, 41%, 75% { opacity: .64; }
}
@media (max-width: 640px) {
  .h3-hero-art .orbit-animation { width: 112%; }
  .orbit-animation__junction { filter: blur(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-animation__visual,
  .orbit-animation__lightpass,
  .orbit-animation__sheen,
  .orbit-animation__junction { animation: none; }
  .orbit-animation__sheen { opacity: 0; }
  .orbit-animation__lightpass { opacity: .15; transform: rotate(20deg); }
  .orbit-animation__junction { opacity: .08; }
}