/* ==========================================================================
   页头右上方空白区的图文广告位：「液压缸选型智能自算」工具入口
   （2026-10-11 站长要求：标题右上空白区加图文广告，图与背景色贴合版面、图+文都要大且醒目）
   定位：绝对定位在 .ms-ph-in 右上方，占用标题/描述左侧文字之外的空白栏；
        文案取自 /cylinder-calc-promo.html 概括；配色沿用站点工业深蓝 + 品牌红。
   ========================================================================== */
.ms-phad{position:absolute;right:0;top:3.6rem;width:min(560px,44%);
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:center;
  gap:1.05rem;padding:.9rem 1.1rem;border-radius:16px;text-decoration:none;
  border:1px solid rgba(232,74,88,.6);
  background:linear-gradient(135deg,rgba(200,30,45,.22),rgba(23,62,101,.66) 52%,rgba(11,37,64,.82));
  box-shadow:0 26px 50px -32px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s ease,box-shadow .3s ease}

/* 右栏不够宽时（<1280px）改为通栏块，排在 stats 之前，避免与标题文字重叠 */
@media (max-width:1279.98px){
  .ms-phad{position:static;width:100%;margin-top:1.75rem}
}
.ms-phad:hover{transform:translateY(-4px);border-color:#E84A58;
  box-shadow:0 32px 56px -32px rgba(0,0,0,1),0 0 0 1px rgba(232,74,88,.26)}

/* 左：动画视口（内联 SVG 液压缸剖面） */
.ms-phad-visual{display:block;min-width:0}
.ms-phad-vport{display:block;position:relative;width:100%;border-radius:11px;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,#0d2b4a,#061626 72%);
  border:1px solid rgba(120,175,225,.32);
  box-shadow:inset 0 0 26px rgba(77,163,255,.16)}
.ms-phad-vport svg{display:block;width:100%;height:auto}
.ms-phad-vport .phad-rod{animation:phadRod 7.5s cubic-bezier(.45,0,.3,1) infinite}
.ms-phad-vport .phad-oil{stroke-dasharray:6 5;animation:phadOil 1.3s linear infinite}
.ms-phad-vport .phad-pulse{animation:phadPulse 2.6s ease-in-out infinite}
.ms-phad-vport .phad-glint{animation:phadGlint 4.2s ease-in-out infinite}

/* 右：文案 */
.ms-phad-body{display:flex;flex-direction:column;gap:.42rem;min-width:0}
.ms-phad-tag{align-self:flex-start;padding:.2rem .56rem;border-radius:6px;
  background:#C81E2D;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.04em}
.ms-phad-title{font-size:23px;line-height:1.24;font-weight:900;color:#fff;letter-spacing:-.005em;
  text-shadow:0 2px 10px rgba(0,0,0,.42)}
.ms-phad-line{font-size:12.4px;line-height:1.6;color:rgba(240,247,255,.96);white-space:nowrap}
.ms-phad-btn{align-self:flex-start;margin-top:.42rem;padding:.46rem 1.05rem;border-radius:9px;
  background:#fff;color:#A61521 !important;font-size:13.4px;font-weight:900;letter-spacing:.01em;
  box-shadow:0 10px 20px -13px rgba(0,0,0,.95);transition:transform .2s ease}
.ms-phad:hover .ms-phad-btn{transform:translateX(3px)}

@keyframes phadRod{0%,12%{transform:translateX(0)}52%,64%{transform:translateX(58px)}100%{transform:translateX(0)}}
@keyframes phadOil{to{stroke-dashoffset:-44}}
@keyframes phadPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes phadGlint{0%{transform:translateX(-40px)}60%,100%{transform:translateX(210px)}}

@media (max-width:639.98px){
  .ms-phad{grid-template-columns:minmax(0,1fr);gap:.7rem;padding:.8rem}
  .ms-phad-title{font-size:19px}
}
@media (prefers-reduced-motion: reduce){
  .ms-phad-vport .phad-rod,.ms-phad-vport .phad-oil,
  .ms-phad-vport .phad-pulse,.ms-phad-vport .phad-glint{animation:none !important}