/* ============================================================
   TEDDY LOGIN — Gấu bông che mắt khi gõ mật khẩu (SVG thuần)
   Dùng cho login.ejs / register.ejs. Tông galaxy, không cần lib.
   Kích hoạt: nạp css này + teddy-login.js; đặt <div id="teddy-mount"></div>
   ngay trên form (hoặc để JS tự chèn trước form đầu tiên).
   ============================================================ */

.teddy-wrap {
  display: flex;
  justify-content: center;
  margin: 2px auto 12px;
  pointer-events: none;      /* không chắn thao tác form */
  user-select: none;
}

.teddy-svg {
  width: 150px;
  height: 150px;
  overflow: visible;
  filter: drop-shadow(0 8px 20px rgba(90, 55, 25, .5));
}

/* Chuyển động mượt (dùng translate cho tay -> ổn định, không lệ thuộc transform-origin) */
.teddy-paw   { transition: transform .30s cubic-bezier(.34, 1.56, .64, 1); }
.teddy-pupil { transition: transform .12s ease-out; }
.teddy-eyelid { transition: transform .10s ease; transform: scaleY(0); transform-box: fill-box; transform-origin: center; }
.teddy-cheek { opacity: 0; transition: opacity .3s ease; }
/* Chân — nhún nhẹ theo trạng thái, đồng bộ cảm giác "ngại" với đầu/tay */
.teddy-leg { transition: transform .30s cubic-bezier(.34, 1.56, .64, 1); transform-box: fill-box; transform-origin: center; }
/* Đầu — xoay nguyên khối (tai/mặt/mắt/miệng) quanh gốc cổ, KHÔNG kéo theo tay
   (tay gắn với thân, tách riêng khỏi .teddy-head) */
.teddy-head { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); transform-box: view-box; transform-origin: 100px 118px; }

/* Tay nghỉ (ôm bụng) — vị trí gốc trong markup. Các trạng thái dưới đây dời tay lên. */

/* CHE MẮT (đang gõ mật khẩu): 2 chân đưa lên phủ kín mắt + quay đầu đi (ngại) + hơi nhón chân */
.teddy.is-covering .teddy-paw-left  { transform: translate(6px, -62px); }
.teddy.is-covering .teddy-paw-right { transform: translate(-6px, -62px); }
.teddy.is-covering .teddy-head { transform: rotate(-9deg) translate(-2px, 1px); }
.teddy.is-covering .teddy-leg-left  { transform: translate(-1px, 2px) rotate(-6deg); }
.teddy.is-covering .teddy-leg-right { transform: translate(1px, -1px) rotate(4deg); }

/* HÉ NHÌN (bấm hiện mật khẩu): hạ tay xuống dưới mắt, lộ mắt ra + đầu quay lại gần thẳng, hơi nghiêng tò mò */
.teddy.is-peeking .teddy-paw-left  { transform: translate(4px, -40px); }
.teddy.is-peeking .teddy-paw-right { transform: translate(-4px, -40px); }
.teddy.is-peeking .teddy-head { transform: rotate(-3deg); }

/* Nháy mắt */
.teddy.is-blinking .teddy-eyelid { transform: scaleY(1); }

/* Má hồng (ngại ngùng) khi che/hé mắt */
.teddy.is-covering .teddy-cheek,
.teddy.is-peeking  .teddy-cheek { opacity: .6; }