/* ============================================
   كشرة برحمة - Animations
   Keyframes & animation utilities
   ============================================ */

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

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes zoomOut {
  from { opacity: 0; transform: scale(1.2); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(20px) rotate(-5deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

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

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

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

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

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--primary); }
}

@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  25% { transform: translate(10px, -20px) scale(1.1); opacity: 0.8; }
  50% { transform: translate(-5px, -40px) scale(0.9); opacity: 0.5; }
  75% { transform: translate(-15px, -20px) scale(1.05); opacity: 0.7; }
}

@keyframes progressFill {
  from { width: 0; }
  to { width: var(--progress, 100%); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes morphShape {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
  50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.6); }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

/* Scroll Reveal — visible by default (SSR, no-JS, before script runs) */
.reveal,
.reveal-left,
.reveal-right,
.reveal-zoom,
.reveal-rotate {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.75s ease, transform 0.75s ease, visibility 0.75s ease;
}

/* JS enabled: subtle entrance from offset (content stays readable) */
html.js-animations .reveal.reveal--pending:not(.is-visible):not(.active) {
  opacity: 1;
  visibility: visible;
  transform: translateY(28px);
}

html.js-animations .reveal-left.reveal--pending:not(.is-visible):not(.active) {
  transform: translateX(-28px);
}

html.js-animations .reveal-right.reveal--pending:not(.is-visible):not(.active) {
  transform: translateX(28px);
}

html.js-animations .reveal-zoom.reveal--pending:not(.is-visible):not(.active) {
  transform: scale(0.96);
}

html.js-animations .reveal-rotate.reveal--pending:not(.is-visible):not(.active) {
  transform: rotate(-2deg) scale(0.98);
}

/* Final visible state — never stays hidden */
.reveal.is-visible,
.reveal.active,
.reveal-left.is-visible,
.reveal-left.active,
.reveal-right.is-visible,
.reveal-right.active,
.reveal-zoom.is-visible,
.reveal-zoom.active,
.reveal-rotate.is-visible,
.reveal-rotate.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* Animation utility classes */
.animate-fade-in { animation: fadeIn 0.8s ease forwards; }
.animate-fade-up { animation: fadeInUp 0.8s ease forwards; }
.animate-fade-down { animation: fadeInDown 0.8s ease forwards; }
.animate-zoom-in { animation: zoomIn 0.8s ease forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-reverse { animation: floatReverse 7s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 2s ease-in-out infinite; }
.animate-gradient { background-size: 200% 200%; animation: gradientShift 8s ease infinite; }
.animate-morph { animation: morphShape 8s ease-in-out infinite; }
.animate-glow { animation: glow 3s ease-in-out infinite; }

/* Hover animations */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--transition-base);
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: box-shadow var(--transition-base);
}
.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

/* 3D Card Effect */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}
.card-3d:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateZ(10px);
}

/* Typewriter */
.typewriter {
  overflow: hidden;
  border-left: 3px solid var(--primary);
  white-space: nowrap;
  animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;
}

/* Loading spinner */
.spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Progress circle */
.progress-circle {
  transform: rotate(-90deg);
}
.progress-circle circle {
  transition: stroke-dashoffset 1.5s ease;
}

/* Parallax layers */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Reduced motion — show everything immediately */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-zoom,
  .reveal-rotate,
  .reveal.reveal--pending {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}