/* ============================================================
 * promo-modal.css — 首页推广弹窗样式 (v20261017a)
 *
 * 配套：layouts/_partials/landing/promo-modal.html
 *      hugo.toml → [params.promo]
 *
 * 设计原则：
 *   - 仅作用于首页（partial 本身用 .IsHome 守门）
 *   - CSS 变量、类名以 --mlwm-promo- / .mlwm-promo- 命名，避免污染站点其它样式
 *   - 沿用 demo 原版的"红金学习卡片 + 厚度书插画"视觉
 * ============================================================ */

:root {
  --mlwm-promo-red: #df3038;
  --mlwm-promo-red-dark: #b91f2b;
  --mlwm-promo-ink: #34201f;
  --mlwm-promo-muted: #786967;
  --mlwm-promo-cream: #fffaf5;
  /* AI 能量核心(course 分支)用的暖橙主色 + 球体渐变中间色 */
  --mlwm-promo-orange: #fb923c;
  --mlwm-promo-orange-soft: #fdba74;
  --mlwm-promo-orange-bg: #fff5ec;
  --mlwm-promo-orange-line: rgba(251, 146, 60, .45);
}

.mlwm-promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(24, 31, 35, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  /* 默认状态(关闭方向):透明度先淡出,visibility 等淡出后再切到 hidden,
     避免 visibility 的离散切换落在过渡中途造成"先出现再消失"的伪闪烁。 */
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.mlwm-promo-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  /* 显示方向:visibility 立即切到 visible 让元素进入渲染,
     同时 opacity 从 0 淡入到 1;两个属性独立计时。 */
  transition: opacity .22s ease, visibility 0s linear 0s;
}

/* === host(动态 host,被 importNode 进来) === */
.mlwm-promo-modal-host {
  display: contents;
}
.mlwm-promo-modal-host > .mlwm-promo-modal {
  position: relative;
  width: min(840px, 100%);
  min-height: 440px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  background: var(--mlwm-promo-cream);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 22px;
  box-shadow: 0 28px 90px rgba(28, 23, 20, .25);
  /* 入场前:整体下移并轻微缩小,使出现时有"浮起"感;
     scale 已经预乘 0.8(整体缩 20%),所以 .985 等比折算成 0.788 */
  transform: translateY(10px) scale(0.788);
  transition: transform .22s ease;
}
.mlwm-promo-overlay.is-visible .mlwm-promo-modal-host > .mlwm-promo-modal {
  transform: translateY(0) scale(0.8);
}


.mlwm-promo-copy {
  position: relative;
  z-index: 2;
  padding: 48px 0 42px 42px;
}
/* tag 改成 eyebrow:左侧短横线 + 品牌红文字,不再用红色 pill 框,
   避免和右边的暖橙球体、CTA 按钮抢视觉 */
.mlwm-promo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: -5px;
  color: var(--mlwm-promo-red);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1.7px;
}
.mlwm-promo-eyebrow::before {
  content: "";
  width: 32px;
  height: 1.5px;
  background: var(--mlwm-promo-red);
}
.mlwm-promo-title {
  margin: 22px 0 14px;
  font-size: clamp(29px, 3.2vw, 42px);
  line-height: 1.25;
  letter-spacing: -1px;
  color: var(--mlwm-promo-ink);
}
.mlwm-promo-title .mlwm-promo-accent {
  color: var(--mlwm-promo-red);
  /* 默认 inline,让 titleLine1 和 titleLine2 同行连续渲染(走纯色拼接不换行),
     颜色仍由 accent 类单独控制,实现"前段浅色 + 后段红色"的句子式标题 */
  display: inline;
}
.mlwm-promo-desc {
  max-width: 370px;
  margin: 0;
  color: var(--mlwm-promo-muted);
  font-size: 18px;
  line-height: 1.85;
  /* 段落两端对齐,中文文本走 justify 也会有正常间距;
     text-justify: inter-ideograph 让中日韩字符之间也参与字间分配,
     末行保持左对齐(text-align-last: auto)避免尾巴被拉散 */
  text-align: justify;
  text-justify: inter-ideograph;
  text-align-last: left;
}
.mlwm-promo-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 11px;
  margin: 24px 0 27px;
  color: #5e4c49;
  font-size: 15px;
}
.mlwm-promo-point {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.mlwm-promo-point svg {
  width: 17px;
  height: 17px;
  color: var(--mlwm-promo-red);
  flex: 0 0 auto;
}
.mlwm-promo-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  padding: 15px 24px;
  border-radius: 99px;
  background: linear-gradient(100deg, #e44449, #c91f2d);
  color: white;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(211, 43, 53, .19);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mlwm-promo-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(211, 43, 53, .25);
}
.mlwm-promo-cta .mlwm-promo-arrow {
  font-size: 21px;
  line-height: 1;
}

.mlwm-promo-visual {
  position: relative;
  align-self: stretch;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 18px 28px 0;
  isolation: isolate;
}
/* === course 分支:AI 能量核心(球体 + 轨道 + 内部神经网络 + 数学符号 + 数据轨迹) === */
/* 球体改用 HTML + CSS radial-gradient + box-shadow halo 渲染,
   绕开 SVG url(#id) 引用在 importNode 后的失效问题;轨道/halo/数学符号/数据轨迹
   仍走 SVG,但不再依赖任何 url() 引用,只用纯色 fill。 */

/* 容器:给 ball + orbits 提供定位基准 */
.mlwm-promo-ai-graph {
  position: relative;
  z-index: 1;
  width: min(100%, 410px);
  aspect-ratio: 400 / 408;
  overflow: visible;
}

/* === z-index 层级 ===
   .mlwm-promo-ai-graph 形成一个 stacking context,
   bg (0) < ball (1) < fg (2),
   halo + 后方轨道在球体下,前景轨道 + 数据 + 符号 + 轨迹在球体上,
   与附件原版视觉一致(前景轨道穿过球的部分覆盖球体)。 */

/* 球体:CSS radial-gradient + 小范围 box-shadow halo(避免盖住球外的数学符号/数据轨迹) */
.mlwm-promo-ai-ball {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 37.5%;            /* 150 / 400 = 0.375 */
  aspect-ratio: 1;
  margin-left: -18.75%;
  margin-top: -18.75%;
  border-radius: 50%;
  /* 高光中心向左上偏移,模拟 3D 球体光照 */
  background: radial-gradient(circle at 32% 28%,
    #ffffff 0%,
    #fff5e8 14%,
    #fdba74 42%,
    #fb923c 78%,
    #f9856b 100%);
  /* halo 光晕:收紧到球体边缘内,不溢出盖住球外的数学符号 */
  box-shadow:
    0 0 30px 6px rgba(253, 226, 204, .55),
    0 0 60px 16px rgba(251, 146, 60, .25);
  animation: mlwmPromoCoreFloat 5s ease-in-out infinite;
}
@keyframes mlwmPromoCoreFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* 球体内部嵌套 SVG(神经网络 + AI 标记,跟随球体浮动) */
.mlwm-promo-ai-ball-net {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 背景层 SVG:halo + 后方轨道(在球体下方) */
.mlwm-promo-ai-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* 球体下方椭圆阴影:与球体浮动同步联动。
   球体上移(-7px) -> 阴影远离投影面 -> scaleX 1.15 / scaleY 0.85 + opacity 0.1
   球体回落(0)   -> 阴影贴近投影面 -> 恢复正常大小/不透明度
   transform-origin 用 SVG fill-box 坐标系,以阴影中心 (200,290) 为基准 */
.mlwm-promo-ai-bg .mlwm-promo-ball-shadow {
  transform-box: fill-box;
  transform-origin: center;
  animation: mlwmPromoShadowPulse 5s ease-in-out infinite;
}
@keyframes mlwmPromoShadowPulse {
  0%, 100% {
    transform: scaleX(1) scaleY(1);
    opacity: .18;
  }
  50% {
    transform: scaleX(1.15) scaleY(.85);
    opacity: .1;
  }
}

/* 前景层 SVG:前景轨道 + 数据粒子 + 数学符号 + 数据轨迹(在球体上方) */
.mlwm-promo-ai-fg {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* 后方轨道:绕中心 200,204 逆时针旋转(在 bg SVG 里) */
.mlwm-promo-ai-bg .mlwm-promo-orbit-reverse {
  transform-origin: 200px 204px;
  animation: mlwmPromoOrbitReverse 35s linear infinite;
}
@keyframes mlwmPromoOrbitReverse {
  to { transform: rotate(-360deg); }
}

/* 前景轨道:顺时针旋转 28s(在 fg SVG 里) */
.mlwm-promo-ai-fg .mlwm-promo-orbit {
  transform-origin: 200px 204px;
  animation: mlwmPromoOrbit 28s linear infinite;
}
@keyframes mlwmPromoOrbit {
  to { transform: rotate(360deg); }
}

/* 视觉区底部 caption(品牌强调用 strong 区分) */
.mlwm-promo-visual-caption {
  position: absolute;
  z-index: 1;
  bottom: 37px;
  left: 0;
  right: 0;
  text-align: center;
  color: #a18a78;
  font-size: 11px;
  letter-spacing: 3px;
  white-space: nowrap;
}
.mlwm-promo-visual-caption strong {
  color: #876e5c;
  font-weight: 650;
}
.mlwm-promo-ribbon {
  position: absolute;
  z-index: -1;
  width: 330px;
  height: 70px;
  border: 17px solid var(--mlwm-promo-red);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-24deg);
  opacity: .9;
}
.mlwm-promo-ribbon.one {
  top: 25%;
  right: -15px;
}
.mlwm-promo-ribbon.two {
  bottom: 22%;
  right: -30px;
  transform: rotate(24deg);
  border-color: #f36b66;
  border-left-color: transparent;
  border-right-color: transparent;
}
.mlwm-promo-confetti {
  position: absolute;
  z-index: -1;
  width: 18px;
  height: 28px;
  border-radius: 4px;
}
.mlwm-promo-confetti.c1 {
  top: 18%;
  left: 9%;
  background: #f3c66c;
  transform: rotate(15deg);
}
.mlwm-promo-confetti.c2 {
  top: 35%;
  right: 8%;
  background: #e13a42;
  transform: rotate(35deg);
}
.mlwm-promo-confetti.c3 {
  bottom: 21%;
  left: 13%;
  background: #ffb2a2;
  transform: rotate(55deg);
}
.mlwm-promo-book {
  position: absolute;
  inset: 14px 17px 10px 24px;
  border-radius: 5px 10px 10px 5px;
  background: linear-gradient(90deg, #2c634e 0 12px, #f4e7d2 12px 20px, #fffaf0 20px 100%);
  border: 1px solid #e8d8c1;
  box-shadow: inset 8px 0 10px rgba(43, 79, 60, .1);
  padding: 37px 17px 20px 35px;
  text-align: center;
}
.mlwm-promo-book::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 10px;
  bottom: 13px;
  height: 2px;
  background: #e8dcc9;
  box-shadow: 0 5px #eee4d5;
}
.mlwm-promo-book-title {
  font-size: 25px;
  font-weight: 800;
  color: #39443b;
  line-height: 1.45;
}
.mlwm-promo-book-subtitle {
  font-size: 11px;
  color: #8a8174;
  margin-top: 4px;
}
.mlwm-promo-close {
  position: absolute;
  z-index: 5;
  top: 17px;
  right: 17px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  color: #776b68;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.mlwm-promo-close:hover {
  background: #f7e6e2;
  color: var(--mlwm-promo-red-dark);
}
/* .mlwm-promo-note 已下线(2026-10):左下角"从入门到精通"小字从 partial 删除,
   保留这段样式以便日后恢复时直接取消注释
.mlwm-promo-note {
  position: absolute;
  bottom: 18px;
  right: 25px;
  color: #a44c4c;
  font-size: 12px;
  transform: rotate(-5deg);
}
*/

@media (max-width: 680px) {
  .mlwm-promo-overlay {
    padding: 12px;
  }
  .mlwm-promo-copy {
    padding: 30px 25px 25px;
  }
  .mlwm-promo-eyebrow {
    font-size: 11px;
    margin-bottom: 12px;
    letter-spacing: 1.5px;
  }
  .mlwm-promo-eyebrow::before {
    width: 22px;
  }
  .mlwm-promo-title {
    margin: 16px 0 10px;
    font-size: 30px;
  }
  .mlwm-promo-desc {
    font-size: 14px;
    line-height: 1.7;
  }
  .mlwm-promo-points {
    margin: 17px 0 20px;
    gap: 8px 12px;
    font-size: 12px;
  }
  .mlwm-promo-cta {
    width: 100%;
    min-width: 0;
    padding: 13px 18px;
    font-size: 15px;
  }
  .mlwm-promo-visual {
    min-height: 205px;
    width: 100%;
    padding: 0 20px 18px;
    margin-top: -15px;
  }
  .mlwm-promo-ai-graph {
    max-width: 350px;
    padding: 0 16px;
  }
  .mlwm-promo-visual-caption {
    bottom: 12px;
    font-size: 9px;
    letter-spacing: 2px;
  }
  .mlwm-promo-ribbon {
    width: 240px;
    height: 45px;
    border-width: 11px;
  }
  .mlwm-promo-ribbon.one {
    top: 30%;
    right: 4px;
  }
  .mlwm-promo-ribbon.two {
    bottom: 18%;
    right: -2px;
  }
  /* .mlwm-promo-note 已下线(2026-10):见上方主样式块注释
  .mlwm-promo-note {
    bottom: 8px;
    right: 15px;
    font-size: 10px;
  }
  */
}

@media (prefers-reduced-motion: reduce) {
  .mlwm-promo-overlay,
  .mlwm-promo-modal,
  .mlwm-promo-cta {
    transition-duration: .01ms !important;
  }
  .mlwm-promo-ai-ball,
  .mlwm-promo-ai-bg .mlwm-promo-orbit-reverse,
  .mlwm-promo-ai-bg .mlwm-promo-ball-shadow,
  .mlwm-promo-ai-fg .mlwm-promo-orbit {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* === book 类型:封面图带圆角/旋转/阴影的样式壳子,与 course 视觉共用同一外壳 === */
.mlwm-promo-visual--book {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mlwm-promo-book-frame {
  position: relative;
  width: 235px;
  height: 305px;
  transform: rotate(-5deg);
  filter: drop-shadow(0 20px 15px rgba(109, 51, 40, .14));
  display: grid;
  place-items: stretch;
  background: linear-gradient(135deg, #fffaf0, #fde0d8);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.mlwm-promo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffaf0, #fde0d8); /* 透明 PNG 兜底 */
}

@media (max-width: 680px) {
  .mlwm-promo-modal-host > .mlwm-promo-modal {
    width: min(430px, 100%);
    min-height: auto;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
  }
  .mlwm-promo-book-frame {
    width: 165px;
    height: 215px;
    transform: rotate(-4deg) scale(.82);
    transform-origin: center;
  }
}