/* =====================================
   Reusable Kiosk Animated Input
===================================== */

.kiosk-input {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

.kiosk-input input {
  width: 100%;
  height: 40px;

  border: none;
  outline: none;
  background: transparent;

  font-family: "Montserrat", monospace;
  font-size: clamp(20px, 2vh, 30px);
  letter-spacing: 1px;
  font-weight: 500;

  color: transparent !important;
  caret-color: var(--primary);

  position: relative;
  z-index: 2;
}

.kiosk-input input::placeholder {
  color: var(--slate-light);
  font-family: "Montserrat", sans-serif;
}

.animated-value {
  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 40px;

  display: flex;
  align-items: center;

  pointer-events: none;

  font-family: "Montserrat", monospace;
  font-size: clamp(20px, 2vh, 30px);
  letter-spacing: 1px;
  font-weight: 500;

  color: var(--ink);

  z-index: 1;
}

.kiosk-char {
  display: inline-block;
  animation: kioskCharIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes kioskCharIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

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