
/* 站酷庆科黄油体（OFL 开源），只保留页面用到的几十个字，约 7KB */
@font-face{font-family:JC;src:url(/_jc/qingke-v1.woff2) format("woff2");font-display:swap}
:root{color-scheme:dark;--ease:cubic-bezier(.16,1,.3,1);--cream:#fff3e2;
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:#fff;background:#0b2f72}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:#0b2f72;overflow-x:hidden}a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* 滚动舞台：外框比屏幕高 170svh，里面的 .stage 吸在屏幕上，滚动只推动动效（--p/--n/--r 由 home.js 写入） */
.pin{height:170vh;height:170svh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;height:100dvh;overflow:hidden;isolation:isolate}
.layer{will-change:transform;transition:transform .9s var(--ease)}

/* 天空：深蓝 → 地平线浅蓝，再加一团很淡的暖光，呼应校卡的光 */
.sky{position:absolute;inset:0;z-index:-3;
  background:radial-gradient(60% 40% at 50% 78%,rgba(255,226,180,.35),transparent 70%),
             linear-gradient(180deg,#0a2a66 0%,#164c9c 38%,#3f7fcf 70%,#9cc7ee 100%)}

/* 巨字：半透明、偏天空色，像印在天上；从山后升起 */
/* 巨字：长体、半透明、偏天空色；框的上沿贴着导航，下沿伸到山坡后面 */
.giant{position:absolute;z-index:-2;left:clamp(14px,4vw,56px);right:clamp(14px,4vw,56px);top:calc(env(safe-area-inset-top,0px) + 76px);bottom:22svh}
.giant svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  translate:0 30%;opacity:0;animation:rise 1.4s var(--ease) forwards}
.giant text{font-family:JC,system-ui,"PingFang SC","Microsoft YaHei",sans-serif;font-size:100px;fill:rgba(205,228,255,.42)}
@keyframes rise{to{translate:0 0;opacity:1}}

/* 山坡前景：贴底，铺满宽度 */
.hill{position:absolute;left:0;right:0;bottom:-2%;z-index:-1;display:block}
.hill img{display:block;width:100%;height:auto;max-height:70svh;object-fit:cover;object-position:50% 100%;
  opacity:0;transform:translateY(4%);animation:rise 1.2s .1s var(--ease) forwards}

/* 中间的 .com：奶油色斜体，压在巨字上 */
.title{position:absolute;inset:0;display:grid;place-items:center;margin:0;pointer-events:none;padding-bottom:28svh}
.script{font:400 min(15vw,24svh)/1 JC,Georgia,serif;color:var(--cream);letter-spacing:.01em;
  text-shadow:0 4px 30px rgba(255,200,140,.35);opacity:0;animation:fade 1s .7s var(--ease) forwards}
@keyframes fade{to{opacity:1}}

/* 顶栏 */
.top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 22px) clamp(18px,5vw,64px) 0;z-index:4}
.brand{font-family:JC,system-ui,sans-serif;font-size:22px;letter-spacing:.02em}.brand span{opacity:.6}
.links{display:flex;gap:clamp(18px,3.5vw,44px);font-size:15px;font-weight:500}
.links a{position:relative;padding:6px 0;opacity:.85;transition:opacity .15s}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cream);transform:scaleX(0);transition:transform .15s var(--ease)}
.links a:hover{opacity:1}.links a:hover::after{transform:scaleX(1)}

/* 底部玻璃胶囊（手机拇指区） */
.dock{display:none}
.dock a{flex:1;text-align:center;padding:14px 6px;border-radius:99px;font-size:15px;font-weight:650;transition:background .15s,transform .15s var(--ease)}
.dock a:active{background:rgba(255,255,255,.28);transform:scale(.96)}
/* 非官方声明：左上角 logo 下面的小字，不抢眼；页脚还有完整一句 */
.note{display:block;margin-top:5px;font:500 10px/1 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.14em;color:rgba(255,255,255,.5)}
.foot{margin:26px 0 0;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.4);text-align:center}

/* 往下滑提示：轻轻上下浮动 */
.down{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.down i{font-style:normal;font-size:18px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* 竖屏手机（9:16、9:21）：巨字 2×2，导航挪到底部 */
@media(max-aspect-ratio:1/1){
  /* 方案 C：字保持正常比例放上面，发光校卡放大成下半屏主角。
     前景图宽 230vw（高 345vw）、贴底 -6svh：校卡上沿在图高 67% 处 → 距屏幕底 114vw - 6svh；
     巨字下沿比校卡上沿低 8vw，藏进校卡和光晕后面，保留遮挡关系；
     9:21 多出来的高度留在字上方的天空里 */
  .stage{--gw:calc(100vw - 28px);--gh:calc(var(--gw) * .6);--gb:calc(106vw - 6svh)}
  .giant{top:auto;left:14px;right:14px;height:var(--gh);bottom:var(--gb)}
  /* .com 像参考图的手写签名一样压在巨字中部 */
  .title{inset:auto 0 calc(var(--gb) + var(--gh) * .3) 0;padding:0}.script{font-size:min(20vw,11svh)}
  .links{display:none}
  .dock{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 34px);z-index:2;display:flex;gap:4px;padding:5px;border-radius:99px;
    background:rgba(20,40,70,.28);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
  .down{bottom:calc(env(safe-area-inset-bottom,0px) + 112px)}
  /* 竖版图里山坡只占底部 40%，放大到 2.3 倍屏宽、贴底居中，校卡才能当主角 */
  .hill{left:50%;right:auto;width:230vw;margin-left:-115vw;bottom:-6svh}
  .hill img{max-height:none}
}
/* 注册层：光铺满后在原地浮现。--r 0→1 由 home.js 写入；没浮现出来时不接收点击 */
.night{position:absolute;inset:0;z-index:-3;pointer-events:none;opacity:var(--n);
  background:radial-gradient(60% 36% at 50% 46%,rgba(255,226,180,.22),transparent 72%),linear-gradient(180deg,#0d2c5e 0%,#0a2a66 100%)}
.join{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 64px) 16px calc(env(safe-area-inset-bottom,0px) + 64px);
  opacity:var(--r);scale:calc(.94 + var(--r) * .06);pointer-events:none}
.join.on{pointer-events:auto}
/* 整块（倒计时 + 卡片 + 旧墙入口 + 声明）作为一组，在屏幕正中 */
.joinbox{margin:auto;width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center}
.joinbox .below{display:flex;flex-direction:column;align-items:center;margin-top:10px}
.gone{display:none!important}
/* 已登录的欢迎卡片：比 iframe 里的更高，三个入口 */
.me{width:100%;background:#f6f7fb;color:#0e1a33;border-radius:28px;padding:26px 22px 22px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.me-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.me-av{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font:700 24px/1 system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#365fc9,#6e9ae8);flex:none}
.me h2{margin:0;font-size:22px;line-height:1.25;word-break:break-all}
.go{display:block;margin-top:12px;padding:17px 20px;border-radius:20px;background:#365fc9;color:#fff;text-align:center;font-size:17px;font-weight:700;transition:transform .15s var(--ease),background .15s}
.go:active{transform:scale(.98)}
.join .foot{margin-top:10px}
/* color-scheme 要和 iframe 里一致（light），否则浏览器会给 iframe 垫一层白底，透明背景就没了 */
.join .old{color:rgba(255,255,255,.62);font-size:13px;text-decoration:none;margin-top:14px;padding:6px 10px}
.join .old:hover{color:#fff}
/* 倒计时：玻璃小牌，数字大、名字小 */
.cd{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 22px;max-width:460px;width:100%}
.cd-i{flex:1 1 120px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 10px;border-radius:18px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cd-t{font-size:13px;color:rgba(255,255,255,.75)}
.cd-n{font-size:13px;color:var(--cream)}.cd-n b{font-size:30px;font-weight:800;margin-right:3px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.reg-frame{display:block;width:100%;max-width:460px;height:640px;border:0;background:transparent;color-scheme:light;transition:height .25s var(--ease)}

/* 滚动动效（选项二：各层散开）。--p 是滚动进度 0→1，--n 夜空淡入，--r 注册卡片浮现（都由 home.js 写入）。
   天空和巨字、.com 往上飘走并淡出；山坡连同校卡往下沉走；顶栏不动；等它们散开，正中间浮出注册卡片。
   只动 translate/scale/opacity，不碰 transform（transform 留给鼠标/陀螺仪视差）。
   ⚠ 产品决定：所有动效对所有人一模一样——不要加 prefers-reduced-motion 判断，也不要做“简化版”。 */
.stage{--p:0;--n:0;--r:0}
.giant{translate:0 calc(var(--p) * -62svh);scale:calc(1 + var(--p) * .18);transform-origin:50% 50%;opacity:calc(1 - var(--p) * 3)}
.title{translate:0 calc(var(--p) * -80svh);opacity:calc(1 - var(--p) * 4)}
.hill{translate:0 calc(var(--p) * 68svh);scale:calc(1 + var(--p) * .12);transform-origin:50% 100%;opacity:calc(1 - (var(--p) - .2) * 2.4)}
.down{opacity:calc(1 - var(--p) * 9)}
.dock{opacity:calc(1 - var(--p) * 7)}
