/* ============================================================
   campus-4d.css · OPC 创业园区 4D 沉浸场景引擎样式
   前缀 campus-，仅供登录首页 / 园区漫游页 / 登录过场使用
   全部动画仅使用 transform / opacity，避免 layout 抖动
   ============================================================ */

.campus-scene{position:fixed;inset:0;overflow:hidden;background:#DCEBF2;z-index:0}
.campus-scene *{pointer-events:none}
.campus-scene .campus-hotspot,.campus-scene .campus-hotspot *{pointer-events:auto}

/* ---------- 天空（昼夜由 JS 驱动变量 --night 0..1） ---------- */
.campus-sky{position:absolute;inset:0;
  background:linear-gradient(180deg,#A9D4EE 0%,#D8ECF3 42%,#EFF6EE 100%)}
.campus-sky::after{content:"";position:absolute;inset:0;opacity:var(--night,0);
  background:linear-gradient(180deg,#1C2B4D 0%,#4A4A72 45%,#8A6D7E 100%)}
.campus-sun{position:absolute;top:9%;right:14%;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,#FFF6D8 0%,#FFE9A8 38%,rgba(255,233,168,0) 72%);
  opacity:calc(1 - var(--night,0));filter:blur(1px)}
.campus-moon{position:absolute;top:11%;right:16%;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FFFFFF 0%,#EDE6D2 55%,rgba(237,230,210,0) 78%);
  opacity:var(--night,0)}

/* ---------- 通用视差层 ---------- */
.campus-layer{position:absolute;inset:-4%;will-change:transform}

/* ---------- 云朵 ---------- */
.campus-cloud{position:absolute;width:150px;height:44px;border-radius:44px;
  background:rgba(255,255,255,.92);
  filter:drop-shadow(0 8px 16px rgba(140,160,190,.25));
  animation:campus-cloud-drift var(--cd,90s) linear var(--cdl,0s) infinite}
.campus-cloud::before,.campus-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.campus-cloud::before{width:64px;height:64px;left:22px;top:-26px}
.campus-cloud::after{width:44px;height:44px;right:26px;top:-16px}
@keyframes campus-cloud-drift{from{transform:translateX(-24vw)}to{transform:translateX(124vw)}}

/* ---------- 远景：园区场景图（日/黄昏双图交叉淡化） ---------- */
.campus-bg-img,.campus-bg-dusk{position:absolute;inset:0;background-repeat:no-repeat;
  background-position:left center;background-size:cover;will-change:transform,opacity}
.campus-bg-img{animation:campus-kenburns 30s ease-in-out infinite alternate}
.campus-bg-dusk{opacity:var(--night,0)}
@keyframes campus-kenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.06) translate(-1.1%,-.9%)}}

/* ---------- 中景：旗帜 ---------- */
.campus-flag{position:absolute;width:4px;height:52px;background:linear-gradient(#8B94A3,#6E7889);border-radius:2px}
.campus-flag i{position:absolute;left:4px;top:2px;width:30px;height:18px;display:block;
  background:linear-gradient(120deg,#2456C6,#0B6E7F);border-radius:2px 8px 8px 2px;
  transform-origin:left center;animation:campus-flag-wave 1.6s ease-in-out infinite alternate}
.campus-flag.f2 i{background:linear-gradient(120deg,#8C610F,#C9A227)}
@keyframes campus-flag-wave{from{transform:skewY(-7deg) scaleX(.92)}to{transform:skewY(6deg) scaleX(1.04)}}

/* ---------- 中景：喷泉池（CSS 池光 + Canvas 水柱） ---------- */
.campus-pool{position:absolute;width:120px;height:34px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(190,235,255,.95) 0%,rgba(120,200,240,.55) 55%,rgba(120,200,240,0) 78%);
  animation:campus-pool-glow 2.4s ease-in-out infinite alternate}
@keyframes campus-pool-glow{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.07)}}

/* ---------- 人物剪影（SVG，双腿/双臂摆动，横穿屏幕） ---------- */
.campus-walker{position:absolute;width:30px;height:52px;will-change:transform;
  animation:campus-stroll var(--wd,30s) linear var(--wdl,0s) infinite}
.campus-walker.rev{animation-name:campus-stroll-rev}
.campus-walker svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes campus-stroll{from{transform:translateX(-8vw) scale(var(--ws,1))}to{transform:translateX(108vw) scale(var(--ws,1))}}
@keyframes campus-stroll-rev{from{transform:translateX(108vw) scale(calc(var(--ws,1) * -1),var(--ws,1))}to{transform:translateX(-8vw) scale(calc(var(--ws,1) * -1),var(--ws,1))}}
.campus-walker .w-bob{animation:campus-bob .68s ease-in-out infinite}
@keyframes campus-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
.campus-walker .w-leg{transform-box:view-box;transform-origin:0 -18px;animation:campus-stride .68s ease-in-out infinite}
.campus-walker .w-leg.b{animation-delay:-.34s}
@keyframes campus-stride{0%,100%{transform:rotate(21deg)}50%{transform:rotate(-21deg)}}
.campus-walker .w-arm{transform-box:view-box;transform-origin:0 -33px;animation:campus-swing .68s ease-in-out infinite}
.campus-walker .w-arm.b{animation-delay:-.34s}
@keyframes campus-swing{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}}
.campus-walker .w-shadow{position:absolute;left:15%;bottom:-4px;width:70%;height:6px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(40,60,90,.30),rgba(40,60,90,0) 70%)}

/* ---------- 前景：树（CSS 剪影，随风轻摆） ---------- */
.campus-tree{position:absolute;width:6px;background:linear-gradient(#5B4A3A,#463829);border-radius:3px;
  transform-origin:bottom center;animation:campus-tree-sway 5.2s ease-in-out infinite alternate}
.campus-tree::before{content:"";position:absolute;left:50%;bottom:62%;width:260%;aspect-ratio:1;
  transform:translateX(-50%);border-radius:50% 50% 46% 54%/58% 60% 40% 42%;
  background:radial-gradient(circle at 42% 32%,#7FB069 0%,#5E9153 52%,#47703F 100%)}
.campus-tree::after{content:"";position:absolute;left:8%;bottom:78%;width:150%;aspect-ratio:1.2;
  border-radius:50%;background:radial-gradient(circle at 50% 40%,#8FBE77 0%,rgba(143,190,119,0) 72%)}
@keyframes campus-tree-sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}

/* ---------- 飞鸟 ---------- */
.campus-bird{position:absolute;width:26px;height:12px;opacity:.75;
  animation:campus-fly var(--bd,34s) linear var(--bdl,0s) infinite}
.campus-bird svg{display:block;width:100%;height:100%;overflow:visible}
.campus-bird .w-wing{transform-box:fill-box;transform-origin:center bottom;animation:campus-flap .5s ease-in-out infinite alternate}
@keyframes campus-fly{0%{transform:translate(-10vw,4vh)}25%{transform:translate(20vw,-2vh)}50%{transform:translate(50vw,3vh)}75%{transform:translate(80vw,-3vh)}100%{transform:translate(112vw,1vh)}}
@keyframes campus-flap{from{transform:scaleY(.55)}to{transform:scaleY(1.15)}}

/* ---------- 粒子画布 / 暗角 ---------- */
.campus-fx{position:absolute;inset:0;width:100%;height:100%}
.campus-vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse 120% 100% at 50% 42%,transparent 62%,rgba(30,50,80,.18) 100%)}

/* ---------- 热点：呼吸光圈 + 标签（可点击建筑指引） ---------- */
.campus-hotspot{position:absolute;transform:translate(-50%,-50%);cursor:pointer;text-align:center}
.campus-hotspot .hs-ring{position:relative;width:34px;height:34px;margin:0 auto;border-radius:50%;
  border:2px solid rgba(36,86,198,.9);
  animation:campus-breathe 2s ease-in-out infinite}
.campus-hotspot .hs-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;
  background:rgba(36,86,198,.85);box-shadow:0 0 14px 4px rgba(36,86,198,.5)}
.campus-hotspot .hs-ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(36,86,198,.45);animation:campus-ripple 2s ease-out infinite}
.campus-hotspot .hs-tag{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;
  font-size:12px;font-weight:700;color:#1B3A6B;white-space:nowrap;
  background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 6px 16px -4px rgba(16,27,51,.35);
  animation:campus-tag-float 2.6s ease-in-out infinite alternate}
.campus-hotspot:hover .hs-tag{background:#fff;color:#2456C6}
@keyframes campus-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
@keyframes campus-ripple{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes campus-tag-float{from{transform:translateY(0)}to{transform:translateY(-4px)}}

/* ============================================================
   登录过场：人物走进办公楼（#walkin）
   ============================================================ */
.campus-walkin{position:fixed;inset:0;z-index:95;display:none;overflow:hidden;
  background:linear-gradient(180deg,#0E1E3D 0%,#27407A 46%,#3E5E96 72%,#22304F 100%)}
.campus-walkin.show{display:block}
.campus-walkin .wi-stars{position:absolute;inset:0 0 40% 0;
  background-image:radial-gradient(1.5px 1.5px at 12% 30%,#fff,transparent),
    radial-gradient(1px 1px at 34% 12%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 58% 26%,#fff,transparent),
    radial-gradient(1px 1px at 76% 8%,#fff,transparent),
    radial-gradient(2px 2px at 88% 34%,#fff,transparent),
    radial-gradient(1px 1px at 46% 40%,#fff,transparent);
  opacity:.8;animation:campus-stars-twinkle 1.4s ease-in-out infinite alternate}
@keyframes campus-stars-twinkle{from{opacity:.45}to{opacity:.9}}
.campus-walkin .wi-ground{position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(180deg,#31507F 0%,#1C2C4C 100%)}
.campus-walkin .wi-ground::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(120,200,255,.5) 30%,rgba(120,200,255,.5) 70%,transparent)}

/* 办公楼（右侧，带门） */
.campus-walkin .wi-bldg{position:absolute;right:9%;bottom:26%;width:min(240px,30vw);height:46%;
  background:linear-gradient(160deg,#2C4472 0%,#1B2C50 70%);
  border:1px solid rgba(140,180,240,.35);border-bottom:none;border-radius:10px 10px 0 0;
  box-shadow:0 0 60px rgba(70,120,220,.25)}
.campus-walkin .wi-bldg::before{content:"";position:absolute;inset:10% 12% 32% 12%;
  background-image:repeating-linear-gradient(0deg,rgba(150,200,255,.28) 0 6px,transparent 6px 22px),
    repeating-linear-gradient(90deg,rgba(150,200,255,.28) 0 8px,transparent 8px 26px);
  border-radius:4px}
.campus-walkin .wi-door{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:26%;height:32%;border-radius:6px 6px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#0D1830,#16264A)}
.campus-walkin .wi-door i{position:absolute;top:0;bottom:0;width:50%;display:block;
  background:linear-gradient(180deg,#33507F,#20355C);transition:transform .5s cubic-bezier(.6,0,.3,1)}
.campus-walkin .wi-door i.l{left:0;border-right:1px solid rgba(140,190,255,.5)}
.campus-walkin .wi-door i.r{right:0}
.campus-walkin.open .wi-door i.l{transform:translateX(-101%)}
.campus-walkin.open .wi-door i.r{transform:translateX(101%)}
.campus-walkin .wi-door-glow{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:26%;height:32%;border-radius:6px 6px 0 0;opacity:0;
  background:radial-gradient(ellipse at 50% 100%,#FFF3C4 0%,rgba(255,220,140,.85) 45%,rgba(255,220,140,0) 85%);
  transition:opacity .5s ease}
.campus-walkin.open .wi-door-glow{opacity:1}
.campus-walkin .wi-bldg-sign{position:absolute;left:50%;top:-34px;transform:translateX(-50%);
  white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:3px;color:#9FC4FF;
  text-shadow:0 0 12px rgba(120,180,255,.8)}

/* 过场行人：1.3s 从左走向大门 */
.campus-walkin .wi-walker{position:absolute;left:0;bottom:24.5%;width:42px;height:74px;
  transform:translateX(12vw);will-change:transform}
.campus-walkin.play .wi-walker{animation:campus-walkin-go 1.35s cubic-bezier(.4,.1,.5,1) forwards}
@keyframes campus-walkin-go{
  0%{transform:translateX(12vw) scale(1)}
  88%{transform:translateX(var(--wi-dx,68vw)) scale(1.06);opacity:1}
  100%{transform:translateX(var(--wi-dx,68vw)) scale(1.06);opacity:0}}
.campus-walkin .wi-walker svg{display:block;width:100%;height:100%;overflow:visible}

/* 光晕转场 */
.campus-walkin .wi-halo{position:absolute;left:50%;bottom:20%;width:80px;height:80px;border-radius:50%;
  transform:translate(-50%,50%) scale(0);opacity:0;pointer-events:none;
  background:radial-gradient(circle,#FFF8E0 0%,rgba(255,240,190,.9) 30%,rgba(255,255,255,.95) 60%,#fff 100%)}
.campus-walkin.halo .wi-halo{animation:campus-halo .6s ease-out forwards}
@keyframes campus-halo{0%{transform:translate(-50%,50%) scale(0);opacity:1}
  100%{transform:translate(-50%,50%) scale(30);opacity:1}}
.campus-walkin .wi-text{position:absolute;left:0;right:0;top:12%;text-align:center;
  font-size:15px;letter-spacing:6px;font-weight:700;color:#BFD6FF;
  text-shadow:0 0 16px rgba(90,150,255,.6);animation:campus-wi-text 1.6s ease-in-out infinite alternate}
@keyframes campus-wi-text{from{opacity:.65}to{opacity:1}}
.campus-walkin .wi-skip{position:absolute;right:20px;bottom:20px;z-index:2;cursor:pointer;
  padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.12);color:#DFEAFF;font-size:12.5px;letter-spacing:1px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:.2s}
.campus-walkin .wi-skip:hover{background:rgba(255,255,255,.28);color:#fff}

/* ============================================================
   园区漫游页 UI（campus.html）
   ============================================================ */
.campus-roam-ui{position:fixed;inset:0;z-index:5;pointer-events:none}
.campus-roam-ui>*{pointer-events:auto}
.campus-back{position:fixed;top:18px;left:18px;display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:999px;text-decoration:none;cursor:pointer;
  font-size:14px;font-weight:700;color:#17325E;
  background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 10px 26px -8px rgba(16,27,51,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.2s;
  animation:campus-tag-float 3s ease-in-out infinite alternate}
.campus-back:hover{transform:translateY(-2px);background:#fff;color:#2456C6}
.campus-title{position:fixed;top:20px;left:50%;transform:translateX(-50%);text-align:center;
  pointer-events:none}
.campus-title b{display:block;font-size:17px;font-weight:800;letter-spacing:4px;color:#17325E;
  text-shadow:0 1px 10px rgba(255,255,255,.9)}
.campus-title span{display:block;margin-top:3px;font-size:11.5px;letter-spacing:2px;color:#4C6787;
  text-shadow:0 1px 8px rgba(255,255,255,.9)}
.campus-hintbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  padding:8px 18px;border-radius:999px;font-size:12px;color:#33517C;letter-spacing:1px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 20px -6px rgba(16,27,51,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:campus-tag-float 2.8s ease-in-out infinite alternate}
.campus-daynight{position:fixed;top:18px;right:18px;display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:999px;font-size:12px;font-weight:700;color:#17325E;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 8px 20px -6px rgba(16,27,51,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.campus-daynight i{width:8px;height:8px;border-radius:50%;background:#C9A227;display:inline-block;
  box-shadow:0 0 8px 2px rgba(201,162,39,.6)}

/* ---------- 移动端（≤680px） ---------- */
@media(max-width:680px){
  .campus-bg-img,.campus-bg-dusk{background-position:center}
  .campus-walker{width:22px;height:38px}
  .campus-tree{transform:scale(.8)}
  .campus-title{max-width:46vw;top:14px}
  .campus-title b{font-size:14px;letter-spacing:2px}
  .campus-title span{font-size:10.5px;letter-spacing:1px}
  .campus-hintbar{bottom:14px;font-size:11px;padding:7px 14px;max-width:86vw;text-align:center}
  .campus-back{top:12px;left:12px;padding:8px 14px;font-size:13px}
  .campus-daynight{top:12px;right:12px;padding:7px 12px}
  .campus-walkin .wi-text{font-size:12.5px;letter-spacing:3px}
}

/* ---------- 减少动态偏好 ---------- */
@media(prefers-reduced-motion:reduce){
  .campus-scene *,.campus-walkin *{animation-duration:.01s !important;animation-iteration-count:1 !important}
}