/* ============================================================
   AL-KAFAAT — Shared Animation Library
   GPU-composited only (transform + opacity)
============================================================ */

/* ── Keyframes ── */
@keyframes kFadeUp    { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:none } }
@keyframes kFadeDown  { from { opacity:0; transform:translateY(-12px) } to { opacity:1; transform:none } }
@keyframes kFadeIn    { from { opacity:0 } to { opacity:1 } }
@keyframes kPopIn     { from { opacity:0; transform:scale(.93) } to { opacity:1; transform:scale(1) } }
@keyframes kSlideRight{ from { opacity:0; transform:translateX(-18px) } to { opacity:1; transform:none } }
@keyframes kSlideLeft { from { opacity:0; transform:translateX(18px) } to { opacity:1; transform:none } }
@keyframes kShimmer   { to { background-position:-200% center } }
@keyframes kRipple    { to { transform:scale(4.5); opacity:0 } }
@keyframes kPulseGold { 0%,100%{ box-shadow:0 0 0 0 rgba(233,168,28,.4) } 50%{ box-shadow:0 0 0 8px rgba(233,168,28,0) } }
@keyframes kSpin      { to { transform:rotate(360deg) } }
@keyframes kBounceIn  {
  0%   { opacity:0; transform:scale(.3) }
  50%  { opacity:1; transform:scale(1.05) }
  70%  { transform:scale(.97) }
  100% { transform:scale(1) }
}

/* ── Utility animation classes ── */
.a-fade-up   { animation:kFadeUp   .5s cubic-bezier(.16,1,.3,1) both }
.a-fade-down { animation:kFadeDown .4s cubic-bezier(.16,1,.3,1) both }
.a-fade-in   { animation:kFadeIn   .4s ease both }
.a-pop-in    { animation:kPopIn    .4s cubic-bezier(.16,1,.3,1) both }
.a-slide-r   { animation:kSlideRight .4s cubic-bezier(.16,1,.3,1) both }
.a-slide-l   { animation:kSlideLeft  .4s cubic-bezier(.16,1,.3,1) both }

/* ── Stagger delays ── */
.d-1{ animation-delay:.04s } .d-2{ animation-delay:.08s } .d-3{ animation-delay:.12s }
.d-4{ animation-delay:.16s } .d-5{ animation-delay:.20s } .d-6{ animation-delay:.24s }
.d-7{ animation-delay:.28s } .d-8{ animation-delay:.32s }

/* ── View transition ── */
@keyframes kViewIn  { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }
@keyframes kViewOut { to   { opacity:0; transform:translateY(-8px) } }
.view-entering { animation:kViewIn .35s cubic-bezier(.16,1,.3,1) both }

/* ── Skeleton loader ── */
.skeleton {
  background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:kShimmer 1.5s linear infinite;
  border-radius:8px;
}

/* ── Ripple button effect ── */
.ripple-host { position:relative; overflow:hidden }
.ripple-wave {
  position:absolute; border-radius:50%;
  transform:scale(0); animation:kRipple .55s linear;
  pointer-events:none;
}

/* ── Spinner ── */
.spinner {
  width:16px; height:16px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation:kSpin .7s linear infinite; display:inline-block;
}
.spinner.dark { border-color:rgba(21,21,30,.2); border-top-color:var(--ink,#15151E) }

/* ── Count-up numbers ── */
[data-count] { display:inline-block }