/* ===== Scene 01 · The Gate · 门（返工 v0.2）=====
   施工图镜头：黑 → 金光涨大 → 建筑轮廓 →「观」→ 静 → 门槛 → 进入
   返工修复：
   1) 金光更明显 + 加建筑剪影（施工图要求的"远处建筑轮廓"）
   2) 每个镜头清晰停顿，层次分明（不再"只有一个观字"）
   3) 点击 = 进入过渡（不黑屏消失，显示"进入 Great Hall"） */

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%; overflow:hidden;
  background:#050709;
  cursor:pointer;
}
body {
  display:flex; align-items:center; justify-content:center;
  position:relative;
  font-family:'Noto Serif SC','Source Han Serif SC','SimSun',serif;
}

/* —— 镜头 1·2：黑(0–3s) → 金光涨大(3–7s) —— */
.light {
  position:absolute; top:50%; left:50%;
  width:120vmin; height:120vmin;
  transform:translate(-50%,-50%) scale(0.15);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,217,137,0.75) 0%,
    rgba(232,199,122,0.35) 28%,
    rgba(232,199,122,0.10) 50%,
    transparent 68%);
  opacity:0;
  pointer-events:none; z-index:1;
  animation: light 20s ease forwards;
}
@keyframes light {
  0%, 15%    { opacity:0; transform:translate(-50%,-50%) scale(0.15); }      /* 黑 3s */
  15%, 35%   { opacity:1; transform:translate(-50%,-50%) scale(0.55); }      /* 金光涨大 3–7s */
  35%, 50%   { opacity:0.55; transform:translate(-50%,-50%) scale(0.85); }   /* 稳，照建筑 */
  50%, 70%   { opacity:0.18; transform:translate(-50%,-50%) scale(1.0); }    /* 收束让位观字 */
  70%, 100%  { opacity:0.10; }                                               /* 余光 */
}

/* —— 镜头 3：建筑轮廓（5–9s 在金光里浮现）—— */
.building {
  position:absolute; top:36%; left:50%;               /* 上移：远景，不与观字争中心 */
  width:min(340px, 50vw); height:auto;                 /* 稍小：远 */
  transform:translate(-50%,-50%);
  fill:none; stroke:#FFD989; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0;
  filter:drop-shadow(0 0 14px rgba(255,217,137,0.55));
  pointer-events:none; z-index:2;
  animation: building 20s ease forwards;
}
@keyframes building {
  0%, 24%   { opacity:0; transform:translate(-50%,-50%) scale(0.92); }
  24%, 40%  { opacity:0.9; transform:translate(-50%,-50%) scale(1.0); }   /* 5–8s 显现 */
  40%, 48%  { opacity:0; transform:translate(-50%,-50%) scale(1.0); }     /* 8–9.6s 完全淡出 */
  48%, 100% { opacity:0; }                                                /* 观字浮现前已消失 */
}

/* —— 镜头 4：金光凝成「观」（11s 浮现，静）—— */
.char {
  position:relative; z-index:3;
  font-size:clamp(140px, 28vw, 380px);
  font-weight:300;
  color:#FFE9A8;
  opacity:0;
  transform:scale(0.8);
  text-shadow:
    0 0 50px rgba(255,217,137,0.8),
    0 0 120px rgba(232,199,122,0.4);
  animation: char 20s ease forwards;
}
@keyframes char {
  0%, 55%   { opacity:0; transform:scale(0.8); }      /* 等建筑完全消失(48%)，不重叠 */
  55%, 65%  { opacity:1; transform:scale(1.0); }      /* 11s 浮现 */
  65%, 100% { opacity:1; transform:scale(1.0); }      /* 静 */
}

/* —— 镜头 5：底部金线门槛（16s 浮起）—— */
.threshold {
  position:absolute; bottom:16vh; left:50%;
  width:0; height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, #FFE9A8, transparent);
  opacity:0; z-index:3;
  animation: threshold 20s ease forwards;
}
.threshold-glow {
  position:absolute; bottom:14vh; left:50%;
  width:0; height:60px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(255,217,137,0.25), transparent 70%);
  opacity:0; z-index:2; pointer-events:none;
  animation: threshold 20s ease forwards;
}
@keyframes threshold {
  0%, 78%   { width:0; opacity:0; }
  78%, 100% { width:30vw; opacity:0.95; }     /* 16s+ 门槛浮现 */
}

/* —— 进入过渡（点击后；不黑屏消失，给"进入 Great Hall"提示）—— */
.transition {
  position:fixed; inset:0; z-index:10;
  background:#050709;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:40px;
  opacity:0; visibility:hidden;
  transition:opacity 1.2s ease;
}
.t-char {
  font-size:clamp(80px,16vw,200px); color:#FFE9A8; font-weight:300;
  text-shadow:0 0 40px rgba(255,217,137,0.6);
}
.t-line { width:80px; height:1px; background:#FFD989; opacity:0.7; }
.t-text { color:#C8A96A; font-size:clamp(15px,2.4vw,22px); letter-spacing:8px; }

/* —— 点击 = 进入：原镜头淡出，过渡层淡入 —— */
body.entered .light,
body.entered .building,
body.entered .char,
body.entered .threshold,
body.entered .threshold-glow {
  animation: fadeOut 1.2s ease forwards;
}
body.entered .transition {
  opacity:1; visibility:visible;
  animation: breath 4s ease-in-out infinite 1.2s;
}
@keyframes fadeOut { to { opacity:0; } }
@keyframes breath { 0%,100%{opacity:0.85;} 50%{opacity:1;} }

@media (prefers-reduced-motion: reduce) {
  .light,.building,.char,.threshold,.threshold-glow { animation-duration:6s !important; }
}