/* The password field (login page and panel): the eye, its animation and the Latin-only hint. Shared by login.css and styles.css. */
.pw-fx {
  position: relative;
}
.pw-fx input {
  padding-right: 64px;
}
.pw-fx .reveal {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #eef2f4;
  color: #202a33;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.pw-fx .reveal:hover {
  background: #e1e7ea;
}
.pw-fx .reveal[aria-pressed="true"] {
  background: #fde8ed;
  color: #8c1630;
}
.eye {
  width: 24px;
  height: 24px;
  overflow: visible;
}
.eye-shape,
.eye-pupil {
  transform-box: fill-box;
  transform-origin: center;
}
.eye-slash {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal[aria-pressed="true"] .eye-slash {
  stroke-dashoffset: 0;
}

/* On a click: the eye blinks, the pupil glances left and right, and a light band slides over the field
   (left to right when the password is shown, back when it is hidden). */
.pw-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 0 38%,
    rgba(238, 86, 110, 0.38) 50%,
    transparent 62% 100%
  );
  background-size: 300% 100%;
}
.pw-fx.sweep-in::after {
  animation: pw-sweep-in 0.8s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.pw-fx.sweep-out::after {
  animation: pw-sweep-out 0.65s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.pw-fx.sweep-in .eye-shape,
.pw-fx.sweep-out .eye-shape {
  animation: pw-blink 0.4s ease-in-out;
}
.pw-fx.sweep-in .eye-pupil {
  animation: pw-glance 0.7s ease-in-out 0.12s;
}
@keyframes pw-sweep-in {
  0% {
    opacity: 0;
    background-position: 80% 0;
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: 20% 0;
  }
}
@keyframes pw-sweep-out {
  0% {
    opacity: 0;
    background-position: 20% 0;
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: 80% 0;
  }
}
@keyframes pw-blink {
  0%,
  100% {
    transform: scaleY(1);
  }
  45% {
    transform: scaleY(0.08);
  }
}
@keyframes pw-glance {
  0%,
  100% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-3px);
  }
  70% {
    transform: translateX(3px);
  }
}

/* A letter that is not Latin: the field shakes and says why. */
.pw-nope {
  animation: pw-nope 0.34s ease-in-out;
}
@keyframes pw-nope {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
}
.pw-latin {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(8, 12, 20, 0.18);
  padding: 9px 12px;
  border-radius: 8px;
  background: #fff1f4;
  color: #8c1630;
  font-size: 15px;
  line-height: 1.45;
  animation: pw-hint-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes pw-hint-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw-fx.sweep-in::after,
  .pw-fx.sweep-out::after,
  .pw-fx .eye-shape,
  .pw-fx .eye-pupil,
  .pw-nope,
  .pw-latin {
    animation: none !important;
  }
  .eye-slash,
  .pw-fx .reveal {
    transition: none;
  }
}