/* Loading screen shown by index.html until Flutter paints its first frame (splash.js removes it):
   the logo assembles (the loop spins in, the pin drops onto it), then the pin keeps hopping with a ripple
   and a bar runs below, so a slow first load never looks like a broken page.
   Colours are the app's design tokens (lib/core/theme/app_theme.dart); light is the app's default theme. */

.jr-splash {
  --jr-bg: #F4F6FB;
  --jr-muted: #5D6A85;
  --jr-accent: #1C8FC9;
  --jr-primary: #3B6CF6;
  --jr-hero: #3CC8F0;
  --jr-track: rgba(11, 18, 32, 0.08);
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background:
    radial-gradient(60vmax 40vmax at 50% 0%, rgba(86, 194, 242, 0.14), transparent 70%),
    var(--jr-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", Tahoma, sans-serif;
  opacity: 1;
  transition: opacity 0.35s ease;
}

html.jr-dark .jr-splash {
  --jr-bg: #0B1220;
  --jr-muted: #93A0B8;
  --jr-accent: #56C2F2;
  --jr-track: rgba(244, 246, 251, 0.1);
}

html.jr-dark body { background: #0B1220; }
body { margin: 0; background: #F4F6FB; }

.jr-splash.jr-splash-done { opacity: 0; pointer-events: none; }

.jr-splash-stage {
  position: relative;
  width: 220px;
  height: 172px;
  perspective: 700px;
}

/* Orbit rings under the logo (like the app's LogoOrbit), rippling out each time the pin lands. */
.jr-splash-ring {
  position: absolute;
  left: 50%;
  top: 118px;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border: 2px solid var(--jr-accent);
  border-radius: 50%;
  opacity: 0;
  transform: rotateX(72deg) scale(0.5);
  animation: jr-ripple 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) 1.15s infinite;
}

.jr-splash-ring.jr-splash-ring-2 { animation-delay: 1.35s; }

.jr-splash-glow {
  position: absolute;
  left: 50%;
  top: 132px;
  width: 120px;
  height: 22px;
  margin-left: -60px;
  border-radius: 50%;
  background: var(--jr-accent);
  filter: blur(9px);
  opacity: 0;
  animation: jr-glow-in 0.6s ease 1s forwards, jr-glow 2.4s ease-in-out 1.6s infinite;
}

.jr-splash-logo {
  position: absolute;
  left: 50%;
  top: 0;
  width: 140px;
  height: 145px;
  margin-left: -70px;
}

.jr-splash-logo img,
.jr-splash-sheen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The loop spins and grows into place. */
.jr-splash-loop {
  opacity: 0;
  transform-origin: 50% 62%;
  animation: jr-loop-in 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.1s forwards;
  filter: drop-shadow(0 12px 14px rgba(59, 108, 246, 0.28));
}

/* A light sweep across the loop while loading (masked by the loop's own shape). */
.jr-splash-sheen {
  opacity: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  -webkit-mask: url("logo_loop.png") center / 100% 100% no-repeat;
  mask: url("logo_loop.png") center / 100% 100% no-repeat;
  animation: jr-fade-in 0.2s linear 0.9s forwards, jr-sheen 2.4s ease-in-out 0.9s infinite;
}

/* The pin drops onto the loop (squash on landing), then keeps hopping. Its tip is at 55% / 49%. */
.jr-splash-pin {
  opacity: 0;
  transform-origin: 55% 49%;
  animation: jr-pin-drop 0.75s cubic-bezier(0.3, 0, 0.4, 1) 0.6s forwards, jr-pin-hop 2.4s ease-in-out 1.6s infinite;
  filter: drop-shadow(0 8px 10px rgba(59, 108, 246, 0.3));
}

.jr-splash-word {
  margin-top: -6px;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.5px;
  color: var(--jr-primary);
  background: linear-gradient(90deg, var(--jr-hero), var(--jr-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(8px);
  animation: jr-rise 0.5s ease-out 1.05s forwards;
}

.jr-splash-bar {
  position: relative;
  width: 150px;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--jr-track);
  opacity: 0;
  animation: jr-fade-in 0.4s ease 1.2s forwards;
}

.jr-splash-bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--jr-hero), var(--jr-primary));
  animation: jr-bar 1.3s ease-in-out infinite;
}

.jr-splash-text {
  margin: -8px 0 0;
  font-size: 14px;
  color: var(--jr-muted);
  opacity: 0;
  animation: jr-fade-in 0.4s ease 1.3s forwards;
}

@keyframes jr-loop-in {
  0% { opacity: 0; transform: scale(0.3) rotate(-200deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes jr-pin-drop {
  0% { opacity: 0; transform: translateY(-170px) scale(0.9); }
  20% { opacity: 1; }
  62% { transform: translateY(0) scale(1, 1); }
  72% { transform: translateY(0) scale(1.14, 0.84); }
  86% { transform: translateY(-16px) scale(0.95, 1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}

@keyframes jr-pin-hop {
  0%, 52%, 100% { transform: translateY(0) scale(1, 1); }
  10% { transform: translateY(0) scale(1.06, 0.92); }
  26% { transform: translateY(-22px) scale(0.96, 1.05); }
  42% { transform: translateY(0) scale(1.1, 0.88); }
}

@keyframes jr-ripple {
  0% { opacity: 0; transform: rotateX(72deg) scale(0.45); }
  15% { opacity: 0.55; }
  100% { opacity: 0; transform: rotateX(72deg) scale(1.35); }
}

@keyframes jr-glow-in { to { opacity: 0.45; } }

@keyframes jr-glow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  42% { opacity: 0.7; transform: scale(1.15, 1.25); }
}

@keyframes jr-sheen {
  0% { background-position: 120% 0; }
  60%, 100% { background-position: -120% 0; }
}

@keyframes jr-rise { to { opacity: 1; transform: translateY(0); } }

@keyframes jr-fade-in { to { opacity: 1; } }

@keyframes jr-bar {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* Reduced motion: the logo simply appears; only the progress bar moves. */
@media (prefers-reduced-motion: reduce) {
  .jr-splash-loop, .jr-splash-pin, .jr-splash-word, .jr-splash-bar, .jr-splash-text, .jr-splash-glow {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .jr-splash-glow { opacity: 0.45; }
  .jr-splash-ring, .jr-splash-sheen { display: none; }
}