/**
 * 弹窗动画标语 / Popup Animated Slogan
 * ---------------------------------------------------------------------------
 * 一行会动的标语，渲染在前台留言弹窗（右下角浮窗 / 居中弹窗）和移动端底部菜单
 * 留言弹窗的表单上方，也可通过 [cxb_popup_slogan] 短代码放到任意页面。
 *
 * 结构（由 includes/class-popup-slogan.php 输出）：
 *
 *   <div class="cxb-sg cxb-sg--ctx-lm cxb-sg--color-ocean cxb-sg--anim-shine cxb-sg--clip">
 *       <span class="cxb-sg-text">…</span>
 *   </div>
 *
 * 配色与动画是两组互不干涉的类：
 *
 *   .cxb-sg--color-*  只定义自定义属性（--cxb-sg-base / --cxb-sg-flow / --cxb-sg-glow），
 *                     不写任何动画；
 *   .cxb-sg--anim-*   只读取这些属性，不写死任何颜色。
 *
 * 10 种配色 × 5 种动画 = 50 种组合，但样式表里只有 10 + 5 条规则，
 * 新增一种颜色不需要动任何一条动画规则，反之亦然。
 *
 * 关于 --clip：渐变文字要靠 background-clip:text 把背景裁进字形里，再把字体
 * 本身的填充色设为透明。但一旦填充透明而浏览器又不支持 background-clip:text，
 * 文字就彻底看不见了，所以这条只写在 @supports 里。单色 + 非渐变类动画的组合
 * 不加 .cxb-sg--clip，走最普通的 color，任何浏览器都不会出问题。
 *
 * @package Fhwy_B2B_Product_Showcase
 * @since 2.1.84
 */

/* ═══════════════════════════════════════════════════════════════
   1. 容器与文字基础
   ═══════════════════════════════════════════════════════════════ */

.cxb-sg {
    /* 白色扫光带。所有配色共用一条，故定义在容器上而不是各配色类里。
       峰值用 0.82 而不是纯白：字在白底弹窗上，纯白扫过时字会整个消失，
       看起来像「文字闪没了」而不是「有光扫过」。 */
    --cxb-sg-band: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.82) 50%,
        rgba(255, 255, 255, 0) 100%
    );

    box-sizing: border-box;
    margin: 0 0 14px;
    padding: 0;
    text-align: center;
    /* 字号随视口线性放大后夹住两端：375px 手机上约 15.6px，660px 宽的居中
       弹窗里约 18.8px，桌面端封顶 19px。用 clamp 而不是断点，是因为这块要
       同时出现在 350px 宽的右下角浮窗、660px 的居中弹窗和整页宽的短代码里，
       断点数量会失控。 */
    font-size: clamp(15px, 1.1vw + 11.5px, 19px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.2px;
    /* 长单词（型号、网址）在窄弹窗里不撑破容器 */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.cxb-sg-text {
    /* inline-block：动画要用 transform，行内元素上 transform 无效 */
    display: inline-block;
    max-width: 100%;
    /* !important 是冲着主题去的：这块标语被塞进主题控制不到的弹窗里，但不少
       主题会写 .some-wrapper * { color: … !important } 这类大范围规则。字色一
       旦被改掉，配色功能就整个失效了，所以只在颜色相关的几条上加。
       背景相关的几条保持普通优先级，动画类才能正常覆盖它们。 */
    color: var(--cxb-sg-solid, #1D6FF2) !important;
    background-image: var(--cxb-sg-base);
    background-repeat: no-repeat;
    background-position: 0 0;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    transform-origin: center center;
}

/* 渐变配色、以及所有靠背景做的动画，都需要把字体填充设为透明。
   放在 @supports 里：不支持裁剪的浏览器保持 .cxb-sg-text 上那句
   color，文字照常显示，只是没有渐变。
   两条都带 !important，与上面那条同级；靠选择器特异性（0,2,0 > 0,1,0）
   决定胜负，透明填充稳定压过基础字色。 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cxb-sg--clip .cxb-sg-text {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }
}

/* 对齐（短代码参数 align） */
.cxb-sg--align-left   { text-align: left; }
.cxb-sg--align-center { text-align: center; }
.cxb-sg--align-right  { text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   2. 配色 —— 5 种单色
   ---------------------------------------------------------------
   每个配色类定义四个值：
     --cxb-sg-solid  纯色回退（不支持裁剪的浏览器、以及不加 --clip 时的字色）
     --cxb-sg-base   常态背景（单色写成同色渐变，好让扫光动画的叠层写法统一）
     --cxb-sg-flow   流动动画用的可平铺渐变（首尾同色，循环处看不出接缝）
     --cxb-sg-glow   呼吸动画的光晕色
   ═══════════════════════════════════════════════════════════════ */

/* 皇家蓝 */
.cxb-sg--color-blue {
    --cxb-sg-solid: #1D6FF2;
    --cxb-sg-base: linear-gradient(92deg, #1D6FF2 0%, #1D6FF2 100%);
    --cxb-sg-flow: linear-gradient(92deg, #1D6FF2 0%, #6FA8FF 50%, #1D6FF2 100%);
    --cxb-sg-glow: rgba(29, 111, 242, 0.45);
}

/* 活力红 */
.cxb-sg--color-red {
    --cxb-sg-solid: #E23A3A;
    --cxb-sg-base: linear-gradient(92deg, #E23A3A 0%, #E23A3A 100%);
    --cxb-sg-flow: linear-gradient(92deg, #E23A3A 0%, #FF8A8A 50%, #E23A3A 100%);
    --cxb-sg-glow: rgba(226, 58, 58, 0.45);
}

/* 翡翠绿 */
.cxb-sg--color-green {
    --cxb-sg-solid: #0F9D58;
    --cxb-sg-base: linear-gradient(92deg, #0F9D58 0%, #0F9D58 100%);
    --cxb-sg-flow: linear-gradient(92deg, #0F9D58 0%, #62D9A2 50%, #0F9D58 100%);
    --cxb-sg-glow: rgba(15, 157, 88, 0.45);
}

/* 琥珀橙 */
.cxb-sg--color-orange {
    --cxb-sg-solid: #F0812A;
    --cxb-sg-base: linear-gradient(92deg, #F0812A 0%, #F0812A 100%);
    --cxb-sg-flow: linear-gradient(92deg, #F0812A 0%, #FFC086 50%, #F0812A 100%);
    --cxb-sg-glow: rgba(240, 129, 42, 0.45);
}

/* 墨黑 */
.cxb-sg--color-dark {
    --cxb-sg-solid: #1F2937;
    --cxb-sg-base: linear-gradient(92deg, #1F2937 0%, #1F2937 100%);
    --cxb-sg-flow: linear-gradient(92deg, #1F2937 0%, #6B7789 50%, #1F2937 100%);
    --cxb-sg-glow: rgba(31, 41, 55, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   3. 配色 —— 5 种 CSS 渐变
   ---------------------------------------------------------------
   --cxb-sg-flow 一律写成对称的五段（A→B→C→B→A），首尾同色，
   这样平铺时接缝处颜色连续，流动动画循环回原点时看不出跳变。
   ═══════════════════════════════════════════════════════════════ */

/* 日落 · 橙红金 */
.cxb-sg--color-sunset {
    --cxb-sg-solid: #F9782F;
    --cxb-sg-base: linear-gradient(92deg, #FF4E50 0%, #F9992F 55%, #FFC93C 100%);
    --cxb-sg-flow: linear-gradient(92deg, #FF4E50 0%, #F9992F 25%, #FFC93C 50%, #F9992F 75%, #FF4E50 100%);
    --cxb-sg-glow: rgba(249, 122, 47, 0.45);
}

/* 深海 · 蓝紫 */
.cxb-sg--color-ocean {
    --cxb-sg-solid: #2563EB;
    --cxb-sg-base: linear-gradient(92deg, #0EA5E9 0%, #2563EB 55%, #7C3AED 100%);
    --cxb-sg-flow: linear-gradient(92deg, #0EA5E9 0%, #2563EB 25%, #7C3AED 50%, #2563EB 75%, #0EA5E9 100%);
    --cxb-sg-glow: rgba(37, 99, 235, 0.45);
}

/* 森野 · 青绿 */
.cxb-sg--color-forest {
    --cxb-sg-solid: #16A34A;
    --cxb-sg-base: linear-gradient(92deg, #0F9D58 0%, #22C55E 55%, #A3E635 100%);
    --cxb-sg-flow: linear-gradient(92deg, #0F9D58 0%, #22C55E 25%, #A3E635 50%, #22C55E 75%, #0F9D58 100%);
    --cxb-sg-glow: rgba(22, 163, 74, 0.45);
}

/* 糖果 · 粉紫 */
.cxb-sg--color-candy {
    --cxb-sg-solid: #A855F7;
    --cxb-sg-base: linear-gradient(92deg, #EC4899 0%, #A855F7 55%, #6366F1 100%);
    --cxb-sg-flow: linear-gradient(92deg, #EC4899 0%, #A855F7 25%, #6366F1 50%, #A855F7 75%, #EC4899 100%);
    --cxb-sg-glow: rgba(168, 85, 247, 0.45);
}

/* 鎏金 · 深金 */
.cxb-sg--color-gold {
    --cxb-sg-solid: #D19A2E;
    --cxb-sg-base: linear-gradient(92deg, #B45309 0%, #E9A93B 50%, #FCD34D 100%);
    --cxb-sg-flow: linear-gradient(92deg, #B45309 0%, #E9A93B 25%, #FCD34D 50%, #E9A93B 75%, #B45309 100%);
    --cxb-sg-glow: rgba(209, 154, 46, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   4. 动画 —— 5 种
   ═══════════════════════════════════════════════════════════════ */

/* ── 4.1 流光扫过 ───────────────────────────────────────────────
   两层背景：上层是一条 60% 宽的白色光带，下层是配色本身。光带的
   透明部分让下层透出来，白色部分把字提亮，于是「有一道光从左扫到右」。

   为什么不用「复制一份文字放在 ::after 上做扫光」那种常见写法：
   文字换行时两份副本的断行位置只要差一个像素就会露馅，而这块标语在
   350px 的右下角浮窗里几乎一定会换行。改成背景层就没有这个问题——
   背景铺的是整个元素盒子，几行字共用同一道光。 */
.cxb-sg--anim-shine .cxb-sg-text {
    background-image: var(--cxb-sg-band), var(--cxb-sg-base);
    background-size: 60% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    animation: cxbSgShine 3.4s linear infinite;
}

/* 起止位置不是随手取的整数。百分比定位在背景比容器窄时，位置 X% 对应的实际
   偏移是 X × (元素宽 − 背景宽)；光带宽 60%，所以偏移 = 0.4·X·W。要让光带在
   开始时完全躲在左边界外，需要 0.4XW + 0.6W ≤ 0，即 X ≤ −150%；完全移出右
   边界则需要 0.4XW ≥ W，即 X ≥ 250%。取 −160% / 260% 留一点余量。

   （早期写的 −70% → 170% 是错的：−70% 时光带已经有一半露在字上，动画每轮都
   像是从中途开始的。）

   扫光在 55% 处就结束，剩下的 45% 停住不动——一直不停地扫，看久了会被大脑当
   成背景噪音过滤掉；扫一下、歇一下，反而每轮都能重新抓住视线。 */
@keyframes cxbSgShine {
    0%        { background-position: -160% 0, 0 0; }
    55%, 100% { background-position: 260% 0, 0 0; }
}

/* ── 4.2 渐变流动 ───────────────────────────────────────────────
   背景放大到 200% 后平铺，再把 background-position 推移整整一个平铺单位，
   于是颜色像水流一样穿过字形，且循环无缝。

   注意百分比定位在 background-size > 100% 时是负向的：位置 p% 对应的
   实际偏移是 p × (元素宽 − 背景宽) = p × (W − 2W) = −pW，所以 −200%
   正好等于向右推 2W，也就是一个平铺单位。 */
.cxb-sg--anim-flow .cxb-sg-text {
    background-image: var(--cxb-sg-flow);
    background-size: 200% 100%;
    background-repeat: repeat;
    animation: cxbSgFlow 4s linear infinite;
}

@keyframes cxbSgFlow {
    0%   { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

/* ── 4.3 呼吸脉冲 ───────────────────────────────────────────────
   放大 + 光晕。光晕用 filter: drop-shadow 而不是 text-shadow：渐变文字
   的字体填充是透明的，text-shadow 会给「透明的字」投影，等于什么都不画；
   drop-shadow 作用在合成后的画面上，渐变字也能投出正确颜色的影子。 */
.cxb-sg--anim-pulse .cxb-sg-text {
    animation: cxbSgPulse 1.9s ease-in-out infinite;
}

@keyframes cxbSgPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
    50% {
        transform: scale(1.055);
        filter: drop-shadow(0 2px 9px var(--cxb-sg-glow));
    }
}

/* ── 4.4 上滑轮播 ───────────────────────────────────────────────
   淡入上滑 → 停留 → 淡出上移 → 复位。复位发生在完全透明的时刻，
   所以看不到跳回的过程，观感是标语在反复「重新出现」。
   位移用 px 而不是 %：% 是相对元素自身高度的，换成两行字时位移会翻倍。 */
.cxb-sg--anim-slide .cxb-sg-text {
    animation: cxbSgSlide 5s ease-in-out infinite;
}

@keyframes cxbSgSlide {
    0%        { opacity: 0; transform: translateY(14px); }
    12%, 78%  { opacity: 1; transform: translateY(0); }
    90%, 100% { opacity: 0; transform: translateY(-12px); }
}

/* ── 4.5 摇摆提醒 ───────────────────────────────────────────────
   大部分时间完全静止，每 4.5 秒抖一下。持续动的效果看久了会被大脑
   过滤掉，间歇性的动作反而更容易重新抓住注意力，而且不会干扰阅读。 */
.cxb-sg--anim-shake .cxb-sg-text {
    animation: cxbSgShake 4.5s ease-in-out infinite;
}

@keyframes cxbSgShake {
    0%, 86%, 100% { transform: translateX(0) rotate(0deg); }
    88%           { transform: translateX(-5px) rotate(-1.4deg); }
    90%           { transform: translateX(5px) rotate(1.4deg); }
    92%           { transform: translateX(-4px) rotate(-1deg); }
    94%           { transform: translateX(4px) rotate(1deg); }
    96%           { transform: translateX(-2px) rotate(-0.4deg); }
    98%           { transform: translateX(1px) rotate(0deg); }
}

/* ═══════════════════════════════════════════════════════════════
   5. 各投放位置的间距微调
   ═══════════════════════════════════════════════════════════════ */

/* 右下角浮窗 / 居中弹窗：面板内边距 16px，标语在最上方，
   与下面的产品摘要或表单留 14px。 */
.cxb-sg--ctx-lm {
    margin: 0 0 14px;
}

/* 移动端底部菜单的留言弹窗 */
.cxb-sg--ctx-mm {
    margin: 0 0 14px;
}

/* 短代码：独立成块时上下都给一点呼吸空间 */
.cxb-sg--ctx-shortcode {
    margin: 0 0 16px;
}

/* 后台设置页的实时预览框 */
.cxb-sg--ctx-preview {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   6. 无障碍 —— 尊重系统的「减少动态效果」
   ---------------------------------------------------------------
   前庭功能障碍的用户会在系统里打开这个开关。关掉动画后：
   扫光停在起始位置（光带在字的左侧之外，底色完整可见）、
   流动停在 0%（渐变正常显示）、其余三种本来就只是变换，静止即原样。
   也就是说标语依旧完整、颜色依旧正确，只是不再动。
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .cxb-sg .cxb-sg-text {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}