/* ═══════════════════════════════════════════════════
   LOADER — loader-style.css
   Paleta: amarillo #F5C400 / azul #0055A5 / cyan #00C2E0
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500;700&display=swap');

#entry-loader {
  position: fixed;
  inset: 0;
  background: #04111F;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 36px;
  z-index: 99999;
}

/* Línea amarilla superior animada */
#entry-loader::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #F5C400, #00C2E0, transparent);
  animation: topBar 2.4s ease-in-out infinite;
}
@keyframes topBar {
  0%   { width: 0%; left: 0; }
  50%  { width: 100%; left: 0; }
  100% { width: 0%; left: 100%; }
}

.circle {
  position: relative;
  background: rgba(0, 85, 165, 0.12);
  height: 160px;
  width: 160px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 30px rgba(0, 85, 165, 0.25),
    0 0 40px rgba(245, 196, 0, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.border {
  width: 174px;
  height: 174px;
  border-radius: 100%;
  position: absolute;
  animation: spin 10s linear calc(-1s * var(--i)) infinite;
}

/* Anillos alternados amarillo y azul */
.border:nth-child(odd) {
  border: 1.5px solid rgba(245, 196, 0, 0.65);
}
.border:nth-child(even) {
  border: 1.5px solid rgba(0, 194, 224, 0.45);
}
/* Primer anillo más visible */
.border:first-child {
  border: 2px solid #F5C400;
  filter: drop-shadow(0 0 6px rgba(245, 196, 0, 0.50));
}

@keyframes spin {
  0%   { transform: rotateX(0)     rotateY(20deg) rotateZ(0); }
  25%  { transform: rotateX(360deg) rotateY(20deg) rotateZ(90deg); }
  50%  { transform: rotateX(0)     rotateY(20deg) rotateZ(180deg); }
  75%  { transform: rotateX(-360deg) rotateY(20deg) rotateZ(270deg); }
  100% { transform: rotateX(0)     rotateY(20deg) rotateZ(360deg); }
}

/* Logo / nombre dentro del círculo */
.loadingText:first-of-type {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.0rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F5C400;
  text-align: center;
  position: absolute;
  text-shadow: 0 0 18px rgba(245, 196, 0, 0.45);
}

/* Texto "Loading..." fuera del círculo */
.loadingText:last-of-type {
  position: static !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(0, 194, 224, 0.70);
  text-align: center;
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 0.40; }
  50%       { opacity: 1; }
}