@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Playfair+Display:ital,wght@1,700&display=swap');

:root{--ink:#f4efe5;--muted:#aaa397;--accent:#dbff54;--panel:#1a1916;--line:rgba(255,255,255,.13)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#11100e;color:var(--ink);font-family:"Noto Sans SC",sans-serif}
body{min-height:100svh;overflow:hidden;background:radial-gradient(circle at 76% 28%,#33301f 0,transparent 34%),#11100e}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.link-rail{position:fixed;z-index:5;left:0;top:50%;width:230px;transform:translateY(-50%);display:grid;gap:8px}
.link-rail a{display:flex;align-items:center;gap:18px;width:100%;padding:17px 22px;color:var(--ink);background:rgba(26,25,22,.87);border:1px solid var(--line);border-left:0;text-decoration:none;backdrop-filter:blur(12px);transform:translateX(-110%);animation:push-in .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.35s + var(--order)*.11s);transition:width .25s,background .25s,color .25s}
.link-rail a:nth-child(even){width:88%}.link-rail a:hover,.link-rail a:focus-visible{width:110%;background:var(--accent);color:#111;outline:0}.link-rail span{font:700 11px/1 monospace;color:#8e897f}.link-rail a:hover span{color:#111}
.hero{min-height:100svh;margin-left:230px;padding:clamp(28px,5vw,80px);display:grid;grid-template-columns:minmax(280px,.8fr) minmax(360px,1.2fr);align-items:center;gap:clamp(30px,6vw,100px)}
.copy{position:relative;z-index:2;animation:fade-in .8s .25s both}.eyebrow{font-size:11px;letter-spacing:.26em;color:var(--accent)}h1{font-size:clamp(48px,7vw,110px);line-height:.91;letter-spacing:-.055em;margin:20px 0 28px;white-space:nowrap}h1 em{font-family:"Playfair Display",serif;font-weight:700;color:var(--accent)}.intro{max-width:390px;color:var(--muted);font-size:clamp(14px,1.3vw,18px);line-height:1.8}
.visual{position:relative;margin:0;height:min(76vh,780px);min-height:440px;display:flex;align-items:flex-end;justify-content:center;transform:translateY(115%);animation:rise-up 1.15s .25s cubic-bezier(.16,.88,.23,1) forwards}.visual img{position:relative;z-index:1;display:block;max-width:100%;max-height:90%;object-fit:contain;filter:drop-shadow(0 28px 50px rgba(0,0,0,.55));border-radius:24px}.glow{position:absolute;width:72%;aspect-ratio:1;bottom:7%;border-radius:50%;background:var(--accent);filter:blur(90px);opacity:.12}.visual figcaption{position:absolute;z-index:2;right:2%;bottom:5%;padding:14px 18px;background:rgba(17,16,14,.82);border:1px solid var(--line);backdrop-filter:blur(12px)}.visual figcaption span,.visual figcaption strong{display:block}.visual figcaption span{font-size:10px;letter-spacing:.18em;color:var(--accent)}.visual figcaption strong{margin-top:5px;font-size:13px}
@keyframes push-in{to{transform:translateX(0)}}@keyframes rise-up{to{transform:translateY(0)}}@keyframes fade-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:760px){body{overflow:auto}.link-rail{top:50%;width:132px;gap:5px}.link-rail a{padding:13px 12px;gap:8px;font-size:12px}.link-rail a:nth-child(even){width:88%}.link-rail a:hover,.link-rail a:focus-visible{width:105%}.hero{margin-left:92px;padding:26px 16px 0;min-height:100svh;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:4px;overflow:hidden}.copy{padding-top:5vh}.eyebrow{font-size:9px}h1{font-size:clamp(38px,12vw,58px);white-space:normal;margin:14px 0}.intro{font-size:13px;line-height:1.6}.visual{min-height:0;height:48svh}.visual img{max-height:96%;border-radius:18px}.visual figcaption{right:0;bottom:4%;padding:10px 12px}.visual figcaption strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.link-rail a,.visual,.copy{animation:none;transform:none}}

/* 鲜艳、非纯色的往返动态背景 */
body{
  position:relative;
  background:linear-gradient(125deg,#ff2d75 0%,#7a32ff 28%,#006eff 52%,#00d9b0 76%,#ffd53d 100%);
  background-size:320% 320%;
  animation:color-tide 7s ease-in-out infinite alternate;
}
body::before{
  content:"";
  position:fixed;
  z-index:0;
  inset:-28%;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 35%,rgba(255,238,0,.88) 0,rgba(255,117,0,.48) 16%,transparent 38%),
    radial-gradient(circle at 78% 65%,rgba(0,255,224,.82) 0,rgba(0,105,255,.48) 19%,transparent 42%),
    radial-gradient(circle at 52% 28%,rgba(255,38,190,.68) 0,transparent 36%);
  filter:blur(30px) saturate(135%);
  transform:translate3d(-6%,-3%,0) rotate(-5deg) scale(1.06);
  animation:aurora-drift 6s ease-in-out infinite alternate;
}
.hero{position:relative;z-index:1}
.link-rail a{background:rgba(21,15,38,.68);box-shadow:0 12px 30px rgba(24,7,63,.18)}
@keyframes color-tide{
  0%{background-position:0% 0%}
  50%{background-position:100% 65%}
  100%{background-position:15% 100%}
}
@keyframes aurora-drift{
  0%{transform:translate3d(-12%,-8%,0) rotate(-10deg) scale(1.02);filter:blur(30px) saturate(145%) hue-rotate(0deg)}
  50%{transform:translate3d(10%,12%,0) rotate(8deg) scale(1.18);filter:blur(38px) saturate(175%) hue-rotate(35deg)}
  100%{transform:translate3d(16%,-7%,0) rotate(-5deg) scale(1.08);filter:blur(26px) saturate(155%) hue-rotate(-25deg)}
}
@media(max-width:760px){
  body{background-size:250% 250%;animation-duration:9s}
  body::before{inset:-18%;filter:blur(24px) saturate(125%);animation-duration:8s}
}
@media(prefers-reduced-motion:reduce){body,body::before{animation:none}}