/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   y4des — Animate v3 | Keyframes + Utility Classes
   استخدام: class="reveal" أو class="animate-slide-up"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━ Keyframes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .15; }
}

@keyframes floatAnim {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideInStart {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideInEnd {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pinIn {
  from { opacity: 0; transform: translateY(20px) scale(.93); }
  to   { opacity: 1; transform: none; }
}

@keyframes heartPop {
  0%   { transform: scale(.4); }
  60%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@keyframes spIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* toastIn — RTL يأتي من اليمين، LTR من اليسار */
html[dir="ltr"] .toast { animation-name: toastInLTR; }
@keyframes toastInLTR {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes skelAnim {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .55; transform: scale(.82); }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 8px  rgba(245,197,53,.22); }
  50%       { box-shadow: 0 0 22px rgba(245,197,53,.45); }
}

/* ━━ Scroll Reveal ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   .7s var(--ease2),
    transform .7s var(--ease2);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Variants */
.reveal-start {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .7s var(--ease2), transform .7s var(--ease2);
}
html[dir="ltr"] .reveal-start { transform: translateX(-28px); }
.reveal-start.in { opacity: 1; transform: none; }

.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .6s var(--ease2), transform .6s var(--ease2);
}
.reveal-scale.in { opacity: 1; transform: none; }

/* ━━ Reduced Motion ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal,
  .reveal-start,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}