/**
 * 产品页市场公告横幅（E74，2026-10-13）
 *
 * 组件前缀统一 `.pn-`，无站点级选择器、无外部依赖 —— 引入本文件对既有页面零副作用。
 * 所有动效 keyframes 内置于本静态文件：CSP `style-src 'self'` 允许本文件，
 * 而动态 `<style>` 块会被拦截，故动画必须落在静态 CSS。
 * 颜色 / 时长 / 字重 / 字号经模板行内 style 变量注入
 *（CSP `style-src-attr 'unsafe-inline'` 允许；SecurityHeadersMiddleware.php:109），
 * 取值全部由 ProductNoticeService 白名单校验后输出。
 */

.pn-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}
.pn-bar:last-child { margin-bottom: 0; }

.pn-emoji {
    font-size: 1.35em;
    line-height: 1;
    flex-shrink: 0;
}

.pn-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.pn-scroll {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
}

.pn-seq { display: inline-block; padding-right: 3.5em; }

.pn-cta {
    flex-shrink: 0;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 1px;
    white-space: nowrap;
}
.pn-cta:hover { opacity: .8; }

/* 字体栈（3 个安全栈，不加载外部字体、不破坏站点排版） */
.pn-font-sans { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.pn-font-mono { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }
.pn-font-serif { font-family: Georgia, 'Times New Roman', serif; }

/* 模式① marquee：单向无缝循环滚动（双份内容 + translateX(-50%)） */
.pn-mode-marquee .pn-scroll { animation: pn-marquee var(--pn-dur, 28s) linear infinite; }
@keyframes pn-marquee { to { transform: translateX(-50%); } }

/* 模式② swing：往返滚动（alternate + 缓动） */
.pn-mode-swing .pn-scroll { animation: pn-marquee var(--pn-dur, 28s) ease-in-out infinite alternate; }

/* 模式③ pulse：文案静态 + emoji 脉冲强调 */
.pn-mode-pulse .pn-emoji { animation: pn-pulse var(--pn-dur2, 1.8s) ease-in-out infinite; }
@keyframes pn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.38); } }

/* 模式④ breathe：底色呼吸（color-mix；旧浏览器自动回落静态底色） */
@supports (background: color-mix(in srgb, red, blue)) {
    .pn-mode-breathe { animation: pn-breathe var(--pn-dur2, 3s) ease-in-out infinite; }
}
@keyframes pn-breathe {
    0%, 100% { background: var(--pn-bg, #FFF1F0); }
    50% { background: color-mix(in srgb, var(--pn-bg, #FFF1F0), var(--pn-accent, #EA580C) 22%); }
}

/* 模式⑤ static：无动画规则即静态 */

/* 交互与无障碍 */
.pn-bar:hover,
.pn-bar:hover .pn-scroll,
.pn-bar:hover .pn-emoji { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .pn-scroll, .pn-emoji, .pn-mode-breathe { animation: none !important; }
}

/* 移动端适配 */
@media (max-width: 640px) {
    .pn-bar { padding: 9px 12px; gap: 8px; border-radius: var(--radius-sm, 6px); }
    .pn-seq { padding-right: 2.5em; font-size: .92em; }
    .pn-cta { display: none; } /* 移动端隐藏按钮，文案本身已含 RFQ 引导 */
}