/* ============================================================
   Animations — Keyframes & Utility Animation Classes
   CNC Website · Dhofar University · 2026
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────── */

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

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

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

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

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

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

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

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

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(0,230,118,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(0,230,118,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,230,118,0); }
}

@keyframes pulseCyan {
  0%   { box-shadow: 0 0 0 0 rgba(30,58,138,0.35); }
  70%  { box-shadow: 0 0 0 10px rgba(30,58,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,58,138,0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50%       { box-shadow: var(--shadow-md); }
}

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

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

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

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(1deg); }
  66%       { transform: translateY(-5px) rotate(-1deg); }
}

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

@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeRTL {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

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

@keyframes borderGlow {
  0%, 100% { border-color: rgba(30,58,138,0.20); }
  50%       { border-color: rgba(37,99,235,0.50); }
}

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

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

@keyframes blink {
  50% { opacity: 0; }
}

/* ── Scroll-Triggered Base State ────────────────────────── */
/* Elements start hidden; JS adds .is-visible to trigger */

.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-fade-down {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.anim-fade-down.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-fade-left {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.anim-fade-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-fade-right {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.anim-fade-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-scale-in {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1),
              transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.anim-scale-in.is-visible {
  opacity: 1;
  transform: scale(1);
}

.anim-fade-in {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.anim-fade-in.is-visible { opacity: 1; }

/* ── Stagger Delays ──────────────────────────────────────── */
.stagger-1  { transition-delay: 0.05s; }
.stagger-2  { transition-delay: 0.10s; }
.stagger-3  { transition-delay: 0.15s; }
.stagger-4  { transition-delay: 0.20s; }
.stagger-5  { transition-delay: 0.25s; }
.stagger-6  { transition-delay: 0.30s; }
.stagger-7  { transition-delay: 0.35s; }
.stagger-8  { transition-delay: 0.40s; }

/* ── Animation Utility Classes ───────────────────────────── */
.animate-spin        { animation: spin 1s linear infinite; }
.animate-spin-slow   { animation: spin 3s linear infinite; }
.animate-pulse       { animation: pulse 2s ease-in-out infinite; }
.animate-float       { animation: float 4s ease-in-out infinite; }
.animate-float-slow  { animation: floatSlow 6s ease-in-out infinite; }
.animate-glow-pulse  { animation: glowPulse 2.5s ease-in-out infinite; }

/* Status dot animations */
.pulse-dot--success { animation: pulseDot 2s infinite; }
.pulse-dot--cyan    { animation: pulseCyan 2s infinite; }

/* ── Marquee ────────────────────────────────────────────── */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
[dir="rtl"] .marquee-track {
  animation: marqueeRTL 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

/* ── Gradient Animated Background ───────────────────────── */
.gradient-animated {
  background: linear-gradient(135deg, var(--color-primary), var(--color-bg-dark), var(--color-primary-dark));
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
}

/* ── Shimmer Effect (loading skeleton) ───────────────────── */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-surface) 0%,
    var(--color-bg-surface-2) 50%,
    var(--color-bg-surface) 100%
  );
  background-size: 200% auto;
  animation: shimmer 1.8s linear infinite;
}

/* ── Border Glow Animation ───────────────────────────────── */
.border-glow { animation: borderGlow 3s ease-in-out infinite; }

/* ── Particle Dot Grid (decorative) ─────────────────────── */
.dot-grid {
  background-image: radial-gradient(circle, rgba(30,58,138,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}