/* =========================================================
   scene.css —— 背景、角色、装饰、Logo 及其动画
   坐标均为设计稿（1536×1024）中的像素值 × var(--u)
   ========================================================= */

/* ---------- 背景：铺满 viewport，等比 cover，不变形、不留白 ---------- */
.layer-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bg-scene {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 背景本身就是“喷泉在左、城堡在右”的构图，居中裁切即可 */
  object-position: 50% 50%;
  filter: saturate(1.08);
}

/* 轻微暗角，突出中央登录区 */
.layer-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0) 55%, rgba(10, 40, 90, 0.18) 100%);
  pointer-events: none;
}

/* ---------- 角色：absolute 定位 + transform 浮动 ---------- */
.char {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 calc(10 * var(--u)) calc(8 * var(--u)) rgba(20, 50, 20, 0.28));
  animation: char-float 3.2s ease-in-out infinite alternate;
  will-change: transform;
}

/* 绿色：左侧偏上 */
.char-green {
  left: calc(63 * var(--u));
  top: calc(143 * var(--u));
  width: calc(320 * var(--u));
  animation-duration: 3.4s;
}

/* 红色：左下，位于登录框左侧 */
.char-red {
  left: calc(103 * var(--u));
  top: calc(535 * var(--u));
  width: calc(309 * var(--u));
  animation-duration: 3s;
  animation-delay: -1.2s;
}

/* 白绿色：右侧 */
.char-white-green {
  right: calc(148 * var(--u));
  top: calc(262 * var(--u));
  width: calc(283 * var(--u));
  animation-duration: 3.6s;
  animation-delay: -0.6s;
}

/* 黄色：右下，位于登录框右侧（叠在白绿色角色前） */
.char-yellow {
  right: calc(104 * var(--u));
  top: calc(545 * var(--u));
  width: calc(322 * var(--u));
  animation-duration: 3.1s;
  animation-delay: -2s;
  z-index: 1;
}

@keyframes char-float {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-12 * var(--u))); }
}

/* ---------- 装饰泡泡 / 星星 ---------- */
.layer-deco {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.deco {
  position: absolute;
  height: auto;
  animation: bubble-float 4.5s ease-in-out infinite alternate;
  will-change: transform;
}

/* Logo 左侧 */
.d1  { left: calc(392 * var(--u));  top: calc(92 * var(--u));  width: calc(64 * var(--u)); animation-duration: 4.2s; }
.d2  { left: calc(388 * var(--u));  top: calc(262 * var(--u)); width: calc(44 * var(--u)); animation-duration: 5s; animation-delay: -1s; }
.d11 { left: calc(300 * var(--u));  top: calc(70 * var(--u));  width: calc(56 * var(--u)); animation-name: star-twinkle; animation-duration: 2.6s; }
/* Logo 上方 */
.d3  { left: calc(508 * var(--u));  top: calc(44 * var(--u));  width: calc(44 * var(--u)); animation-duration: 3.8s; animation-delay: -2s; }
.d4  { left: calc(572 * var(--u));  top: calc(78 * var(--u));  width: calc(26 * var(--u)); animation-duration: 4.6s; }
.d5  { left: calc(612 * var(--u));  top: calc(84 * var(--u));  width: calc(46 * var(--u)); animation-duration: 5.2s; animation-delay: -3s; }
.d6  { left: calc(758 * var(--u));  top: calc(46 * var(--u));  width: calc(54 * var(--u)); animation-duration: 4.4s; animation-delay: -1.5s; }
/* Logo 右侧 */
.d7  { left: calc(1148 * var(--u)); top: calc(60 * var(--u));  width: calc(64 * var(--u)); animation-duration: 5.4s; }
.d8  { left: calc(1106 * var(--u)); top: calc(140 * var(--u)); width: calc(44 * var(--u)); animation-duration: 4s; animation-delay: -2.4s; }
.d9  { left: calc(1170 * var(--u)); top: calc(206 * var(--u)); width: calc(34 * var(--u)); animation-duration: 4.8s; animation-delay: -0.8s; }
.d10 { left: calc(1138 * var(--u)); top: calc(292 * var(--u)); width: calc(40 * var(--u)); animation-duration: 4.3s; animation-delay: -3.2s; }

@keyframes bubble-float {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-14 * var(--u))); }
}

@keyframes star-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(.88) rotate(-8deg); opacity: .8; }
}

/* ---------- Logo：顶部居中，淡入 + 缩放 ---------- */
.logo {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(41 * var(--u));
  width: calc(587 * var(--u));   /* 约 38% 设计宽度 */
  margin-left: calc(-293.5 * var(--u));
  font-size: 0;
  pointer-events: none;
  animation: logo-in 0.9s cubic-bezier(.2, 1.4, .4, 1) both;
}

.logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(8 * var(--u)) rgba(10, 50, 120, 0.3));
}

@keyframes logo-in {
  from { opacity: 0; transform: translateY(calc(-40 * var(--u))) scale(.82); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}