/* 玄小狐创作页 —— 独立子品牌页面。
   官网导航与页脚保留金色体系；内容区使用蓝青 + 橙色狐系的 AI 创作语义。
   本文件只新增类选择器，不覆盖 styles.css 的既有选择器，避免特异性冲突。 */

body.creation-page{
  --cx-bg:#050a16;
  --cx-bg-2:#081226;
  --cx-panel:#0a1730;
  --cx-line:rgba(96,166,255,.16);
  --cx-line-2:rgba(96,166,255,.34);
  --cx-blue:#4aa8ff;
  --cx-cyan:#6ee7ff;
  --cx-violet:#8b6cff;
  --cx-fox:#ff9a4d;
  --cx-text:#e8f2ff;
  --cx-text-2:rgba(224,238,255,.68);
  --cx-text-3:rgba(224,238,255,.42);
  background:
    radial-gradient(1100px 620px at 78% 6%,rgba(51,120,255,.16),transparent 62%),
    radial-gradient(900px 600px at 4% 26%,rgba(139,108,255,.12),transparent 62%),
    var(--cx-bg);
  color:var(--cx-text);
}
body.creation-page .nav{background:rgba(5,10,22,.76);border-bottom-color:var(--cx-line)}
body.creation-page .nav-links a.on{color:var(--gold)}
body.creation-page footer{border-top-color:var(--cx-line)}

/* ============ Hero ============ */
.cx-hero{position:relative;overflow:hidden;padding:clamp(44px,6vw,92px) 0 clamp(56px,7vw,104px)}
.cx-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(96,166,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,166,255,.06) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 82% 72% at 50% 32%,#000 18%,transparent 76%);
  mask-image:radial-gradient(ellipse 82% 72% at 50% 32%,#000 18%,transparent 76%)}
.cx-hero::after{content:'';position:absolute;left:-8%;bottom:-18%;width:520px;height:520px;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,154,77,.16),transparent 64%)}
.cx-hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4vw,64px);align-items:center}
.cx-hero-copy{position:relative;z-index:2}
.cx-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.22em;
  color:var(--cx-cyan);text-transform:uppercase}
.cx-kicker i{width:6px;height:6px;border-radius:50%;background:var(--cx-cyan);
  box-shadow:0 0 12px var(--cx-cyan);flex:none}
.cx-hero h1{margin-top:18px;font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,5.4vw,64px);line-height:1.12;letter-spacing:.01em}
.cx-hero h1 em{font-style:normal;color:transparent;
  background:linear-gradient(100deg,var(--cx-cyan),var(--cx-blue) 48%,var(--cx-violet));
  -webkit-background-clip:text;background-clip:text}
.cx-sub{margin-top:22px;max-width:560px;font-size:clamp(15px,1.6vw,17px);line-height:1.8;
  color:var(--cx-text-2)}
.cx-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cx-chips span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--cx-line-2);background:rgba(74,168,255,.07);font-size:13.5px;color:var(--cx-text)}
.cx-chips .ic{width:16px;height:16px;color:var(--cx-cyan)}
.cx-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.cx-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px;max-width:540px}
.cx-facts div{padding:13px 15px;border:1px solid var(--cx-line);border-radius:12px;
  background:rgba(10,23,48,.5)}
.cx-facts b{display:block;font-size:14px;color:var(--cx-cyan)}
.cx-facts span{display:block;margin-top:3px;font-size:11.5px;color:var(--cx-text-3)}

/* 形象与光晕 */
.cx-hero-visual{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  min-height:clamp(420px,46vw,600px)}
.cx-halo{position:absolute;width:min(560px,94%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,rgba(74,168,255,.34),rgba(74,168,255,.08) 46%,transparent 70%);
  filter:blur(6px)}
.cx-ring{position:absolute;inset:4% 2%;border-radius:50%;border:1px solid rgba(110,231,255,.16);
  box-shadow:inset 0 0 90px rgba(74,168,255,.16),0 0 60px rgba(74,168,255,.08)}
.cx-ring::after{content:'';position:absolute;inset:9%;border-radius:50%;
  border:1px dashed rgba(110,231,255,.12)}
.cx-fox-wrap{position:relative;width:min(500px,96%)}
.cx-fox{display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 2px rgba(5,10,22,.35))
         drop-shadow(0 28px 46px rgba(0,0,0,.5))
         drop-shadow(0 0 34px rgba(74,168,255,.18))}
.cx-float{position:absolute;z-index:2;padding:11px 14px;border-radius:12px;
  border:1px solid var(--cx-line-2);background:rgba(8,19,40,.78);backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,.4);font-size:11px;letter-spacing:.06em;color:var(--cx-text-3);
  animation:cxFloat 6s ease-in-out infinite}
.cx-float b{display:block;margin-top:3px;font-size:13px;font-weight:600;letter-spacing:0;color:var(--cx-text)}
.cx-float-1{top:14%;left:-1%}
.cx-float-2{top:44%;right:-2%;animation-delay:-2s}
.cx-float-3{bottom:12%;left:6%;animation-delay:-4s}
@keyframes cxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ============ 通用区块 ============ */
.cx-section{position:relative;padding:var(--section-y) 0;border-top:1px solid var(--cx-line)}
.cx-sec-hd{max-width:780px;margin-bottom:38px}
.cx-sec-hd h2{margin-top:12px;font-family:var(--serif);font-weight:400;
  font-size:clamp(27px,3.5vw,40px);line-height:1.3}
.cx-sec-hd p{margin-top:14px;font-size:16px;line-height:1.8;color:var(--cx-text-2)}
.cx-sec-hd .cx-case-note{margin-top:8px;font-size:12.5px;color:var(--cx-cyan);letter-spacing:.04em}

/* ============ 创作台 Tab ============ */
.cx-tabs{display:flex;gap:6px;border-bottom:1px solid var(--cx-line);overflow-x:auto;
  scrollbar-width:none}
.cx-tabs::-webkit-scrollbar{display:none}
.cx-tab{position:relative;flex:none;appearance:none;-webkit-appearance:none;border:0;background:none;
  padding:16px 24px;font-family:inherit;font-size:15.5px;color:var(--cx-text-3);cursor:pointer;
  transition:color .2s}
.cx-tab:hover{color:var(--cx-text-2)}
.cx-tab[aria-selected="true"]{color:var(--cx-cyan)}
.cx-tab::after{content:'';position:absolute;left:24px;right:24px;bottom:-1px;height:2px;
  border-radius:2px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--cx-cyan),var(--cx-blue));
  box-shadow:0 0 14px rgba(110,231,255,.55);
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.cx-tab[aria-selected="true"]::after{transform:scaleX(1)}
.cx-tab:focus-visible{outline:2px solid var(--cx-cyan);outline-offset:-4px;border-radius:6px}
.cx-panel{padding-top:34px;animation:cxPanelIn .4s cubic-bezier(.22,1,.36,1) both}
.cx-panel[hidden]{display:none}
.cx-panel:focus{outline:none}
@keyframes cxPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cx-panel-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:18px;align-items:start}

/* 卡片 */
.cx-card{position:relative;overflow:hidden;padding:22px;border:1px solid var(--cx-line);
  border-radius:18px;background:linear-gradient(160deg,rgba(13,29,57,.86),rgba(7,15,32,.92));
  box-shadow:0 24px 60px rgba(0,0,0,.28)}
.cx-card::before{content:'';position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(110,231,255,.5),transparent)}
.cx-card-blue{border-color:var(--cx-line-2);
  background:linear-gradient(160deg,rgba(17,42,82,.9),rgba(8,18,40,.94))}
.cx-card-hd{display:flex;align-items:center;gap:10px;margin-bottom:18px;
  font-size:12.5px;letter-spacing:.1em;color:var(--cx-text-3)}
.cx-dot{width:7px;height:7px;border-radius:50%;background:var(--cx-cyan);
  box-shadow:0 0 12px var(--cx-cyan);flex:none}
.cx-badge{margin-left:auto;padding:3px 9px;border:1px solid var(--cx-line);border-radius:999px;
  font-size:10.5px;letter-spacing:.06em;color:var(--cx-text-3)}
.cx-badge-on{color:var(--cx-cyan);border-color:var(--cx-line-2);background:rgba(74,168,255,.08)}

/* 01 创意策划 */
.cx-field{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px dashed var(--cx-line);font-size:13px}
.cx-field span{flex:none;color:var(--cx-text-3)}
.cx-field b{font-weight:500;text-align:right;color:var(--cx-text)}
.cx-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cx-tags span{padding:5px 11px;border-radius:999px;border:1px solid var(--cx-line);
  background:rgba(74,168,255,.06);font-size:11.5px;color:var(--cx-text-2)}
.cx-scan{position:relative;display:flex;align-items:center;gap:9px;margin-top:18px;padding:10px 12px;
  border-radius:10px;border:1px solid var(--cx-line);overflow:hidden;font-size:11.5px;color:var(--cx-text-2)}
.cx-scan i{width:13px;height:13px;border-radius:50%;flex:none;
  border:2px solid rgba(110,231,255,.3);border-top-color:var(--cx-cyan);animation:cxSpin 1s linear infinite}
.cx-scan::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(74,168,255,.16),transparent);
  transform:translateX(-100%);animation:cxSweep 2.4s ease-in-out infinite}
@keyframes cxSpin{to{transform:rotate(360deg)}}
@keyframes cxSweep{60%,100%{transform:translateX(100%)}}
.cx-insights{list-style:none;display:flex;flex-direction:column;gap:12px}
.cx-insights li{display:grid;grid-template-columns:52px 1fr;gap:12px;font-size:13px;
  line-height:1.65;color:var(--cx-text-2)}
.cx-insights b{color:var(--cx-cyan);font-size:12px;font-weight:600;letter-spacing:.08em}
.cx-script{margin-top:18px;border-top:1px solid var(--cx-line);padding-top:6px}
.cx-script-row{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:10px 0;
  border-bottom:1px dashed var(--cx-line);font-size:12.5px;color:var(--cx-text-2)}
.cx-script-row i{font-style:normal;color:var(--cx-cyan);font-variant-numeric:tabular-nums}
.cx-script-row p{line-height:1.65}

/* 02 视觉生成 */
.cx-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx-tile{position:relative;aspect-ratio:9/12;border-radius:12px;border:1px solid var(--cx-line);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.cx-tile img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.cx-tile::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%)}
.cx-tile::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(4,9,20,.82))}
.cx-tile span{position:absolute;left:10px;bottom:9px;z-index:2;font-size:11.5px;color:#fff}
.cx-tile i{position:absolute;right:8px;top:8px;z-index:2;font-style:normal;font-size:9.5px;
  color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:1px 5px}
.cx-t1{background:linear-gradient(145deg,#1b4e9c,#0b1e44 55%,#123a78)}
.cx-t2{background:linear-gradient(145deg,#0e6f8a,#0a2748 55%,#0d3f6e)}
.cx-t3{background:linear-gradient(145deg,#5b4a9e,#1a1e4a 55%,#253a78)}
.cx-t4{background:linear-gradient(145deg,#8a5a2e,#2a1c33 55%,#123a78)}
.cx-gen-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cx-gen-meta span{padding:4px 10px;border:1px solid var(--cx-line);border-radius:999px;
  font-size:11px;color:var(--cx-text-3)}
.cx-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px dashed var(--cx-line);font-size:13px;color:var(--cx-text-3)}
.cx-seg{display:flex;gap:4px}
.cx-seg b{padding:5px 10px;border-radius:7px;border:1px solid var(--cx-line);
  font-size:11.5px;font-weight:500;color:var(--cx-text-3)}
.cx-seg b.on{color:var(--cx-cyan);border-color:var(--cx-line-2);background:rgba(74,168,255,.12)}
.cx-ref{display:flex;gap:6px}
.cx-ref i{width:34px;height:34px;border-radius:7px;border:1px solid var(--cx-line);
  background:linear-gradient(135deg,#1b4e9c,#0b1e44)}
.cx-ref i:nth-child(2){background:linear-gradient(135deg,#0e6f8a,#0a2748)}
.cx-ref i:nth-child(3){background:linear-gradient(135deg,#5b4a9e,#1a1e4a)}
.cx-pill-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;
  padding:10px 20px;border-radius:999px;border:1px solid var(--cx-line-2);
  background:rgba(74,168,255,.1);font-size:13px;color:var(--cx-cyan)}
.cx-hint{margin-top:14px;font-size:11.5px;line-height:1.7;color:var(--cx-text-3)}

/* 03 广告成片 */
.cx-screen{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  border:1px solid var(--cx-line);
  background:
    radial-gradient(120% 80% at 70% 20%,rgba(110,231,255,.25),transparent 55%),
    linear-gradient(135deg,#0d3c78,#07162e 60%,#0a2145)}
.cx-screen::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse at 60% 40%,#000,transparent 75%)}
.cx-screen-tag{position:absolute;top:12px;left:12px;z-index:1;padding:4px 9px;border-radius:999px;
  background:rgba(4,9,20,.55);border:1px solid rgba(255,255,255,.16);
  font-size:10.5px;color:rgba(255,255,255,.72)}
.cx-screen-video{display:flex;align-items:center;justify-content:center;background:#04070f}
.cx-screen-video::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:url(assets/creation/video-poster.jpg) center/cover;
  filter:blur(22px) saturate(1.05);opacity:.45;
  -webkit-mask-image:none;mask-image:none}
.cx-screen-video::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:rgba(5,10,22,.35)}
.cx-video{position:relative;z-index:1;height:100%;width:auto;max-width:100%;
  object-fit:contain;background:#000}
.cx-screen-video .cx-screen-tag{z-index:2}
.cx-timeline{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.cx-track{display:flex;gap:3px;height:30px;border-radius:7px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid var(--cx-line)}
.cx-track span{display:flex;align-items:center;justify-content:center;font-size:10px;
  color:var(--cx-text-2);background:linear-gradient(180deg,rgba(74,168,255,.22),rgba(74,168,255,.08));
  border-right:1px solid rgba(5,10,22,.4)}
.cx-track-audio{height:22px}
.cx-track-audio span{background:linear-gradient(180deg,rgba(139,108,255,.22),rgba(139,108,255,.08));
  color:var(--cx-text-3);letter-spacing:.08em}
.cx-checks{list-style:none;display:flex;flex-direction:column}
.cx-checks li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-bottom:1px dashed var(--cx-line);font-size:12.5px;line-height:1.6;color:var(--cx-text-2)}
.cx-checks li::before{content:'';flex:none;width:7px;height:4px;margin-top:6px;
  border-left:2px solid var(--cx-cyan);border-bottom:2px solid var(--cx-cyan);
  transform:rotate(-45deg)}
.cx-export{display:flex;align-items:baseline;gap:10px;margin-top:18px;padding:14px 16px;
  border-radius:10px;border:1px solid var(--cx-line-2);background:rgba(74,168,255,.08)}
.cx-export b{font-family:var(--serif);font-size:20px;color:var(--cx-cyan)}
.cx-export span{font-size:11.5px;color:var(--cx-text-3)}

/* ============ 六大 Agent ============ */
.cx-steps{list-style:none;position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cx-steps::before{content:'';position:absolute;left:2%;right:2%;top:50%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cx-line-2),transparent)}
.cx-steps li{position:relative;padding:18px 16px;border:1px solid var(--cx-line);border-radius:14px;
  background:linear-gradient(180deg,rgba(12,27,53,.7),rgba(7,15,32,.7));
  transition:border-color .22s,transform .22s}
.cx-steps li:hover{border-color:var(--cx-line-2);transform:translateY(-2px)}
.cx-steps span{font-family:var(--serif);font-size:12px;letter-spacing:.1em;color:var(--cx-cyan)}
.cx-steps b{display:block;margin-top:9px;font-size:14px;color:var(--cx-text)}
.cx-steps p{margin-top:7px;font-size:11.5px;line-height:1.65;color:var(--cx-text-3)}

/* ============ CTA ============ */
.cx-cta{padding-bottom:clamp(60px,8vw,110px)}
.cx-cta-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap;padding:clamp(28px,4.5vw,56px);border:1px solid var(--cx-line-2);
  border-radius:24px;
  background:
    radial-gradient(700px 260px at 18% 0%,rgba(74,168,255,.2),transparent 70%),
    radial-gradient(500px 260px at 90% 100%,rgba(139,108,255,.16),transparent 70%),
    linear-gradient(135deg,#0a1830,#060c1c)}
.cx-cta-copy{position:relative;z-index:1;max-width:620px}
.cx-cta-copy h2{margin-top:12px;font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.4vw,38px);line-height:1.3}
.cx-cta-copy p{margin-top:12px;font-size:15px;color:var(--cx-text-2)}
.cx-cta-mark{position:relative;z-index:1;font-family:var(--serif);line-height:1;letter-spacing:.06em;
  font-size:clamp(80px,13vw,180px);color:transparent;user-select:none;
  background:linear-gradient(160deg,rgba(110,231,255,.34),rgba(74,168,255,.05));
  -webkit-background-clip:text;background-clip:text}

/* ============ 响应式 ============ */
@media(max-width:1120px){
  .cx-steps{grid-template-columns:repeat(3,1fr)}
  .cx-steps::before{display:none}
}
@media(max-width:1000px){
  .cx-hero-grid,.cx-panel-grid{grid-template-columns:1fr}
  .cx-hero-visual{min-height:520px;margin-top:10px}
  .cx-float-1{left:2%}
  .cx-float-2{right:2%}
  .cx-float-3{left:8%}
}
@media(max-width:620px){
  .cx-hero h1{font-size:clamp(32px,9vw,44px)}
  .cx-facts{grid-template-columns:repeat(3,1fr);gap:8px;max-width:none}
  .cx-facts div{padding:10px 11px}
  .cx-facts b{font-size:12.5px}
  .cx-facts span{font-size:10.5px}
  .cx-chips span{padding:8px 12px;font-size:12.5px}
  .cx-tab{padding:14px 16px;font-size:14px}
  .cx-tab::after{left:16px;right:16px}
  .cx-hero-visual{min-height:430px}
  .cx-float{display:none}
  .cx-steps{grid-template-columns:repeat(2,1fr)}
  .cx-cta-mark{display:none}
  .cx-panel-grid{gap:14px}
  .cx-card{padding:18px}
  .cx-screen-video{aspect-ratio:9/16}
  .cx-video{width:100%;height:100%}
}
@media(max-width:420px){
  .cx-steps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .cx-float,.cx-scan i,.cx-scan::after{animation:none}
  .cx-panel{animation:none}
  .cx-tab::after{transition:none}
}

/* ============ 动效增强（三步创作台） ============ */
/* 只在当前激活面板内运行；切走后 display:none，动画自然暂停。 */
.cx-chips span{animation:cxChipFloat 5.5s ease-in-out infinite}
.cx-chips span:nth-child(2){animation-delay:-1.8s}
.cx-chips span:nth-child(3){animation-delay:-3.6s}
.cx-chips .ic{animation:cxIconPulse 3.2s ease-in-out infinite}
@keyframes cxChipFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes cxIconPulse{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.12)}
}

/* 面板切换：卡片与内容分级入场 */
.cx-panel.is-active .cx-card{animation:cxCardIn .6s cubic-bezier(.22,1,.36,1) both}
.cx-panel.is-active .cx-card:nth-child(2){animation-delay:.09s}
@keyframes cxCardIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
.cx-panel.is-active .cx-field,
.cx-panel.is-active .cx-insights li,
.cx-panel.is-active .cx-script-row,
.cx-panel.is-active .cx-tags span{animation:cxRise .55s cubic-bezier(.22,1,.36,1) both}
.cx-panel.is-active .cx-field:nth-of-type(2){animation-delay:.12s}
.cx-panel.is-active .cx-field:nth-of-type(3){animation-delay:.19s}
.cx-panel.is-active .cx-field:nth-of-type(4){animation-delay:.26s}
.cx-panel.is-active .cx-tags span:nth-child(1){animation-delay:.3s}
.cx-panel.is-active .cx-tags span:nth-child(2){animation-delay:.36s}
.cx-panel.is-active .cx-tags span:nth-child(3){animation-delay:.42s}
.cx-panel.is-active .cx-insights li:nth-child(1){animation-delay:.16s}
.cx-panel.is-active .cx-insights li:nth-child(2){animation-delay:.24s}
.cx-panel.is-active .cx-insights li:nth-child(3){animation-delay:.32s}
.cx-panel.is-active .cx-script-row:nth-child(1){animation-delay:.38s}
.cx-panel.is-active .cx-script-row:nth-child(2){animation-delay:.45s}
.cx-panel.is-active .cx-script-row:nth-child(3){animation-delay:.52s}
.cx-panel.is-active .cx-script-row:nth-child(4){animation-delay:.59s}
@keyframes cxRise{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}

/* 01 创意策划：Brief 扫描光带 + 状态点呼吸 */
.cx-panel.is-active .cx-card:first-child::after{
  content:'';position:absolute;left:0;right:0;top:-30%;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(110,231,255,.08),transparent);
  animation:cxScanDown 4.8s ease-in-out infinite;
}
@keyframes cxScanDown{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(390%)}
}
.cx-panel.is-active .cx-scan i{animation:cxSpin 1s linear infinite,cxDotPulse 1.8s ease-in-out infinite}
@keyframes cxDotPulse{
  0%,100%{box-shadow:0 0 0 rgba(110,231,255,0)}
  50%{box-shadow:0 0 12px rgba(110,231,255,.45)}
}
.cx-panel.is-active .cx-badge-on{animation:cxBadgePulse 3s ease-in-out infinite}
@keyframes cxBadgePulse{
  0%,100%{box-shadow:0 0 0 rgba(74,168,255,0)}
  50%{box-shadow:0 0 16px rgba(74,168,255,.22)}
}

/* 02 视觉生成：卡片入场 + 图片缓慢缩放 + 扫光 */
.cx-panel.is-active .cx-tile{animation:cxTileIn .65s cubic-bezier(.22,1,.36,1) both}
.cx-panel.is-active .cx-tile:nth-child(2){animation-delay:.08s}
.cx-panel.is-active .cx-tile:nth-child(3){animation-delay:.16s}
.cx-panel.is-active .cx-tile:nth-child(4){animation-delay:.24s}
@keyframes cxTileIn{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:none}
}
.cx-panel.is-active .cx-tile img{animation:cxKenBurns 14s ease-in-out infinite alternate}
@keyframes cxKenBurns{
  from{transform:scale(1)}
  to{transform:scale(1.07)}
}
.cx-panel.is-active .cx-tile::before{
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.16) 48%,transparent 60%);
  background-size:260% 100%;
  animation:cxSheen 5.5s ease-in-out infinite;
}
@keyframes cxSheen{
  0%,55%{background-position:120% 0}
  85%,100%{background-position:-80% 0}
}
.cx-panel.is-active .cx-pill-cta{animation:cxPulse 2.6s ease-in-out infinite}
@keyframes cxPulse{
  0%,100%{box-shadow:0 0 0 rgba(74,168,255,0);border-color:var(--cx-line-2)}
  50%{box-shadow:0 0 22px rgba(74,168,255,.18);border-color:rgba(110,231,255,.6)}
}

/* 03 广告成片：视频入场 + 时间线播放头 + 检查项打勾 */
.cx-panel.is-active .cx-video{animation:cxVideoIn .8s cubic-bezier(.22,1,.36,1) both}
@keyframes cxVideoIn{
  from{opacity:0;transform:scale(1.035)}
  to{opacity:1;transform:none}
}
.cx-panel.is-active .cx-timeline{position:relative}
.cx-panel.is-active .cx-timeline::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:2px;pointer-events:none;
  background:linear-gradient(180deg,var(--cx-cyan),var(--cx-blue));
  box-shadow:0 0 12px rgba(110,231,255,.7);
  animation:cxPlayhead 6.5s linear infinite;
}
@keyframes cxPlayhead{
  0%{left:0;opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{left:100%;opacity:0}
}
.cx-panel.is-active .cx-checks li::before{animation:cxCheckIn .45s cubic-bezier(.22,1,.36,1) both}
.cx-panel.is-active .cx-checks li:nth-child(1)::before{animation-delay:.18s}
.cx-panel.is-active .cx-checks li:nth-child(2)::before{animation-delay:.28s}
.cx-panel.is-active .cx-checks li:nth-child(3)::before{animation-delay:.38s}
.cx-panel.is-active .cx-checks li:nth-child(4)::before{animation-delay:.48s}
@keyframes cxCheckIn{
  from{opacity:0;transform:rotate(-45deg) scale(0)}
  to{opacity:1;transform:rotate(-45deg) scale(1)}
}
.cx-panel.is-active .cx-export{animation:cxExportGlow 3.4s ease-in-out infinite}
@keyframes cxExportGlow{
  0%,100%{box-shadow:0 0 0 rgba(74,168,255,0)}
  50%{box-shadow:0 0 26px rgba(74,168,255,.14)}
}

/* 尊重系统「减少动效」 */
@media(prefers-reduced-motion:reduce){
  .cx-chips span,.cx-chips .ic,
  .cx-panel.is-active .cx-card,
  .cx-panel.is-active .cx-card:first-child::after,
  .cx-panel.is-active .cx-field,
  .cx-panel.is-active .cx-tags span,
  .cx-panel.is-active .cx-insights li,
  .cx-panel.is-active .cx-script-row,
  .cx-panel.is-active .cx-scan i,
  .cx-panel.is-active .cx-badge-on,
  .cx-panel.is-active .cx-tile,
  .cx-panel.is-active .cx-tile img,
  .cx-panel.is-active .cx-tile::before,
  .cx-panel.is-active .cx-pill-cta,
  .cx-panel.is-active .cx-video,
  .cx-panel.is-active .cx-timeline::after,
  .cx-panel.is-active .cx-checks li::before,
  .cx-panel.is-active .cx-export{animation:none!important}
}

/* ============ 背景光环动效 ============ */
.cx-hero-visual::after{content:'';position:absolute;top:50%;left:50%;width:min(560px,94%);
  aspect-ratio:1;border-radius:50%;border:1px solid rgba(110,231,255,.32);pointer-events:none;
  opacity:0;z-index:0;animation:cxRingPulse 6s ease-out 1.2s infinite}
.cx-fox-wrap{position:relative;z-index:1}
.cx-halo{animation:cxHaloBreath 7s ease-in-out infinite}
.cx-ring{animation:cxRingBreath 9s ease-in-out infinite}
.cx-ring::before{content:'';position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(110,231,255,.55) 82%,rgba(110,231,255,.9) 86%,transparent 94%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 1px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 1px));
  animation:cxRingArc 14s linear infinite}
.cx-ring::after{animation:cxRingSpin 60s linear infinite}
@keyframes cxHaloBreath{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes cxRingBreath{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.025)}}
@keyframes cxRingSpin{to{transform:rotate(360deg)}}
@keyframes cxRingArc{to{transform:rotate(360deg)}}
@keyframes cxRingPulse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  12%{opacity:.5}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}
}
@media(prefers-reduced-motion:reduce){
  .cx-hero-visual::after,.cx-halo,.cx-ring,.cx-ring::before,.cx-ring::after{animation:none!important}
}