/* =========================================================
   小豹快跑 · 登录页美化（四个小人 / 四角色）
   纯 CSS 造型 + 动画。交互逻辑见 /js/login-anim.js
   ========================================================= */

/* ---------- 背景：柔和动态渐变 + 漂浮光斑 ---------- */
.login-body {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fff3e6 0%, #fdeef0 45%, #eef3fb 100%);
}
.login-body::before,
.login-body::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.login-body::before {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #ffb27a 0%, transparent 70%);
  top: -120px; left: -90px;
  animation: float-a 14s ease-in-out infinite;
}
.login-body::after {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #9ec6ff 0%, transparent 70%);
  bottom: -150px; right: -110px;
  animation: float-b 18s ease-in-out infinite;
}
@keyframes float-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } }
@keyframes float-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-50px,-30px); } }

/* ---------- 卡片：桶装水造型 ---------- */
.login-card {
  z-index: 1;
  width: 380px;
  /* 锁死宽高比：窗口缩放时桶形按比例整体缩小，不再被拉胖变形（objectBoundingBox 裁切会随比例拉伸） */
  aspect-ratio: 380 / 516;
  /* 顶部留瓶口收窄区；底部留大段给收窄瓶颈，确保表单落在直身安全区（不被裁切） */
  padding: 88px 34px 100px;
  position: relative;
  /* 桶装水轮廓由 SVG clipPath（objectBoundingBox）裁切，随卡片自适应缩放 */
  clip-path: url(#jugClip);
  /* 阴影改用 drop-shadow，才会贴合桶形轮廓 */
  filter:
    drop-shadow(0 18px 30px rgba(37, 99, 235, 0.18))
    drop-shadow(0 6px 12px rgba(20, 24, 40, 0.10));
  animation: card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* 用一个内部容器承载内容 */
.login-card > .card-inner {
  display: block;
  position: relative;
  z-index: 1;
}
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }

/* 外壳：承载卡片 + 底部瓶口；瓶口为独立元素，避免被卡片 clip-path 裁切 */
.login-card-shell { position: relative; flex: 0 0 auto; z-index: 1; }
.login-card-mouth {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(46px, 15vw, 58px);
  height: clamp(34px, 11vw, 42px);
  /* 与桶身（登录卡片）一致的纯白玻璃质感 */
  background: var(--panel, #ffffff);
  border-radius: 5px 5px 14px 14px;
  box-shadow:
    inset 0 3px 5px rgba(0, 0, 0, 0.06),
    inset 0 -6px 9px rgba(0, 0, 0, 0.07),
    0 10px 18px rgba(20, 24, 40, 0.12);
  z-index: 0;
}
/* 瓶口左侧圆柱高光，增强体积感 */
.login-card-mouth::after {
  content: "";
  position: absolute;
  top: 5px; left: 11%;
  width: 16%; height: calc(100% - 13px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
  border-radius: 6px;
  filter: blur(1px);
  pointer-events: none;
}

/* 覆盖全局 style.css 的 .login-card::before 橙色品牌条（height:6px + background:var(--brand-grad)） */
.login-card::before { display: none; }

/* 桶装水质感：蓝色水位线移到桶身「上方」（模拟倒扣水桶——蓝水在桶身、瓶颈在下） */
.login-card::after {
  content: "";
  position: absolute;
  top: 0; left: 4%; right: 4%;
  height: 44%;
  background: linear-gradient(180deg,
    rgba(37, 99, 235, 0.16) 0%,
    rgba(59, 130, 246, 0.10) 45%,
    rgba(59, 130, 246, 0.02) 100%
  );
  border-radius: 40% 40% 0 0 / 20% 20% 0 0;
  pointer-events: none;
  z-index: 0;
}

/* ---------- 登录舞台：大屏左一排小人右卡片；小屏小人上卡片下 ---------- */
.login-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 56px);
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 24px;
}
.login-mascots {
  --m-size: clamp(74px, 9vw, 112px);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: clamp(14px, 2.4vw, 26px);
  flex: 0 0 auto;
}

/* ---------- 水主题卡通小人：桶装水 / 瓶装水 / 饮水机 ---------- */
.mascot {
  position: relative;
  width: calc(var(--m-size, 88px) * 1.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  /* 贴合桶形轮廓的投影（clip-path 会裁掉 body 外阴影，故由外层补回） */
  filter: drop-shadow(0 calc(var(--m-size, 88px) * 0.12) calc(var(--m-size, 88px) * 0.22) rgba(20, 40, 80, 0.18));
}
.mascot-body {
  position: relative;
  width: var(--m-size, 88px);
  height: calc(var(--m-size, 88px) * 1.06);
  background: var(--m-color, #3b82f6);
  box-shadow: inset 0 calc(var(--m-size) * -0.1) calc(var(--m-size) * 0.18) rgba(0, 0, 0, 0.12), inset 0 calc(var(--m-size) * 0.1) calc(var(--m-size) * 0.18) rgba(255, 255, 255, 0.32), 0 calc(var(--m-size) * 0.13) calc(var(--m-size) * 0.26) rgba(0, 0, 0, 0.14);
  animation: bob 3.2s ease-in-out infinite;
}
.mascot:nth-child(1) .mascot-body { animation-delay: 0s; }
.mascot:nth-child(2) .mascot-body { animation-delay: -0.7s; }
.mascot:nth-child(3) .mascot-body { animation-delay: -1.4s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 脸 */
.mascot-face { position: absolute; inset: 0; }

/* 腮红 */
.mascot-face::before,
.mascot-face::after {
  content: "";
  position: absolute;
  bottom: 23%;
  width: calc(var(--m-size) * 0.17);
  height: calc(var(--m-size) * 0.10);
  background: rgba(255, 120, 140, 0.5);
  border-radius: 50%;
  filter: blur(0.5px);
  pointer-events: none;
}
.mascot-face::before { left: 10%; }
.mascot-face::after { right: 10%; }

.eye {
  position: absolute;
  top: 37%;
  z-index: 2;
  width: calc(var(--m-size) * 0.26);
  height: calc(var(--m-size) * 0.28);
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.05);
  transition: transform 0.09s ease-out;
}
.eye-l { left: 14%; }
.eye-r { right: 14%; }
.pupil {
  position: absolute;
  top: 52%; left: 50%;
  width: calc(var(--m-size) * 0.15);
  height: calc(var(--m-size) * 0.15);
  background: #2a2230;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.07s linear;
}
.pupil::after {
  content: "";
  position: absolute;
  top: 12%; left: 12%;
  width: 38%; height: 38%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
}
.mouth {
  position: absolute;
  bottom: 25%;
  left: 50%;
  width: calc(var(--m-size) * 0.18);
  height: calc(var(--m-size) * 0.10);
  border: calc(var(--m-size) * 0.028) solid #5b3a1a;
  border-top: none;
  border-radius: 0 0 10px 10px;
  transform: translateX(-50%);
  transition: all 0.2s ease;
}

/* 眨眼 */
.mascot.blink .eye { transform: scaleY(0.12); }

/* ===== 桶装水 (jug) —— 外形对齐登录框的桶装水瓶轮廓，更大 ===== */
.mascot[data-type="jug"] { --m-color: linear-gradient(165deg, #60a5fa, #2563eb); }
.mascot[data-type="jug"] .mascot-body {
  width: var(--m-size);
  height: calc(var(--m-size) * 1.06);
  clip-path: url(#jugClipUp);
}
/* 桶身腰环（两道浅色横纹） */
.m-jug-rings {
  position: absolute; left: 7%; right: 7%; top: 54%; height: calc(var(--m-size) * 0.26);
  pointer-events: none;
}
.m-jug-rings::before,
.m-jug-rings::after {
  content: ""; position: absolute; left: 0; right: 0; height: calc(var(--m-size) * 0.035);
  background: rgba(255, 255, 255, 0.5); border-radius: 2px;
}
.m-jug-rings::before { top: 0; }
.m-jug-rings::after { bottom: 0; }

/* ===== 瓶装水 (bottle) —— 同桶装水瓶轮廓，更小、更瘦高 ===== */
.mascot[data-type="bottle"] { --m-color: linear-gradient(165deg, rgba(186, 230, 253, 0.95), rgba(56, 189, 248, 0.92)); }
.mascot[data-type="bottle"] .mascot-body {
  width: calc(var(--m-size) * 0.72);
  height: calc(var(--m-size) * 1.20);
  clip-path: url(#jugClipUp);
}
/* 瓶身竖棱 */
.m-bottle-ridges {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(var(--m-size) * 0.12),
    rgba(255, 255, 255, 0.42) calc(var(--m-size) * 0.12) calc(var(--m-size) * 0.14));
}

/* ===== 饮水机 (dispenser) ===== */
.mascot[data-type="dispenser"] { --m-color: linear-gradient(165deg, #f4f7fb, #dbe4ef); }
.mascot[data-type="dispenser"] .mascot-body {
  border-radius: 14% 14% 10% 10% / 8% 8% 12% 12%;
  border: calc(var(--m-size) * 0.02) solid rgba(15, 23, 42, 0.07);
}
/* 顶部倒扣蓝桶（宽底在上、窄口在下插入机身） */
.m-disp-bucket {
  position: absolute; top: calc(var(--m-size) * -0.30); left: 50%; transform: translateX(-50%);
  width: calc(var(--m-size) * 0.66); height: calc(var(--m-size) * 0.40);
  background: linear-gradient(165deg, #60a5fa, #2563eb);
  clip-path: polygon(6% 0, 94% 0, 80% 100%, 20% 100%);
  box-shadow: inset 0 calc(var(--m-size) * 0.06) calc(var(--m-size) * 0.1) rgba(255, 255, 255, 0.25);
}
/* 接水盘 */
.m-disp-tray {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--m-size) * 0.06);
  width: calc(var(--m-size) * 0.6); height: calc(var(--m-size) * 0.09);
  background: linear-gradient(#cbd5e1, #94a3b8);
  border-radius: 4px;
}
/* 饮水机白机身：给眼睛加深描边以保证可见 */
.mascot[data-type="dispenser"] .eye { box-shadow: inset 0 0 0 1.6px rgba(30, 58, 138, 0.35); }

/* 偷看密码：饮水机探头 */
.mascot.peeker.peeking { transform: translate(-5px, 12px) rotate(-9deg) scale(1.06); }
.mascot.peeker.peeking .eye { transform: scale(1.18); }

/* 委屈 / 难过：嘴角下弯 + 一滴泪 */
.mascot.sad .mouth {
  height: 9px;
  border: 2px solid #5b3a1a;
  border-bottom: none;
  border-radius: 11px 11px 0 0;
  bottom: 19%;
}
.mascot .tear {
  position: absolute;
  top: 46%; left: 30%;
  width: 5px; height: 7px;
  background: #6cb8ff;
  border-radius: 0 60% 60% 60%;
  transform: rotate(45deg) scale(0);
  opacity: 0;
}
.mascot.sad .tear { animation: tear 1.6s ease-in 0.1s; }
@keyframes tear {
  0% { transform: rotate(45deg) translateY(0) scale(0.6); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: rotate(45deg) translateY(14px) scale(1); opacity: 0; }
}

/* 离场：缩起飘走 */
.mascot.leave { animation: leave 0.8s cubic-bezier(0.55, 0, 0.55, 1) forwards; }
.mascot:nth-child(1).leave { --dx: -170px; }
.mascot:nth-child(2).leave { --dx: 0px; }
.mascot:nth-child(3).leave { --dx: 170px; }
@keyframes leave {
  to { transform: translate(var(--dx, 0), -150px) scale(0.5) rotate(12deg); opacity: 0; }
}

/* ---------- 登录按钮：委屈表情 ---------- */
#login-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  /* 水感玻璃按钮：半透明蓝 + 毛玻璃 + 白色高光描边 */
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.82), rgba(14, 165, 233, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 24px rgba(14, 165, 233, 0.28);
  text-shadow: 0 1px 2px rgba(2, 60, 120, 0.35);
}
#login-btn:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.92), rgba(14, 165, 233, 0.74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 14px 30px rgba(14, 165, 233, 0.36);
}
.btn-mood { display: none; }
#login-btn.is-wronged .btn-mood,
#login-btn.is-success .btn-mood,
#login-btn.is-loading .btn-mood {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#login-btn .btn-mood .eye {
  position: relative; top: auto; left: auto; right: auto;
  width: 9px; height: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: #fff;
}
#login-btn .btn-mood .eye .pupil {
  width: 5px; height: 5px; background: #2a2230;
}
#login-btn .btn-mood .mouth {
  position: relative; bottom: auto; left: auto;
  width: 11px; height: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-top: none;
  border-radius: 0 0 8px 8px;
  transform: none;
}
/* 委屈态：按钮变灰、嘴角下弯、流泪 */
#login-btn.is-wronged {
  background: linear-gradient(135deg, #b9bfc7, #9aa1ab);
  box-shadow: 0 8px 22px rgba(120, 130, 145, 0.3);
}
#login-btn.is-wronged .btn-mood .mouth {
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
#login-btn.is-wronged .btn-mood .eye { transform: scaleY(0.85); }
#login-btn .btn-tear {
  position: absolute;
  top: 8px; left: 50%;
  width: 6px; height: 8px;
  background: #6cb8ff;
  border-radius: 0 60% 60% 60%;
  transform: rotate(45deg) scale(0);
  opacity: 0;
}
#login-btn.is-wronged .btn-tear { animation: tear 1.4s ease-in 0.1s; }
#login-btn.is-wronged .btn-text::after { content: " · 委屈了"; }

/* 加载中：按钮轻微脉冲 */
#login-btn.is-loading { animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(0.97); } }

/* 登录成功：按钮欢呼一下再离场 */
#login-btn.is-success { background: linear-gradient(135deg, #22c55e, #16a34a); }

/* ---------- 小屏适配：小人横排到卡片上方（尺寸由 clamp 自适应） ---------- */
/* ---------- 登录页表单：贴合桶形、尺寸更精致（覆盖全局基础样式） ---------- */
.login-card .field { margin-bottom: clamp(10px, 2.6vw, 13px); }
.login-card .field input {
  padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 14px);
  font-size: clamp(13px, 3.2vw, 14px);
  border-radius: clamp(9px, 2.4vw, 11px);
  display: block;
  width: calc(100% - 32px);
  margin: 0 auto;
}
.login-card .field input::placeholder {
  color: rgba(60, 72, 100, 0.45);
  font-size: clamp(13px, 3.2vw, 14px);
}
.login-card .login-title { font-size: clamp(17px, 4.4vw, 20px); margin: 6px 0 clamp(18px, 4vw, 28px); }
.login-card .login-logo img { width: clamp(118px, 30vw, 150px); }
.login-card #login-btn { padding: clamp(9px, 2.2vw, 12px) clamp(14px, 3.4vw, 16px); font-size: clamp(13px, 3.4vw, 15px); letter-spacing: clamp(1px, 0.5vw, 2px); width: calc(100% - 32px); margin: 0 auto; }
.login-card .login-error { font-size: clamp(11px, 2.8vw, 12.5px); margin: 6px 0 0; }

@media (max-width: 760px) {
  .login-stage { flex-direction: column; gap: 14px; justify-content: center; align-items: center; }
  /* 窗口过窄时隐藏卡通，保证登录框完整居中显示 */
  .login-mascots { display: none; }
  .login-card {
    width: min(calc(100vw - 32px), 380px);
    aspect-ratio: 380 / 516;
    padding: 76px 26px 80px;
    min-height: 0;
  }
  .login-card::after { height: 40%; }
}