/* ==========================================================
   Al Manhal Schools — App Preloader
   Drop-in loading overlay for Laravel Blade layouts.
   ========================================================== */

:root{
  --loader-navy-deep:#83b9d0;
  --loader-navy-mid:#83b9d0;
  --loader-gold:#c9a24b;
}

html.is-loading{ overflow:hidden; } /* lock scroll while loader is up */

#app-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(47,127,138,0.35), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(201,162,75,0.12), transparent 50%),
    linear-gradient(160deg, var(--loader-navy-deep) 0%, var(--loader-navy-mid) 100%);
  transition: opacity .5s ease, visibility .5s ease;
}

/* state toggled by JS once window has fully loaded */
#app-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.app-loader__stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:34px;
}

.app-loader__glow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 68%);
  animation: appLoaderGlow 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes appLoaderGlow{
  0%,100%{ transform:scale(0.9); opacity:.55; }
  50%{ transform:scale(1.08); opacity:1; }
}

.app-loader__logo-holder{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.app-loader__logo{
  position:relative;
  width:280px;
  opacity:0;
  transform:translateY(14px) scale(.92);
  animation:
    appLoaderEnter 900ms cubic-bezier(.2,.8,.2,1) forwards,
    appLoaderBreathe 2.8s ease-in-out 900ms infinite;
}
.app-loader__logo img{
  width:100%;
  display:block;
  filter: drop-shadow(0 6px 26px rgba(0,0,0,0.35));
}
@keyframes appLoaderEnter{
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes appLoaderBreathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.035); }
}

/* sheen sweeping across the logo's dot-arc */
.app-loader__logo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.55) 48%,
    transparent 66%);
  background-size:250% 250%;
  mix-blend-mode:overlay;
  -webkit-mask-image: var(--logo-mask-url);
  mask-image: var(--logo-mask-url);
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  animation: appLoaderSheen 2.8s ease-in-out 900ms infinite;
  opacity:0;
}
@keyframes appLoaderSheen{
  0%{ background-position:120% 0%; opacity:0; }
  15%{ opacity:.9; }
  45%{ opacity:.9; }
  60%{ background-position:-20% 0%; opacity:0; }
  100%{ background-position:-20% 0%; opacity:0; }
}

.app-loader__status{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  opacity:0;
  animation: appLoaderFadeUp 700ms ease-out 500ms forwards;
}
@keyframes appLoaderFadeUp{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.app-loader__text{
  color:#bcd3dc;
  font-family:'Segoe UI', Tahoma, Arial, sans-serif;
  font-size:13.5px;
  letter-spacing:.06em;
  display:flex;
  align-items:baseline;
  gap:2px;
}
.app-loader__text .dot{
  animation: appLoaderDotBlink 1.4s infinite;
  opacity:.25;
}
.app-loader__text .dot:nth-child(2){ animation-delay:.2s; }
.app-loader__text .dot:nth-child(3){ animation-delay:.4s; }
@keyframes appLoaderDotBlink{
  0%,80%,100%{ opacity:.25; }
  40%{ opacity:1; }
}

.app-loader__track{
  width:170px;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,0.12);
  overflow:hidden;
  position:relative;
}
.app-loader__fill{
  position:absolute;
  top:0; bottom:0;
  width:40%;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--loader-gold), transparent);
  animation: appLoaderIndeterminate 1.6s ease-in-out infinite;
}
@keyframes appLoaderIndeterminate{
  0%{ right:100%; }
  50%{ right:30%; }
  100%{ right:-40%; }
}

@media (prefers-reduced-motion: reduce){
  .app-loader__logo,
  .app-loader__glow,
  .app-loader__logo::after,
  .app-loader__fill,
  .app-loader__text .dot{
    animation:none !important;
  }
  .app-loader__logo{ opacity:1; transform:none; }
  .app-loader__status{ opacity:1; transform:none; }
}

@media (max-width:480px){
  .app-loader__logo{ width:200px; }
  .app-loader__glow{ width:300px; height:300px; }
}