/* Decorative, indeterminate loading: no synthetic percentage or extra wait. */
.ga-loading-engine {
  --ga-loading-size: 128px;
  --ga-loading-light: #82e6ef;
  position: relative;
  display: grid;
  flex: none;
  width: var(--ga-loading-size);
  height: var(--ga-loading-size);
  place-items: center;
  isolation: isolate;
  pointer-events: none;
}
.ga-loading-engine--hero { --ga-loading-size: clamp(128px,36vmin,176px); }
.ga-loading-engine--page { --ga-loading-size: clamp(88px,24vmin,128px); }
.ga-loading-engine::before {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(63 185 219 / 22%), rgb(55 136 172 / 8%) 48%, transparent 70%);
  content: "";
  animation: ga-loading-breathe 2.4s ease-in-out infinite;
}
.ga-loading-engine__dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.ga-loading-engine__track { stroke: rgb(159 190 191 / 23%); stroke-width: 5; }
.ga-loading-engine__ticks { stroke: #c3a979; stroke-width: 1.3; stroke-dasharray: .3 3.0333; opacity: .65; }
.ga-loading-engine__charge {
  stroke: var(--ga-loading-light);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  filter: drop-shadow(0 0 3px rgb(94 218 238 / 70%));
  animation: ga-loading-charge 4.8s ease-in-out infinite;
}
.ga-loading-engine__spark {
  fill: #f8e7bd;
  filter: drop-shadow(0 0 3px #8cecff);
  transform-origin: 80px 80px;
  animation: ga-loading-spark 4.8s ease-in-out infinite;
}
.ga-loading-engine__gear {
  position: absolute;
  width: 69%;
  height: 69%;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgb(0 0 0 / 45%));
  animation: ga-loading-turn 4.8s linear infinite;
}
.ga-loading-engine__hub {
  position: absolute;
  width: 32%;
  height: 32%;
  border: 1px solid #b29254;
  border-radius: 50%;
  background: radial-gradient(circle, #173f4b, #09131a 65%);
  box-shadow: inset 0 0 8px #000, 0 0 12px rgb(60 195 222 / 24%);
}
.ga-loading-engine__crystal {
  position: absolute;
  width: 33%;
  height: 46%;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgb(65 192 238 / 65%));
  animation: ga-loading-crystal 2.4s ease-in-out infinite;
}
.initial-loading-screen:has(.ga-loading-engine) { overflow-y: auto; align-items: safe center; }
.initial-loading-content > .ga-loading-engine { margin-bottom: 4px; }
.abyss-page-loading-console:has(> .ga-loading-engine) { gap: 14px; padding-block: 24px; }
.abyss-page-loading-console:has(> .ga-loading-engine) > p { margin: 0; }
@keyframes ga-loading-turn { to { transform: rotate(360deg); } }
@keyframes ga-loading-charge {
  0% { stroke-dasharray: 0 100; opacity: .6; }
  15% { stroke-dasharray: 18 100; opacity: 1; }
  65% { stroke-dasharray: 72 100; opacity: 1; }
  88% { stroke-dasharray: 100 100; opacity: 1; stroke: #cceff0; }
  95% { stroke-dasharray: 100 100; opacity: 0; }
  100% { stroke-dasharray: 0 100; opacity: 0; }
}
@keyframes ga-loading-spark {
  0% { transform: rotate(0deg); opacity: .6; }
  15% { transform: rotate(64.8deg); opacity: 1; }
  65% { transform: rotate(259.2deg); opacity: 1; }
  88% { transform: rotate(360deg); opacity: 1; }
  95% { transform: rotate(360deg); opacity: 0; }
  100% { transform: rotate(0deg); opacity: 0; }
}
@keyframes ga-loading-breathe { 50% { opacity: .65; transform: scale(.92); } }
@keyframes ga-loading-crystal { 50% { transform: translateY(-2px); filter: drop-shadow(0 0 11px rgb(91 214 255 / 85%)); } }
@media (max-height: 500px) {
  .ga-loading-engine--hero { --ga-loading-size: 96px; }
  .ga-loading-engine--page { --ga-loading-size: 72px; }
  .initial-loading-content:has(.ga-loading-engine) { gap: 12px; }
  .abyss-page-loading-console:has(> .ga-loading-engine) { gap: 10px; padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ga-loading-engine::before,
  .ga-loading-engine * { animation: none; }
  .ga-loading-engine__charge { stroke-dasharray: 72 100; opacity: 1; }
  .ga-loading-engine__spark { opacity: 0; }
}
