/* ==========================================================================
   Meridian — Keyframe Animations & Utility Classes
   Shared animation library for the entire project
   ========================================================================== */

/* ==========================================================================
   Keyframe Definitions
   ========================================================================== */

/* --- flicker — Rapid opacity shifts (text/element flicker) --- */
@keyframes flicker {
  0%   { opacity: 1; }
  10%  { opacity: 0.8; }
  20%  { opacity: 1; }
  50%  { opacity: 1; }
  55%  { opacity: 0.3; }
  60%  { opacity: 1; }
  80%  { opacity: 1; }
  85%  { opacity: 0.8; }
  90%  { opacity: 1; }
  100% { opacity: 1; }
}

/* --- pulse — Gentle scale throb (favicon, buttons) --- */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* --- float — Vertical hover motion (illustrations) --- */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* --- scanline-scroll — Moving scanline overlay --- */
@keyframes scanline-scroll {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}

/* --- glitch-clip — Random clip-path reveals (3-4 states) --- */
@keyframes glitch-clip {
  0%   { clip-path: inset(0 0 0 0); }
  20%  { clip-path: inset(10% 0 60% 0); }
  40%  { clip-path: inset(40% 0 20% 0); }
  60%  { clip-path: inset(80% 0 5% 0); }
  80%  { clip-path: inset(25% 0 50% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* --- shake — Small random translates --- */
@keyframes shake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2px, 1px); }
  20%  { transform: translate(3px, -1px); }
  30%  { transform: translate(-1px, 2px); }
  40%  { transform: translate(2px, -2px); }
  50%  { transform: translate(-3px, 0); }
  60%  { transform: translate(1px, 2px); }
  70%  { transform: translate(-2px, -1px); }
  80%  { transform: translate(3px, 1px); }
  90%  { transform: translate(-1px, -2px); }
  100% { transform: translate(0, 0); }
}

/* --- typewriter-cursor — Blinking cursor (step animation) --- */
@keyframes typewriter-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* --- fade-in-up — Opacity 0->1, translateY 20px->0 --- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- fade-in — Simple opacity 0->1 --- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- slide-in-right — translateX(100%) -> 0 --- */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* --- slide-in-left — translateX(-100%) -> 0 --- */
@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* --- dissolve — Opacity + scale + blur filter --- */
@keyframes dissolve {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  40% {
    opacity: 0.6;
    transform: scale(1.02);
    filter: blur(1px);
  }
  70% {
    opacity: 0.25;
    transform: scale(1.05);
    filter: blur(4px);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(12px);
    visibility: hidden;
  }
}

/* --- heartbeat — Scale pulse mimicking heartbeat rhythm --- */
@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.15); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.1); }
  56%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* --- paw-fade — Opacity 0->0.6->0 with subtle translate --- */
@keyframes paw-fade {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.8);
  }
  30% {
    opacity: 0.6;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 0.6;
    transform: translateY(-2px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.9);
  }
}

/* --- chromatic-shift — Text-shadow color offset cycling --- */
@keyframes chromatic-shift {
  0% {
    text-shadow: 2px 0 0 rgba(232, 84, 84, 0.5),
                 -2px 0 0 rgba(84, 200, 232, 0.5);
  }
  25% {
    text-shadow: -1px 1px 0 rgba(232, 84, 84, 0.4),
                 1px -1px 0 rgba(84, 200, 232, 0.4);
  }
  50% {
    text-shadow: 1px 0 0 rgba(232, 84, 200, 0.5),
                 -1px 0 0 rgba(84, 232, 100, 0.5);
  }
  75% {
    text-shadow: -2px -1px 0 rgba(232, 84, 84, 0.4),
                 2px 1px 0 rgba(84, 200, 232, 0.4);
  }
  100% {
    text-shadow: 2px 0 0 rgba(232, 84, 84, 0.5),
                 -2px 0 0 rgba(84, 200, 232, 0.5);
  }
}

/* --- static-noise — Background-position rapid random shifts --- */
@keyframes static-noise {
  0%    { background-position: 0 0; }
  12.5% { background-position: -5% 10%; }
  25%   { background-position: 8% -3%; }
  37.5% { background-position: -2% 7%; }
  50%   { background-position: 6% -8%; }
  62.5% { background-position: -7% 4%; }
  75%   { background-position: 3% -5%; }
  87.5% { background-position: -4% 9%; }
  100%  { background-position: 0 0; }
}

/* --- breathe — Box-shadow/opacity subtle pulse --- */
@keyframes breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(232, 168, 62, 0.0);
    opacity: 0.9;
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(232, 168, 62, 0.08);
    opacity: 1;
  }
}

/* --- cursor-drift — Very subtle translate for ghost cursor --- */
@keyframes cursor-drift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(1px, -0.5px); }
  40%  { transform: translate(-0.5px, 1px); }
  60%  { transform: translate(0.5px, 0.5px); }
  80%  { transform: translate(-1px, -0.5px); }
  100% { transform: translate(0, 0); }
}

/* --- notification-pop — Scale 0->1.2->1 bounce --- */
@keyframes notification-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- tear — Clip-path horizontal slice animation --- */
@keyframes tear {
  0% {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
  15% {
    clip-path: inset(15% 0 70% 0);
    transform: translateX(8px);
  }
  30% {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
  45% {
    clip-path: inset(55% 0 25% 0);
    transform: translateX(-6px);
  }
  60% {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
  75% {
    clip-path: inset(35% 0 50% 0);
    transform: translateX(4px);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

/* --- text-scramble — Letter-spacing and opacity jitter --- */
@keyframes text-scramble {
  0% {
    letter-spacing: 0em;
    opacity: 1;
  }
  15% {
    letter-spacing: 0.05em;
    opacity: 0.85;
  }
  30% {
    letter-spacing: -0.02em;
    opacity: 1;
  }
  45% {
    letter-spacing: 0.08em;
    opacity: 0.75;
  }
  60% {
    letter-spacing: 0em;
    opacity: 1;
  }
  75% {
    letter-spacing: -0.03em;
    opacity: 0.9;
  }
  85% {
    letter-spacing: 0.04em;
    opacity: 0.8;
  }
  100% {
    letter-spacing: 0em;
    opacity: 1;
  }
}


/* ==========================================================================
   Utility Classes — Animation Application
   ========================================================================== */

.animate-flicker {
  animation: flicker 0.15s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease both;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* ==========================================================================
   Animation Delay Utilities — 100ms increments
   ========================================================================== */

.animate-delay-1 {
  animation-delay: 100ms;
}

.animate-delay-2 {
  animation-delay: 200ms;
}

.animate-delay-3 {
  animation-delay: 300ms;
}

.animate-delay-4 {
  animation-delay: 400ms;
}

.animate-delay-5 {
  animation-delay: 500ms;
}

/* ==========================================================================
   Animation Speed Modifiers
   ========================================================================== */

/* 2x duration — slower */
.animate-slow {
  animation-duration: calc(var(--animation-duration, 1s) * 2) !important;
}

/* Explicit slow overrides for each animation type */
.animate-flicker.animate-slow  { animation-duration: 0.30s !important; }
.animate-pulse.animate-slow    { animation-duration: 4s !important; }
.animate-float.animate-slow    { animation-duration: 6s !important; }
.animate-fade-in-up.animate-slow { animation-duration: 1.2s !important; }
.animate-shake.animate-slow    { animation-duration: 1s !important; }

/* 0.5x duration — faster */
.animate-fast {
  animation-duration: calc(var(--animation-duration, 1s) * 0.5) !important;
}

/* Explicit fast overrides for each animation type */
.animate-flicker.animate-fast  { animation-duration: 0.075s !important; }
.animate-pulse.animate-fast    { animation-duration: 1s !important; }
.animate-float.animate-fast    { animation-duration: 1.5s !important; }
.animate-fade-in-up.animate-fast { animation-duration: 0.3s !important; }
.animate-shake.animate-fast    { animation-duration: 0.25s !important; }

/* ==========================================================================
   Animation Kill Switch
   ========================================================================== */

.no-animation,
.no-animation *,
.no-animation *::before,
.no-animation *::after {
  animation: none !important;
  transition: none !important;
}

/* ==========================================================================
   Reduced Motion — System Preference
   Disables all animations for users who prefer reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  .animate-flicker,
  .animate-pulse,
  .animate-float,
  .animate-fade-in-up,
  .animate-shake {
    animation: none !important;
  }

  .corruptible {
    filter: none !important;
    transform: none !important;
  }

  .corruption-overlay,
  .corruption-scanlines::before,
  .corruption-vignette::after {
    display: none !important;
  }
}