/* ============================================================
   时空胶囊 · 浮屏横幅（Floating Banner）—— 底部版
   改文字/emoji/颜色只需改 HTML 内联变量和文本内容。
   ============================================================ */

.float-banner {
  --fb-bg: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ff9a9e 100%);
  --fb-color: #241f18;
  --fb-accent: #e85a4d;
  --fb-radius: 24px;
  --fb-padding: 2rem 2.4rem;
  --fb-title-size: clamp(1.6rem, 4vw, 2.8rem);
  --fb-sub-size: clamp(.95rem, 1.8vw, 1.25rem);
  --fb-gap: .6rem;
  --fb-z: 60;
  --fb-bottom: 24px;               /* 距屏幕底部的距离 */
  --fb-max-w: 680px;
  --fb-font: 'Noto Serif SC', 'STKaiti', 'KaiTi', serif;
}

/* ===== 浮屏容器：固定在底部 ===== */
.float-banner__overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--fb-z);
  pointer-events: none;                     /* 空白区域不挡点击 */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(var(--fb-bottom) + env(safe-area-inset-bottom, 0px));
}

/* ===== 卡片本体 ===== */
.float-banner__card {
  pointer-events: auto;                     /* 卡片本身可点击 */
  position: relative;
  max-width: var(--fb-max-w);
  width: min(92vw, 680px);
  background: var(--fb-bg);
  border-radius: var(--fb-radius);
  padding: var(--fb-padding);
  text-align: center;
  color: var(--fb-color);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .12),
    0 2px 8px rgba(0, 0, 0, .06),
    inset 0 1px 0 rgba(255, 255, 255, .45);
  backdrop-filter: blur(6px);
  animation: fbSlideIn .7s cubic-bezier(.16,.8,.24,1) both;
  overflow: hidden;
}

/* 高光装饰 */
.float-banner__card::before {
  content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 140%; height: 140%;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.35), transparent 60%);
  pointer-events: none;
}

/* ===== 关闭按钮 ===== */
.float-banner__close {
  position: absolute;
  top: .65rem; right: .75rem;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  font-size: .85rem;
  line-height: 1;
  transition: background .25s, transform .25s;
  cursor: pointer;
  border: none;
  color: inherit;
  z-index: 2;
}
.float-banner__close:hover {
  background: rgba(255,255,255,.8);
  transform: scale(1.15);
}

/* ===== 标题 ===== */
.float-banner__title {
  font-family: var(--fb-font);
  font-size: var(--fb-title-size);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.3;
  margin-bottom: var(--fb-gap);
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--fb-color) 0%, var(--fb-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== emoji ===== */
.float-banner__emoji {
  display: inline-block;
  animation: fbPop .5s cubic-bezier(.16,.8,.24,1) both;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}

/* ===== 副标题 ===== */
.float-banner__subtitle {
  font-size: var(--fb-sub-size);
  font-weight: 400;
  opacity: .82;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* ===== CTA 按钮 / 链接 ===== */
.float-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: 1rem;
  padding: .65em 1.6em;
  border-radius: 999px;
  background: var(--fb-accent);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.16,.8,.24,1),
              box-shadow .25s cubic-bezier(.16,.8,.24,1);
  box-shadow: 0 4px 14px rgba(232, 90, 77, .35);
  position: relative;
  z-index: 1;
}
.float-banner__cta:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 20px rgba(232, 90, 77, .45);
}

/* ===== 动画：从下方滑入 ===== */
@keyframes fbSlideIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fbPop {
  from { opacity: 0; transform: scale(.5) rotate(-12deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* ===== 关闭：向下滑出 ===== */
.float-banner__card.dismiss {
  animation: fbSlideOut .45s cubic-bezier(.55,.06,.68,.14) forwards;
}
@keyframes fbSlideOut {
  to {
    opacity: 0;
    transform: translateY(16px) scale(.94);
    pointer-events: none;
  }
}

/* ===== 移动端适配 ===== */
@media (max-width: 480px) {
  .float-banner {
    --fb-padding: 1.5rem 1.2rem;
    --fb-radius: 18px;
    --fb-bottom: 16px;
  }
}