/* نادي الروّاد — the shared loader (dashboard + login).
   The club's mark in the centre; the things the platform is made of — lessons,
   teachers, the honour board, videos, PDFs, members — orbit around it.
   Hidden unless JavaScript arms it (html.rl-armed), so it can never lock a page. */

.rl-loader { display: none; }
html.rl-armed .rl-loader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 9999;
  background: color-mix(in srgb, var(--surface-page) 72%, transparent);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
html.rl-armed.rl-show .rl-loader { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s var(--ease); }

/* top progress bar */
.rl-bar { position: fixed; inset: 0 0 auto; height: 3px; overflow: hidden; z-index: 10000; }
.rl-bar::before {
  content: ''; position: absolute; inset: 0; width: 45%;
  background: linear-gradient(90deg, transparent, var(--gold-300), var(--gold-500), var(--gold-700), transparent);
  animation: rl-bar 1.15s cubic-bezier(.6, .1, .3, 1) infinite;
}
@keyframes rl-bar { from { transform: translateX(160%); } to { transform: translateX(-260%); } }

.rl-stage { position: relative; width: 240px; height: 240px; display: grid; place-items: center; }

/* breathing glow */
.rl-glow { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold-400) 70%, transparent), transparent 70%); filter: blur(10px); animation: rl-breathe 2.6s ease-in-out infinite; }
@keyframes rl-breathe { 0%, 100% { transform: scale(.85); opacity: .55; } 50% { transform: scale(1.15); opacity: .95; } }

/* orbits drawn in, each with a comet tail */
.rl-orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rl-orbits circle { fill: none; stroke: color-mix(in srgb, var(--gold-600) 35%, transparent); stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600; animation: rl-draw 1.2s var(--ease) forwards; }
.rl-orbits circle:nth-child(2) { animation-delay: .15s; }
.rl-orbits circle:nth-child(3) { animation-delay: .3s; }
@keyframes rl-draw { to { stroke-dashoffset: 0; } }

.rl-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; animation: rl-turn linear infinite; }
/* Negative delays start each ring at its own angle, so the orbiters are spread from the first frame. */
.rl-ring.r1 { width: 150px; height: 150px; animation-duration: 6s; animation-delay: -1s; }
.rl-ring.r2 { width: 196px; height: 196px; animation-duration: 9s; animation-direction: reverse; animation-delay: -2.4s; }
.rl-ring.r3 { width: 238px; height: 238px; animation-duration: 13s; animation-delay: -7.5s; }
.rl-ring::before { /* comet tail trailing each orbiter */
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  /* the tail fades in over the 70° behind the top orbiter (the ring turns clockwise) */
  background: conic-gradient(from 290deg, transparent 0deg, color-mix(in srgb, var(--gold-500) 60%, transparent) 70deg, transparent 70.5deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}
.rl-ring.r2::before { transform: scaleX(-1); }
@keyframes rl-turn { to { transform: rotate(360deg); } }

.rl-sat {
  position: absolute; width: 36px; height: 36px; margin: -18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-raised); color: var(--gold-700);
  border: 1px solid color-mix(in srgb, var(--gold-500) 45%, transparent); box-shadow: 0 6px 16px rgb(95 58 25 / .18);
  opacity: 0; animation: rl-pop .5s var(--ease-spring) forwards, rl-ping 2.4s ease-out infinite;
}
/* positions on each ring (top / opposite) */
.rl-ring .rl-sat.a { top: 0; left: 50%; }
.rl-ring .rl-sat.b { bottom: 0; left: 50%; margin-bottom: -18px; }
.r1 .rl-sat { animation-delay: .35s, .9s; } .r1 .rl-sat.b { animation-delay: .45s, 1.5s; }
.r2 .rl-sat { animation-delay: .55s, 1.1s; } .r2 .rl-sat.b { animation-delay: .65s, 1.8s; }
.r3 .rl-sat { animation-delay: .75s, 1.3s; } .r3 .rl-sat.b { animation-delay: .85s, 2s; }
/* keep icons upright: spin each satellite against its ring */
.r1 .rl-sat { --spin: 6s; } .r2 .rl-sat { --spin: 9s; } .r3 .rl-sat { --spin: 13s; }
.rl-sat .up { display: grid; place-items: center; animation: rl-counter var(--spin) linear infinite; }
/* same start offsets as the rings, so the icons stay upright */
.r1 .rl-sat .up { animation-delay: -1s; } .r2 .rl-sat .up { animation-delay: -2.4s; } .r3 .rl-sat .up { animation-delay: -7.5s; }
.r2 .rl-sat .up { animation-direction: reverse; }
@keyframes rl-counter { to { transform: rotate(-360deg); } }
@keyframes rl-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes rl-ping { 0% { box-shadow: 0 6px 16px rgb(95 58 25 / .18), 0 0 0 0 color-mix(in srgb, var(--gold-500) 45%, transparent); } 70%, 100% { box-shadow: 0 6px 16px rgb(95 58 25 / .18), 0 0 0 10px transparent; } }

/* progress arc that stretches and shrinks while it turns */
.rl-arc { position: absolute; width: 124px; height: 124px; animation: rl-turn 1.4s linear infinite; }
.rl-arc circle { fill: none; stroke: var(--gold-500); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 60 330; animation: rl-stretch 1.4s ease-in-out infinite; }
@keyframes rl-stretch { 0% { stroke-dasharray: 20 360; } 50% { stroke-dasharray: 190 190; } 100% { stroke-dasharray: 20 360; stroke-dashoffset: -370; } }

/* the mark: pops in, floats, a sheen passes over it */
.rl-logo { position: relative; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; box-shadow: 0 14px 34px rgb(95 58 25 / .3); animation: rl-in .6s var(--ease-spring) both, rl-float 3.2s ease-in-out .6s infinite; }
.rl-logo img { width: 100%; height: 100%; display: block; }
.rl-logo::after { content: ''; position: absolute; inset: 0; width: 45%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent); transform: translateX(-140%) skewX(-18deg); animation: rl-sheen 2.8s ease-in-out 1s infinite; }
@keyframes rl-in { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes rl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rl-sheen { 0%, 55% { transform: translateX(-140%) skewX(-18deg); } 85%, 100% { transform: translateX(260%) skewX(-18deg); } }

/* sparks from the centre */
.rl-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); opacity: 0; animation: rl-spark 2.2s ease-out infinite; }
.rl-spark:nth-of-type(1) { --dx: 70px; --dy: -60px; animation-delay: .2s; }
.rl-spark:nth-of-type(2) { --dx: -80px; --dy: -30px; animation-delay: .7s; }
.rl-spark:nth-of-type(3) { --dx: 50px; --dy: 75px; animation-delay: 1.1s; }
.rl-spark:nth-of-type(4) { --dx: -55px; --dy: 70px; animation-delay: 1.5s; }
.rl-spark:nth-of-type(5) { --dx: 0px; --dy: -95px; animation-delay: 1.9s; }
@keyframes rl-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }

/* brand line and the sentence */
.rl-text { margin-top: 26px; text-align: center; font-family: var(--font-sans); }
.rl-brand { display: flex; gap: 10px; justify-content: center; font-weight: 800; font-size: 24px; color: var(--text-strong); }
.rl-brand span { display: inline-block; animation: rl-wave 1.8s ease-in-out infinite; } /* whole words: Arabic letters must stay joined */
.rl-brand span:nth-child(2) { animation-delay: .18s; color: var(--accent-text); }
@keyframes rl-wave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
.rl-say {
  margin-top: 4px; font-size: 15px; font-weight: 600;
  background: linear-gradient(90deg, var(--text-muted) 30%, var(--gold-500) 50%, var(--text-muted) 70%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 2.2s linear infinite;
}
.rl-dots i { display: inline-block; width: 5px; height: 5px; margin-inline-start: 3px; border-radius: 50%; background: var(--gold-500); animation: rl-dot 1.2s ease-in-out infinite; }
.rl-dots i:nth-child(2) { animation-delay: .15s; } .rl-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes rl-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

/* Reduced motion: a loader that freezes looks broken, so it keeps moving — slower, without travel, sparks or bounce. */
@media (prefers-reduced-motion: reduce) {
  .rl-ring.r1 { animation-duration: 18s !important; animation-iteration-count: infinite !important; }
  .rl-ring.r2 { animation-duration: 26s !important; animation-iteration-count: infinite !important; }
  .rl-ring.r3 { animation-duration: 34s !important; animation-iteration-count: infinite !important; }
  .rl-sat .up { animation-iteration-count: infinite !important; }
  .r1 .rl-sat .up { animation-duration: 18s !important; } .r2 .rl-sat .up { animation-duration: 26s !important; } .r3 .rl-sat .up { animation-duration: 34s !important; }
  .rl-arc { animation-duration: 2.8s !important; animation-iteration-count: infinite !important; }
  .rl-arc circle { animation: none !important; stroke-dasharray: 90 300; }
  .rl-bar::before { animation-duration: 2.6s !important; animation-iteration-count: infinite !important; }
  .rl-glow { animation-duration: 5s !important; animation-iteration-count: infinite !important; }
  .rl-sat { opacity: 1 !important; }
  .rl-orbits circle { stroke-dashoffset: 0 !important; }
  .rl-spark, .rl-logo::after { display: none; }
  .rl-logo, .rl-brand span { animation: none !important; }
}