/* ============================================================
   ANIMATIONS.CSS — Keyframes & animation utilities
   ============================================================ */

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

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

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

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

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

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

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

/* --- Glitch --- */
@keyframes glitch {
  0%   { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 0); }
  10%  { clip-path: inset(92% 0 1% 0);  transform: translate(1px, 0); }
  20%  { clip-path: inset(43% 0 1% 0);  transform: translate(-1px, 0); }
  30%  { clip-path: inset(25% 0 58% 0); transform: translate(2px, 0); }
  40%  { clip-path: inset(54% 0 7% 0);  transform: translate(-2px, 0); }
  50%  { clip-path: inset(58% 0 43% 0); transform: translate(1px, 0); }
  60%  { clip-path: inset(50% 0 38% 0); transform: translate(-1px, 0); }
  70%  { clip-path: inset(4% 0 82% 0);  transform: translate(2px, 0); }
  80%  { clip-path: inset(12% 0 23% 0); transform: translate(-2px, 0); }
  90%  { clip-path: inset(74% 0 11% 0); transform: translate(1px, 0); }
  100% { clip-path: inset(62% 0 29% 0); transform: translate(-1px, 0); }
}

@keyframes glitch2 {
  0%   { clip-path: inset(24% 0 29% 0); transform: translate(2px, 0) skewX(1deg); }
  20%  { clip-path: inset(54% 0 13% 0); transform: translate(-2px, 0) skewX(-1deg); }
  40%  { clip-path: inset(7% 0 70% 0);  transform: translate(1px, 0) skewX(2deg); }
  60%  { clip-path: inset(44% 0 43% 0); transform: translate(-1px, 0) skewX(-2deg); }
  80%  { clip-path: inset(77% 0 8% 0);  transform: translate(2px, 0) skewX(1deg); }
  100% { clip-path: inset(33% 0 56% 0); transform: translate(-2px, 0) skewX(-1deg); }
}

/* --- Shimmer / Loading --- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

@keyframes progressBarIndeterminate {
  0%   { left: -35%; right: 100%; }
  60%  { left: 100%; right: -90%; }
  100% { left: 100%; right: -90%; }
}

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

@keyframes floatRotate {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-8px) rotate(3deg); }
}

/* --- Pulse --- */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.97); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.2); }
  50%       { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}

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

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

/* --- Cursor / Typewriter --- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

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

/* --- Ticker --- */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Noise / Grain --- */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10%       { transform: translate(-2%, -3%); }
  20%       { transform: translate(3%, 2%); }
  30%       { transform: translate(-1%, 4%); }
  40%       { transform: translate(4%, -1%); }
  50%       { transform: translate(-3%, 3%); }
  60%       { transform: translate(2%, -4%); }
  70%       { transform: translate(-4%, 1%); }
  80%       { transform: translate(1%, 3%); }
  90%       { transform: translate(3%, -2%); }
}

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

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

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

/* --- Preloader specific --- */
@keyframes preloaderBarFill {
  0%   { width: 0%; }
  20%  { width: 15%; }
  40%  { width: 38%; }
  60%  { width: 62%; }
  75%  { width: 78%; }
  90%  { width: 91%; }
  100% { width: 100%; }
}

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

/* --- Menu overlay --- */
@keyframes menuReveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}

@keyframes menuDismiss {
  from { clip-path: inset(0 0 0% 0); }
  to   { clip-path: inset(0 100% 0 0); }
}

/* --- Utility animation classes --- */
.anim-fade-in        { animation: fadeIn 0.6s var(--ease-out) both; }
.anim-fade-up        { animation: fadeUp 0.7s var(--ease-out) both; }
.anim-fade-down      { animation: fadeDown 0.7s var(--ease-out) both; }
.anim-scale-in       { animation: scaleIn 0.5s var(--ease-out) both; }
.anim-float          { animation: float 4s ease-in-out infinite; }
.anim-pulse          { animation: pulse 2s ease-in-out infinite; }
.anim-spin           { animation: spin 1s linear infinite; }
.anim-spin-slow      { animation: spinSlow 8s linear infinite; }

/* Delay helpers */
.delay-100  { animation-delay: 0.1s; }
.delay-200  { animation-delay: 0.2s; }
.delay-300  { animation-delay: 0.3s; }
.delay-400  { animation-delay: 0.4s; }
.delay-500  { animation-delay: 0.5s; }
.delay-600  { animation-delay: 0.6s; }
.delay-700  { animation-delay: 0.7s; }
.delay-800  { animation-delay: 0.8s; }