/* ============================================================
   CSAIA · qr.csaia.sg
   画册式 — 暖白底 · 香槟金线 · 衬线编号列表
   金色只出现在线、字上，永不大面积铺色
   一屏优先：内容以 100svh 弹性分布，页脚贴底
   ============================================================ */

@font-face {
  font-family: 'CSAIA Serif';
  src: url('../assets/fonts/serif-subset.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: #F9F7F2;
  --ink: #2E2B25;
  --ink-title: #3D372C;
  --grey: #7A7466;
  --faint: #B3AC9D;
  --gold: #B18A45;
  --gold-deep: #96773B;
  --gold-label: #A98544;
  --line-gold: rgba(169, 133, 68, .5);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

.serif,
.serif-ui { font-family: 'CSAIA Serif', "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif; }

/* ============================================================
   背景氛围：顶部晕染 + 柔光色块 + 漂移光束 + 颗粒
   ============================================================ */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

/* 顶部稍深的暖调晕染 —— 衬出 logo 的纯白渐变球体 */
.shade {
  position: absolute; top: 0; left: 0; right: 0; height: 46vh;
  background: radial-gradient(135% 95% at 50% -14%,
    rgba(240, 233, 216, .55) 0%, rgba(240, 233, 216, .28) 36%, rgba(240, 233, 216, 0) 72%);
}

.wash {
  position: absolute; border-radius: 50%;
  opacity: 0; transition: opacity 2.4s ease 1s;
}
.is-loaded .wash { opacity: 1; }
.wash-a {
  top: -18vh; right: -24vw; width: 68vw; height: 68vw;
  max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, rgba(222, 188, 124, .34) 0%, rgba(222, 188, 124, .1) 45%, transparent 70%);
  animation: drift-a 12s ease-in-out infinite;
}
.wash-b {
  bottom: 4vh; left: -30vw; width: 76vw; height: 76vw;
  max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(172, 196, 204, .24) 0%, transparent 68%);
  animation: drift-b 15s ease-in-out infinite;
}
@keyframes drift-a { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-14px, 18px) } }
@keyframes drift-b { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(16px, -14px) } }

/* 漂移光束 —— 像透过玻璃洒进来的日光，极缓慢地扫过 */
.beam {
  position: absolute; inset: -24% -30%;
  will-change: transform;
}
.beam-a {
  background: linear-gradient(112deg,
    transparent 34%,
    rgba(255, 252, 244, .5) 44%,
    rgba(238, 222, 186, .22) 51%,
    transparent 64%);
  animation: beam-a 17s ease-in-out infinite alternate;
}
.beam-b {
  background: linear-gradient(248deg,
    transparent 40%,
    rgba(255, 250, 238, .32) 50%,
    transparent 60%);
  animation: beam-b 23s ease-in-out infinite alternate;
}
@keyframes beam-a { from { transform: translateX(-9%) } to { transform: translateX(9%) } }
@keyframes beam-b { from { transform: translateX(7%) translateY(2%) } to { transform: translateX(-7%) translateY(-2%) } }

/* 细腻颗粒 —— 去掉数码渐变的"塑料感" */
.grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: .05;
  mix-blend-mode: multiply;
}

/* 金色微尘 */
.mote {
  position: absolute; left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 50%;
  background: #D9BC7A; opacity: 0;
  animation: mote var(--t) linear var(--d) infinite;
}
@keyframes mote {
  0%   { transform: translate(0, 0); opacity: 0 }
  18%  { opacity: .4 }
  70%  { opacity: .26 }
  100% { transform: translate(14px, -64px); opacity: 0 }
}

/* ============================================================
   版面：一屏弹性分布
   ============================================================ */
.page {
  position: relative; z-index: 1;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(38px + env(safe-area-inset-top)) 30px 0;
}

/* ---------- 开场 ----------
   下移一段：logo + slogan 落在上半区的视觉中心，而非顶着状态栏 */
.hero { text-align: center; margin-top: 7svh; }

.logo-wrap { display: block; }
.logo {
  display: block;
  width: min(218px, 58vw); height: auto;
  margin: 0 auto;
}
.logo-anim { aspect-ratio: 579 / 90; width: min(252px, 66vw); }
/* Lottie 自带入场编排时，跳过 CSS 的模糊渐显，避免动效打架
   （注意必须用 logo-in：它会把 .seq-0 初始态的 blur 清零） */
.is-loaded .logo-wrap.has-anim { animation: logo-in .5s var(--ease-spring) forwards; }

/* slogan：逐字浮现 + 定期鎏金流光扫过 */
.slogan {
  position: relative;
  margin-top: 22px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .26em; text-indent: .26em;
  color: var(--grey);
  font-style: normal;
}
.sl-base .ch {
  display: inline-block;
  opacity: 0; transform: translateY(9px); filter: blur(4px);
}
.is-loaded .sl-base .ch {
  animation: ch-in .65s var(--ease-spring) forwards;
  animation-delay: calc(.4s + var(--i) * 42ms);
}
@keyframes ch-in { to { opacity: 1; transform: translateY(0); filter: blur(0) } }

.sl-shine {
  position: absolute; inset: 0;
  color: transparent;
  background: linear-gradient(100deg,
    transparent 42%, rgba(203, 164, 92, .9) 50%, transparent 58%);
  background-size: 280% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine-sweep 6.5s ease-in-out 2.4s infinite;
}
@keyframes shine-sweep {
  0% { background-position: 130% 0 }
  55%, 100% { background-position: -80% 0 }
}

.slogan-en {
  margin-top: 7px;
  font-size: 8px; letter-spacing: .3em; text-indent: .3em;
  color: var(--faint); text-transform: uppercase;
}

/* 开场序列 */
.seq { opacity: 0; transform: translateY(10px); }
.seq-0 { transform: translateY(6px); filter: blur(6px); }
.is-loaded .seq { animation: seq-in .9s var(--ease-spring) forwards; }
.is-loaded .seq-0 { animation-name: logo-in; animation-delay: .08s }
.is-loaded .seq-5 { animation-name: track-in; animation-duration: 1.3s; animation-delay: 1s }
@keyframes seq-in { to { opacity: 1; transform: translateY(0) } }
@keyframes logo-in { to { opacity: 1; transform: translateY(0); filter: blur(0) } }
@keyframes track-in {
  from { opacity: 0; transform: translateY(8px); letter-spacing: .52em }
  to   { opacity: 1; transform: translateY(0); letter-spacing: .3em }
}

/* ---------- 滚动入场 ---------- */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s var(--ease-spring), transform .9s var(--ease-spring);
  transition-delay: var(--rd, 0s);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ---------- 区块小标 ---------- */
/* 多余的竖向空间由 follow / join / foot 三处 margin-top:auto 均分，
   手机长屏上内容不会挤在顶部 */
.follow { margin-top: auto; padding-top: 26px; }

.sec {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 8px;
}
.sec i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(169, 133, 68, .25)); }
.sec i:last-child { transform: scaleX(-1); }
.sec span {
  font-size: 9px; letter-spacing: .34em; text-indent: .34em;
  color: var(--gold-label); text-transform: uppercase; white-space: nowrap;
}

/* ---------- 画册式列表 ---------- */
.list { display: block; }

.row {
  position: relative;
  display: flex; align-items: center; gap: 18px;
  width: 100%;
  padding: 19px 2px;
  background: none; border: none;
  text-align: left; text-decoration: none;
  color: inherit; cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.row + .row { border-top: 0.5px solid rgba(169, 133, 68, .22); }

/* 触摸时一缕金色晕染从左侧浮现 */
.row::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(226, 196, 138, .14), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.row:active::before { opacity: 1; }

/* 官方品牌图标 —— 内联 SVG 染香槟金，发丝金环统一视觉重量 */
.ricon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(169, 133, 68, .28);
  background: radial-gradient(circle at 50% 32%, rgba(255, 250, 238, .85), rgba(244, 229, 196, .22));
  display: flex; align-items: center; justify-content: center;
  transition: border-color .35s ease;
}
.row:active .ricon { border-color: rgba(169, 133, 68, .55); }
.bicon {
  width: 16px; height: 16px;
  color: #A08048;
  opacity: .9;
}

.row-main { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.row-main b {
  font-size: 17.5px; font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-title);
  transition: transform .45s var(--ease-spring);
}
.row-main .en {
  font-size: 8px; letter-spacing: .24em;
  color: var(--faint); text-transform: uppercase;
}
.row:active .row-main b { transform: translateX(3px); }

.arrow {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: var(--gold); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none; opacity: .65;
  transition: transform .45s var(--ease-spring), opacity .3s ease;
}
.row:active .arrow { transform: translate(2px, -2px); opacity: 1; }

/* ---------- 会员 CTA：请柬式双线框 ---------- */
.join { text-align: center; margin-top: auto; padding-top: 30px; }

.cta {
  position: relative; display: inline-block;
  padding: 16px 52px;
  border-radius: 2px;
  text-decoration: none;
  background: transparent;
  border: 1px solid rgba(169, 133, 68, .55);
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ease-spring), background-color .35s ease, border-color .35s ease;
}
/* 内层细线 —— 双线框的第二道 */
.cta::after {
  content: "";
  position: absolute; inset: 3px;
  border: 0.5px solid rgba(169, 133, 68, .32);
  border-radius: 1px;
  pointer-events: none;
  transition: border-color .35s ease;
}
.cta:active {
  transform: scale(.97);
  background: rgba(226, 196, 138, .12);
  border-color: rgba(169, 133, 68, .8);
}
.cta:active::after { border-color: rgba(169, 133, 68, .5); }

.cta-text {
  position: relative;
  font-size: 15px; font-weight: 600;
  letter-spacing: .38em; text-indent: .38em;
  color: var(--gold-deep);
  font-family: 'CSAIA Serif', "Songti SC", "STSong", "Noto Serif SC", serif;
}

/* 两侧延伸的发丝金线 + 菱形收头，呼应请柬版式 */
.cta-border {
  position: absolute; top: 50%; left: -48px; right: -48px;
  height: 1px; pointer-events: none;
  background:
    linear-gradient(270deg, rgba(169, 133, 68, .45), transparent) left center / 38px 1px no-repeat,
    linear-gradient(90deg, rgba(169, 133, 68, .45), transparent) right center / 38px 1px no-repeat;
}
.cta-border::before,
.cta-border::after {
  content: "";
  position: absolute; top: -1.5px;
  width: 4px; height: 4px;
  transform: rotate(45deg) scale(.8);
  background: rgba(194, 162, 102, .75);
}
.cta-border::before { left: -2px; }
.cta-border::after { right: -2px; }

/* ---------- 页脚（贴底） ---------- */
.foot {
  text-align: center;
  margin-top: auto;
  padding-top: 30px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* 格言：鎏金流光缓慢扫过 */
.motto {
  display: inline-block;
  font-size: 12px; letter-spacing: .32em; text-indent: .32em;
  color: transparent;
  background: linear-gradient(100deg,
    var(--gold-label) 40%, #D9BC7A 50%, var(--gold-label) 60%);
  background-size: 280% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine-sweep 9s ease-in-out 4s infinite;
}
.motto-en {
  margin-top: 7px;
  font-size: 7.5px; letter-spacing: .24em; text-indent: .24em;
  color: #BFB9AB; text-transform: uppercase;
}
.copyright {
  margin-top: 15px;
  font-size: 7.5px; letter-spacing: .05em;
  color: #C9C4B8;
}

/* ---------- 公众号浮窗 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
}
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(46, 43, 37, .3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .45s ease;
}
.modal-card {
  position: relative;
  width: min(304px, 86vw);
  border-radius: 26px;
  padding: 30px 24px 24px;
  text-align: center;
  background: linear-gradient(168deg, #FFFEFB 0%, #FAF6EC 100%);
  border: 0.5px solid rgba(210, 192, 158, .55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 30px 80px -18px rgba(50, 40, 20, .35);
  opacity: 0;
  transform: scale(.92) translateY(16px);
  transition: opacity .4s ease, transform .55s var(--ease-spring);
}
.modal.is-open .modal-backdrop { opacity: 1; }
.modal.is-open .modal-card { opacity: 1; transform: scale(1) translateY(0); }

.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .7);
  border: 0.5px solid rgba(169, 133, 68, .35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease-spring), border-color .3s ease;
}
.modal-close:active { transform: scale(.9); }
.modal-close svg {
  width: 13px; height: 13px;
  stroke: var(--gold-deep); stroke-width: 1.4; stroke-linecap: round;
  fill: none;
}

.modal-cap {
  font-size: 9.5px; letter-spacing: .3em; text-indent: .3em;
  color: var(--gold-label); text-transform: uppercase;
  margin-bottom: 18px;
}

.qr-frame {
  width: 176px; height: 176px; margin: 0 auto;
  border-radius: 16px; padding: 10px;
  background: #fff;
  border: 0.5px solid rgba(169, 133, 68, .3);
  box-shadow: 0 10px 28px -12px rgba(150, 124, 74, .25);
  display: flex; align-items: center; justify-content: center;
}
.qr-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr-placeholder { color: var(--faint); }
.qr-placeholder svg { width: 42px; height: 42px; fill: rgba(169, 133, 68, .35); }
.qr-placeholder p { margin-top: 8px; font-size: 11px; letter-spacing: .1em; }
.qr-tip { margin-top: 16px; font-size: 12px; letter-spacing: .06em; color: var(--grey); }
.qr-tip-en { margin-top: 5px; font-size: 8px; letter-spacing: .2em; color: var(--faint); text-transform: uppercase; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(34px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  z-index: 30; pointer-events: none;
  padding: 11px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  border: 0.5px solid rgba(169, 133, 68, .45);
  box-shadow: 0 10px 30px -8px rgba(60, 48, 26, .18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 12px; letter-spacing: .12em;
  color: var(--gold-deep);
  opacity: 0;
  transition: opacity .4s ease, transform .5s var(--ease-spring);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 矮屏进一步收紧 ---------- */
@media (max-height: 700px) {
  .page { padding-top: calc(26px + env(safe-area-inset-top)); }
  .hero { margin-top: 2svh; }
  .logo { width: min(192px, 52vw); }
  .follow { padding-top: 20px; }
  .row { padding: 15px 2px; }
  .join { padding-top: 22px; }
  .foot { padding-top: 20px; }
}

/* ---------- 桌面端 ---------- */
@media (min-width: 700px) {
  .page { max-width: 450px; padding-top: 72px; }
  .row:hover .row-main b { transform: translateX(3px); }
  .row:hover .arrow { transform: translate(2px, -2px); opacity: 1; }
  .row:hover::before { opacity: 1; }
  .row:hover .bicon { opacity: 1; }
  .cta:hover { border-color: rgba(169, 133, 68, .8); }
  .modal-close:hover { border-color: rgba(169, 133, 68, .7); }
}

/* ---------- 降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .logo-wrap, .seq, .reveal, .wash, .sl-base .ch { opacity: 1 !important; transform: none !important; filter: none !important; }
  .sl-shine, .motto { animation: none !important; }
  .motto { color: var(--gold-label); background: none; }
}