/* =========================================================================
   品牌栏 · 两个动效舞台（2026-09-24）
   ① 悠芯鲜：C 位环形图鉴（原 css/v36.css 里的环形样式抽出来单独成册，
      避免把 v3.6 的整页版式一起引进来；引擎仍是 js/ring36.js）
   ② 泰塔悠：新动效舞台「袋装悬浮 · 果香轨道 · 三星升起」（js/tty_anim37.js）
   依赖：css/brand37.css（品牌栏一屏版式与色板）
   ========================================================================= */

/* ---------- ① 悠芯鲜 C 位环形图鉴 ---------- */
.bp-stage-uxx{position:relative;border-radius:18px;overflow:hidden;
  background:radial-gradient(80% 100% at 50% 0%,#0C3F27 0%,#062418 70%);
  padding:clamp(10px,1.4vh,16px) clamp(10px,1.2vw,22px) clamp(8px,1.2vh,12px)}
#ringStage{position:relative;height:clamp(300px,44vh,460px);border-radius:16px;overflow:hidden;
  background:radial-gradient(70% 80% at 50% 40%,#0C3F27 0%,#062418 74%);
  perspective:1500px;perspective-origin:50% 42%;touch-action:pan-y;cursor:grab}
#ringStage.dragging{cursor:grabbing}
#ringStage:before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(205,232,107,.06) 1px,rgba(0,0,0,0) 1px),
                   linear-gradient(90deg,rgba(205,232,107,.06) 1px,rgba(0,0,0,0) 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 76% at 50% 42%,#000 8%,rgba(0,0,0,0) 76%);
          mask-image:radial-gradient(70% 76% at 50% 42%,#000 8%,rgba(0,0,0,0) 76%)}
#ringStage .floor{position:absolute;left:12%;right:12%;bottom:40px;height:52px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 70%);pointer-events:none}
#ringStage .ring{position:absolute;inset:0;pointer-events:none}
#ringStage .rc{position:absolute;left:50%;top:44%;margin:0;padding:6px;border:0;border-radius:13px;background:#fff;
  box-shadow:0 20px 40px rgba(0,0,0,.5);cursor:pointer;pointer-events:auto;will-change:transform,filter;
  transition:box-shadow .3s ease;overflow:hidden}
#ringStage .rc img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;background:#fff}
#ringStage .rc .nm{position:absolute;left:6px;right:6px;bottom:6px;z-index:2;font-size:11.5px;color:#fff;
  padding:14px 8px 6px;border-radius:0 0 8px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(rgba(6,36,24,0),rgba(6,36,24,.84));opacity:0;transition:opacity .25s}
#ringStage .rc.is-c .nm{opacity:1}
#ringStage .rc.is-c{box-shadow:0 26px 52px rgba(0,0,0,.6),0 0 0 2px var(--lime,#CDE86B),0 0 30px rgba(205,232,107,.34)}
#ringStage .rc:focus-visible{outline:3px solid var(--lime,#CDE86B);outline-offset:5px}
#ringStage .rc.todo{background:repeating-linear-gradient(135deg,#12452F 0 14px,#175338 14px 28px);
  border:2px dashed rgba(205,232,107,.55);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:12px}
#ringStage .rc.todo b{color:var(--lime,#CDE86B);font-size:15px;letter-spacing:.06em;text-shadow:0 2px 8px rgba(0,0,0,.5)}
#ringStage .rc.todo span{color:#DCE9E0;font-size:12.5px;line-height:1.6}
#ringStage .rc.todo em{font-style:normal;color:#7FB3A6;font-size:11px}
.ring-hint{position:absolute;left:14px;bottom:12px;z-index:5;font-size:11.5px;color:#8FBBA3;letter-spacing:.02em}
.ring-hint b{color:var(--lime,#CDE86B);font-weight:600}
.ringnav{position:absolute;right:14px;bottom:10px;z-index:5;display:flex;gap:8px}
.ringnav button,.at-filt button{font:inherit;font-size:12.5px;padding:6px 13px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#EAF3EC;border:1px solid rgba(255,255,255,.20);
  transition:background .2s,border-color .2s,color .2s}
.ringnav button:hover,.at-filt button:hover{background:rgba(205,232,107,.14);border-color:rgba(205,232,107,.5)}
.at-filt{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.at-filt button{color:#B9CFC2}
.at-filt button.on{background:var(--lime,#CDE86B);color:#062418;border-color:var(--lime,#CDE86B);font-weight:700}

/* ---------- ② 泰塔悠 · 袋装悬浮 + 果香轨道 + 三星升起 ---------- */
.bp-stage-tty{position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#FFFDF8 0%,#F4EFE4 62%,#EFE7D8 100%);
  border:1px solid rgba(168,31,16,.14);box-shadow:0 18px 44px rgba(36,28,24,.10)}
#ttyStage{position:relative;height:clamp(300px,44vh,460px);overflow:hidden;cursor:default;
  touch-action:pan-y}
/* 轨道：两条同心虚线椭圆（果香外扩的两圈） */
#ttyStage .track{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;
  border:1.5px dashed rgba(168,31,16,.22);transform:translate(-50%,-50%)}
#ttyStage .track.t2{border-style:solid;border-color:rgba(168,31,16,.10)}
/* 立袋：白底产品圆窗（袋装包装正面），轻微悬浮 + 指针视差倾斜 */
#ttyBag{position:absolute;left:50%;top:50%;width:clamp(126px,14vw,182px);aspect-ratio:9/13;
  margin:0;padding:8px;border-radius:18px;background:#fff;border:1px solid rgba(36,28,24,.08);
  box-shadow:0 26px 54px rgba(60,26,14,.22),0 0 0 1px rgba(255,255,255,.6) inset;
  transform:translate(-50%,-50%);transform-style:preserve-3d;cursor:pointer;z-index:40;
  transition:box-shadow .3s ease}
#ttyBag:hover{box-shadow:0 30px 62px rgba(60,26,14,.30),0 0 0 2px rgba(168,31,16,.35)}
#ttyBag img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}
#ttyBag:focus-visible{outline:3px solid #a81f10;outline-offset:4px}
#ttyBag figcaption{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-size:11.5px;
  color:#7a5a4c;letter-spacing:.04em;white-space:nowrap}
/* 轨道上的实拍小卡：近大远小（JS 每帧写 transform / filter） */
#ttyStage .tc{position:absolute;left:50%;top:50%;margin:0;padding:5px;border:0;border-radius:12px;background:#fff;
  box-shadow:0 14px 30px rgba(60,26,14,.20);cursor:pointer;overflow:hidden;will-change:transform,filter}
#ttyStage .tc img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}
#ttyStage .tc .cap{position:absolute;left:5px;right:5px;bottom:5px;padding:12px 7px 5px;border-radius:0 0 8px 8px;
  font-size:10.5px;color:#fff;background:linear-gradient(rgba(24,12,8,0),rgba(24,12,8,.78));
  opacity:0;transition:opacity .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ttyStage .tc.is-c .cap{opacity:1}
#ttyStage .tc.is-c{box-shadow:0 18px 38px rgba(60,26,14,.28),0 0 0 2px #a81f10}
#ttyStage .tc:focus-visible{outline:3px solid #a81f10;outline-offset:4px}
/* 三星（iTQi 语义：三枚依次点亮的星徽） */
#ttyStars{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:12px;z-index:60}
#ttyStars i{width:11px;height:11px;border-radius:50%;background:rgba(168,31,16,.16);
  box-shadow:0 0 0 1px rgba(168,31,16,.22) inset;transition:background .5s ease,box-shadow .5s ease,transform .5s ease}
#ttyStars i.on{background:#a81f10;box-shadow:0 0 12px rgba(168,31,16,.55);transform:scale(1.22)}
#ttyStars b{margin-left:6px;font-size:11.5px;font-weight:600;color:#7a5a4c;letter-spacing:.04em;align-self:center}
/* 舞台角标 */
.tty-tag{position:absolute;left:16px;top:14px;z-index:60;font-size:11.5px;letter-spacing:.14em;
  color:#a81f10;background:rgba(255,255,255,.78);border:1px solid rgba(168,31,16,.22);
  border-radius:999px;padding:5px 12px}
.tty-hint{position:absolute;right:16px;bottom:16px;z-index:60;font-size:11.5px;color:#8a6a5c;letter-spacing:.03em}
.tty-hint b{color:#a81f10;font-weight:600}
/* 舞台下方的一行事实（与子屏口径一致，不放价格、不放绝对化用语） */
.tty-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tty-facts span{font-size:11.5px;padding:6px 12px;border-radius:999px;color:#6b4a3c;
  background:rgba(255,255,255,.7);border:1px solid rgba(168,31,16,.16)}

/* 一屏版式：悠芯鲜这一栏把右列让宽给环形图鉴（环直径按列宽自适应） */
body[data-brand="uxx"] .bp-wrap{grid-template-columns:.8fr 1.2fr;gap:26px}

@media (max-width:1180px){
  body[data-brand="uxx"] .bp-wrap{grid-template-columns:.82fr 1.18fr;gap:20px}
  #ringStage,#ttyStage{height:clamp(280px,40vh,420px)}
}
@media (max-width:980px){
  /* 两品牌都改单列：文案在上、动效在下 */
  .bp-wrap,body[data-brand="uxx"] .bp-wrap{grid-template-columns:1fr;gap:16px;padding-bottom:190px}
  /* 悠芯鲜没底部入口框了 → 不再预留入口空间 */
  body[data-brand="uxx"] .bp-wrap{padding-bottom:calc(var(--nav-h,64px) + 22px)}
  #ringStage,#ttyStage{height:clamp(240px,32vh,340px)}
  #ttyBag{width:clamp(104px,22vw,150px)}
}
@media (max-width:820px){
  /* 手机也要看得到动效（原来 .bp-media 整个隐藏 → 手机上没有任何品牌动效）。
     做法：动效舞台留着、压矮；文案段落截到 4 行；底部入口条 3 行照旧。 */
  body[data-brand] .bp-media{display:flex;flex-direction:column;gap:10px}
  .bp-copy .lead{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  #ringStage,#ttyStage{height:clamp(184px,24vh,214px)}
  #ttyBag{width:clamp(86px,20vw,112px)}
  #ttyStars i{width:9px;height:9px}
  #ttyStars b{font-size:10px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ring-hint,.tty-hint{display:none}
  .tty-tag{font-size:10.5px;padding:4px 10px;left:10px;top:10px}
  .at-filt{margin-top:8px}
  .tty-facts{display:none}
  body[data-brand] .bp-wrap{padding-bottom:230px}
  body[data-brand="uxx"] .bp-wrap{padding-bottom:calc(var(--nav-h,64px) + 18px);align-content:center}
  .bp .ss-entries{bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  #ttyStage .tc,#ttyBag{transition:none !important}
}

/* 泰塔悠去入口后（纯一屏）：舞台加高，填补原本放入口卡的竖向空间 */
@media (min-width:1181px){
  body[data-brand="tty"] #ttyStage{height:clamp(380px,60vh,640px)}
  body[data-brand="tty"] .bp-stage-tty{width:100%}
}