@import './intlTelInput.min.css';

:root {
  background-color: #F8F7FC;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bg-base{background-color: #230047;}
.bg-step-1{background: linear-gradient(116deg, #1A0025 37.69%, #290048 53.54%, #5702AF 71.25%, #AB38DD 87.3%, #F9F1FE 99.83%);}
.bg-step-2{background: linear-gradient(180deg, #6804FF 0%, #300276 100%);}
.rounded-bip-card-1{border-radius: 58px 58px 0px 0px;}
.box-shadow-bip-01{box-shadow: 0px 40px 40px 10px rgba(37, 17, 57, 0.74);}
.box-shadow-bip-02{box-shadow: 0px 22px 70px 40px rgba(0, 0, 0, 0.74);}
.noise-bg{
  background-image: url('/img/noise-bg.png');
  background-repeat: repeat;
  background-repeat: repeat-x repeat-y;
}
.btn-bip-1{
border-top: 1px solid rgba(241, 207, 255, 0.49);
background: rgba(229, 204, 255, 0.10);
backdrop-filter: blur(20px);
}

.ripple-outer-ellipse, .ripple-middle-ellipse, .ripple-inner-ellipse {
  transform-origin: center 466px;
  opacity: 0;
  will-change: transform, opacity;
}

.ripple-outer-ellipse {
  animation: ripple 4s ease-out infinite;
}

.ripple-middle-ellipse {
  animation: ripple 4s ease-out infinite;
  animation-delay: 0.5s;
}

.ripple-inner-ellipse {
  animation: ripple 4s ease-out infinite;
  animation-delay: 1s;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  20% {
    transform: scale(0.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.transform-gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.register-action-card {
  animation: slideUp01 980ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  transform: translateY(25%);
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.register-action-card--close {
  animation: slideDownClose 800ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  transform: translateY(0);
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@keyframes slideUp01 {
  from {
    opacity: 0;
    transform: translateY(20%) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideDownClose {
  from {
    opacity: .5;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(40%) scale(0.95);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Aplica la animación al elemento */
.fade-in {
  opacity: 0; /* Inicialmente invisible */
  animation: fadeIn .2s ease-in-out forwards;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}