/* ============================================================
   Al-Naeim Construction Co. Ltd — Animation Layer
   Preloader, custom cursor, keyframes, scroll-reveal base states.
   ============================================================ */

/* ---------- Preloader ---------- */
.loader{
  position: fixed; inset:0; z-index: 9999;
  background: var(--c-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 1.6rem;
  transition: opacity .8s var(--ease-out), visibility .8s;
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__mark{
  display:flex; align-items:center; justify-content:center;
  animation: loaderPulse 1.8s ease-in-out infinite;
}
.loader__logo{
  height: clamp(48px, 8vw, 72px); width:auto;
  background: rgba(255,255,255,.94); border-radius: 8px; padding: .6rem 1rem;
}
.loader__digger{ width: min(50vw, 160px); height:auto; overflow:visible; }
.loader__digger-body{ animation: diggerDrive 2.4s ease-in-out infinite; transform-origin: 37px 60px; }
.loader__digger-arm{ animation: diggerArm 1.2s ease-in-out infinite; transform-origin: 44px 26px; }
.loader__digger-forearm{ animation: diggerForearm 1.2s ease-in-out infinite; transform-origin: 62px 29px; }
.loader__digger-bucket{ animation: diggerBucket 1.2s ease-in-out infinite; transform-origin: 74px 32px; }
@keyframes diggerDrive{
  0%, 100%{ transform: translateX(-8px); }
  50%{ transform: translateX(8px); }
}
@keyframes diggerArm{
  0%, 100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-8deg); }
}
@keyframes diggerForearm{
  0%, 100%{ transform: rotate(6deg); }
  50%{ transform: rotate(-14deg); }
}
@keyframes diggerBucket{
  0%, 100%{ transform: rotate(-10deg); }
  50%{ transform: rotate(20deg); }
}

.loader__bar{ width: min(60vw, 320px); height:2px; background: var(--glass-border); border-radius:2px; overflow:hidden; }
.loader__bar-fill{ height:100%; width:0%; background: var(--g-orange); transition: width .25s var(--ease-out); }
.loader__pct{ font-size:.75rem; letter-spacing:.2em; color: var(--c-muted); }
@keyframes loaderPulse{
  0%,100%{ opacity:1; } 50%{ opacity:.55; }
}

/* ---------- Custom Cursor ---------- */
.cursor{
  position: fixed; top:0; left:0; z-index: 9998; pointer-events:none;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor__dot{
  width:6px; height:6px; border-radius:50%; background: var(--c-white);
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
}
.cursor__ring{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.6);
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s;
}
.cursor__glow{
  width:160px; height:160px; border-radius:50%;
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,106,26,.25), transparent 70%);
  opacity:0; transition: opacity .3s var(--ease-out);
  mix-blend-mode: screen;
}
.cursor.is-hover .cursor__ring{ width:64px; height:64px; border-color: var(--c-orange); }
.cursor.is-hover .cursor__glow{ opacity:1; }
.cursor.is-down .cursor__ring{ width:28px; height:28px; }
@media (pointer: coarse){ .cursor{ display:none; } }

/* ---------- Scroll reveal base states (activated via JS/GSAP) ---------- */
[data-anim="fade-up"]{ opacity:0; transform: translateY(28px); }
[data-anim="reveal-line"]{ transform: translateY(110%); }
[data-anim="fade"]{ opacity:0; }
[data-anim="scale-in"]{ opacity:0; transform: scale(.9); }
.anim-ready [data-anim]{ transition: none; }

/* ---------- Utility keyframes ---------- */
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}
@keyframes spinSlow{
  from{ transform: rotate(0); } to{ transform: rotate(360deg); }
}
@keyframes shimmer{
  0%{ background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}