/* Kuoyu 个人站门户样式。深海氛围总入口。
   背景场景（鱼群/圣光/波光）由 scene.js 接管 #scene-canvas，本文件只管布局与静态海底渐变。 */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  color:#dff1f7;
  background:#04111c;
  overflow-x:hidden;
}
a{color:inherit}

.sea{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:radial-gradient(128% 92% at 44% -10%,#1a566f 0%,#0d3547 30%,#082030 64%,#04111c 100%);
}

/* 背景层 */
.scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.light{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(44% 58% at 52% -6%,rgba(150,220,255,.20),rgba(150,220,255,.05) 40%,transparent 66%)}
.vig{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(88% 78% at 42% 42%,transparent 46%,rgba(2,11,18,.5) 100%)}
.botfade{position:absolute;bottom:0;left:0;right:0;height:200px;pointer-events:none;z-index:1;
  background:linear-gradient(transparent,rgba(3,13,20,.62))}

/* 导航 */
.nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:28px 44px}
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;font-weight:500;letter-spacing:.22em;font-size:16px;color:#eafaff;text-decoration:none;white-space:nowrap}
.brand-mark{width:34px;height:34px;display:block;flex:0 0 34px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(95,215,236,.18))}
.lk{display:flex;gap:30px}
.lk a{color:#bcdfec;text-decoration:none;font-size:14px;letter-spacing:.1em;transition:color .2s}
.lk a:hover{color:#fff}

/* 主区 / hero */
.hero{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:0 44px;max-width:760px}
.kick{color:#5fdcec;font-size:12px;letter-spacing:.36em;font-weight:500;margin:0 0 20px;text-transform:uppercase}
.h1{font-size:clamp(40px,7vw,72px);line-height:1.04;font-weight:200;letter-spacing:.02em;color:#f3fbff;margin:0;
  text-shadow:0 6px 40px rgba(8,34,52,.5)}
.h1-line,.h1-main{display:block}
.h1-main{font-weight:400}
.h1-line,.h1-main{
  transition:opacity .52s cubic-bezier(.22,1,.36,1),transform .52s cubic-bezier(.22,1,.36,1),filter .52s cubic-bezier(.22,1,.36,1);
}
.sub{margin:26px 0 14px;color:#aed2de;font-size:clamp(14px,1.6vw,16px);line-height:1.66;max-width:440px;font-weight:300}
.motto{color:#6f97a6;font-size:13px;letter-spacing:.16em;margin:0 0 32px;font-weight:300}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:8px;font-size:14px;
  letter-spacing:.06em;text-decoration:none;font-weight:400;transition:all .25s}
.b1{background:linear-gradient(135deg,rgba(95,205,235,.30),rgba(40,120,180,.15));
  border:1px solid rgba(140,225,255,.45);color:#eafdff}
.b1:hover{background:linear-gradient(135deg,rgba(115,220,250,.45),rgba(50,140,200,.26))}
.b2{border:1px solid rgba(160,200,215,.3);color:#cfe7f0}
.b2:hover{border-color:rgba(200,235,250,.6);color:#fff}

/* 页脚 */
.foot{position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;padding:24px 44px 34px}
.scroll{color:#7099a8;font-size:11px;letter-spacing:.24em;display:flex;align-items:center;gap:12px}
.scroll i{width:1px;height:34px;background:linear-gradient(#7099a8,transparent)}
.soc{display:flex;align-items:center;gap:22px;font-size:13px;letter-spacing:.12em}
.soc a{color:#9cc0ce;text-decoration:none;transition:color .2s}
.soc a:hover{color:#fff}
.soc .qq{color:#5f7d8a;font-size:11px;letter-spacing:.06em}

@media(min-width:641px){
  .nav,.foot,.kick,.sub,.motto,.btns{
    transition:opacity .78s cubic-bezier(.22,1,.36,1),transform .78s cubic-bezier(.22,1,.36,1),filter .78s cubic-bezier(.22,1,.36,1);
  }
  .hero{
    width:min(760px,calc(100% - 112px));
    margin:0 auto;
    padding:0;
  }
  .sea.is-quiet:not(.is-awake) .nav,
  .sea.is-quiet:not(.is-awake) .foot,
  .sea.is-quiet:not(.is-awake) .kick,
  .sea.is-quiet:not(.is-awake) .sub,
  .sea.is-quiet:not(.is-awake) .motto,
  .sea.is-quiet:not(.is-awake) .btns{
    opacity:0;
    pointer-events:none;
    filter:blur(8px);
  }
  .sea.is-quiet:not(.is-awake) .nav{transform:translateY(-18px)}
  .sea.is-quiet:not(.is-awake) .foot{transform:translateY(18px)}
  .sea.is-quiet:not(.is-awake) .hero{
    align-items:center;
    text-align:center;
    width:min(980px,calc(100% - 112px));
  }
  .sea.is-quiet:not(.is-awake) .h1{
    position:relative;
    display:block;
    width:min(980px,calc(100vw - 112px));
    min-height:172px;
    transform:translateY(-8px);
    text-shadow:none;
    transition:filter .9s cubic-bezier(.22,1,.36,1);
  }
  .sea.is-waking:not(.is-awake) .h1{
    filter:saturate(1.03);
  }
  .sea.is-quiet .h1-line,
  .sea.is-quiet .h1-main{
    opacity:0;
    transform:translateY(8px);
    filter:blur(4px);
  }
  .sea.is-quiet.is-awake:not(.is-title-settling) .h1-line,
  .sea.is-quiet.is-awake:not(.is-title-settling) .h1-main{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
  .sea.is-quiet:not(.is-awake) .hero::after{
    content:"";
    position:absolute;
    left:50%;
    top:calc(50% + 58px);
    width:min(780px,72vw);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg,transparent,rgba(203,250,255,.18),rgba(103,217,233,.12),transparent);
    opacity:.34;
    transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1);
  }
  .sea.is-waking:not(.is-awake) .hero::after{
    opacity:.48;
    transform:translateX(-50%);
  }
}

@media(max-width:640px){
  .nav{padding:20px 22px 0;align-items:flex-start;flex-direction:column;gap:16px}
  .logo{font-size:15px;letter-spacing:.18em}
  .brand-mark{width:44px;height:44px;flex-basis:44px}
  .lk{width:100%;gap:18px;flex-wrap:wrap;justify-content:flex-start;padding-left:2px}
  .lk a{font-size:13px;letter-spacing:.08em}
  .hero{padding:0 22px 0;justify-content:center;min-height:560px}
  .kick{margin-bottom:24px}
  .sub{margin-top:30px;margin-bottom:18px;line-height:1.78}
  .motto{margin-bottom:36px}
  .btns{gap:20px}
  .btn{min-width:160px;justify-content:center}
  .foot{padding:18px 22px 24px}
  .soc .qq{display:none}
  .scroll{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}