/* ==========================================================================
   NovoPay · 拼贴视觉（Art / Collage）
   目的：knocket 的冲击力有一半来自 3D 拼贴素材。我们没有素材，
        就用**纯 CSS 分层几何**做同构的东西 —— 零外部资源、零依赖、可无限缩放。
   三条规矩：
     1. 只在营销面出现，控制台内禁用（数据密集区加装饰 = 噪音）；
     2. 所有装饰层 pointer-events:none，不吃点击（否则会挡按钮，探针会报"点了没反应"）；
     3. 装饰层不进 DOM 文本节点 —— 否则 i18n 扫描会把它当中文文案去翻译。
   ========================================================================== */

/* ---------------- 容器 ---------------- */
.collage {
  position: relative; isolation: isolate;
  aspect-ratio: 4 / 3.2; min-height: 320px;
  display: grid; place-items: center;
}
.collage.wide { aspect-ratio: 16 / 8; min-height: 260px; }

/* 底色纸：比页面底再浅一档，让拼贴"浮"在页面上 */
.collage::before {
  content: ''; position: absolute; inset: 6% 2% 4% 4%; z-index: 0;
  border-radius: var(--r-xl);
  background: var(--cream-0);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(7, 61, 40, .45);
}
/* 着色变体：奶油底上用纯奶油纸块几乎看不见（#FAF7EE on #F5EFE0 只有 1.03:1），
   必须给一层品牌色才立得起来。按页面主题选一个，别混用。 */
.collage.tint-green::before { background: var(--section-green-1); border-color: #D8EADB; }
.collage.tint-mint::before { background: var(--mint-2); border-color: #CDEBD9; }
.collage.tint-sky::before { background: #EDF7FE; border-color: #D5EAF8; }
.collage.tint-lilac::before { background: #F2EEFC; border-color: #E2D9F7; }

/* 点阵：用 radial-gradient 画，比 SVG 轻，且随容器自适应 */
.collage .dots {
  position: absolute; inset: 10% 6% 8% 8%; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(13, 74, 36, .18) 1.2px, transparent 1.3px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 12%, transparent 68%);
  mask-image: radial-gradient(ellipse at 70% 30%, #000 12%, transparent 68%);
}

/* 大圆弧：柠檬色描边，压在卡片后面 */
.collage .arc {
  position: absolute; z-index: 0; pointer-events: none;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  border: 22px solid var(--lime);
  right: 2%; top: -6%; opacity: .85;
  -webkit-mask-image: linear-gradient(200deg, #000 38%, transparent 72%);
  mask-image: linear-gradient(200deg, #000 38%, transparent 72%);
}

/* 光斑：只做"托底"，不能变成一块绿坨 —— 面积小、透明度低、压在左下角 */
.collage .glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(189, 246, 213, .6), transparent 62%);
  left: -6%; bottom: -10%;
}

/* 色块：拼贴的"中层"。没有它，三张白卡会像浮在空气里 */
.plate {
  position: absolute; z-index: 1; pointer-events: none;
  border-radius: var(--r-md);
}
.plate-lime { width: 34%; aspect-ratio: 1.35; left: 1%; top: 4%; background: var(--lime); transform: rotate(-8deg); opacity: .9; }
.plate-forest { width: 30%; aspect-ratio: 1.2; right: 2%; bottom: 10%; background: var(--forest); transform: rotate(6deg); opacity: .95; }
.plate-mint { width: 38%; aspect-ratio: 1.5; right: 6%; top: 2%; background: var(--mint); transform: rotate(4deg); opacity: .8; }

/* ---------------- 浮动卡 ---------------- */
.tile {
  position: absolute; z-index: 2;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px;
  box-shadow: 0 22px 44px -24px rgba(7, 61, 40, .5);
  min-width: 148px;
}
.tile .tl2 {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.tile .tv {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 21px; font-weight: 600; letter-spacing: -.03em; margin-top: 5px; line-height: 1.1;
}
.tile .tv small { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 3px; }
.tile .tsub { font-size: 11px; color: var(--muted); margin-top: 4px; }
.tile .tbar { display: flex; align-items: center; gap: 6px; margin-top: 9px; }

/* 三张卡：位置与角度错开，形成"手放上去"的感觉 */
.tile-a { left: 4%; top: 12%; transform: rotate(-3.2deg); }
.tile-b { right: 6%; top: 34%; transform: rotate(2.4deg); z-index: 3; }
.tile-c { left: 22%; bottom: 6%; transform: rotate(-1.4deg); z-index: 4; }

/* 深绿卡：与纸白卡形成明暗对比，是拼贴的"锚" */
.tile.dark { background: var(--forest); border-color: var(--forest); color: var(--cream-0); box-shadow: 0 24px 50px -22px rgba(7, 61, 40, .75); }
.tile.dark .tl2, .tile.dark .tsub { color: var(--dk-3); }
.tile.dark .tv small { color: var(--dk-3); }

/* 柠檬卡：只给"结论"用（净额、到账、T+0），一个页面最多一张 */
.tile.lime { background: var(--lime); border-color: var(--lime-deep); }
.tile.lime .tl2 { color: #4A5A00; }

/* ---------------- 贴纸 / 封签 ---------------- */
.seal {
  position: absolute; z-index: 5; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--lime);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(10, 26, 15, .22);
}
.seal-a { right: 3%; top: 6%; transform: rotate(6deg); }
.seal-b { left: 2%; bottom: 26%; transform: rotate(-5deg); }

/* ---------------- 叠层：给任意卡片垫两张"纸" ---------------- */
/* 用法：加 class="stack" 到卡片的**包裹层**（不是卡片本身 ——
   卡片自己有不透明底色，负 z-index 的伪元素会被它盖住）。
   伪元素不增加 DOM，探针不会把它当可点元素。 */
.stack { position: relative; isolation: isolate; }
.stack::before, .stack::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-md); z-index: -1;
  border: 1px solid var(--line); pointer-events: none;
}
.stack::before { background: var(--mint-2); transform: rotate(1.8deg) translate(10px, 12px); }
.stack::after { background: var(--cream-2); transform: rotate(-1.2deg) translate(-9px, 6px); z-index: -2; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
  .collage { aspect-ratio: 4 / 3; min-height: 300px; }
  .tile { min-width: 132px; padding: 12px 14px; }
  .tile .tv { font-size: 18px; }
  .collage .arc { width: 68%; }
}
@media (max-width: 720px) {
  .collage { aspect-ratio: 1 / .92; min-height: 280px; }
  .tile-a { left: 1%; top: 8%; }
  .tile-b { right: 1%; top: 40%; }
  .tile-c { left: 10%; bottom: 2%; }
  .tile .tv { font-size: 16px; }
  .seal { font-size: 9px; padding: 6px 10px; }
  .stack::before { transform: rotate(1.4deg) translate(6px, 7px); }
  .stack::after { transform: rotate(-1deg) translate(-5px, 4px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* 极轻的漂浮，幅度 4px：再大就干扰阅读 */
  .tile-a { animation: float 9s ease-in-out infinite; }
  .tile-b { animation: float 11s ease-in-out infinite reverse; }
  .tile-c { animation: float 13s ease-in-out infinite; }
  @keyframes float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
  }
}