/* ==========================================================================
   登录页 · 视频背景版
   层级：视频(0) → 遮罩/光效(1) → 登录卡(2) → 页脚(2)
   ========================================================================== */

.login-wrap{
  position:relative;
  min-height:100vh;
  min-height:100svh;                 /* 移动端地址栏收展时不跳动 */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 20px 64px;
  overflow:hidden;
  background:#07080B;                /* 视频与封面加载前的兜底底色 */
  isolation:isolate;
}

/* ---------- 1. 背景视频层 ---------- */
/* 容器本身不参与动画：一旦给容器挂 transform/will-change，里面的视频帧和
   两团大半径 blur 光晕每帧都要跟着重新光栅化，是第一版卡顿的直接原因。 */
.login-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:#07080B;                /* 视频与封面加载前的兜底底色 */
}
/* 海报层独立承担“缓慢推近”的呼吸感：只有一张图，纯 transform，合成器执行 */
.login-poster{
  position:absolute; inset:0;
  background:#07080B url("/media/login-poster.jpg") center / cover no-repeat;
  transform-origin:50% 46%;
  animation:loginBgDrift 30s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes loginBgDrift{
  from{ transform:scale(1.02) }
  to  { transform:scale(1.06) }
}
/* 视频缓冲充足后淡入，与海报层无缝衔接（视频层盖在海报之上） */
.login-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;                  /* 核心：等比放大铺满，任何屏幕比例都不变形 */
  opacity:0;
  transition:opacity .7s ease;
}
.login-wrap.login-video-on .login-video{ opacity:1 }

/* ---------- 2. 半透明遮罩：压暗四角、保证表单文字对比度 ---------- */
.login-tint{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(7,8,11,.62) 0%, rgba(7,8,11,.30) 34%, rgba(7,8,11,.38) 66%, rgba(7,8,11,.78) 100%);
}
.login-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 46%, transparent 46%, rgba(7,8,11,.55) 100%);
}
/* 两团品牌红光晕缓缓游动，强化“凤凰”氛围
   性能：blur 半径 80→48px；动画只用 transform/opacity（不缩放，避免重新光栅化）；
   不加 will-change——常驻提升这么大的模糊层会额外吃显存 */
.login-glow{ position:absolute; z-index:1; border-radius:50%; filter:blur(48px); pointer-events:none; }
.login-glow-a{
  width:52vmax; height:52vmax; left:-16vmax; top:-18vmax;
  background:radial-gradient(circle, rgba(230,0,18,.42), transparent 66%);
  animation:loginGlowA 22s ease-in-out infinite alternate;
}
.login-glow-b{
  width:40vmax; height:40vmax; right:-12vmax; bottom:-14vmax;
  background:radial-gradient(circle, rgba(255,120,40,.20), transparent 68%);
  animation:loginGlowB 27s ease-in-out infinite alternate;
}
@keyframes loginGlowA{
  from{ transform:translate(0,0);    opacity:.75 }
  to  { transform:translate(6vmax,4vmax); opacity:1 }
}
@keyframes loginGlowB{
  from{ transform:translate(0,0);    opacity:.65 }
  to  { transform:translate(-5vmax,-4vmax); opacity:.95 }
}

/* ---------- 3. 登录卡：深色玻璃拟态 ----------
   性能：不再用 backdrop-filter（视频每帧都要重做 18px 模糊），
   改为更高的不透明渐变 + 内高光，视觉接近、渲染成本趋近于零 */
.login-card{
  position:relative; z-index:2;
  width:100%; max-width:400px;
  padding:34px 30px 26px;
  border-radius:20px;
  color:#F4F6FA;
  background:linear-gradient(160deg, rgba(30,33,42,.92), rgba(13,15,20,.95));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  animation:loginCardIn .8s cubic-bezier(.22,1,.36,1) both;
}
/* 卡片外圈红色呼吸光：光晕固定在 ::after 上，只动画 opacity（原 box-shadow 动画走重绘） */
.login-card::after{
  content:''; position:absolute; inset:-1px; z-index:-1; border-radius:21px;
  box-shadow:0 26px 64px rgba(0,0,0,.55), 0 0 46px rgba(230,0,18,.22);
  opacity:0;
  animation:loginHalo 4.5s ease-in-out infinite;
}
@keyframes loginHalo{
  0%,100%{ opacity:0 }
  50%    { opacity:1 }
}
/* 顶边流光扫过：transform 位移（原 background-position 动画走重绘） */
.login-card::before{
  content:''; position:absolute; top:0; left:0; height:1.5px; width:50%; border-radius:20px 20px 0 0;
  background:linear-gradient(90deg, transparent, rgba(230,0,18,.95), transparent);
  animation:loginSheenLine 4.2s linear infinite;
  will-change:transform;
}
@keyframes loginSheenLine{
  0%  { transform:translateX(-100%) }
  100%{ transform:translateX(300%) }
}
@keyframes loginCardIn{
  from{ opacity:0; transform:translateY(26px) scale(.97) }
  to  { opacity:1; transform:none }
}
/* 卡内元素依次浮入 */
.login-card > *{ animation:loginRise .6s cubic-bezier(.22,1,.36,1) both }
.login-card > *:nth-child(1){ animation-delay:.10s }
.login-card > *:nth-child(2){ animation-delay:.20s }
.login-card > *:nth-child(3){ animation-delay:.28s }
.login-card > *:nth-child(4){ animation-delay:.36s }
.login-card > *:nth-child(5){ animation-delay:.42s }
@keyframes loginRise{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:none }
}

/* ---------- 品牌区 ---------- */
.login-brand{ display:flex; align-items:center; gap:14px; margin-bottom:26px }
.login-logo{
  position:relative;
  width:52px; height:52px; flex:none;
  border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.25);
  /* 性能：移除 box-shadow 呼吸动画（走重绘），保留静态阴影 */
}
.login-logo img{ width:100%; height:100%; object-fit:contain; display:block }
.login-brand-txt h1{ font-size:18.5px; font-weight:700; letter-spacing:.4px; color:#fff }
.login-brand-txt p{ font-size:12px; color:rgba(226,232,240,.62); margin-top:3px }

/* ---------- 表单 ---------- */
.login-card .field{ margin-bottom:15px }
.login-card .field>span{
  font-size:12px; color:rgba(226,232,240,.66);
  margin-bottom:6px; letter-spacing:.5px;
}
.login-card .field input{
  width:100%; padding:12px 14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  color:#fff; font-size:14.5px; font-family:inherit;
  outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.login-card .field input::placeholder{ color:rgba(255,255,255,.34) }
.login-card .field input:hover{ background:rgba(255,255,255,.10) }
.login-card .field input:focus{
  border-color:rgba(230,0,18,.85);
  background:rgba(255,255,255,.10);
  box-shadow:0 0 0 3px rgba(230,0,18,.18), 0 0 24px rgba(230,0,18,.16);
}
.login-card .login-err{ color:#FF9296; font-size:12.5px; min-height:18px; margin:2px 0 10px }

/* ---------- 登录按钮 ---------- */
.login-submit{
  position:relative; overflow:hidden;
  width:100%; padding:13px;
  font-size:15px; font-weight:600; letter-spacing:.35em; text-indent:.35em;
  border-radius:11px; border:none; cursor:pointer; color:#fff;
  background:linear-gradient(135deg, #E60012, #A3000E);
  box-shadow:0 12px 28px rgba(230,0,18,.35);
  font-family:inherit;
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.login-submit:hover{ transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 16px 34px rgba(230,0,18,.45) }
.login-submit:active{ transform:translateY(0) scale(.99) }
.login-submit:disabled{ opacity:.6; cursor:not-allowed; transform:none }
/* 按钮高光周期性扫过：transform 位移（原 left 动画走重绘/布局） */
.login-submit::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg) translateX(-220%);
  animation:loginBtnSheen 3.8s ease-in-out infinite;
  will-change:transform;
}
@keyframes loginBtnSheen{
  0%  { transform:skewX(-18deg) translateX(-220%) }
  55% { transform:skewX(-18deg) translateX(500%) }
  100%{ transform:skewX(-18deg) translateX(500%) }
}

.login-tip{
  margin-top:16px; text-align:center;
  font-size:12px; color:rgba(226,232,240,.5); letter-spacing:.3px;
}

/* ---------- 页脚 ---------- */
.login-foot{
  position:absolute; left:0; right:0; bottom:20px; z-index:2;
  text-align:center; font-size:11.5px; letter-spacing:1.2px;
  color:rgba(226,232,240,.4);
  animation:loginRise .8s .55s cubic-bezier(.22,1,.36,1) both;
}

/* ---------- 降级与无障碍 ---------- */
/* 视频不可用（编码不支持 / 慢网不加载）：海报层继续呼吸推动，不显死板 */
/* 系统开启“减少动态效果”：全部动画停止，停在海报 */
@media (prefers-reduced-motion: reduce){
  .login-poster,.login-glow-a,.login-glow-b,.login-card,.login-card::before,.login-card::after,
  .login-card > *,.login-foot,.login-submit::after{ animation:none }
  .login-poster{ transform:none }
}

/* ---------- 移动端适配 ---------- */
@media (max-width:760px){
  .login-wrap{ padding:24px 16px 58px }
  .login-card{
    max-width:420px;
    padding:26px 22px 22px;
    border-radius:18px;
  }
  .login-brand{ margin-bottom:20px }
  .login-logo{ width:46px; height:46px; border-radius:12px }
  .login-brand-txt h1{ font-size:16.5px }
  .login-brand-txt p{ font-size:11px }
  .login-submit{ padding:12.5px }
  .login-vignette{ background:radial-gradient(ellipse 140% 100% at 50% 46%, transparent 40%, rgba(7,8,11,.6) 100%) }
}
@media (max-width:360px){
  .login-brand-txt h1{ font-size:15.5px }
  .login-card{ padding:22px 16px 18px }
}
/* 横屏矮屏：卡片靠上，避免被裁切 */
@media (max-height:560px) and (orientation:landscape){
  .login-wrap{ align-items:flex-start; padding-top:5vh }
  .login-card{ padding:22px 26px 18px }
  .login-brand{ margin-bottom:14px }
}