/* ============================================================
 * atlas-flow.css — 图鉴页两项交互增强（纯呈现层，零业务改动）
 *
 *   ① 搜索/脉络「隐藏模式」（默认隐藏；轻触页面切换）
 *      隐藏项：标题区(.section-head)、体系脉络带(.nx-ribbon)、
 *              筛选抽屉入口(.flt-entry)、五行指示点(.wx-dots)、
 *              筛选栏(.filter-bar)、抽屉遮罩(.flt-backdrop)、滑动提示(.swipe-hint)
 *      → 精油阵列铺满视口（解除 .container 的 1240 上限）
 *   ② 三瓶「购物筐」(#af-basket)
 *      平时完全隐藏（pointer-events:none，不占空间、不挡点击）；
 *      选中精油 → 瓶图沿弧线缩小飞入 → 购物筐弹出 → 自动缩回隐藏。
 *
 * 铁律：只做呈现与动效；transform/opacity 优先（GPU），保证手机端与桌面端
 *       同样流畅；符合 calm 稳定模式与 prefers-reduced-motion 降级纪律。
 * ============================================================ */

/* ---------- ① 搜索 / 脉络 隐藏模式 ---------- */
body.atlas-zen .section-head,
body.atlas-zen .nx-ribbon,
body.atlas-zen .flt-entry,
body.atlas-zen .wx-dots,
body.atlas-zen .filter-bar,
body.atlas-zen .flt-backdrop,
body.atlas-zen .swipe-hint { display: none !important; }
/* 精油全屏展示：解除内容容器宽度上限 */
body.atlas-zen .container { max-width: none; padding: 0 12px; }

/* ---------- ② 三瓶购物筐 ---------- */
#af-basket {
  position: fixed;
  right: 18px;
  bottom: calc(var(--af-lift, 0px) + 18px);
  z-index: 1650;
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%,
              rgba(255, 255, 255, .97), rgba(247, 242, 233, .90) 48%, rgba(228, 216, 195, .92) 100%);
  border: 1px solid rgba(158, 138, 104, .45);
  box-shadow: 0 12px 30px rgba(38, 30, 18, .28), inset 0 1px 0 rgba(255, 255, 255, .75);
  pointer-events: none;                 /* 永不拦截页面点击 */
  opacity: 0;
  transform: translateY(14px) scale(.62);
  transform-origin: 50% 50%;
  transition: opacity .26s ease, transform .44s cubic-bezier(.22, .61, .36, 1);
  will-change: transform, opacity;
}
/* 筐提手 */
#af-basket::before {
  content: ''; position: absolute; top: -8px; left: 50%;
  width: 26px; height: 15px; margin-left: -13px;
  border: 2px solid rgba(150, 128, 92, .72); border-bottom: none;
  border-radius: 26px 26px 0 0;
}
/* 已选瓶图 */
#af-basket .af-items { display: flex; gap: 3px; align-items: center; justify-content: center; }
#af-basket .af-items img {
  width: 26px; height: 26px; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .24));
}
/* 计数徽标 */
#af-basket .af-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; background: #3f837c; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  box-shadow: 0 3px 8px rgba(63, 131, 124, .42);
  font-variant-numeric: tabular-nums;
}
/* 第三瓶：确认完成 */
#af-basket .af-done {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--serif, "Songti SC", serif);
  font-size: 12px; letter-spacing: .18em; text-indent: .18em;
  color: #fff; background: rgba(63, 131, 124, .92);
  padding: 4px 12px; border-radius: 999px;
  opacity: 0; transition: opacity .26s ease .08s;
}
#af-basket.is-done .af-done { opacity: 1; }
#af-basket.is-done {
  border-color: rgba(63, 131, 124, .72);
  box-shadow: 0 12px 30px rgba(38, 30, 18, .28),
              inset 0 1px 0 rgba(255, 255, 255, .75),
              0 0 0 4px rgba(63, 131, 124, .18);
}

/* 出现 / 弹跳 / 静止三态 */
#af-basket.is-in { opacity: 1; transform: translateY(0) scale(1); }
#af-basket.is-pop { animation: af-pop .52s cubic-bezier(.24, 1.42, .42, 1) both; }
@keyframes af-pop {
  0%   { transform: translateY(0) scale(.86); }
  45%  { transform: translateY(0) scale(1.17); }
  72%  { transform: translateY(0) scale(.96); }
  100% { transform: translateY(0) scale(1); }
}

/* 飞行体：只动 transform/opacity，GPU 合成，移动端亦流畅 */
.af-fly {
  position: fixed; z-index: 2100; margin: 0;
  pointer-events: none; will-change: transform, opacity;
}
.af-fly img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3));
}

/* ---------- 深色主题 ---------- */
html[data-theme="dark"] #af-basket {
  background: radial-gradient(circle at 32% 26%,
              rgba(58, 66, 62, .97), rgba(38, 45, 42, .94) 48%, rgba(26, 32, 30, .96) 100%);
  border-color: rgba(220, 185, 120, .42);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .10);
}
html[data-theme="dark"] #af-basket::before { border-color: rgba(220, 185, 120, .6); }
html[data-theme="dark"] #af-basket .af-done { background: rgba(220, 185, 120, .94); color: #1b201e; }

/* ---------- 窄屏 ---------- */
@media (max-width: 720px) {
  #af-basket { width: 60px; height: 60px; right: 12px; }
  #af-basket .af-items img { width: 22px; height: 22px; }
  #af-basket .af-count { min-width: 20px; height: 20px; line-height: 20px; font-size: 11px; }
}

/* ---------- 降级：稳定模式 / 减少动效 / 打印 ---------- */
html.calm #af-basket { transition: opacity .2s linear; }
html.calm #af-basket.is-pop { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #af-basket { transition: opacity .2s linear; }
  #af-basket.is-pop { animation: none !important; }
}
@media print {
  #af-basket, .af-fly { display: none !important; }
}