/* =============================================
   Animations & Keyframes
   ============================================= */

/* ─── Float animation ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}

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

@keyframes float-x {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(-10px); }
}

/* ─── Pulse glow ─── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--clr-accent-glow); }
  50% { box-shadow: 0 0 0 20px transparent; }
}

@keyframes pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 var(--clr-primary-glow); }
  50% { box-shadow: 0 0 0 20px transparent; }
}

/* ─── Shimmer ─── */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

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

/* ─── Rotate3D ─── */
@keyframes rotate3d {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

/* ─── Orbit ─── */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

/* ─── Marquee ─── */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ─── Fade in ─── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

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

/* ─── Scale in ─── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* ─── Slide up ─── */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ─── Counter bounce ─── */
@keyframes counterBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ─── Progress bar ─── */
@keyframes progressBar {
  from { width: 0%; }
  to { width: 100%; }
}

/* ─── Wave ─── */
@keyframes wave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.5); }
}

/* ─── Blob animation ─── */
@keyframes blob {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

/* ─── Loader ─── */
@keyframes loaderSpin {
  0% { transform: rotate(0deg); stroke-dashoffset: 280; }
  50% { stroke-dashoffset: 75; transform: rotate(540deg); }
  100% { stroke-dashoffset: 280; transform: rotate(1080deg); }
}

@keyframes loaderFadeOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ─── Gradient shift ─── */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Particle drift ─── */
@keyframes drift {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.6; }
  33% { transform: translateY(-30px) translateX(20px) rotate(120deg); }
  66% { transform: translateY(-15px) translateX(-15px) rotate(240deg); }
  100% { transform: translateY(0) translateX(0) rotate(360deg); opacity: 0.6; }
}

/* ─── Apply utilities ─── */
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-float-x { animation: float-x 5s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }
.animate-pulse-blue { animation: pulse-blue 2.5s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-blob { animation: blob 8s ease-in-out infinite; }
.animate-gradient { animation: gradientShift 8s ease infinite; background-size: 200% 200%; }
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-fade-in { animation: fadeIn 0.6s var(--ease-smooth) both; }

/* Delay utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-1000 { animation-delay: 1000ms; }
.delay-1200 { animation-delay: 1200ms; }
.delay-1500 { animation-delay: 1500ms; }
.delay-2000 { animation-delay: 2000ms; }

/* ─── Loading Screen ─── */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--clr-bg-dark);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-heading);
  font-size: var(--fz-2xl);
  font-weight: var(--fw-black);
  color: white;
  animation: fadeIn 0.6s ease both;
}

.loader-logo span {
  color: var(--clr-accent);
}

.loader-bar-container {
  width: 200px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  margin-top: var(--sp-4);
}

.loader-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-primary-light), var(--clr-accent));
  border-radius: 99px;
  animation: progressBar 2s var(--ease-smooth) forwards;
}

.loader-text {
  font-size: var(--fz-sm);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: fadeIn 0.6s ease 0.3s both;
}

/* ─── Skeleton loader ─── */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f0f4ff 50%, #e2e8f0 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
}