#loading-overlay {
  --ld-size: min(70vw, 46vh, 500px);
  --ld-gold: #D4AF37;
  --ld-gold-light: #F0D67A;
  --ld-cyan: #38C8EA;
  overflow: hidden;
  touch-action: manipulation;
  background:
    radial-gradient(58% 52% at 50% 40%, #13275a 0%, #0A1430 40%, #060B1A 72%, #050609 100%);
}
#loading-overlay::after {            
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(75% 70% at 50% 45%, transparent 55%, rgba(0,0,0,.6) 100%);
}
#ld-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.ld-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 2vh, 20px);
  pointer-events: none;
}


.ld-orbit { position: relative; width: var(--ld-size); height: var(--ld-size); }
.ld-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ld-ring circle { fill: none; }
.ld-ring-track { stroke: rgba(212,175,55,.14); stroke-width: 1.5; }
.ld-ring-fill {
  stroke: url(#ldGold); stroke-width: 3.2; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 200px 200px;
  filter: drop-shadow(0 0 6px rgba(240,214,122,.65));
}
.ld-ticks { stroke: rgba(240,214,122,.38); stroke-width: 7; stroke-dasharray: 1.2 11.4; transform-origin: 200px 200px; animation: ldSpin 60s linear infinite; }
.ld-inner { stroke: rgba(56,200,234,.28); stroke-width: 1; stroke-dasharray: 3 9; transform-origin: 200px 200px; animation: ldSpin 42s linear infinite reverse; }
@keyframes ldSpin { to { transform: rotate(360deg); } }

.ld-float { position: absolute; inset: 11% 4%; animation: ldFloat 5.2s ease-in-out infinite alternate; }
@keyframes ldFloat { from { transform: translateY(-7px); } to { transform: translateY(7px); } }

.ld-glow {
  position: absolute; inset: -26%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(56,200,234,.34), rgba(56,200,234,.11) 48%, transparent 100%),
    radial-gradient(ellipse 26% 19% at 62% 38%, rgba(212,175,55,.26), transparent 100%);
  animation: ldBreath 4.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes ldBreath { 0%,100% { opacity: .65; scale: .96; } 50% { opacity: 1; scale: 1.05; } }

.ld-tilt { position: absolute; inset: 0; will-change: transform; }
.ld-frame { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 14px 26px rgba(0,0,0,.55)); }
.ld-frame img, .ld-sheen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }


.ld-ghost { opacity: .16; filter: grayscale(1) brightness(1.9) contrast(.9); }


.ld-bird {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 33.3%, transparent 41.3%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 33.3%, transparent 41.3%, transparent 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: ldReveal 2s .35s cubic-bezier(.45,.05,.25,1) both;
}
@keyframes ldReveal {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

.ld-scanclip { position: absolute; inset: -6% 0; overflow: hidden; pointer-events: none; }
.ld-scan {
  position: absolute; top: 0; bottom: 0; width: 2px; left: -88%;
  background: linear-gradient(180deg, transparent, #FFF3C4 18%, #F0D67A 50%, #FFF3C4 82%, transparent);
  box-shadow: 0 0 16px 4px rgba(240,214,122,.7), 0 0 56px 14px rgba(56,200,234,.35);
  animation: ldScan 2s .35s cubic-bezier(.45,.05,.25,1) both;
}
@keyframes ldScan {
  0%   { left: -88%; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: 112%; opacity: 0; }
}


.ld-sheen {
  background: linear-gradient(105deg, transparent 38%, rgba(255,240,180,.75) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
  -webkit-mask: url("Logo login.png") center / contain no-repeat;
          mask: url("Logo login.png") center / contain no-repeat;
  mix-blend-mode: screen; opacity: 0;
  animation: ldSheen 4.4s 2.7s ease-in-out infinite;
}
@keyframes ldSheen {
  0%   { background-position: 130% 0; opacity: 0; }
  8%   { opacity: 1; }
  38%  { background-position: -30% 0; opacity: 1; }
  46%  { opacity: 0; }
  100% { background-position: -30% 0; opacity: 0; }
}


.ld-flap .ld-frame { animation: ldFlap .6s cubic-bezier(.2,.9,.3,1.25); }
@keyframes ldFlap {
  0%   { transform: none; }
  30%  { transform: translateY(-10px) scale(1.09) rotate(-4deg); }
  100% { transform: none; }
}
.ld-flap .ld-glow { animation: ldBoost .75s ease-out; }
@keyframes ldBoost { 0% { opacity: 1; scale: 1; } 30% { opacity: 1; scale: 1.22; filter: brightness(1.5); } 100% { opacity: .8; scale: 1; } }

.ld-shock {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 1.5px solid rgba(240,214,122,.95); box-shadow: 0 0 22px rgba(240,214,122,.5);
  pointer-events: none; z-index: 1;
  animation: ldShock .9s ease-out forwards;
}
@keyframes ldShock { to { transform: scale(26); opacity: 0; border-width: .3px; } }


.ld-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: clamp(0px, 1vh, 8px); }
.ld-title {
  display: inline-flex; font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(1.5rem, 4.2vw, 2.15rem); letter-spacing: .16em; margin-right: -.16em;
  color: #F6EBC0; text-shadow: 0 0 22px rgba(212,175,55,.45);
}
.ld-title span { display: inline-block; opacity: 0; animation: ldLetter .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(1.5s + var(--i) * .07s); }
@keyframes ldLetter { from { opacity: 0; transform: translateY(12px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.ld-sub { font-size: .74rem; font-weight: 500; letter-spacing: .09em; color: rgba(246,243,234,.62); opacity: 0; animation: ldFade .8s 2.1s forwards; }
@keyframes ldFade { to { opacity: 1; } }


.ld-progress { display: flex; align-items: center; gap: 12px; width: min(320px, 72vw); opacity: 0; animation: ldFade .6s 1.2s forwards; }
.ld-progress .loading-bar-track { flex: 1; width: auto; height: 3px; background: rgba(255,255,255,.09); }
.ld-progress .loading-bar-fill {
  animation: none; width: 0;
  background: linear-gradient(90deg, #A8842A, #F0D67A 70%, #38C8EA);
  box-shadow: 0 0 12px rgba(240,214,122,.6);
}
#ld-pct { min-width: 3.4ch; text-align: right; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ld-gold-light); }
#loading-msg-text { font-family: 'Work Sans', sans-serif; font-size: .78rem; color: rgba(246,243,234,.52); text-align: center; }

.ld-hint { font-size: .72rem; letter-spacing: .04em; color: rgba(240,214,122,.72); opacity: 0; animation: ldHint 3.2s 2.8s ease-in-out infinite; }
@keyframes ldHint { 0%,100% { opacity: 0; } 30%,70% { opacity: .9; } }


.ld-leaving .ld-float { animation: ldFlight .6s cubic-bezier(.3,0,.55,1) forwards; }
@keyframes ldFlight { to { transform: translate3d(-46vw,-44vh,0) scale(1.55) rotate(-8deg); opacity: 0; filter: blur(3px); } }
.ld-leaving .ld-ring, .ld-leaving .ld-brand, .ld-leaving .ld-progress,
.ld-leaving #loading-msg-text, .ld-leaving .ld-hint { opacity: 0 !important; transition: opacity .25s ease; animation: none; }
.ld-leaving .ld-glow { opacity: 0; transition: opacity .5s ease; }

@media (prefers-reduced-motion: reduce) {
  .ld-ticks, .ld-inner, .ld-float, .ld-glow, .ld-sheen, .ld-hint { animation: none !important; }
  .ld-bird { animation: none !important; -webkit-mask-image: none; mask-image: none; }
  .ld-scan { display: none; }
}