/* ============================================================
   首页「注册福利」弹窗 + 缩小后的红包
   配套脚本：js/signup-promo.js（弹窗的 DOM 由脚本生成）
   说明文档：docs/signup-promo.md

   层级约定（和站内其他浮层的关系）：
     联系我们弹窗 100 > 本弹窗 90 > 导航栏 50 > 手机菜单 40 > 红包 38
   红包压在导航栏和手机菜单下面，任何情况下都不会挡住导航。
   ============================================================ */

.sp-root {
  /* 红包尺寸：电脑端 / 手机端 */
  --sp-packet-size: 64px;
  /* 红包静止时的位置（平板、或开了「减少动态效果」的电脑端；手机端见下面的 bottom）。
     76px ≈ 导航栏高度 64px + 间距，让红包落在导航栏下方，不挡 Logo */
  --sp-packet-top: 76px;
  --sp-packet-left: 12px;
  /* 手机端红包在左下角，距离底部的距离 */
  --sp-packet-bottom: 16px;

  --sp-red: #e8382f;
  --sp-red-deep: #b9161b;
  --sp-gold: #ffd36b;
  --sp-gold-deep: #f2a93b;
}

/* 被 New API 用 iframe 嵌入时，本站导航栏是隐藏的，红包直接贴 iframe 左上角 */
.embedded .sp-root {
  --sp-packet-top: 12px;
}

@media (max-width: 767px) {
  .sp-root {
    --sp-packet-size: 48px;
  }
}

/* 切到非中文语言时整体隐藏（由脚本加类） */
.sp-root.sp-lang-off {
  display: none;
}

/* ---------------- 遮罩 + 弹窗 ---------------- */

.sp-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.sp-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease, visibility 0s;
}

.sp-dialog {
  position: relative;
  width: 100%;
  max-width: 23rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--background, #fff);
  color: var(--foreground, #0f172a);
  border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
  text-align: center;
  font-family: inherit;
  transform: translateY(14px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s ease;
}

.sp-overlay.is-open .sp-dialog {
  transform: none;
  animation: sp-dialog-glow 2.4s ease-in-out infinite;
}

/* 弹窗边缘发光：一圈金色描边 + 外围金红色光晕，和红包同步「呼吸」。
   弹窗本身 overflow: hidden，伪元素光晕会被裁掉，所以这里用 box-shadow 做 */
@keyframes sp-dialog-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 211, 107, 0.55),
      0 0 18px 2px rgba(255, 170, 60, 0.35),
      0 0 44px 6px rgba(232, 56, 47, 0.25),
      0 30px 60px -20px rgba(0, 0, 0, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 211, 107, 0.95),
      0 0 28px 4px rgba(255, 190, 70, 0.6),
      0 0 66px 12px rgba(232, 56, 47, 0.4),
      0 30px 60px -20px rgba(0, 0, 0, 0.45);
  }
}

/* 缩小成红包 / 从红包展开：弹窗飞向（或飞出自）红包所在的位置。
   --sp-dx / --sp-dy / --sp-scale 由脚本根据红包坐标实时计算 */
.sp-overlay.is-shrunk .sp-dialog {
  transform: translate(var(--sp-dx, 0), var(--sp-dy, 0)) scale(var(--sp-scale, 0.2));
  opacity: 0;
}

.sp-overlay.is-shrunk {
  opacity: 0;
}

/* 从红包展开的第一帧：瞬间放到红包位置，不要过渡 */
.sp-overlay.no-anim,
.sp-overlay.no-anim .sp-dialog {
  transition: none !important;
}

/* ---- 顶部红色区域 ---- */

.sp-head {
  position: relative;
  padding: 1.75rem 1.5rem 1.25rem;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 211, 107, 0.28), transparent 60%),
    linear-gradient(160deg, var(--sp-red) 0%, var(--sp-red-deep) 100%);
  color: #fff;
}

/* 底纹：传统「铜钱纹」——四个角的圆在格子中心交汇成四瓣花，金色细线平铺。
   上浓下淡渐隐，不和标题、红包图案抢视线。
   想更明显改 opacity；想纹样更密 / 更疏，把 SVG 里的 28 和 19.8（= 28 × 0.707）同比改小 / 改大，
   background-size 跟着改成同样的数 */
.sp-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23ffd36b' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='19.8'/%3E%3Ccircle cx='28' cy='0' r='19.8'/%3E%3Ccircle cx='0' cy='28' r='19.8'/%3E%3Ccircle cx='28' cy='28' r='19.8'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='1.6' fill='%23ffd36b'/%3E%3C/svg%3E");
  background-size: 28px 28px;
  background-position: center top;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.25) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.25) 100%);
  pointer-events: none;
}

/* 底部的弧形，把红色区域和白色正文分开 */
.sp-head::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -1px;
  height: 1.5rem;
  background: var(--background, #fff);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.sp-actions {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 1;
  display: flex;
  gap: 0.25rem;
}

.sp-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.sp-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.sp-icon-btn:focus-visible {
  outline: 2px solid var(--sp-gold);
  outline-offset: 1px;
}

.sp-icon-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.sp-badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 211, 107, 0.55);
  color: var(--sp-gold);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.sp-art {
  position: relative;
  z-index: 1;
  width: 5.5rem;
  margin: 0.875rem auto 0;
  filter:
    drop-shadow(0 0 2px var(--sp-glow))
    drop-shadow(0 0 5px var(--sp-glow-soft))
    drop-shadow(0 8px 14px rgba(80, 0, 0, 0.3));
}

/* 弹窗里的大红包背后同样有一团呼吸光晕 */
.sp-art::before {
  content: '';
  position: absolute;
  inset: -10% -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    var(--sp-glow) 0%,
    var(--sp-glow-soft) 45%,
    transparent 100%
  );
  filter: blur(6px);
  opacity: 0.35;
  pointer-events: none;
}

.sp-overlay.is-open .sp-art::before {
  animation: sp-breathe-soft 2.4s ease-in-out infinite;
}

/* 弹窗里的光晕比红包的弱一档，不抢标题 */
@keyframes sp-breathe-soft {
  0%, 100% { opacity: 0.25; transform: scale(0.95); }
  50% { opacity: 0.5; transform: scale(1.03); }
}

.sp-art svg {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 90%;
}

/* 打开的红包平时轻轻晃 */
.sp-overlay.is-open .sp-art svg {
  animation: sp-jiggle 1.8s ease-in-out infinite;
}

/* 吐金币前用力抖一下：先压扁再弹高（由脚本加 .is-burst） */
.sp-overlay.is-open .sp-art.is-burst svg {
  animation: sp-burst 0.45s ease-out;
}

@keyframes sp-jiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-1.8deg); }
  40% { transform: rotate(1.5deg); }
  60% { transform: rotate(-1deg); }
  80% { transform: rotate(0.8deg); }
}

@keyframes sp-burst {
  0% { transform: none; }
  30% { transform: translateY(3px) scale(1.08, 0.9); }
  60% { transform: translateY(-4px) scale(0.95, 1.07) rotate(-2deg); }
  80% { transform: translateY(1px) scale(1.02, 0.98) rotate(1deg); }
  100% { transform: none; }
}

/* 金币画布：盖在整个弹窗上，不挡点击 */
.sp-coins {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- 正文 ---- */

.sp-body {
  position: relative;
  /* 底部多留一点高度，给堆起来的金币当「托盘」，少挡底部小字 */
  padding: 0.5rem 1.5rem 2.25rem;
  /* 底部一抹暖金色，和顶部红色区域呼应 */
  background: radial-gradient(120% 60% at 50% 100%, rgba(255, 211, 107, 0.14), transparent 70%);
}

/* 白底区域的底纹：和顶部同款铜钱纹，换成红色、放大一号、极淡，
   从底部往上渐隐，标题附近基本看不到。opacity 控制明显程度 */
.sp-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23e8382f' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='25.5'/%3E%3Ccircle cx='36' cy='0' r='25.5'/%3E%3Ccircle cx='0' cy='36' r='25.5'/%3E%3Ccircle cx='36' cy='36' r='25.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 36px 36px;
  background-position: center bottom;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 85%);
  pointer-events: none;
}

/* 深色主题下红线在黑底上更暗，稍微提一点 */
[data-theme='dark'] .sp-body::before {
  opacity: 0.18;
}

.sp-body > * {
  position: relative;
  z-index: 1;
}

.sp-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin: 0 0 0.375rem;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--foreground, #0f172a);
}

/* 标题两侧的金色「线 + 菱形」装饰，右边是左边的镜像 */
.sp-title::before,
.sp-title::after {
  content: '';
  flex: none;
  width: 1.75rem;
  height: 0.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f2a93b' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23f2a93b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 4h19' stroke='url(%23a)' stroke-width='1.5'/%3E%3Cpath d='M23.5 0.5 27 4l-3.5 3.5L20 4z' fill='%23f2a93b'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.sp-title::after {
  transform: scaleX(-1);
}

/* 抵消 letter-spacing 在最后一个字后面多出的空隙，让标题视觉居中 */
.sp-title-text {
  margin-right: -0.06em;
}

/* 高亮的「福利」：放大一号，红色渐变字 + 一道流光 */
.sp-title-hl {
  position: relative;
  display: inline-block;
  margin-left: 0.08em;
  font-size: 1.18em;
  font-style: normal;
  background: linear-gradient(
    100deg,
    #c0171d 0%,
    #e8382f 38%,
    #ff9a6e 50%,
    #e8382f 62%,
    #b9161b 100%
  );
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: sp-shine 3.6s ease-in-out 0.6s infinite;
}

/* 右上角一颗闪烁的小星星 */
.sp-spark {
  position: absolute;
  top: -0.28em;
  right: -0.5em;
  width: 0.5em;
  height: 0.5em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0c.9 5.4 4.6 9.1 10 10-5.4.9-9.1 4.6-10 10-.9-5.4-4.6-9.1-10-10 5.4-.9 9.1-4.6 10-10z' fill='%23f2a93b'/%3E%3C/svg%3E")
    center / contain no-repeat;
  animation: sp-twinkle 2.4s ease-in-out infinite;
}

@keyframes sp-shine {
  0% { background-position: 100% 0; }
  45%, 100% { background-position: 0 0; }
}

@keyframes sp-twinkle {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.5; }
  50% { transform: scale(1.1) rotate(45deg); opacity: 1; }
}

[data-theme='dark'] .sp-title-hl {
  background-image: linear-gradient(
    100deg,
    #ff5a4e 0%,
    #ff7a5c 38%,
    #ffd9a0 50%,
    #ff7a5c 62%,
    #ff5a4e 100%
  );
}

.sp-subtitle {
  margin: 0 0 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted-foreground, #64748b);
}

.sp-perks {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.375rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

.sp-perks li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--accent, #f1f5f9);
  font-size: 0.875rem;
  line-height: 1.4;
}

.sp-perks li::before {
  content: '';
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9161b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
      center / 0.7rem no-repeat,
    linear-gradient(135deg, var(--sp-gold), var(--sp-gold-deep));
}

.sp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sp-red) 0%, var(--sp-red-deep) 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(185, 22, 27, 0.75);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.sp-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 28px -10px rgba(185, 22, 27, 0.85);
}

.sp-cta:focus-visible {
  outline: 3px solid var(--sp-gold);
  outline-offset: 2px;
}

.sp-cta svg {
  width: 1.125rem;
  height: 1.125rem;
}

.sp-note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--muted-foreground, #64748b);
}

@media (max-width: 767px) {
  .sp-dialog {
    max-width: 20rem;
  }

  .sp-head {
    padding: 1.5rem 1.25rem 1rem;
  }

  .sp-art {
    width: 4.25rem;
  }

  .sp-body {
    padding: 0.375rem 1.25rem 2rem;
  }

  .sp-title {
    gap: 0.5rem;
    font-size: 1.3125rem;
  }

  .sp-title::before,
  .sp-title::after {
    width: 1.25rem;
  }

  .sp-subtitle {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  .sp-perks {
    margin-bottom: 1.125rem;
  }

  .sp-perks li {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
  }
}

/* ---------------- 红包 ---------------- */

.sp-packet {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 38;
  width: var(--sp-packet-size);
  height: calc(var(--sp-packet-size) * 1.25);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* 漫游时由脚本写 transform；这里只给淡入淡出 */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.sp-packet.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s;
}

/* 静止模式：手机端，或电脑端开了「减少动态效果」 */
.sp-packet.is-static {
  top: var(--sp-packet-top);
  left: var(--sp-packet-left);
  transform: none !important;
}

/* 手机端放在左下角；env() 给 iPhone 底部横条留出位置 */
@media (max-width: 767px) {
  .sp-packet.is-static {
    top: auto;
    bottom: calc(var(--sp-packet-bottom) + env(safe-area-inset-bottom, 0px));
  }
}

/* 边缘发光：
   1) 红包本体贴边的一圈金色描光（drop-shadow 跟着红包圆角走，不是方框）
   2) 背后一团金红色光晕，慢慢「呼吸」
   想调亮度改 --sp-glow 的透明度，想调光晕大小改 ::before 的 inset */
.sp-root {
  --sp-glow: rgba(255, 196, 77, 0.9);
  --sp-glow-soft: rgba(255, 120, 60, 0.45);
}

.sp-packet::before {
  content: '';
  position: absolute;
  inset: -35% -45%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    var(--sp-glow) 0%,
    var(--sp-glow-soft) 45%,
    transparent 100%
  );
  filter: blur(6px);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sp-packet.is-visible::before {
  animation: sp-breathe 2.4s ease-in-out infinite;
}

.sp-packet:hover::before,
.sp-packet:focus-visible::before {
  animation-play-state: paused;
  opacity: 0.95;
}

@keyframes sp-breathe {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 0.85; transform: scale(1.08); }
}

.sp-packet-inner {
  display: block;
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 2px var(--sp-glow))
    drop-shadow(0 0 7px var(--sp-glow-soft))
    drop-shadow(0 6px 10px rgba(120, 0, 0, 0.35));
  transform-origin: 50% 90%;
  transition: transform 0.2s ease;
}

.sp-packet-inner svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sp-packet:hover .sp-packet-inner,
.sp-packet:focus-visible .sp-packet-inner {
  transform: scale(1.08);
}

.sp-packet:focus-visible {
  outline: 2px solid var(--sp-gold-deep);
  outline-offset: 4px;
  border-radius: 8px;
}

/* 每隔几秒轻轻晃一下，提示可以点 */
.sp-packet.is-visible .sp-packet-inner {
  animation: sp-wiggle 4s ease-in-out 1s infinite;
}

.sp-packet:hover .sp-packet-inner {
  animation-play-state: paused;
}

@keyframes sp-wiggle {
  0%, 82%, 100% { rotate: 0deg; }
  86% { rotate: -9deg; }
  90% { rotate: 8deg; }
  94% { rotate: -5deg; }
  97% { rotate: 3deg; }
}

/* 刚缩小时红包「弹」出来 */
.sp-packet.is-pop .sp-packet-inner {
  animation: sp-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sp-pop {
  0% { transform: scale(0.4); }
  100% { transform: scale(1); }
}

/* ---------------- 减少动态效果 ----------------
   系统开启时，只保留淡入淡出，去掉位移、缩放、晃动。
   .sp-reduce 由脚本加在 .sp-root 上（预览页也能用它强制模拟） */

.sp-reduce .sp-dialog,
.sp-reduce .sp-overlay.is-open .sp-dialog,
.sp-reduce .sp-overlay.is-shrunk .sp-dialog {
  transform: none;
}

.sp-reduce .sp-packet .sp-packet-inner,
.sp-reduce .sp-packet.is-visible .sp-packet-inner,
.sp-reduce .sp-packet.is-pop .sp-packet-inner {
  animation: none;
}

/* 光晕保留但不呼吸，固定在中等亮度 */
.sp-reduce .sp-packet.is-visible::before {
  animation: none;
  opacity: 0.6;
}

.sp-reduce .sp-overlay.is-open .sp-art::before {
  animation: none;
  opacity: 0.38;
}

.sp-reduce .sp-overlay.is-open .sp-dialog {
  animation: none;
  box-shadow:
    0 0 0 1px rgba(255, 211, 107, 0.75),
    0 0 22px 3px rgba(255, 180, 65, 0.45),
    0 0 54px 9px rgba(232, 56, 47, 0.32),
    0 30px 60px -20px rgba(0, 0, 0, 0.45);
}

.sp-reduce .sp-overlay.is-open .sp-art svg,
.sp-reduce .sp-title-hl,
.sp-reduce .sp-spark {
  animation: none;
}

.sp-reduce .sp-packet:hover .sp-packet-inner,
.sp-reduce .sp-cta:hover {
  transform: none;
}