/* Animaciones y transiciones */

.scramble-text {
  font-size: 8rem;
  font-weight: 300;
  color: white;
  text-align: center;
  margin-top: 3rem;
  font-family: 'Mulish', sans-serif;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.scramble-text::after {
  animation: blink 0.5s steps(2, start) infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.circle {
  animation: move var(--duration) linear normal forwards;
}

@keyframes move {
  0% {
    opacity: 0%;
    left: calc(var(--pos-x) - min(20vw, 225px));
    top: calc(var(--pos-y) - min(20vw, 225px));
  }
  10% {
    opacity: 50%;
  }
  90% {
    opacity: 50%;
  }
  100% {
    opacity: 0%;
    left: calc(var(--end-x) - 225px);
    top: calc(var(--end-y) - 225px);
    display: none;
    visibility: hidden;
  }
}

/* Transiciones de botones y elementos con transform */

.btn-primary,
.btn-secondary {
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

/* Transiciones logo borde */

.borde-logo:before,
.borde-logo:after {
  transition: transform 0.5s ease;
}

.borde-logo:hover:before {
  transform: translate(-5px, -5px);
}

.borde-logo:hover:after {
  transform: translate(5px, 5px);
}

/* Transición de color barra naranja */

.barra-naranja {
  transition: color 0.9s ease-in-out;
}