/**
 * Matrix Design System - Background Animation Components
 * Matrix rain and terminal effects
 */

@layer components {
  /* Matrix Background Animation */
  .matrix-bg-animation {
    background: radial-gradient(ellipse at center, 
      rgba(0, 255, 65, 0.03) 0%, 
      transparent 70%
    );
    position: relative;
    overflow: hidden;
  }
  
  .matrix-bg-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      linear-gradient(90deg, transparent 98%, rgba(0, 255, 65, 0.1) 100%),
      linear-gradient(180deg, transparent 98%, rgba(0, 255, 65, 0.05) 100%);
    background-size: 50px 50px, 30px 30px;
    animation: matrix-grid 20s linear infinite;
    opacity: 0.3;
  }
  
  .matrix-bg-animation::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    right: 0;
    height: 150%;
    background: linear-gradient(
      180deg,
      transparent,
      rgba(0, 255, 65, 0.02) 50%,
      transparent
    );
    animation: matrix-scan 8s linear infinite;
    pointer-events: none;
  }
  
  /* Matrix Terminal Cursor */
  .matrix-cursor::after {
    content: '_';
    animation: matrix-terminal-cursor 1s infinite;
    color: var(--matrix-green);
  }
  
  /* Matrix Code Rain (Lightweight CSS version) */
  .matrix-rain {
    position: relative;
    overflow: hidden;
  }
  
  .matrix-rain::before {
    content: '01001010 01101000 01110100 01110100 01110000 01110011 00111010 00101111 00101111 01101101 01100001 01110100 01110010 01101001 01111000 00101110 01100011 01101111 01101101';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 200%;
    font-family: var(--matrix-font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--matrix-green);
    opacity: 0.1;
    word-wrap: break-word;
    white-space: pre-wrap;
    animation: matrix-rain-fall 15s linear infinite;
    pointer-events: none;
  }
  
  /* Terminal Window */
  .terminal-window {
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(13, 13, 13, 0.95) 100%
    );
    border: 2px solid var(--matrix-green);
    border-radius: 8px;
    box-shadow: 
      0 0 20px rgba(0, 255, 65, 0.3),
      inset 0 0 50px rgba(0, 255, 65, 0.05);
    position: relative;
    overflow: hidden;
  }
  
  .terminal-window::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--matrix-green),
      transparent
    );
    animation: matrix-scan-line 3s linear infinite;
  }
  
  .terminal-header {
    background: var(--matrix-green);
    color: var(--matrix-black);
    padding: 8px 16px;
    font-family: var(--matrix-font-mono);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .terminal-header::after {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--matrix-black);
    border-radius: 50%;
    animation: matrix-terminal-cursor 1s infinite;
  }
  
  .terminal-body {
    padding: 24px;
    min-height: 200px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
  }
  
  /* Loading States */
  .matrix-loading {
    position: relative;
    color: var(--matrix-green);
    font-family: var(--matrix-font-mono);
  }
  
  .matrix-loading::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1em;
    background: var(--matrix-green);
    margin-left: 2px;
    animation: matrix-terminal-cursor 1s infinite;
  }
  
  .matrix-loading-dots::after {
    content: '...';
    animation: matrix-loading-dots 2s infinite;
  }
  
  /* Responsive Matrix Effects */
  @media (max-width: 768px) {
    .matrix-bg-animation::before {
      background-size: 30px 30px, 20px 20px;
    }
    
    .terminal-window {
      border-radius: 4px;
      border-width: 1px;
    }
    
    .terminal-header {
      padding: 6px 12px;
      font-size: 10px;
    }
    
    .terminal-body {
      padding: 16px;
      min-height: 150px;
    }
  }
}

/* Matrix Animation Keyframes */
@keyframes matrix-grid {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

@keyframes matrix-scan {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes matrix-rain-fall {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  90% {
    opacity: 0.1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes matrix-loading-dots {
  0%, 20% {
    content: '.';
  }
  40% {
    content: '..';
  }
  60%, 100% {
    content: '...';
  }
}