/* ============================================================
   门户登录 · 山水大图 + 学术级入场动效
   说明：保留高级层次与艺术感；动效仅使用 opacity/transform，
   避免大面积实时模糊、clip-path 等易掉帧属性。
   ============================================================ */
:root{
  --ink:#15273d; --muted:#5f6b7d; --line:#e7ebf1; --gold:#b08a3e; --gold-deep:#9c7c43; --gold-br:#d8b878; --navy:#0e2a47;
  --serif:"Iowan Old Style","Palatino Linotype","Baskerville","Source Han Serif SC","Songti SC","STSong","Noto Serif SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box; margin:0}
html,body{min-height:100%}
body{font-family:var(--sans); color:var(--ink); position:relative; overflow-x:hidden;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
  background-color:#dfeaf3;
  background-image:url("/assets/img/mountains.jpg");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat}
a{text-decoration:none; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

.haze{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(244,249,252,.7), rgba(238,246,251,.5)),
    linear-gradient(112deg, rgba(0,51,102,.18), rgba(255,255,255,0) 38%, rgba(155,27,63,.16) 76%, rgba(255,255,255,0));
  animation:atmosphere 10s ease-in-out infinite alternate}

.stage{position:relative; z-index:2; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:calc(6vh + env(safe-area-inset-top)) 24px calc(6vh + env(safe-area-inset-bottom))}

.glass{width:100%; max-width:432px; position:relative; overflow:hidden; color:var(--ink); text-align:center;
  background:linear-gradient(156deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  border:1px solid rgba(255,255,255,.82); border-radius:24px; padding:34px 34px 28px;
  box-shadow:0 46px 96px -48px rgba(10,34,62,.6), 0 1px 0 rgba(255,255,255,.9) inset;
  transform-origin:top center; animation:panelIn .54s cubic-bezier(.18,.82,.22,1) .04s both}
.glass::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#003366,#ffffff,#9b1b3f); opacity:.88}
.glass::after{content:""; position:absolute; inset:-28% auto auto -44%; width:58%; height:156%; pointer-events:none;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.42) 44%, rgba(255,255,255,.12) 55%, transparent 72%);
  transform:translateX(-34%) rotate(8deg); animation:panelSheen 1.15s cubic-bezier(.22,.72,.22,1) .42s both}

.emblem{margin:0 auto 14px; display:block}
.cn{font-family:var(--serif); font-size:clamp(23px,2.3vw,27px); font-weight:600; letter-spacing:.02em; color:#11233a; line-height:1.26;
  display:flex; flex-wrap:wrap; justify-content:center; column-gap:.12em; animation:riseIn .5s ease .18s both}
.cn .cn-part{white-space:nowrap}
.en{font-family:var(--serif); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-top:11px; opacity:.95; line-height:1.7; animation:riseIn .5s ease .25s both}
.motto{font-family:var(--serif); letter-spacing:.44em; color:var(--gold); font-size:13px; margin-top:12px; animation:riseIn .5s ease .32s both}
.divider{height:1px; background:rgba(20,40,70,.12); margin:22px 0 20px; transform-origin:left center; animation:lineIn .55s ease .36s both}

.logos{display:flex; align-items:center; justify-content:center; gap:22px; margin:2px 0 18px; animation:riseIn .5s ease .12s both}
.logos img{height:42px; width:auto; max-width:78%; object-fit:contain}

.chead{display:flex; justify-content:space-between; align-items:center; text-align:left; margin-bottom:16px; animation:riseIn .45s ease .42s both}
.chead h2{font-family:var(--serif); font-size:19px; margin:0; color:#11233a}
.chead .hint{font-size:11.5px; color:var(--muted); margin-top:2px}

.lang-toggle{display:inline-flex; border-radius:999px; overflow:hidden; font-size:12px; background:rgba(255,255,255,.5); padding:3px}
.lang-toggle button{appearance:none; border:0; background:transparent; padding:5px 11px; cursor:pointer; color:var(--muted); border-radius:999px; font-family:var(--sans)}
.lang-toggle button.on{background:#fff; color:var(--navy); font-weight:600; box-shadow:0 1px 4px -1px rgba(20,40,70,.25)}

.seg{display:grid; grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,.58); border-radius:12px; padding:4px; margin-bottom:16px; animation:riseIn .42s ease .48s both}
.seg label{text-align:center; padding:9px 0; font-size:13px; color:var(--muted); border-radius:9px; cursor:pointer; transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}
.seg label.on{background:#fff; color:var(--navy); font-weight:600; box-shadow:0 2px 8px -3px rgba(20,40,70,.28)}
.seg input{position:absolute; opacity:0; pointer-events:none}

.f{margin-bottom:13px; text-align:left; animation:riseIn .42s ease .54s both}
.f + .f{animation-delay:.6s}
.f label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
.f input{width:100%; padding:12px 14px; border:1px solid rgba(20,40,70,.12); border-radius:11px; background:rgba(255,255,255,.74); font-size:14px; font-family:var(--sans); color:var(--ink); transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease}
.f input::placeholder{color:#9aa7b8}
.f input:focus{outline:none; background:#fff; border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,138,62,.16)}

.go{width:100%; margin-top:8px; padding:13px; background:var(--navy); color:#fff; border:0; border-radius:12px; font-size:14px; font-weight:600; letter-spacing:.08em; cursor:pointer; transition:background-color .14s ease,box-shadow .14s ease; position:relative; animation:riseIn .42s ease .66s both}
.go:hover{background:#0a2240; box-shadow:0 12px 26px -12px rgba(14,42,71,.7)}
.go.is-loading{color:rgba(255,255,255,.36); pointer-events:none}
.go.is-loading::after{content:""; position:absolute; left:50%; top:50%; width:17px; height:17px; margin:-8.5px 0 0 -8.5px; border-radius:50%; border:2px solid rgba(255,255,255,.42); border-top-color:#fff; animation:spin .72s linear infinite}
.err{display:none; color:#9a3b3b; font-size:12.5px; margin-top:10px; text-align:center}
.note{margin-top:15px; font-size:12.5px; color:var(--muted)}
.note a{color:var(--gold-deep); font-weight:600}

@media (max-width:560px){
  .seg{grid-template-columns:repeat(2,1fr)}
}

.lite-link{position:fixed; bottom:calc(14px + env(safe-area-inset-bottom)); right:calc(18px + env(safe-area-inset-right)); font-size:11.5px; color:#5d6b80; z-index:5}
.lite-link a{color:var(--gold-deep); cursor:pointer; text-decoration:underline}

@keyframes panelIn{0%{opacity:0; transform:translateY(-24px) scale(.985)}
  100%{opacity:1; transform:translateY(0) scale(1)}}
@keyframes riseIn{0%{opacity:0; transform:translateY(10px)}100%{opacity:1; transform:translateY(0)}}
@keyframes lineIn{0%{opacity:0; transform:scaleX(.12)}100%{opacity:1; transform:scaleX(1)}}
@keyframes panelSheen{0%{opacity:0; transform:translateX(-34%) rotate(8deg)}34%{opacity:.9}100%{opacity:0; transform:translateX(260%) rotate(8deg)}}
@keyframes atmosphere{0%{opacity:.92}100%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* 简版 / 弱网 / 降动效 */
body.lite{background:linear-gradient(180deg,#eaf2f8,#dbe7f1)}
body.lite .haze{display:none}
body.lite .glass{background:#fff; animation:none}
body.no-anim .glass,body.no-anim .glass::after,body.no-anim .stage::before,body.no-anim .cn,body.no-anim .en,body.no-anim .motto,body.no-anim .divider,body.no-anim .logos,body.no-anim .chead,body.no-anim .seg,body.no-anim .f,body.no-anim .go{animation:none}
@media (prefers-reduced-motion:reduce){.glass,.glass::after,.stage::before,.cn,.en,.motto,.divider,.logos,.chead,.seg,.f,.go{animation:none}}

@media (max-width:520px){ .glass{padding:28px 22px} .cn{font-size:24px; column-gap:.18em} input,button{font-size:16px} }