/* public/loader.css — Zero-flash Loader Styles */

html, body { margin: 0; padding: 0; background: #050508; }

#il {
  position: fixed;
  inset: 0;
  background: #050508;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  overflow: hidden;
}

#il::before {
  content: '';
  position: absolute;
  top: -15%; right: -10%;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,45,85,0.14) 0%, transparent 70%);
  animation: aimers-orb 7s ease-in-out infinite;
  pointer-events: none;
}

#il::after {
  content: '';
  position: absolute;
  bottom: -15%; left: -10%;
  width: 45vw; height: 45vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 70%);
  animation: aimers-orb 9s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes aimers-orb {
  0%,100% { transform: scale(1); opacity: .7; }
  50%      { transform: scale(1.13); opacity: 1; }
}

.il-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.022) 1px, transparent 0);
  background-size: 48px 48px;
  pointer-events: none;
}

.il-card {
  position: relative;
  width: 230px;
  height: 230px;
  border-radius: 52px;
  background: linear-gradient(145deg, rgba(255,255,255,0.055) 0%, rgba(255,45,85,0.05) 60%, rgba(0,0,0,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 40px 120px rgba(0,0,0,0.85), 0 1px 0 rgba(255,255,255,0.1) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  animation: il-enter 0.75s cubic-bezier(0.16,1,0.3,1) both;
}

@keyframes il-enter {
  from { opacity:0; transform: scale(0.65) rotateY(-18deg); }
  to   { opacity:1; transform: scale(1) rotateY(0deg); }
}

.il-corner {
  position: absolute;
  width: 13px; height: 13px;
  pointer-events: none;
}

.il-corner::before, .il-corner::after {
  content: '';
  position: absolute;
  background: rgba(255,45,85,0.5);
}

.il-corner::before { width: 100%; height: 1.5px; top:0; left:0; }
.il-corner::after  { width: 1.5px; height: 100%; top:0; left:0; }
.il-corner.tl { top:18px; left:18px; }
.il-corner.tr { top:18px; right:18px; transform: rotate(90deg); }
.il-corner.bl { bottom:18px; left:18px; transform: rotate(-90deg); }
.il-corner.br { bottom:18px; right:18px; transform: rotate(180deg); }

.il-logo-wrap {
  position: relative;
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  animation: il-pop 0.65s cubic-bezier(0.34,1.56,0.64,1) 0.32s both;
}

@keyframes il-pop {
  from { opacity:0; transform: scale(0.35) rotate(-15deg); }
  to   { opacity:1; transform: scale(1) rotate(0deg); }
}

.il-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,45,85,0.22) 0%, transparent 70%);
  animation: il-glow 2.6s ease-in-out infinite;
}

@keyframes il-glow {
  0%,100% { transform: scale(0.88); opacity: .4; }
  50%      { transform: scale(1.18); opacity: .85; }
}

.il-logo {
  width: 76px; height: 76px;
  object-fit: contain;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 22px rgba(255,45,85,0.6)) drop-shadow(0 0 5px rgba(255,45,85,0.35));
  animation: il-float 4.2s ease-in-out 1s infinite;
}

@keyframes il-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.il-text {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: il-rise 0.55s cubic-bezier(0.16,1,0.3,1) 0.62s both;
}

@keyframes il-rise {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}

.il-name {
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  font-size: clamp(18px, 6vw, 28px);
  letter-spacing: 0.2em;
  color: #fff;
  line-height: 1;
}


.il-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(7px, 2vw, 9.5px);
  font-weight: 700;
  letter-spacing: 0.4em;
  color: #FFB800;
  text-transform: uppercase;
  opacity: .8;
}


.il-prog {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2.5px;
  background: rgba(255,255,255,0.04);
  border-radius: 0 0 52px 52px;
  overflow: hidden;
}

.il-prog-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, #FF2D55 40%, #FFB800 70%, transparent);
  animation: il-trace 1.5s ease-in-out 0.35s forwards;
}

@keyframes il-trace {
  0%   { width:0; opacity:1; }
  85%  { width:100%; opacity:1; }
  100% { width:100%; opacity:0; }
}

.il-scan {
  position: absolute;
  left: 0; right: 0; height: 55px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.028), transparent);
  animation: il-scanline 3s linear 0.5s infinite;
  pointer-events: none;
  border-radius: 52px;
}

@keyframes il-scanline {
  from { top: -55px; }
  to   { top: 100%; }
}

.il-status {
  margin-top: 22px;
  display: flex; align-items: center; gap: 8px;
  animation: il-fade 0.4s ease 1.1s both;
}

@keyframes il-fade {
  from { opacity:0; }
  to   { opacity:1; }
}

.il-status-txt {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
}

.il-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #FF2D55;
  box-shadow: 0 0 7px rgba(255,45,85,0.9);
  animation: il-blink 0.9s step-end infinite;
}

@keyframes il-blink { 0%,100%{opacity:1} 50%{opacity:0} }

#il.exiting {
  animation: il-exit 0.52s cubic-bezier(0.76,0,0.24,1) forwards;
}

@keyframes il-exit {
  0%   { opacity:1; clip-path: circle(80% at 50% 50%); }
  100% { opacity:0; clip-path: circle(0% at 50% 50%); }
}