/* Animation System Component */
@layer components {
  /* Fade Animations */
  .fade-in {
    animation: fade-in var(--duration-500) var(--ease-out) both;
  }

  .fade-in-up {
    animation: fade-in-up var(--duration-500) var(--ease-out) both;
  }

  .fade-in-down {
    animation: fade-in-down var(--duration-500) var(--ease-out) both;
  }

  .fade-in-left {
    animation: fade-in-left var(--duration-500) var(--ease-out) both;
  }

  .fade-in-right {
    animation: fade-in-right var(--duration-500) var(--ease-out) both;
  }

  /* Scale Animations */
  .scale-in {
    animation: scale-in var(--duration-300) var(--ease-spring) both;
  }

  .scale-in-center {
    animation: scale-in-center var(--duration-300) var(--ease-spring) both;
  }

  /* Slide Animations */
  .slide-in-up {
    animation: slide-in-up var(--duration-500) var(--ease-out) both;
  }

  .slide-in-down {
    animation: slide-in-down var(--duration-500) var(--ease-out) both;
  }

  .slide-in-left {
    animation: slide-in-left var(--duration-500) var(--ease-out) both;
  }

  .slide-in-right {
    animation: slide-in-right var(--duration-500) var(--ease-out) both;
  }

  /* Bounce Animations */
  .bounce-in {
    animation: bounce-in var(--duration-700) var(--ease-spring) both;
  }

  .bounce-in-up {
    animation: bounce-in-up var(--duration-700) var(--ease-spring) both;
  }

  /* Rotation Animations */
  .rotate-in {
    animation: rotate-in var(--duration-500) var(--ease-out) both;
  }

  .flip-in-x {
    animation: flip-in-x var(--duration-500) var(--ease-out) both;
  }

  .flip-in-y {
    animation: flip-in-y var(--duration-500) var(--ease-out) both;
  }

  /* Attention Seekers */
  .pulse {
    animation: pulse var(--duration-1000) var(--ease-in-out) infinite;
  }

  .heartbeat {
    animation: heartbeat 1.5s var(--ease-in-out) infinite;
  }

  .shake {
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }

  .wobble {
    animation: wobble var(--duration-1000) var(--ease-in-out) both;
  }

  .tada {
    animation: tada var(--duration-1000) var(--ease-in-out) both;
  }

  /* Continuous Animations */
  .float {
    animation: float 3s var(--ease-in-out) infinite;
  }

  .glow {
    animation: glow 2s var(--ease-in-out) infinite alternate;
  }

  .shimmer {
    position: relative;
    overflow: hidden;
  }

  .shimmer:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
    animation: shimmer 2s infinite;
  }

  /* Special Effect Animations */
  .typewriter {
    overflow: hidden;
    border-right: 2px solid var(--color-primary);
    white-space: nowrap;
    animation: 
      typewriter 3s steps(var(--char-count, 40)) 1s both,
      blink-caret 0.75s step-end infinite;
  }

  .glitch {
    position: relative;
    animation: glitch 2s linear infinite;
  }

  .glitch:before,
  .glitch:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .glitch:before {
    animation: glitch-1 0.25s linear infinite reverse;
    color: #ff0040;
    z-index: -1;
  }

  .glitch:after {
    animation: glitch-2 0.25s linear infinite;
    color: #0ff;
    z-index: -2;
  }

  /* Morphing Animations */
  .morph {
    animation: morph 4s var(--ease-in-out) infinite;
  }

  /* Stagger Animations */
  .stagger-children > * {
    animation: fade-in-up var(--duration-500) var(--ease-out) both;
  }

  .stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
  .stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
  .stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
  .stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
  .stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
  .stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
  .stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
  .stagger-children > *:nth-child(8) { animation-delay: 0.8s; }

  /* Loading Animations */
  .loading-dots {
    animation: loading-dots 1.5s infinite;
  }

  .loading-wave {
    animation: loading-wave 1.2s ease-in-out infinite;
  }

  .loading-spinner {
    animation: loading-spinner 1s linear infinite;
  }

  /* Special Effects */
  .neon-glow {
    animation: neon-glow 2s ease-in-out infinite alternate;
  }

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

  .magnetic {
    transition: transform var(--duration-200) var(--ease-out);
  }

  .magnetic:hover {
    transform: scale(1.05) rotate(1deg);
  }

  /* Keyframe Definitions */
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-in-left {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fade-in-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes scale-in {
    from {
      opacity: 0;
      transform: scale(0.8);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes scale-in-center {
    from {
      opacity: 0;
      transform: scale(0);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes slide-in-up {
    from {
      opacity: 0;
      transform: translateY(100%);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-in-down {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-in-left {
    from {
      opacity: 0;
      transform: translateX(-100%);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slide-in-right {
    from {
      opacity: 0;
      transform: translateX(100%);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes bounce-in {
    0% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
      transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
      transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
      transform: scale3d(0.97, 0.97, 0.97);
    }

    100% {
      opacity: 1;
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes bounce-in-up {
    0% {
      opacity: 0;
      transform: translate3d(0, 3000px, 0);
    }

    60% {
      opacity: 1;
      transform: translate3d(0, -20px, 0);
    }

    75% {
      transform: translate3d(0, 10px, 0);
    }

    90% {
      transform: translate3d(0, -5px, 0);
    }

    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes rotate-in {
    from {
      opacity: 0;
      transform: rotate(-200deg);
    }

    to {
      opacity: 1;
      transform: rotate(0);
    }
  }

  @keyframes flip-in-x {
    0% {
      opacity: 0;
      transform: perspective(400px) rotateX(90deg);
    }

    40% {
      transform: perspective(400px) rotateX(-20deg);
    }

    60% {
      transform: perspective(400px) rotateX(10deg);
    }

    80% {
      transform: perspective(400px) rotateX(-5deg);
    }

    100% {
      opacity: 1;
      transform: perspective(400px);
    }
  }

  @keyframes flip-in-y {
    0% {
      opacity: 0;
      transform: perspective(400px) rotateY(90deg);
    }

    40% {
      transform: perspective(400px) rotateY(-20deg);
    }

    60% {
      transform: perspective(400px) rotateY(10deg);
    }

    80% {
      transform: perspective(400px) rotateY(-5deg);
    }

    100% {
      opacity: 1;
      transform: perspective(400px);
    }
  }

  @keyframes pulse {
    0% {
      transform: scale3d(1, 1, 1);
    }

    50% {
      transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes heartbeat {
    0% {
      transform: scale(1);
    }

    14% {
      transform: scale(1.3);
    }

    28% {
      transform: scale(1);
    }

    42% {
      transform: scale(1.3);
    }

    70% {
      transform: scale(1);
    }
  }

  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }

  @keyframes wobble {
    0% {
      transform: translate3d(0, 0, 0);
    }

    15% {
      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes tada {
    0% {
      transform: scale3d(1, 1, 1);
    }

    10%, 20% {
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }

  @keyframes glow {
    from {
      text-shadow: 0 0 10px var(--color-primary);
    }

    to {
      text-shadow: 0 0 20px var(--color-primary), 0 0 30px var(--color-primary);
    }
  }

  @keyframes shimmer {
    to {
      left: 100%;
    }
  }

  @keyframes typewriter {
    to {
      left: 100%;
    }
  }

  @keyframes blink-caret {
    0%, 100% {
      border-color: transparent;
    }

    50% {
      border-color: var(--color-primary);
    }
  }

  @keyframes glitch {
    0%, 100% {
      text-shadow: 
        0.05em 0 0 #ff0040,
        -0.03em -0.04em 0 #0ff,
        0.025em 0.04em 0 #ff0;
    }

    15% {
      text-shadow: 
        0.05em 0 0 #ff0040,
        -0.03em -0.04em 0 #0ff,
        0.025em 0.04em 0 #ff0;
    }

    16% {
      text-shadow: 
        -0.05em -0.025em 0 #ff0040,
        0.025em 0.035em 0 #0ff,
        -0.05em -0.05em 0 #ff0;
    }

    49% {
      text-shadow: 
        -0.05em -0.025em 0 #ff0040,
        0.025em 0.035em 0 #0ff,
        -0.05em -0.05em 0 #ff0;
    }

    50% {
      text-shadow: 
        0.05em 0.035em 0 #ff0040,
        0.03em 0 0 #0ff,
        0 -0.04em 0 #ff0;
    }

    99% {
      text-shadow: 
        0.05em 0.035em 0 #ff0040,
        0.03em 0 0 #0ff,
        0 -0.04em 0 #ff0;
    }
  }

  @keyframes glitch-1 {
    0% {
      clip-path: inset(40% 0 61% 0);
    }

    20% {
      clip-path: inset(92% 0 1% 0);
    }

    40% {
      clip-path: inset(43% 0 1% 0);
    }

    60% {
      clip-path: inset(25% 0 58% 0);
    }

    80% {
      clip-path: inset(54% 0 7% 0);
    }

    100% {
      clip-path: inset(58% 0 43% 0);
    }
  }

  @keyframes glitch-2 {
    0% {
      clip-path: inset(25% 0 58% 0);
    }

    20% {
      clip-path: inset(54% 0 7% 0);
    }

    40% {
      clip-path: inset(58% 0 43% 0);
    }

    60% {
      clip-path: inset(40% 0 61% 0);
    }

    80% {
      clip-path: inset(92% 0 1% 0);
    }

    100% {
      clip-path: inset(43% 0 1% 0);
    }
  }

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

    34% {
      border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }

    67% {
      border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    }
  }

  @keyframes loading-dots {
    0%, 20% {
      color: var(--color-primary);
      transform: scale(1);
    }
    50% {
      color: var(--color-text-muted);
      transform: scale(1.3);
    }
    80%, 100% {
      color: var(--color-primary);
      transform: scale(1);
    }
  }

  @keyframes loading-wave {
    0%, 40%, 100% {
      transform: scaleY(0.4);
    }
    20% {
      transform: scaleY(1);
    }
  }

  @keyframes loading-spinner {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes neon-glow {
    from {
      text-shadow: 
        0 0 5px var(--color-primary),
        0 0 10px var(--color-primary),
        0 0 15px var(--color-primary);
    }
    to {
      text-shadow: 
        0 0 10px var(--color-primary),
        0 0 20px var(--color-primary),
        0 0 30px var(--color-primary),
        0 0 40px var(--color-primary);
    }
  }

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

  /* Reduced Motion Support */
  @media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    .float,
    .glow,
    .pulse,
    .heartbeat,
    .shimmer:after {
      animation: none;
    }
  }
}