/* ============================================================
   language.html 已选语种自动跳转 Toast（外置）
   配套脚本：/js/language-redirect.js
   动画规范：沿用 /css/https.css（跳转页）同一套
     - 入场：cardIn —— translateY + scale + 淡入，N 型弹性曲线 --elastic-out
     - 图标：iconPop —— 弹性放大入场（--elastic-out）
     - 进度：progressShrink —— scaleX 线性收敛，只动合成层
     - 提示：fadeIn —— 纯淡入
   设计约定（与全站一致）：
     - 色值全部取自主题 CSS 变量，明暗双主题自动适配，此处禁止写死颜色
     - 图标一律外链 SVG（/img/svg/{板块}/{dark|light}/...），
       由 js/theme.js 的 syncThemeIcons 统一切换明暗版本
     - 不使用 Emoji / Unicode 符号图标
   ============================================================ */

/* ===== 遮罩层 =====
   仅用于压暗背景、阻断误触（检测到已选语种时，用户不应再进手工选择流程）。
   不拦截键盘与读屏，核心功能不因此不可用。 */
.lang-redirect-mask {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.36s var(--smooth), visibility 0.36s ease;
}
.lang-redirect-mask[data-open="true"] {
  opacity: 1;
  visibility: visible;
}
/* 无 JS 时容器不会被插入，此处兜底：默认隐藏，避免空白遮罩挡住选择页 */
.lang-redirect-mask[hidden] { display: none; }

/* ===== Toast 主体 =====
   复用跳转页 .card 的玻璃态语言：毛玻璃 + 圆角 + 阴影。
   宽度用 min() 收口，窄屏自动退到可用宽度，不需要媒体查询兜底。 */
.lang-redirect-toast {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 28px 26px 22px;
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  /* 入场：与 https.css 的 cardIn 同参数（0.8s / --elastic-out / 0.2s 延迟） */
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  animation: langToastIn 0.8s var(--elastic-out) 0.2s forwards;
}
@keyframes langToastIn { to { opacity: 1; transform: translateY(0) scale(1); } }

/* 图标圆：与跳转页 .icon-wrap 同款弹性入场 */
.lang-redirect-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--chip-bg);
  animation: langIconPop 0.6s var(--elastic-out) 0.45s both;
}
.lang-redirect-icon img {
  width: 28px;
  height: 28px;
  filter: var(--icon-filter);
}
@keyframes langIconPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* 标题 */
.lang-redirect-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}

/* 正文：语种名用强调色突出，便于一眼确认 */
.lang-redirect-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
}
.lang-redirect-lang {
  font-weight: 700;
  color: var(--text);
}

/* 呼吸分割线：与跳转页 .divider 同款（scaleX + opacity，纯合成层） */
.lang-redirect-divider {
  width: 100%;
  height: 1px;
  margin: 2px 0 4px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--bg-card-border), transparent);
  transform: scaleX(0.6);
  opacity: 0.55;
  animation: langDividerBreathe 3.6s var(--smooth) infinite;
}
@keyframes langDividerBreathe {
  0%, 100% { transform: scaleX(0.55); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 0.95; }
}

/* 倒计时进度条：脚本按剩余秒数写 scaleX，CSS 动画仅作未就绪时的兜底 */
.lang-redirect-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-card-border);
}
.lang-redirect-progress-bar {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
  animation: langProgressShrink 3s linear forwards;
}
@keyframes langProgressShrink { to { transform: scaleX(0); } }

/* 底部提示：与跳转页 .redirect-hint 同款淡入 */
.lang-redirect-hint {
  font-size: 12.5px;
  color: var(--text-faint);
  animation: langFadeIn 0.6s ease 0.7s both;
}
/* 剩余秒数：等宽数字，避免每秒变化时文字宽度抖动 */
.lang-redirect-count {
  display: inline-block;
  min-width: 1.2em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
}
@keyframes langFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== 响应式 =====
   居中由父级 flex 负责，此处只收敛内边距与尺寸，不做 margin 位置修正。 */
@media (max-width: 480px) {
  .lang-redirect-toast { padding: 24px 18px 18px; }
  .lang-redirect-title { font-size: 16px; }
  .lang-redirect-text { font-size: 13.5px; }
  .lang-redirect-icon { width: 48px; height: 48px; }
  .lang-redirect-icon img { width: 24px; height: 24px; }
}

/* 极矮视口：防止 Toast 顶出视口 */
@media (max-height: 520px) {
  .lang-redirect-mask { padding: 12px; }
  .lang-redirect-toast { padding: 18px 16px 14px; }
  .lang-redirect-icon { width: 42px; height: 42px; margin-bottom: 2px; }
}

/* ===== 减弱动效偏好：直接落位，保留极短淡入 ===== */
@media (prefers-reduced-motion: reduce) {
  .lang-redirect-toast,
  .lang-redirect-icon,
  .lang-redirect-divider,
  .lang-redirect-hint {
    animation: none !important;
  }
  .lang-redirect-toast { opacity: 1; transform: none; }
  .lang-redirect-progress-bar { animation: none; }
}

/* 动画加速开关（.anim-slow）下同步收敛，与全站策略一致 */
.anim-slow .lang-redirect-toast { animation-duration: 0.16s; }
.anim-slow .lang-redirect-icon { animation-duration: 0.16s; }

/* ===== 终止跳转入口 =====
   倒计时期间提供「不，我要更换语言」按钮，点击后停止跳转、
   销毁已选语种记录并按系统语言回落。样式沿用站内按钮规范，
   全主题变量，无行内样式。 */
.lang-redirect-cancel {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  background: var(--toggle-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.22s var(--smooth, ease),
              border-color 0.22s var(--smooth, ease),
              transform 0.22s var(--smooth, ease);
  animation: langFadeIn 0.6s ease 0.8s both;
}
.lang-redirect-cancel:hover {
  background: var(--toggle-bg-hover);
  border-color: var(--btn-border-hover);
}
.lang-redirect-cancel:active { transform: scale(0.97); }
.lang-redirect-cancel:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ===== 终止后的自动选择提示 =====
   告知用户已按系统语言自动选择，可继续改选。 */
.lang-redirect-auto {
  box-sizing: border-box;
  width: min(560px, calc(100% - 32px));
  margin: 0 auto 16px;
  padding: 12px 16px;
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-md, 14px);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
}
.lang-redirect-auto p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-dim);
}
.lang-redirect-auto strong {
  color: var(--blue);
  font-weight: 600;
}

/* 减少动效偏好 / 动画加速：与全站策略一致 */
@media (prefers-reduced-motion: reduce) {
  .lang-redirect-cancel { animation: none; }
}
.anim-slow .lang-redirect-cancel { animation-duration: 0.16s; }