/* ============================================================================
   映桥 ReelBridge · ④ 黄昏主皮 Overlay  v1.2  (2026-08-01)
   ----------------------------------------------------------------------------
   v1.2 增量整改（外框减法，不推翻 v1.1 架构）：
     · 全页紫渐变底废除 → 深墨中性系（#0B1020 / #10162B）
     · 品牌渐变收缩为四处：顶部 3px 光带 / Logo / 主 CTA / 里程碑进度光点
     · 灯笼贴片、流萤、祭典元素全部移出全站层（收进「礼物视频」品类皮肤，二期）
     · SKU 卡：深墨封面帧占位 + 片名居中；禁几何色块占位图
     · 卡片描边 1px rgba(255,255,255,.08)，hover 描边亮起为品牌渐变（"点亮"）
     · 展示字体得意黑（Smiley Sans）用于 ≥30px 标题层；正文/UI 维持思源黑体
     · Hero 插槽支持 昼/暮/夜 三态 KV（按当地时间切换，1.5s 交叉淡入）
   保留的 v1.1 资产：--rb-* 令牌派生、data-rb-slot 三插槽契约、
     data-rb-skin 双密度、#E14B28 对比度修正、quiet 功能页骨架不动。
   挂载：<link rel="stylesheet" href="rb-dusk-overlay.css">
        （须在 v1 令牌与 antd 样式之后加载；JS 可选，见文件尾）
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Overlay 自有令牌（dusk 命名空间，全部派生自已过审品牌色，不新增色相）
   --------------------------------------------------------------------------- */
:root {
  /* 深墨基底（舞台画框） */
  --rb-ink-900: #0B1020;   /* 主底 */
  --rb-ink-850: #10162B;   /* 分区微差 */
  --rb-ink-800: #131A30;   /* 封面帧占位 / 深墨面板 */
  --rb-ink-line: rgba(255, 255, 255, .08);   /* 卡片描边 */

  /* 暖光（聚光灯）：只作窄条、边缘、点状出现 */
  --rb-dusk-ember: #FF6B4A;
  --rb-dusk-gold:  #FFC46B;

  /* 品牌渐变（仅四个允许位使用）：顶部光带 / Logo / 主 CTA / 里程碑光点 */
  --rb-dusk-band: linear-gradient(90deg,
      var(--rb-blue, #2F5BFF), var(--rb-violet, #7C5CFF) 45%, var(--rb-dusk-ember) 80%, var(--rb-dusk-gold));

  /* 对比度修正：实底 CTA #E14B28（白字 ≈4.6:1 过 AA）→ 深端 #C93E1D */
  --rb-cta-solid:       #E14B28;
  --rb-cta-solid-hover: #C93E1D;
  /* 主 CTA 的允许渐变：同色相深→浅（两端均过 AA），勿换成蓝紫橙全渐变 */
  --rb-cta-grad: linear-gradient(135deg, #E14B28 0%, #C93E1D 100%);

  /* 深墨上的文字 */
  --rb-dusk-text:   rgba(255, 255, 255, .92);
  --rb-dusk-text-2: rgba(255, 255, 255, .62);
  --rb-dusk-text-3: rgba(255, 255, 255, .42);

  /* 展示字体（得意黑，≥30px 标题层专用；文件相对本 CSS：assets/fonts/） */
  --rb-font-display: 'Smiley Sans', 'Noto Sans SC', 'PingFang SC', sans-serif;
  --rb-font-en: 'Space Grotesk', 'Smiley Sans', sans-serif;

  --rb-dusk-ease: var(--rb-ease, cubic-bezier(.22, 1, .36, 1));
  --rb-dusk-flow: 8s;
}

/* 展示字体：得意黑 Smiley Sans（开源可商用，SIL OFL） */
@font-face {
  font-family: 'Smiley Sans';
  src: url("./assets/fonts/SmileySans-Oblique.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* 标题层用法：给 ≥30px 的标题加 .rb-display；中英混排时英文包 <span class="en"> */
.rb-display {
  font-family: var(--rb-font-display);
  letter-spacing: .01em;
}
.rb-display .en, .rb-display en {
  font-family: var(--rb-font-en);
  font-size: .9em;              /* 英文取中文 0.9 倍视觉对齐 */
  letter-spacing: 0;
}

/* ===========================================================================
   A. 全局皮肤层（两档密度由 [data-rb-skin] 切换，默认 full）
   =========================================================================== */

/* ---- A1. 满皮（氛围页）：深墨画框。无全页渐变、无地平线光晕、无灯笼 -------- */
[data-rb-skin="full"] {
  background: var(--rb-ink-900);
  color: var(--rb-dusk-text);
}
/* 分区微差：业务侧给交替分区加 .rb-section-alt */
[data-rb-skin="full"] .rb-section-alt { background: var(--rb-ink-850); }

/* 深墨面板（氛围页内容兜底） */
.rb-dusk-panel,
[data-rb-skin="full"] .rb-dusk-panel {
  background: var(--rb-ink-850);
  border: 1px solid var(--rb-ink-line);
  border-radius: var(--rb-radius-card, 16px);
  color: var(--rb-dusk-text);
}

/* ---- A2. 安静皮（功能页）：白底不动（v1.1 行为保留，本次整改不涉及） ------ */
[data-rb-skin="quiet"] {
  background: var(--rb-paper-50, #F7F8FC);
}

/* ---- A3. 顶部光带：两档密度共用（渐变允许位 ①） ----------------------------
   3px 高、8s 极缓光泽流动。用法：页面顶部渲染 <div class="rb-topband"></div> */
.rb-topband {
  height: 3px;
  width: 100%;
  background: var(--rb-dusk-band);
  background-size: 200% 100%;
  animation: rb-dusk-bandflow var(--rb-dusk-flow) linear infinite;
}
[data-rb-skin="full"] .rb-topband {
  box-shadow: 0 0 12px rgba(255, 196, 107, .45);
}

/* ---- A4. 主 CTA（渐变允许位 ③ + 对比度修正 #E14B28 保留） ------------------
   实底暖橙深→浅同色相渐变（两端白字均过 AA）；hover 浮起 + 暖光晕。
   弹簧缓动保留在按钮层。                                                    */
.rb-cta, .rb-btn-cta,
.ant-btn-primary.rb-cta {
  background: var(--rb-cta-grad) !important;
  border-color: var(--rb-cta-solid) !important;
  color: #fff !important;
  transition: transform .22s var(--rb-dusk-ease), box-shadow .22s var(--rb-dusk-ease),
              background-color .22s var(--rb-dusk-ease), border-color .22s var(--rb-dusk-ease);
}
.rb-cta:hover, .rb-btn-cta:hover,
.ant-btn-primary.rb-cta:hover {
  background: var(--rb-cta-solid-hover) !important;
  border-color: var(--rb-cta-solid-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(225, 75, 40, .35);
}

/* ---- A5. 里程碑进度光点（渐变允许位 ④） ------------------------------------
   功能页里程碑条上的"当前节点"光点。用法：<i class="rb-milestone-dot"></i> -- */
.rb-milestone-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rb-dusk-band);
  background-size: 200% 100%;
  animation: rb-dusk-bandflow var(--rb-dusk-flow) linear infinite;
  box-shadow: 0 0 8px rgba(255, 196, 107, .55);
}

/* ---- A6. 深墨卡片与"点亮"hover ---------------------------------------------
   内容区卡片：1px 墨线描边；hover 时描边亮起为品牌渐变 1px + 微暖光晕，
   隐喻"作品被点亮/放映"，替代上浮投影。按钮层上浮不受此限。                 */
.rb-card,
[data-rb-skin="full"] .rb-card {
  position: relative;
  background: var(--rb-ink-850);
  border: 1px solid var(--rb-ink-line);
  border-radius: var(--rb-radius-card, 16px);
  transition: border-color .25s var(--rb-dusk-ease), box-shadow .25s var(--rb-dusk-ease),
              background .25s var(--rb-dusk-ease);
}
.rb-card:hover,
[data-rb-skin="full"] .rb-card:hover {
  border-color: transparent;
  background:
    linear-gradient(var(--rb-ink-850), var(--rb-ink-850)) padding-box,
    var(--rb-dusk-band) border-box;
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .18),
              0 8px 28px rgba(11, 16, 32, .5),
              0 0 24px rgba(255, 107, 74, .10);
}

/* ===========================================================================
   B. 插槽一：Hero 背景  [data-rb-slot="hero-bg"]
   ===========================================================================
   契约（v1.2）：
     <section class="rb-hero">
       <div data-rb-slot="hero-bg">
         <img data-state="day"   src="assets/img/kv-day.jpg"   alt="">
         <img data-state="dusk"  src="assets/img/kv-dusk.jpg"  alt="">
         <img data-state="night" src="assets/img/kv-night.jpg" alt="">
       </div>
       <div class="rb-hero-content">…标题/CTA…</div>
     </section>
   · 三态按当地时间切换：06–16 昼 / 16–19 暮 / 19–06 夜，1.5s 交叉淡入
     （10 行 JS 见文件尾；无 JS 时默认显示 dusk 或第一张图）。
   · 图未到位时的兜底：纯 ink-900 底 + 底部 15% 一条暖橙→透明地平线光晕，
     禁止三色全渐变铺满。灯笼/流萤已移出本层。                             */
[data-rb-slot="hero-bg"] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--rb-ink-900);
}
/* 兜底地平线光晕（仅无图时可见；有图时被 <img> 盖住） */
[data-rb-slot="hero-bg"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15%;
  background: linear-gradient(0deg,
      rgba(255, 107, 74, .38) 0%, rgba(255, 196, 107, .10) 55%, transparent 100%);
  pointer-events: none;
}
[data-rb-slot="hero-bg"] > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;   /* 地平线在画面下 1/3 附近 */
  opacity: 0;
  transition: opacity 1.5s ease;  /* 三态交叉淡入 */
}
[data-rb-slot="hero-bg"] > img.is-active { opacity: 1; }
/* B-1. 文字区蒙版：rgba(11,16,32,.35) 起步，压上/下文字带，中部放行画面 */
[data-rb-slot="hero-bg"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(11,16,32,.35) 0%, rgba(11,16,32,.12) 38%,
      rgba(11,16,32,.10) 55%, rgba(11,16,32,.42) 100%);
  pointer-events: none;
}
.rb-hero-content { position: relative; z-index: 2; }

/* ===========================================================================
   C. 插槽二：空状态  [data-rb-slot="empty"]   （v1.1 行为保留，小卷去留待 Owner 定）
   ========================================================================== */
[data-rb-slot="empty"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}
[data-rb-slot="empty"]::before {
  content: "";
  width: 180px;
  height: 150px;
  background: url("./assets/xiaojuan-empty.svg") no-repeat center / contain;
}
[data-rb-slot="empty"][data-variant="404"]::before {
  background-image: url("./assets/xiaojuan-404.svg");
}
[data-rb-slot="empty"] .rb-empty-text {
  margin: 0;
  font-size: 14px;
  color: var(--rb-gray-500, #5B6478);
}
[data-rb-skin="full"] [data-rb-slot="empty"] .rb-empty-text {
  color: var(--rb-dusk-text-2);
}

/* ===========================================================================
   D. 插槽三：Loading 打板动画  [data-rb-slot="loading"]   （v1.1 保留）
   ========================================================================== */
[data-rb-slot="loading"] {
  position: relative;
  width: 64px;
  height: 56px;
  margin: 24px auto;
}
[data-rb-slot="loading"]::before,
[data-rb-slot="loading"]::after {
  content: "";
  position: absolute;
  left: 0;
  width: 64px;
  border-radius: 6px;
  background: var(--rb-ink-900);
}
[data-rb-slot="loading"]::before {
  bottom: 0;
  height: 38px;
  background:
    linear-gradient(180deg, var(--rb-ink-900) 0 60%, var(--rb-ink-700, #1A2033) 60%),
    var(--rb-ink-900);
  box-shadow: 0 4px 14px rgba(11,16,32,.18);
}
[data-rb-slot="loading"] > i, .rb-clap-dot {
  position: absolute;
  bottom: 9px; left: 50%;
  width: 44px; height: 5px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--rb-dusk-band);
  background-size: 200% 100%;
  animation: rb-dusk-bandflow 2.4s linear infinite;
}
[data-rb-slot="loading"]::after {
  top: 2px;
  height: 14px;
  background:
    repeating-linear-gradient(-55deg,
      var(--rb-ink-900) 0 10px, var(--rb-dusk-gold) 10px 18px);
  border-radius: 5px 5px 3px 3px;
  transform-origin: 6px 100%;
  animation: rb-dusk-clap 1.6s var(--rb-dusk-ease) infinite;
}

/* ===========================================================================
   E. 下单成功仪式动效（v1.1 保留；小卷贺图待 Owner 定夺后可能移除）
   ========================================================================== */
.rb-success-ritual { position: relative; overflow: visible; }
.rb-success-ritual::before {
  content: "";
  display: block;
  width: 150px; height: 130px;
  margin: 0 auto 8px;
  background: url("./assets/xiaojuan-success.svg") no-repeat center / contain;
}
.rb-ritual-burst {
  position: absolute;
  left: 50%; top: 30%;
  width: 0; height: 0;
  pointer-events: none;
}
.rb-ritual-burst i {
  position: absolute;
  width: 7px; height: 11px;
  border-radius: 2px;
  opacity: 0;
  animation: rb-dusk-confetti 1.4s var(--rb-dusk-ease) forwards;
}
.rb-ritual-burst i:nth-child(odd)  { background: var(--rb-blue, #2F5BFF); }
.rb-ritual-burst i:nth-child(even) { background: var(--rb-dusk-ember); }
.rb-ritual-burst i:nth-child(3n)   { background: var(--rb-dusk-gold); }
.rb-ritual-burst i:nth-child(4n)   { background: var(--rb-violet, #7C5CFF); }
.rb-ritual-burst i:nth-child(1)  { --tx:-92px; --ty:-84px; --r:-160deg; animation-delay:.00s; }
.rb-ritual-burst i:nth-child(2)  { --tx: 84px; --ty:-96px; --r: 200deg; animation-delay:.04s; }
.rb-ritual-burst i:nth-child(3)  { --tx:-58px; --ty:-120px; --r: 120deg; animation-delay:.08s; }
.rb-ritual-burst i:nth-child(4)  { --tx: 46px; --ty:-130px; --r:-220deg; animation-delay:.02s; }
.rb-ritual-burst i:nth-child(5)  { --tx:-110px; --ty:-40px; --r: 260deg; animation-delay:.10s; }
.rb-ritual-burst i:nth-child(6)  { --tx: 108px; --ty:-52px; --r:-140deg; animation-delay:.06s; }
.rb-ritual-burst i:nth-child(7)  { --tx:-30px; --ty:-150px; --r: 180deg; animation-delay:.12s; }
.rb-ritual-burst i:nth-child(8)  { --tx: 20px; --ty:-160px; --r:-260deg; animation-delay:.05s; }
.rb-ritual-burst i:nth-child(9)  { --tx:-70px; --ty:-100px; --r: 300deg; animation-delay:.14s; }
.rb-ritual-burst i:nth-child(10) { --tx: 66px; --ty:-110px; --r:-300deg; animation-delay:.09s; }

/* ===========================================================================
   F. 签名组件：「分镜线稿 → 成片」拖动对比滑杆  .rb-compare
   ===========================================================================
   结构：
     <div class="rb-compare" data-rb-compare>
       <img class="rb-compare-film"   src="…-film.jpg"   alt="成片帧">
       <img class="rb-compare-sketch" src="…-sketch.jpg" alt="分镜线稿">
       <div class="rb-compare-bar"><i class="rb-compare-handle"></i></div>
     </div>
   · 线稿铺满底层（右为未点亮区），成片层叠于其上并只露出分割杆左侧；
     拖动竖杆"扫过点亮"——扫过区域从线稿变成片。
   · 加载后自动从左到右缓扫一次（2.5s，JS 驱动 --rb-split 自定义属性）。
   · 移动端触摸支持；prefers-reduced-motion 降级见 G 节。                 */
.rb-compare {
  --rb-split: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--rb-radius-card, 16px);
  border: 1px solid var(--rb-ink-line);
  aspect-ratio: 16 / 9;
  background: var(--rb-ink-800);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.rb-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* 成片层：只露出分割杆左侧的部分——杆扫过之处即"点亮"成片，
   未扫到的右侧仍是线稿（底层）。加载引导从左向右扫，终点状态=满屏成片。 */
.rb-compare-film {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--rb-split)) 0 0);
}
/* 分割杆 + 渐变光点手柄（品牌渐变以"点"状出现，合规） */
.rb-compare-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--rb-split);
  width: 2px;
  transform: translateX(-1px);
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 12px rgba(255, 196, 107, .6);
  pointer-events: none;
}
.rb-compare-handle {
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--rb-dusk-band);
  background-size: 200% 100%;
  animation: rb-dusk-bandflow var(--rb-dusk-flow) linear infinite;
  box-shadow: 0 0 0 3px rgba(11, 16, 32, .55), 0 0 18px rgba(255, 196, 107, .65);
}
/* 两侧材质标签（可选） */
.rb-compare-tag {
  position: absolute;
  top: 14px;
  z-index: 2;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(11, 16, 32, .55);
  color: rgba(255, 255, 255, .85);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.rb-compare-tag.l { left: 14px; }
.rb-compare-tag.r { right: 14px; }

/* ===========================================================================
   G. 关键帧 & 降级纪律
   ========================================================================== */
@keyframes rb-dusk-bandflow {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}
@keyframes rb-dusk-clap {
  0%        { transform: rotate(-22deg); }
  18%       { transform: rotate(0deg);  }
  26%       { transform: rotate(-2deg); }
  32%, 100% { transform: rotate(-22deg); }
}
@keyframes rb-dusk-confetti {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--tx), calc(var(--ty) + 90px)) rotate(var(--r)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-topband,
  .rb-milestone-dot,
  [data-rb-slot="loading"]::after,
  [data-rb-slot="loading"] > i,
  .rb-ritual-burst i,
  .rb-compare-handle {
    animation: none !important;
  }
  [data-rb-slot="loading"]::after { transform: rotate(0deg); }
  .rb-ritual-burst { display: none; }
  [data-rb-slot="hero-bg"] > img { transition: none; }
  /* 对比滑杆降级：静态 50% 左右并排（clip 已按 --rb-split 生效，无需额外处理） */
}
.rb-motion-off .rb-topband,
.rb-motion-off .rb-milestone-dot,
.rb-motion-off [data-rb-slot="loading"]::after { animation: none !important; }

/* ===========================================================================
   H. 可选 JS（非必须）
   ---------------------------------------------------------------------------
   ① Hero 三态按时间切换（无 JS 时：给默认那张图加 class="is-active" 即可）

     (function () {
       var box = document.querySelector('[data-rb-slot="hero-bg"]');
       if (!box) return;
       var imgs = box.querySelectorAll('img[data-state]');
       if (!imgs.length) return;
       var h = new Date().getHours();
       var state = (h >= 6 && h < 16) ? 'day' : (h >= 16 && h < 19) ? 'dusk' : 'night';
       var p = new URLSearchParams(location.search).get('kv');
       if (p && ['day','dusk','night'].indexOf(p) > -1) state = p;
       imgs.forEach(function (im) {
         im.classList.toggle('is-active', im.dataset.state === state);
       });
     })();

   ② 对比滑杆（自动引导 + 拖动 + 触摸）

     (function () {
       var el = document.querySelector('[data-rb-compare]');
       if (!el) return;
       var reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
       function set(v) { el.style.setProperty('--rb-split', Math.max(0, Math.min(100, v)) + '%'); }
       function fromEvent(e) {
         var r = el.getBoundingClientRect();
         var x = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
         set(x / r.width * 100);
       }
       var dragging = false, guided = false;
       el.addEventListener('pointerdown', function (e) {
         dragging = true; guided = true; el.setPointerCapture(e.pointerId); fromEvent(e);
       });
       el.addEventListener('pointermove', function (e) { if (dragging) fromEvent(e); });
       el.addEventListener('pointerup',   function () { dragging = false; });
       if (!reduced) {                       // 自动缓扫引导 2.5s
         var t0 = null;
         function tick(t) {
           if (guided) return;
           if (!t0) t0 = t;
           var k = Math.min(1, (t - t0) / 2500);
           set(8 + (92 - 8) * (k < .5 ? 2*k*k : -1 + (4 - 2*k) * k));  // easeInOut
           if (k < 1) requestAnimationFrame(tick);
         }
         requestAnimationFrame(tick);
       }
     })();
   ========================================================================== */