/* ========== 案例页高级动画包 case-anim.css ========== */
/* 仅在 JS 启用时预先隐藏进场元素，确保禁用脚本时内容仍正常可见 */
html.js .reveal { opacity: 0; transform: translateY(30px); }
.reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.in { opacity: 1; transform: none; }

/* 顶部滚动进度条 */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 3000; background: linear-gradient(90deg,#1a73e8,#4d94ff,#8a5cff);
  box-shadow: 0 0 10px rgba(26,115,232,.6); }

/* Hero 动态背景 */
.case-hero { position: relative; overflow: hidden; }
.case-hero::before, .case-hero::after { content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .55; pointer-events: none; z-index: 0; }
.case-hero::before { width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(77,148,255,.95), transparent 70%);
  top: -180px; left: -120px; animation: heroFloat1 13s ease-in-out infinite; }
.case-hero::after { width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(138,92,255,.75), transparent 70%);
  bottom: -200px; right: -100px; animation: heroFloat2 16s ease-in-out infinite; }
@keyframes heroFloat1 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(70px,50px) scale(1.18);} }
@keyframes heroFloat2 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-60px,-40px) scale(1.12);} }

.hero-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000, transparent 78%);
  mask-image: radial-gradient(circle at 50% 38%, #000, transparent 78%); }
.hero-cursor-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%;
  left: var(--hx,50%); top: var(--hy,30%); transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .4s; }
.case-hero:hover .hero-cursor-glow { opacity: 1; }
.case-hero-inner { position: relative; z-index: 2; }

/* Hero 文字依次进场 */
html.js .case-tag, html.js .case-hero h1, html.js .case-hero .sub { opacity: 0; transform: translateY(22px); }
html.js .case-hero-inner.hero-ready .case-tag { animation: heroUp .8s cubic-bezier(.2,.7,.2,1) .15s forwards; }
html.js .case-hero-inner.hero-ready h1 { animation: heroUp .9s cubic-bezier(.2,.7,.2,1) .30s forwards; }
html.js .case-hero-inner.hero-ready .sub { animation: heroUp .8s cubic-bezier(.2,.7,.2,1) .48s forwards; }
@keyframes heroUp { from { opacity: 0; transform: translateY(22px);} to { opacity: 1; transform: translateY(0);} }

/* 卡片 3D 悬浮 + 跟随光晕 */
.room-card, .val-item, .sol-card, .kpi-item {
  transition: transform .18s ease-out, box-shadow .35s ease, border-color .35s ease;
  transform-style: preserve-3d; will-change: transform; position: relative; }
html.js .room-card:hover, html.js .val-item:hover, html.js .sol-card:hover, html.js .kpi-item:hover {
  box-shadow: 0 20px 44px rgba(26,115,232,.20); border-color: rgba(26,115,232,.45); z-index: 3; }
.glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(26,115,232,.12), transparent 42%); }
html.js .room-card:hover .glow, html.js .val-item:hover .glow,
html.js .sol-card:hover .glow, html.js .kpi-item:hover .glow { opacity: 1; }

/* KPI 数字悬停强调 */
.kpi-num { transition: transform .25s ease, color .25s ease; }
html.js .kpi-item:hover .kpi-num { transform: scale(1.08); color: #1a73e8; }

/* 引用块左侧高光流动 */
.quote { position: relative; overflow: hidden; }