/* SLSSAS Keyboard Animation Styles - Minimalist Government Theme */

/* Keyboard press animation for letters */
.slssas-letter {
  display: inline-block;
  font-weight: 900;
  letter-spacing: -0.02em;
  transition: transform 0.2s ease;
}

/* SLS letters - outlined style */
.slssas-letter-outlined {
  color: transparent;
  -webkit-text-stroke: 0.8px #000000;
  text-stroke: 0.8px #000000;
}

/* SAS letters - filled style with blue color */
.slssas-letter-filled {
  color: #2563eb;
}

/* Individual letter animations - keyboard press effect */
@keyframes pressDown1 {
  30%, 40%, 100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(8px);
  }
}

@keyframes pressDown2 {
  70%, 80%, 100% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(8px);
  }
}

@keyframes pressDown3 {
  30%, 40%, 100% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(8px);
  }
}

@keyframes pressDown4 {
  40%, 50%, 100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(8px);
  }
}

@keyframes pressDown5 {
  20%, 30%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(8px);
  }
}

@keyframes pressDown6 {
  60%, 70%, 100% {
    transform: translateY(0);
  }
  65% {
    transform: translateY(8px);
  }
}

/* Apply animations to each letter */
.slssas-letter:nth-child(1) {
  animation: pressDown1 3s infinite ease-in-out;
}

.slssas-letter:nth-child(2) {
  animation: pressDown2 3.5s infinite ease-in-out;
}

.slssas-letter:nth-child(3) {
  animation: pressDown3 4s infinite ease-in-out;
}

.slssas-letter:nth-child(4) {
  animation: pressDown4 3.2s infinite ease-in-out;
}

.slssas-letter:nth-child(5) {
  animation: pressDown5 3.8s infinite ease-in-out;
}

.slssas-letter:nth-child(6) {
  animation: pressDown6 4.2s infinite ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .slssas-letter-outlined {
    -webkit-text-stroke: 0.7px #000000;
    text-stroke: 0.7px #000000;
  }

  @keyframes pressDown1, @keyframes pressDown2, @keyframes pressDown3,
  @keyframes pressDown4, @keyframes pressDown5, @keyframes pressDown6 {
    30%, 40%, 100% {
      transform: translateY(0);
    }
    35% {
      transform: translateY(5px);
    }
  }
}