#app-loader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0d0d1b;
  background: radial-gradient(ellipse at 50% 40%, #13132a 0%, #0d0d1b 50%, #08080f 100%);
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
  -webkit-user-select: none; user-select: none;
}
#app-loader.fade-out { opacity: 0; visibility: hidden; }

.loader-logo-wrap {
  position: relative; width: 120px; height: 120px; margin-bottom: 28px;
  animation: logoEntrance 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
.loader-logo-wrap img {
  width: 100%; height: 100%; border-radius: 22%; object-fit: cover;
  filter: drop-shadow(0 4px 24px rgba(255,215,0,0.18));
}
.loader-ring {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: #ffd700; border-right-color: rgba(255,215,0,0.3);
  animation: spin 1.2s linear infinite;
}
.loader-ring-inner {
  position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid transparent;
  border-bottom-color: rgba(255,215,0,0.5); border-left-color: rgba(255,215,0,0.15);
  animation: spin 0.9s linear infinite reverse;
}
.loader-progress {
  width: min(220px,60vw); height: 3px;
  background: rgba(255,215,0,0.1); border-radius: 4px; overflow: hidden;
  animation: fadeSlideUp 0.6s 0.3s cubic-bezier(0.16,1,0.3,1) both;
}
.loader-progress-bar {
  height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, #ffd700, #ffe566, #ffd700);
  background-size: 200% 100%;
  animation: progressFill 2.5s 0.5s ease-in-out forwards, shimmer 1.5s linear infinite;
}
.loader-dots {
  display: flex; gap: 8px; margin-top: 20px;
  animation: fadeSlideUp 0.6s 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
.loader-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #ffd700;
  animation: dotPulse 1.4s ease-in-out infinite;
}
.loader-dot:nth-child(2) { animation-delay: 0.15s; }
.loader-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes logoEntrance { from { opacity:0; transform:scale(0.7) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeSlideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes progressFill { 0%{width:0%} 30%{width:40%} 60%{width:70%} 100%{width:95%} }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes dotPulse { 0%,80%,100%{opacity:0.25;transform:scale(0.8)} 40%{opacity:1;transform:scale(1.1)} }

@media (prefers-reduced-motion:reduce) {
  .loader-ring,.loader-ring-inner{animation:none}
  .loader-logo-wrap{animation-duration:0.01s}
  .loader-progress-bar{animation:progressFill 2s ease-in-out forwards}
  .loader-dot{animation:none;opacity:0.6}
}
@media (max-height:600px) { .loader-logo-wrap{width:90px;height:90px;margin-bottom:18px} }
@media (min-width:768px) { .loader-logo-wrap{width:140px;height:140px} }