/* ============================================================
   应用感知与异常检测平台 Hero —— 电影预告片式产品动画 (Cinematic Trailer)
   宽银幕画幅 / 上下黑边 / 暗角颗粒 / 分幕运镜 / 电影字幕
   ============================================================ */
.cine{
  --cine-teal:#5fe3df;
  --cine-cyan:#00d4ff;
  --cine-red:#ff5461;
  --cine-amber:#ffb648;
  --cine-green:#2fd6a0;
  --cine-ink:#cfe6ee;
  --cine-dim:#7790a2;
  position:relative;width:100%;border-radius:20px;overflow:hidden;
  border:1px solid #13314a;background:#04080f;
  box-shadow:0 40px 80px -24px rgba(8,40,55,.62),0 12px 30px -12px rgba(8,40,55,.4);
  aspect-ratio:16/10.4;isolation:isolate;
  font-family:-apple-system,"Segoe UI",Roboto,"Microsoft YaHei",sans-serif;
}
/* 电影画面舞台 */
.cine-stage{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 18%,#0b2136 0%,#071524 46%,#040a13 100%);overflow:hidden}
.cine-stage::after{ /* 暗角 vignette */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:40;
  box-shadow:inset 0 0 120px 34px rgba(0,0,0,.72),inset 0 0 30px rgba(0,0,0,.5)}
.cine-stage::before{ /* 细微胶片颗粒（点阵） */
  content:"";position:absolute;inset:-50%;z-index:41;pointer-events:none;opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.7) .5px,transparent .6px);
  background-size:3px 3px;animation:cineGrain .7s steps(3) infinite}
@keyframes cineGrain{0%{transform:translate(0,0)}33%{transform:translate(2px,-2px)}66%{transform:translate(-2px,2px)}100%{transform:translate(0,0)}}

/* 每一幕场景层：绝对铺满，默认透明不可见，激活时交叉淡入 */
.cine-scene{position:absolute;inset:0;z-index:5;opacity:0;visibility:hidden;
  transform:scale(1.08);transition:opacity 1.1s ease,transform 1.1s ease,visibility 0s 1.1s;}
.cine-scene.active{opacity:1;visibility:visible;transform:scale(1);transition:opacity 1.1s ease,transform 6s cubic-bezier(.2,.6,.2,1),visibility 0s}
.cine-scene svg{position:absolute;inset:0;width:100%;height:100%}
/* 片名卡内的小 logo 不参与全幅背景布局 */
.cine-scene .cine-titlecard svg,.cine-scene svg.cine-logo{position:static;inset:auto;width:64px;height:64px}
/* Ken Burns 运镜：各幕轻微不同方向漂移 */
.cine-scene.active .cine-pan{animation:cinePan 6.4s ease-out forwards}
.cine-scene.active .cine-pan.r{animation-name:cinePanR}
@keyframes cinePan{from{transform:scale(1.12) translateX(1.4%)}to{transform:scale(1) translateX(0)}}
@keyframes cinePanR{from{transform:scale(1.12) translateX(-1.4%)}to{transform:scale(1) translateX(0)}}

/* 场景内元素入场（由 active 驱动，配合 animation-delay） */
.cine-scene.active .rise{animation:cineRise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes cineRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cine-scene.active .fade{animation:cineFade 1.1s ease both}
@keyframes cineFade{from{opacity:0}to{opacity:1}}
.cine-scene.active .pop{animation:cinePop .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes cinePop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.cine-scene.active .draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:cineDraw 1.7s ease forwards}
@keyframes cineDraw{to{stroke-dashoffset:0}}
.cine-scene.active .blinksoft{animation:cineBlink 1.6s ease-in-out infinite}
@keyframes cineBlink{0%,100%{opacity:.35}50%{opacity:1}}

/* ---- 序章：数据中心复杂拓扑 ---- */
.xlink{stroke:#2b4866;stroke-width:.8;opacity:.42}
.xlink.hot{stroke:#3a587a;opacity:.6}
.threat{fill:#ff5461}
.cine-scene.active .threat{animation:cineBlink 1.7s ease-in-out infinite}

/* ---- 第三幕：应用自动归集 ---- */
.cine-scene.active .fly{animation:cineFly 2.05s cubic-bezier(.45,.05,.55,.35) both;animation-delay:var(--d,.2s)}
@keyframes cineFly{
  0%{transform:translate(0,0) scale(1);opacity:1}
  74%{opacity:1}
  100%{transform:translate(var(--gx),var(--fy)) scale(.32);opacity:0}
}
.cine-scene.active .bucket-on{animation:cinePop .6s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d,2.3s)}
.cine-scene.active .bucket-on.bk{animation-name:bucketGlow}
@keyframes bucketGlow{0%{opacity:0;transform:scale(.92)}60%{transform:scale(1.035)}100%{opacity:1;transform:scale(1)}}

/* ---- 第四幕：异常节点逐个亮起并被捕获 ---- */
.anom-overlay{opacity:0}
.cine-scene.active .anom-on{animation:anomOn .5s ease-out forwards;animation-delay:var(--d,.5s)}
@keyframes anomOn{to{opacity:1}}
.ring{fill:none;stroke:#ff5461;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.cine-scene.active .ring{animation:ringOut 1.7s ease-out infinite;animation-delay:var(--d,.5s)}
@keyframes ringOut{0%{opacity:.85;transform:scale(.55)}100%{opacity:0;transform:scale(2.35)}}
.scanbeam{opacity:0}
.cine-scene.active .scanbeam{animation:scanY 2.1s ease-in-out .15s 1 both}
@keyframes scanY{0%{transform:translateY(-30px);opacity:0}12%{opacity:.85}88%{opacity:.85}100%{transform:translateY(300px);opacity:0}}
.cine-scene.active .evrow{animation:cineRise .5s ease both;animation-delay:var(--d,2.6s)}

/* 顶部场记板（场景名），置于上方黑边内 */
.cine-top{position:absolute;top:0;height:12%;left:20px;z-index:60;display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.14em;color:#8fb2c2;font-weight:600;text-transform:uppercase}
.cine-top .rec{width:7px;height:7px;border-radius:50%;background:var(--cine-red);box-shadow:0 0 9px var(--cine-red);animation:cineRec 1.3s infinite}
@keyframes cineRec{0%,100%{opacity:1}50%{opacity:.25}}
.cine-top span:last-child{color:#cfe6ee;font-weight:600;letter-spacing:.05em;text-transform:none;font-size:11.5px}
.cine-time{position:absolute;top:0;height:12%;right:18px;z-index:60;display:flex;align-items:center;
  font-size:11px;letter-spacing:.1em;color:#8fb2c2;font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,monospace}

/* 上下电影黑边（letterbox），开场时收拢 */
.cine-bar{position:absolute;left:0;right:0;background:#000;z-index:50;pointer-events:none;
  transition:transform 1.5s cubic-bezier(.6,0,.2,1)}
.cine-bar.top{top:0;height:12%;transform:translateY(-101%)}
.cine-bar.bot{bottom:0;height:16%;transform:translateY(101%)}
.cine.in .cine-bar.top,.cine.in .cine-bar.bot{transform:translateY(0)}

/* 电影字幕：置于底部黑边中上部（进度轴在黑边最底），最多两行完整显示 */
.cine-cap{position:absolute;left:0;right:0;bottom:0;height:16%;z-index:60;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:0 64px 24px;pointer-events:none}
.cine-cap-inner{max-width:100%}
.cine-cap .cc-kicker{font-size:10px;letter-spacing:.3em;color:var(--cine-teal);font-weight:700;margin-bottom:3px;
  opacity:0;transition:opacity .5s;white-space:nowrap}
.cine-cap .cc-main{display:block;font-size:clamp(12px,1.35vw,14.5px);line-height:1.34;color:#f3fafc;font-weight:600;
  opacity:0;transform:translateY(8px);transition:opacity .55s ease,transform .55s ease}
.cine-cap .cc-main em{color:var(--cine-teal);font-style:normal}
.cine-cap .cc-main.warn em{color:#ff8a93}
.cine-cap.show .cc-kicker{opacity:1}
.cine-cap.show .cc-main{opacity:1;transform:none}

/* 章节进度：时间轴固定在下黑边最底边，章节为轴上向上的刻痕，全程在黑边内，不压字幕/画面 */
.cine-progwrap{position:absolute;left:0;right:0;bottom:0;z-index:57;height:3px;background:rgba(120,150,170,.18)}
.cine-prog{height:100%;width:0;background:linear-gradient(90deg,#13a7a0,var(--cine-teal));box-shadow:0 0 12px rgba(95,227,223,.7)}
.cine-dots{position:absolute;left:0;right:0;bottom:3px;height:0;z-index:58}
.cine-dots i{position:absolute;bottom:0;width:2px;height:8px;border-radius:1px;background:rgba(255,255,255,.5);
  transform:translateX(-50%);cursor:pointer;transition:.3s}
.cine-dots i.done{background:rgba(160,236,233,.9)}
.cine-dots i.active{background:var(--cine-teal);box-shadow:0 0 9px rgba(95,227,223,.95);height:11px}

/* 重播按钮：下黑边右下角，与底部时间轴错开 */
.cine-replay{position:absolute;right:18px;bottom:11px;z-index:62;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(95,227,223,.5);background:rgba(16,26,34,.72);color:var(--cine-teal);cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:.35s}
.cine-replay.show{opacity:1;transform:none}
.cine-replay:hover{background:rgba(95,227,223,.18);color:#fff}

/* ---- 片名幕专用 ---- */
.cine-titlecard{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8%}
.cine-logo{width:64px;height:64px;border-radius:18px;margin-bottom:18px;box-shadow:0 0 44px rgba(0,212,255,.5)}
.cine-name{font-size:clamp(26px,4.2vw,40px);font-weight:850;letter-spacing:.04em;color:#fff;line-height:1.1}
.cine-name span{background:linear-gradient(92deg,#5fe3df,#37c6e6 55%,#57a9ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.cine-subt{margin-top:10px;font-size:clamp(11px,1.5vw,13.5px);letter-spacing:.42em;color:var(--cine-dim);font-weight:600}
.cine-tagline{margin-top:22px;font-size:clamp(13px,1.9vw,17px);color:#dceef4;letter-spacing:.06em}
.cine-tagline b{color:var(--cine-teal);font-weight:700}
.cine-scene.active .cine-logo{animation:cinePop .9s .2s cubic-bezier(.2,1.3,.4,1) both}
.cine-scene.active .cine-name{animation:cineRise 1s .45s both}
.cine-scene.active .cine-subt{animation:cineFade 1.1s .7s both}
.cine-scene.active .cine-tagline{animation:cineRise 1s 1s both}

/* 悬浮统计牌（异常幕/闭环幕） */
.cine-stat{position:absolute;border-radius:12px;padding:10px 14px;min-width:96px;text-align:left;
  background:rgba(13,30,48,.82);border:1px solid #244a66;backdrop-filter:blur(6px)}
.cine-stat b{display:block;font-size:24px;font-weight:850;line-height:1;color:#fff}
.cine-stat span{display:block;font-size:10.5px;color:var(--cine-dim);margin-top:4px;letter-spacing:.04em}
.cine-stat.danger b{color:var(--cine-red)}
.cine-stat.ok b{color:var(--cine-green)}
.cine-stat.teal b{color:var(--cine-teal)}

/* 异常告警条 */
.cine-alert{position:absolute;left:8%;right:8%;top:20%;border-radius:12px;overflow:hidden;
  background:linear-gradient(100deg,rgba(255,84,97,.16),rgba(255,84,97,.05));
  border:1px solid rgba(255,84,97,.55);padding:13px 18px;display:flex;align-items:center;gap:14px;
  box-shadow:0 0 40px rgba(255,84,97,.22)}
.cine-alert .ai{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(255,84,97,.16);color:var(--cine-red)}
.cine-alert .at b{display:block;font-size:14.5px;color:#ffd7db;letter-spacing:.02em}
.cine-alert .at span{font-size:11.5px;color:#e79aa2;font-family:ui-monospace,Menlo,monospace}
.cine-alert .alvl{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--cine-red);
  padding:4px 11px;border-radius:20px;white-space:nowrap}

/* 暂停遮罩（hover） */
.cine-paused{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:0;border:0;background:rgba(3,8,14,.34);opacity:0;pointer-events:none;transition:.3s;cursor:pointer}
.cine-paused.show{opacity:1;pointer-events:auto}
.cine-paused .ply{width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(95,227,223,.7);
  background:rgba(6,18,28,.6);display:flex;align-items:center;justify-content:center;color:#fff;backdrop-filter:blur(4px)}

@media (max-width:680px){
  .cine{border-radius:16px;aspect-ratio:16/11.6}
  .cine-top{font-size:9.5px}.cine-top b{font-size:10px}
  .cine-cap{padding:2px 42px 16px}
  .cine-cap .cc-main{font-size:11.5px;line-height:1.28}
  /* 窄屏黑边有限，隐藏章节小刻痕，仅留底部进度横线，避免穿字 */
  .cine-dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cine-stage::before,.cine-scene.active .cine-pan{animation:none!important}
}