/* Adapted from the user-supplied 光泊科技-图形标志动效.zip.
   SVG positions, radii, gradients and choreography follow that source. */
.hero-mark {
  position: absolute;
  right: -1%;
  top: 50%;
  width: min(47vw, 560px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 48%, rgba(255,200,121,.11), transparent 38%);
}
.hero-mark svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.hero-mark::before {
  content: ''; position: absolute; width: 44%; aspect-ratio: 1; border-radius: 50%; left: 28%; top: 28%;
  background: conic-gradient(from 15deg, transparent, rgba(111,232,255,.13), transparent 28%, rgba(255,200,121,.18), transparent 58%);
  filter: blur(16px); opacity: 0; transform: scale(.45);
}
.hero-mark .beam,.hero-mark .orbit,.hero-mark .aura,.hero-mark .halo,.hero-mark .core-shine,.hero-mark .spark { opacity: 0; }
.hero-mark .beam,.hero-mark .aura,.hero-mark .halo,.hero-mark .core-shine { transform-origin: 160px 160px; }
.hero-mark .orbit { fill: none; stroke: rgba(111,232,255,.28); stroke-width: .6; stroke-dasharray: 1.4 6; }
.hero-mark .particle,.hero-mark .core { transform-box: fill-box; transform-origin: center; }
.hero-mark .particle.gold { fill: url(#linght-hero-gold); filter: url(#linght-hero-soft-glow); }
.hero-mark .particle.cyan { fill: url(#linght-hero-cyan); filter: url(#linght-hero-soft-glow); }
.hero-mark .particle.white { fill: url(#linght-hero-white); filter: url(#linght-hero-soft-glow); }
.hero-mark.motion-ready .particle,.hero-mark.motion-ready .core { opacity: 0; }
.hero-mark.logo-playing::before { animation: logo-ambient 3.8s ease-out forwards; }
.hero-mark.logo-playing .beam { animation: logo-beam 3.8s ease-in-out forwards; }
.hero-mark.logo-playing .orbit { animation: logo-orbit 3.8s ease-out forwards; }
.hero-mark.logo-playing .particle { animation: logo-gather 3.8s cubic-bezier(.18,.7,.22,1) forwards; }
.hero-mark.logo-playing .aura { animation: logo-aura 3.8s ease-out forwards; }
.hero-mark.logo-playing .core { animation: logo-core 3.8s cubic-bezier(.18,.7,.22,1) forwards; }
.hero-mark.logo-playing .core-shine { animation: logo-core-shine 3.8s ease-in-out forwards; }
.hero-mark.logo-playing .halo { animation: logo-halo 3.8s ease-out forwards; }
.hero-mark.logo-playing .spark { animation: logo-sparkle 3.8s ease-in-out forwards; }
.hero-mark.logo-playing .p1 { --dx: -76px; --dy: 42px; animation-delay: .04s; }
.hero-mark.logo-playing .p2 { --dx: 74px; --dy: 53px; animation-delay: .11s; }
.hero-mark.logo-playing .p3 { --dx: -66px; --dy: -58px; animation-delay: .19s; }
.hero-mark.logo-playing .p4 { --dx: 51px; --dy: -72px; animation-delay: .26s; }
.hero-mark.logo-playing .p5 { --dx: -96px; --dy: -13px; animation-delay: .33s; }
.hero-mark.logo-playing .p6 { --dx: 94px; --dy: -22px; animation-delay: .40s; }
.hero-mark.logo-playing .p7 { --dx: -31px; --dy: 80px; animation-delay: .48s; }
.hero-mark.logo-playing .p8 { --dx: 38px; --dy: 73px; animation-delay: .55s; }
.hero-mark.logo-playing .p9 { --dx: -12px; --dy: -86px; animation-delay: .63s; }
.hero-mark.logo-playing .p10 { --dx: 58px; --dy: 35px; animation-delay: .70s; }
.hero-mark.logo-playing .p11 { --dx: -64px; --dy: 17px; animation-delay: .77s; }
.hero-mark.logo-playing .p12 { --dx: 22px; --dy: -68px; animation-delay: .84s; }
.hero-mark.logo-playing .p13 { --dx: -41px; --dy: -57px; animation-delay: .91s; }

@keyframes logo-gather {
  0%,8% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(.16); }
  13% { opacity: 1; }
  28%,100% { opacity: 1; transform: translate(0,0) scale(1); }
}
@keyframes logo-core {
  0%,12% { opacity: 0; transform: scale(.12); }
  19% { opacity: 1; transform: scale(1.18); }
  29%,100% { opacity: 1; transform: scale(1); }
  48% { opacity: 1; transform: scale(1.035); }
}
@keyframes logo-halo {
  0%,15% { opacity: 0; transform: scale(.2); }
  22% { opacity: .78; transform: scale(.45); }
  42% { opacity: 0; transform: scale(1.3); }
  100% { opacity: 0; }
}
@keyframes logo-beam {
  0%,14% { opacity: 0; transform: scale(.5); }
  23% { opacity: .8; transform: scale(1); }
  35% { opacity: .16; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes logo-aura {
  0%,14% { opacity: 0; transform: scale(.1); }
  25% { opacity: .95; transform: scale(.74); }
  43% { opacity: .12; transform: scale(1.12); }
  66%,100% { opacity: 0; transform: scale(1.16); }
}
@keyframes logo-core-shine {
  0%,22% { opacity: 0; transform: translate(-12px,-8px) scale(.2); }
  31% { opacity: .9; transform: translate(1px,1px) scale(1); }
  44%,66% { opacity: .4; transform: translate(1px,1px) scale(1); }
  68%,100% { opacity: 0; transform: translate(6px,4px) scale(.4); }
}
@keyframes logo-ambient {
  0%,14% { opacity: 0; transform: scale(.25) rotate(-24deg); }
  28% { opacity: .7; transform: scale(1.05) rotate(8deg); }
  48% { opacity: .18; transform: scale(1.18) rotate(25deg); }
  61%,100% { opacity: 0; transform: scale(.9) rotate(36deg); }
}
@keyframes logo-orbit { 0%,24% { opacity: 0; } 36%,53% { opacity: .58; } 66%,100% { opacity: 0; } }
@keyframes logo-sparkle { 0%,26% { opacity: 0; } 37%,53% { opacity: .72; } 68%,100% { opacity: 0; } }

@media (max-width: 780px) {
  .hero-mark { position: relative; right: auto; top: auto; transform: none; width: min(82vw,330px); align-self: center; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark::before,.hero-mark * { animation: none !important; }
  .hero-mark.motion-ready .particle,.hero-mark.motion-ready .core { opacity: 1; transform: none; }
  .hero-mark .beam,.hero-mark .orbit,.hero-mark .aura,.hero-mark .halo,.hero-mark .core-shine,.hero-mark .spark { opacity: 0; }
}