/* 设计画布 1125x2436，所有坐标以此为基准，#stage 整体 transform:scale 适配屏幕 */
:root{ --cw:1125; --ch:2436; }

/* 设计稿字体 Source Han Sans SC（思源黑体 SC = Noto Sans SC），
   自托管按字重子集化 woff2（scripts/build_fonts.py 生成）。
   字重映射：Regular400 Normal450 Medium500 Bold700 Heavy900 */
@font-face{ font-family:"Noto Sans SC"; font-weight:400; font-display:swap;
  src:url("/static/fonts/NotoSansSC-400.woff2") format("woff2"); }
@font-face{ font-family:"Noto Sans SC"; font-weight:450; font-display:swap;
  src:url("/static/fonts/NotoSansSC-450.woff2") format("woff2"); }
@font-face{ font-family:"Noto Sans SC"; font-weight:500; font-display:swap;
  src:url("/static/fonts/NotoSansSC-500.woff2") format("woff2"); }
@font-face{ font-family:"Noto Sans SC"; font-weight:700; font-display:swap;
  src:url("/static/fonts/NotoSansSC-700.woff2") format("woff2"); }
@font-face{ font-family:"Noto Sans SC"; font-weight:900; font-display:swap;
  src:url("/static/fonts/NotoSansSC-900.woff2") format("woff2"); }

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; background:#1a0f06; overflow:hidden; }
body{ font-family:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif; }

#viewport{ position:fixed; inset:0; display:flex; align-items:flex-start; justify-content:center; }
#stage{
  width:1125px; height:2436px; position:relative;
  flex:none;                         /* 不被 #viewport 的 flex 横向压缩 */
  transform-origin:top center; will-change:transform;
  background:#000; overflow:hidden;
}

/* 单页容器：背景 + 元素 + 文字 分层叠放 */
.page{ position:absolute; inset:0; }
.page.swipe-out-left{ animation:swipeOutL .35s ease forwards; }
.page.swipe-in-right{ animation:swipeInR .35s ease forwards; }
.page.swipe-out-right{ animation:swipeOutR .35s ease forwards; }
.page.swipe-in-left{ animation:swipeInL .35s ease forwards; }
.page.fade-in{ animation:pageIn .6s cubic-bezier(.2,.7,.2,1) both; }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
/* A 整页入场：整页作为一个整体轻微上浮+回弹缩放（不破坏内部元素同步） */
@keyframes pageIn{
  from{ opacity:0; transform:translateY(26px) scale(.984) }
  to{ opacity:1; transform:none }
}
@keyframes swipeOutL{ to{ transform:translateX(-100%); opacity:0 } }
@keyframes swipeInR{ from{ transform:translateX(100%); opacity:0 } to{ transform:translateX(0); opacity:1 } }
@keyframes swipeOutR{ to{ transform:translateX(100%); opacity:0 } }
@keyframes swipeInL{ from{ transform:translateX(-100%); opacity:0 } to{ transform:translateX(0); opacity:1 } }

.layer-bg{ position:absolute; left:0; top:0; width:1125px; height:2436px; object-fit:cover; }
.el{ position:absolute; }
.el img{ width:100%; height:100%; display:block; }
.tx{ position:absolute; white-space:pre-wrap; line-height:1.32; }

/* 区块入场动效（需求：部分区块出现要有动态效果） */
.anim-pop{ opacity:0; transform:scale(.7); }
.anim-pop.in{ animation:pop .5s cubic-bezier(.2,1.3,.4,1) forwards; }
.anim-fade{ opacity:0; }
.anim-fade.in{ animation:fadeIn .6s ease forwards; }
@keyframes pop{ to{ opacity:1; transform:scale(1) } }

/* P2「三大原料」分栏 staggered 入场：标题先升，三栏左→中→右依次上浮。
   delay 由 JS 按元素 x 坐标分组注入（同栏图文同 delay，保证同步）。
   both 让 delay 期间维持隐藏初态，不会先闪现。 */
.p2-in{ opacity:0; transform:translateY(32px); }
.p2-in.in{ animation:p2rise .62s cubic-bezier(.2,.7,.2,1) both; }
@keyframes p2rise{ to{ opacity:1; transform:translateY(0) } }

/* D 主视觉浮动：核心产品图入场后轻微上下浮动（作用于内层 img，
   与 .el 的 anim-fade 入场互不冲突） */
.el-float img{ animation:floaty 4.4s ease-in-out .6s infinite; will-change:transform; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-15px) } }

/* 无障碍：用户偏好减少动态时，收敛持续动画、入场降级为简单淡入 */
@media (prefers-reduced-motion: reduce){
  .el-float img, .next-arrow, .next-arrow.idle{ animation:none !important; }
  .page.fade-in{ animation:fadeIn .3s ease both; }
  .p2-in{ opacity:1 !important; transform:none !important; }
  .p2-in.in{ animation:none !important; }
}

/* 可点击热区 */
.hot{ position:absolute; cursor:pointer; }
.hot:active{ transform:scale(.97); }

/* 引导页进度点 + 下一页箭头 */
.dots{ position:absolute; left:0; right:0; bottom:90px; display:flex; gap:18px; justify-content:center; z-index:50; }
.dots i{ width:18px; height:18px; border-radius:50%; background:rgba(69,31,13,.25); transition:.3s; }
.dots i.on{ background:#451F0D; width:46px; border-radius:9px; }
/* 浅色页（P4/P5 蓝天）：圆点用白色系，与页面协调 */
.dots.light i{ background:rgba(255,255,255,.5); }
.dots.light i.on{ background:#fff; }
.next-arrow{
  position:absolute; right:54px; bottom:150px; width:120px; height:120px; z-index:50;
  border-radius:50%; background:rgba(69,31,13,.85); color:#F6F0E2;
  display:flex; align-items:center; justify-content:center;
  animation:bob 1.4s ease-in-out infinite;
}
.next-arrow svg{ width:54px; height:54px; display:block; }
/* 浅色页：箭头按钮用品牌蓝，与 P4/P5 协调 */
.next-arrow.light{ background:rgba(25,67,135,.85); color:#fff; }
@keyframes bob{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(14px) } }
/* C idle 引导：停留数秒未翻页时，箭头叠加发光脉冲环（transform 仍由 bob 控，
   pulse 只动 box-shadow/filter，二者不冲突） */
.next-arrow.idle{ animation:bob 1.4s ease-in-out infinite, arrowPulse 1.6s ease-in-out infinite; }
@keyframes arrowPulse{
  0%{ box-shadow:0 0 0 0 rgba(231,184,90,.55); filter:brightness(1) }
  70%{ box-shadow:0 0 0 30px rgba(231,184,90,0); filter:brightness(1.15) }
  100%{ box-shadow:0 0 0 0 rgba(231,184,90,0); filter:brightness(1) }
}
.next-arrow.light.idle{ animation:bob 1.4s ease-in-out infinite, arrowPulseLight 1.6s ease-in-out infinite; }
@keyframes arrowPulseLight{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.5); filter:brightness(1) }
  70%{ box-shadow:0 0 0 30px rgba(255,255,255,0); filter:brightness(1.15) }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); filter:brightness(1) }
}

/* 答题圆点状态环：叠加在 PSD 圆点上，保持设计稿样式不变
   首答=中性高亮(sel)；复习态=对(绿)/错(红) */
.qbullet{ position:absolute; border-radius:18px; box-sizing:border-box;
  pointer-events:none; transition:.2s; }
.qbullet.sel{ color:#451F0D; }   /* 选中: 只显 ✓, 不要边框/底色 */
.qbullet.right{ color:#2e9e54; }  /* 对: 只给 ✓ 上绿, 无边框/底色 */
.qbullet.wrong{ color:#d2473c; }  /* 错: 只给 ✗ 上红, 无边框/底色 */
/* 选中/对=✓  错=✗（内联 SVG，随框缩放、随状态着色） */
.qbullet svg{ position:absolute; left:50%; top:50%; width:64%; height:64%;
  transform:translate(-50%,-50%); display:none; overflow:visible; }
.qbullet path{ fill:none; stroke:currentColor; stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round; }
/* 选中/答对(.right)显 ✓; 答错显 ✗; 答错时你没选的那个正确答案
   用 .ans(橙框引导, 不放对号) */
.qbullet.sel svg, .qbullet.right svg, .qbullet.wrong svg{ display:block; }
.qbullet .mk-cross{ display:none; }
.qbullet.wrong .mk-check{ display:none; }
.qbullet.wrong .mk-cross{ display:block; }

/* P10 兑换 */
.qrbox{ position:absolute; background:#fff; padding:26px; border-radius:24px;
  box-shadow:0 16px 40px rgba(0,0,0,.3); }
.qrbox img,.qrbox canvas{ width:100%; height:100%; display:block; }
.redeemed-stamp{
  position:absolute; inset:0; background:rgba(26,15,6,.78);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#F6F0E2; gap:30px; z-index:80;
}
.redeemed-stamp .big{
  font-size:90px; font-weight:900; color:#e7b85a;
  border:8px solid #e7b85a; padding:30px 70px; border-radius:30px;
  transform:rotate(-12deg); animation:pop .5s cubic-bezier(.2,1.3,.4,1) both;
}
.redeemed-stamp .sub{ font-size:40px; }

/* ===== 首页启动屏：一番榨「斟金」 ===== */
.overlay-center{
  position:fixed; inset:0; overflow:hidden; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(122% 68% at 50% 0%, rgba(255,249,228,.9), rgba(255,249,228,0) 56%),
    linear-gradient(180deg,#f6e7c6 0%,#eccb7e 33%,#d49b3b 66%,#9c6418 100%);
  transition:opacity .55s ease, transform .55s ease;
}
.overlay-center::after{                 /* 麦芽颗粒质感 */
  content:""; position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:multiply; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
#loading.fade-out{ opacity:0; transform:translateY(-16px) scale(1.02); }

.ld-foam{                               /* 顶部泡沫高光 */
  position:absolute; top:-24%; left:-10%; right:-10%; height:56%;
  background:radial-gradient(58% 100% at 50% 0%, rgba(255,252,240,.92), rgba(255,250,235,0) 70%);
  filter:blur(6px); pointer-events:none;
}

.ld-bubbles{ position:absolute; inset:0; pointer-events:none; }
.ld-bubbles i{
  position:absolute; bottom:-44px; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.88), rgba(255,244,214,.1) 70%);
  box-shadow:inset 0 0 6px rgba(255,255,255,.6), 0 0 9px rgba(255,236,190,.45);
  animation:ldrise linear infinite;
}
.ld-bubbles i:nth-child(1){ left:12%; width:14px; height:14px; animation-duration:7.5s; animation-delay:0s; }
.ld-bubbles i:nth-child(2){ left:24%; width:9px;  height:9px;  animation-duration:6s;   animation-delay:1.4s; }
.ld-bubbles i:nth-child(3){ left:37%; width:18px; height:18px; animation-duration:8.6s; animation-delay:.6s; }
.ld-bubbles i:nth-child(4){ left:48%; width:7px;  height:7px;  animation-duration:5.4s; animation-delay:2.2s; }
.ld-bubbles i:nth-child(5){ left:58%; width:13px; height:13px; animation-duration:7s;   animation-delay:.3s; }
.ld-bubbles i:nth-child(6){ left:67%; width:10px; height:10px; animation-duration:6.4s; animation-delay:1.9s; }
.ld-bubbles i:nth-child(7){ left:78%; width:16px; height:16px; animation-duration:8s;   animation-delay:.9s; }
.ld-bubbles i:nth-child(8){ left:88%; width:8px;  height:8px;  animation-duration:5.8s; animation-delay:2.6s; }
.ld-bubbles i:nth-child(9){ left:31%; width:6px;  height:6px;  animation-duration:5s;   animation-delay:3.1s; }
.ld-bubbles i:nth-child(10){ left:72%; width:6px; height:6px;  animation-duration:5.2s; animation-delay:3.6s; }
@keyframes ldrise{
  0%{ transform:translateY(0) translateX(0) scale(.55); opacity:0; }
  12%{ opacity:.85; }
  72%{ opacity:.6; }
  100%{ transform:translateY(-88vh) translateX(18px) scale(1.28); opacity:0; }
}

.ld-core{ position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; }
.ld-core::before{                       /* 暖白柔光：把 logo 从金底托起 */
  content:""; position:absolute; left:50%; top:34%;
  width:124vw; height:124vw; max-width:760px; max-height:760px;
  transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,252,242,.9) 0%, rgba(255,249,233,.4) 36%, rgba(255,249,233,0) 66%);
  filter:blur(4px);
  animation:ldhalo 4.8s ease-in-out infinite;
}
@keyframes ldhalo{
  0%,100%{ opacity:.82; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
}
.ld-logo{
  width:60vw; max-width:362px; height:auto; display:block;
  filter:drop-shadow(0 6px 16px rgba(120,68,14,.32));
  opacity:0; animation:ldfx .9s cubic-bezier(.2,.7,.2,1) .12s forwards;
}
@keyframes ldfx{
  from{ opacity:0; transform:translateY(20px) scale(.94); }
  to{ opacity:1; transform:none; }
}

.ld-bar{
  position:relative; width:150px; height:4px; margin-top:58px;
  border-radius:99px; overflow:hidden; background:rgba(122,74,22,.22);
  opacity:0; animation:ldfx .8s ease .42s forwards;
}
.ld-bar span{
  position:absolute; top:0; left:0; height:100%; width:42%; border-radius:99px;
  background:linear-gradient(90deg, transparent, #fff3cf 40%, #f0b94e 62%, transparent);
  animation:ldpour 1.45s cubic-bezier(.5,.1,.4,1) infinite;
}
@keyframes ldpour{ 0%{ transform:translateX(-130%); } 100%{ transform:translateX(330%); } }

@media (prefers-reduced-motion: reduce){
  .ld-bubbles{ display:none; }
  .ld-logo,.ld-bar{ animation:none; opacity:1; }
  .ld-bar span{ animation:none; left:30%; }
  #loading.fade-out{ transform:none; }
}
.hidden{ display:none !important; }

video.flow-video{ position:absolute; object-fit:cover; background:#000; }
.play-btn{ position:absolute; display:flex; align-items:center; justify-content:center; }
.play-btn svg{ width:100%; height:100%; filter:drop-shadow(0 6px 16px rgba(0,0,0,.4)); }