/*
 * Maimuta de pe ecranele de intrare. Vezi public/js/maimuta.js (copiat din ~/monkey-login-widget, varianta DigitalCheck).
 *
 * Layered, so each piece moves on its own (the technique the classic monkey and
 * yeti login animations use):
 *   .mky__head  face, ears and chest. It carries the blink (a closed-eyes frame
 *               fades in over it) and the head tilt that follows the email caret.
 *   .mky__arms  a clip box whose bottom edge is the fence (the email input top
 *               edge). It holds one inline SVG with two arms, each a rigid
 *               forearm plus a rounded paw. At idle the paws rest on the fence
 *               and the forearms drop below it, clipped away by overflow hidden.
 *               On password focus each arm swings up from its low pivot near the
 *               bottom corner, so the forearm reads as a diagonal rising from
 *               below and the paw lands centred over its eye, covering it fully.
 * The fence is the email input own top edge, so nothing here draws or rotates a
 * fence bar. No gradients.
 */

.has-mky {
  position: relative;
  overflow: visible;
}

/* AgentVocal: titlul și subtitlul formularului lasă loc în dreapta pentru maimuță, ca să nu le
   acopere (pe ecranul de cod subtitlul e lung și ar trece pe sub ea). --mky-w vine din maimuta.js. */
.has-mky .form-h {
  padding-right: var(--mky-w, 0px);
  text-wrap: balance;
}

.mky {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  /* left / top / width / height are set from maimuta.js after measuring the email
     input, so the paws rest on its top edge, toward the right. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.2, .5, 1);
  will-change: transform, opacity;
}
.mky.mky--in { opacity: 1; transform: translateY(0); }

/* Head layer: the whole head leans toward the email caret. Only this layer
   tilts, so the arms and the fence never rotate with it. */
.mky__head {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* Coborit un pic, ca barbia sa stea aproape de labele care se sprijina pe
     marginea formularului (nu plutind mult deasupra lor). Miscarea de urmarire a
     cursorului din email se adauga peste aceasta coborire. */
  transform: translateY(13%) rotate(calc(var(--tilt, 0) * 6deg));
  transform-origin: 50% 92%;
  transition: transform .28s ease;
  z-index: 1;
}
.mky__face {
  display: block;
  width: 100%;
  height: auto;
}
/* The closed-eyes frame sits on top of the open one and is invisible until it
   blinks. Roughly every 1.5s, with an occasional double blink. */
.mky__face--blink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  animation: mky-blink 4.5s infinite;
}
@keyframes mky-blink {
  0%,   29.9% { opacity: 0; }
  30%,  32%   { opacity: 1; }
  32.1%, 61.9% { opacity: 0; }
  62%,  64%   { opacity: 1; }
  64.1%, 65.9% { opacity: 0; }
  66%,  68%   { opacity: 1; }
  68.1%, 94.9% { opacity: 0; }
  95%,  97%   { opacity: 1; }
  97.1%, 100% { opacity: 0; }
}

/* Arms clip box: sits above the head so the paws can cover the eyes. Its bottom
   edge is the fence (email input top edge, 14px above the wrapper bottom) and
   overflow is hidden, so at idle the forearms below the fence are clipped and
   only the resting paws show. */
.mky__arms {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 14px);
  overflow: hidden;
  z-index: 2;
}
.mky__arms-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Each arm is one rigid group. Idle placement is baked into the inner group; the
   password lift is a rotation about a low pivot near the bottom corner plus a
   small carry, so the forearm swings up on a diagonal and the paw lands on the
   eye. transform-box: view-box makes transform-origin use viewBox units. */
.mky__arm {
  transform-box: view-box;
  transition: transform .42s cubic-bezier(.31, .8, .3, 1.18);
  will-change: transform;
}
.mky__arm--l { transform-origin: 118px 330px; }
.mky__arm--r { transform-origin: 342px 330px; }

.mky__arm-fill {
  fill: #fff;
  stroke: #111;
  stroke-width: 9;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mky__arm-line {
  fill: none;
  stroke: #111;
  stroke-width: 6;
  stroke-linecap: round;
}
/* Fur tufts: same ink as the outline, thinner, rounded ends. */
.mky__arm-fur {
  fill: none;
  stroke: #111;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Password focused: the short arms rise and the paws cover the eyes, and the
   head holds the closed-eyes frame, so the monkey never sees your secret. The
   lift is smaller than before because the head now sits lower, so the eyes are
   lower and the paws do not need to travel as far. */
.mky-hiding .mky__arm--l {
  transform: translate(12px, -132px) rotate(12deg);
}
.mky-hiding .mky__arm--r {
  transform: translate(-11px, -132px) rotate(-12deg);
}
.mky-hiding .mky__face--blink {
  opacity: 1;
  animation: none;
}

/* Pe mobil maimuta ramine vizibila: dimensiunea vine din maimuta.js (place),
   scalata dupa latimea cardului, ca sa incapa pe un card ingust fara sa
   acopere titlul sau textul tastat si fara sa iasa din card. */

@media (prefers-reduced-motion: reduce) {
  .mky,
  .mky__head,
  .mky__arm { transition: none; }
  .mky__face--blink { animation: none; }
  /* Fara inclinare dupa cursor; capul ramane coborit pe gard. Bratele schimba starea instant. */
  .mky__head { transform: translateY(13%); }
}