/* ══════════════════════════════════════════════════════════════════════
   阿宁门户 · 海洋首屏（ocean.css）
   2026-10-03 阿宁：照主子发的参考（予成 AI 产品设计 那条抖音的
   「滚动即下潜」首屏）重做。要点：
   ① 首屏钉住两屏高，滚动时「页面不动、水从下往上涨」，先把文案
      的下半行淹掉，再整行、再吞掉按钮，最后镜头穿到水下；
   ② 水体层带 backdrop-filter，被淹过的文字透出折射/发虚的水下感；
   ③ 底层是真海景视频（Wan2.2 本地生成），视频起不来时自动退到
      纯 CSS/SVG 画的同一片海（离线也不空）；
   ④ 配色按主子铁律：浅蓝 → 暖金 → 浅青 → 白，没有深藏蓝阶梯。
   —— 只新增样式，不覆盖 style.css/theme.css 里应用区的任何类名。
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --oc-sky1:#dcefff; --oc-sky2:#f8e9d2; --oc-sky3:#ffd9a8;
  --oc-sea1:#8fdcf0; --oc-sea2:#55c2dd; --oc-sea3:#2ba0c6; --oc-sea4:#0e7ba4;
  --oc-deep1:#0d6f97; --oc-deep2:#1689ae; --oc-deep3:#6fd0e4; --oc-deep4:#dff4f9;
  --oc-ink:#0b2c40; --oc-ink2:#2f6079;
  --oc-serif:"Songti SC","STSong","Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC",
    "Source Han Serif CN","STZhongsong","SimSun",Georgia,"Times New Roman",serif;
}

/* 页面锚点滚动留白：从首屏「进入门户」跳下来时别贴边 */
#app{scroll-margin-top:0}

/* ── ① 首屏外层：钉住两屏高 ───────────────────────────────────────── */
.hero-pin{position:relative;height:200vh;height:200svh}
.hero{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;
  background:#0e7ba4}

/* 兜底：纯 CSS 画的海（视频没起来 / 省流 / 减少动态时用） */
.fallback-sea{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,var(--oc-sky1) 0%,#ecf4ff 20%,var(--oc-sky2) 50%,var(--oc-sky3) 65%,#ffcf98 69.6%,#a8e3f1 69.9%,var(--oc-sea1) 100%)}
.fallback-sea .sun{position:absolute;left:61%;top:47%;width:min(230px,26vw);height:min(230px,26vw);
  border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,#fffdf4 0%,#fff0cd 36%,rgba(255,214,150,.5) 62%,rgba(255,200,130,0) 78%)}
.fallback-sea .glare{position:absolute;left:0;right:0;top:58%;height:16%;
  background:linear-gradient(180deg,rgba(255,240,206,.8),rgba(255,240,206,0));mix-blend-mode:screen}
.fallback-sea .waves{position:absolute;left:-6%;right:-6%;top:54%;height:56%}
.fallback-sea .waves svg{position:absolute;left:0;bottom:0;width:112%;height:100%;display:block;
  transform-origin:50% 100%}

/* 真海景视频（起播后淡入；失败就一直保持透明，露出上面那层插画） */
.hero-vid{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease;transform-origin:50% 68%;will-change:transform,filter}
.hero-vid.ready{opacity:1}

/* 可读性薄纱：顶部压深给导航，左下压深给文案，底部过渡到水面 */
.hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,35,55,.42) 0%,rgba(5,35,55,.14) 22%,rgba(5,35,55,0) 44%),
    linear-gradient(0deg,rgba(4,42,62,.52) 0%,rgba(4,42,62,.16) 26%,rgba(4,42,62,0) 54%),
    radial-gradient(130% 86% at 10% 90%,rgba(3,32,48,.60) 0%,rgba(3,32,48,0) 64%)}

/* 水面之上的柔光（不是扫描线：用大块柔光斑，避免任何细密条纹破坏摄影感） */
.hero-caustic{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.9;
  background:
    radial-gradient(58% 40% at 18% 78%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(46% 34% at 72% 92%,rgba(255,246,222,.14) 0%,rgba(255,246,222,0) 72%),
    radial-gradient(70% 50% at 50% 100%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 78%)}

/* ── 顶部导航 ───────────────────────────────────────────────────── */
.hero .topbar{position:absolute;left:0;right:0;top:0;z-index:7;display:flex;align-items:center;
  gap:22px;padding:20px clamp(18px,3.4vw,40px)}
.hero .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;
  font-size:14.5px;letter-spacing:.16em;text-decoration:none}
.hero .brand img{width:30px;height:30px;border-radius:9px;display:block;
  box-shadow:0 6px 18px rgba(3,40,60,.35)}
.hero .brand small{display:block;font-size:9.5px;letter-spacing:.3em;font-weight:500;
  color:rgba(255,255,255,.72);margin-top:2px}
.hero nav.onav{display:flex;gap:24px;margin:0 auto;font-size:13.5px}
.hero nav.onav button{position:relative;background:none;border:0;padding:4px 2px;cursor:pointer;
  color:rgba(255,255,255,.86);font:inherit;letter-spacing:.04em;font-family:inherit}
.hero nav.onav button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform .22s}
.hero nav.onav button:hover{color:#fff}
.hero nav.onav button:hover::after{transform:scaleX(1)}
.hero .pillbtn{border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:9px 20px;
  font-size:13px;letter-spacing:.05em;color:#fff;background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background .2s,transform .2s}
.hero .pillbtn:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.hero .hero-tip{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:7;
  font-size:11px;letter-spacing:.26em;color:rgba(255,255,255,.72)}

/* ── 首屏文案 ───────────────────────────────────────────────────── */
.hero-copy{position:absolute;left:clamp(18px,3.4vw,40px);bottom:15%;z-index:4;
  max-width:min(600px,54vw);color:#fff;will-change:transform,opacity,filter}
.hero-copy .eyebrow{font-size:12px;letter-spacing:.32em;font-weight:600;
  color:#ffe9c2;margin-bottom:14px;text-shadow:0 1px 10px rgba(3,40,60,.5)}
.hero-copy h1{font-family:var(--oc-serif);font-weight:400;margin:0;color:#fff;
  font-size:clamp(42px,6.4vw,86px);line-height:1.04;letter-spacing:.01em;
  text-shadow:0 2px 10px rgba(3,40,60,.55),0 8px 34px rgba(3,40,60,.45)}
.hero-copy p{margin:16px 0 0;font-size:clamp(13.5px,1.15vw,15px);line-height:1.85;
  color:rgba(255,255,255,.97);max-width:430px;
  text-shadow:0 1px 6px rgba(3,34,52,.75),0 2px 18px rgba(3,34,52,.6)}
.hero-copy .cta{display:flex;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap}
.hero-copy .btn{background:#fff;color:#0b3a54;border:0;border-radius:999px;padding:13px 26px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 26px rgba(3,40,60,.28);
  transition:transform .2s,box-shadow .2s}
.hero-copy .btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(3,40,60,.34)}
.hero-copy .play{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;
  background:rgba(255,255,255,.14);backdrop-filter:blur(4px);flex:0 0 auto}
.hero-copy .watch{font-size:13.5px;color:rgba(255,255,255,.92)}

.hero .corner{position:absolute;z-index:7;font-size:11px;letter-spacing:.2em;
  color:rgba(255,255,255,.9);display:flex;align-items:center;gap:10px}
.hero .c-bl{left:clamp(18px,3.4vw,40px);bottom:24px}
.hero .c-bl .ring{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;font-size:10px}
.hero .c-br{right:clamp(18px,3.4vw,40px);bottom:24px}
.hero .c-br .arw{display:inline-block;animation:oc-bob 1.8s ease-in-out infinite}
@keyframes oc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* 湿地层：被水淹到的那一段用模糊+轻微放大的同一份文案叠在水体之上 */
.hero-copy.wet{z-index:6;pointer-events:none;opacity:0;
  filter:blur(5px) saturate(1.25) brightness(1.06);
  transform:scale(1.012);
  transition:opacity .12s linear}
.water{position:absolute;left:0;right:0;bottom:0;z-index:5;height:0;pointer-events:none;
  overflow:visible;will-change:height;
  box-shadow:0 -18px 50px rgba(8,80,110,.28)}
.water .water-body{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(198,238,249,.28) 0%,rgba(146,214,236,.52) 7%,
    rgba(72,176,208,.74) 18%,rgba(28,140,178,.90) 40%,rgba(14,123,164,.96) 70%,var(--oc-deep1) 100%);
  backdrop-filter:blur(5px) saturate(1.3) brightness(1.05);
  -webkit-backdrop-filter:blur(5px) saturate(1.3) brightness(1.05)}
.water .water-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .7s ease}
.water .water-vid.ready{opacity:.72}
/* 水头：三层浪，别做成一条平直横线（豆包验收点：平线会显出「贴片感」） */
.water .water-top{position:absolute;left:-8%;right:-8%;top:-2px;height:58px;
  transform:translateY(-92%)}
.water .water-top svg{position:absolute;left:0;bottom:0;width:116%;display:block}
.water .water-top .w-back{height:58px;opacity:.55}
.water .water-top .w-mid{height:40px;opacity:.8}
.water .water-top .w-front{height:26px;opacity:1}
.water .water-foam{position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0))}
/* 水满后的提示：别让最后一段看起来像「卡住/空屏」 */
.water .water-cue{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
  z-index:6;opacity:0;transition:opacity .5s ease;pointer-events:none;
  color:#eaf8ff;font-size:12px;letter-spacing:.26em;text-shadow:0 1px 10px rgba(3,40,60,.5)}

/* ── ② 水下段 ───────────────────────────────────────────────────── */
.under{position:relative;min-height:100svh;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,4vh,44px);
  padding:clamp(64px,11vh,120px) 0 clamp(40px,8vh,80px);
  background:linear-gradient(180deg,var(--oc-deep1) 0%,var(--oc-deep2) 34%,#3fb0cd 68%,#9fe2ef 88%,#eef9fc 100%)}
.under-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;transition:opacity 1s ease}
.under-vid.ready{opacity:.85}
.under-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,70,98,.62) 0%,rgba(6,70,98,.34) 40%,rgba(6,70,98,.18) 70%,rgba(226,246,250,.9) 100%)}
.under .beams{position:absolute;inset:0;z-index:1;opacity:.85;pointer-events:none;
  background:
    linear-gradient(74deg,rgba(255,255,255,.26) 0 7%,rgba(255,255,255,0) 7.6% 19%,rgba(255,255,255,.16) 19.6% 25%,rgba(255,255,255,0) 25.6%),
    linear-gradient(104deg,rgba(255,255,255,.18) 0 5%,rgba(255,255,255,0) 5.6% 27%,rgba(255,255,255,.22) 27.6% 32%,rgba(255,255,255,0) 32.6%);
  filter:blur(16px)}
.under .bokeh{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8;
  background:
    radial-gradient(10px 10px at 21% 68%,rgba(255,228,178,.85),transparent 70%),
    radial-gradient(6px 6px at 62% 80%,rgba(255,238,196,.8),transparent 70%),
    radial-gradient(12px 12px at 79% 60%,rgba(255,230,180,.72),transparent 70%),
    radial-gradient(5px 5px at 39% 86%,rgba(255,242,206,.75),transparent 70%),
    radial-gradient(8px 8px at 88% 74%,rgba(255,228,178,.7),transparent 70%)}
.under-in{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;
  padding:0 clamp(18px,3.4vw,40px)}
.under-copy .eyebrow{font-size:11.5px;letter-spacing:.3em;font-weight:600;
  color:#eaf8ff;text-shadow:0 1px 8px rgba(4,50,70,.5)}
.under-copy h2{font-family:var(--oc-serif);font-weight:400;margin:12px 0 0;
  font-size:clamp(28px,3.5vw,48px);line-height:1.16;text-shadow:0 2px 16px rgba(4,50,70,.45)}
.under-copy p{margin:14px 0 0;font-size:14px;line-height:1.95;color:#f2fbff;
  max-width:520px;text-shadow:0 1px 10px rgba(4,50,70,.45)}
/* 实时指标：一条轻量横排，不做成大卡片，免得和水下氛围抢戏 */
.under-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px;margin-top:24px}
.ustat{border:0;background:none;padding:0;cursor:pointer;font-family:inherit;
  display:flex;align-items:baseline;gap:8px;color:#fff;
  border-bottom:1px dashed rgba(255,255,255,.35);padding-bottom:3px;
  transition:opacity .18s}
.ustat:hover{opacity:.78}
.ustat .k{font-family:var(--oc-mono,"SF Mono",ui-monospace,Menlo,monospace);
  font-size:23px;font-weight:600;letter-spacing:-.5px}
.ustat .k small{font-size:12px;opacity:.78;margin-left:2px}
.ustat .l{font-size:12.5px;color:rgba(255,255,255,.86)}
.ustat .n{font-size:11.5px;color:rgba(255,255,255,.66)}

/* 水下六个入口玻璃卡 */
.under-entries{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;
  padding:0 clamp(18px,3.4vw,40px);
  display:grid;gap:12px;grid-template-columns:repeat(6,minmax(0,1fr))}
.oentry{border:1px solid rgba(255,255,255,.4);border-radius:16px;padding:14px 15px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;cursor:pointer;font-family:inherit;text-align:left;
  transition:transform .18s,background .18s,box-shadow .18s}
.oentry:hover{transform:translateY(-3px);background:rgba(255,255,255,.26);
  box-shadow:0 14px 30px rgba(4,50,70,.2)}
.oentry .t{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.oentry .d{font-size:11.5px;color:rgba(255,255,255,.82);margin-top:6px;line-height:1.6}
.oentry .i{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.24);font-size:12px;flex:0 0 auto}
.under-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  font-size:11.5px;letter-spacing:.2em;color:#0b4c66;background:rgba(255,255,255,.6);
  border-radius:999px;padding:7px 16px;backdrop-filter:blur(6px);cursor:pointer;border:0;
  font-family:inherit}

/* ── ②b 水下第二屏：六个入口 ────────────────────────────────────── */
.under2{position:relative;overflow:hidden;
  padding:clamp(46px,9vh,110px) 0 clamp(54px,10vh,120px);
  background:linear-gradient(180deg,#0d6f97 0%,#1a8fb4 32%,#57c0da 64%,#b9e8f2 86%,#eef9fc 100%)}
.under2 .head{max-width:1200px;margin:0 auto 22px;padding:0 clamp(18px,3.4vw,40px);color:#fff}
.under2 .head h3{margin:0;font-family:var(--oc-serif);font-weight:400;
  font-size:clamp(20px,2.3vw,32px);text-shadow:0 2px 14px rgba(4,50,70,.4)}
.under2 .head p{margin:9px 0 0;font-size:13px;color:rgba(255,255,255,.86);letter-spacing:.04em}

/* ── ③ 应用区衔接：从水下浮出 ───────────────────────────────────── */
.ocean-to-app{position:relative;z-index:1;height:1px}

/* ── 手机：首屏在水上时把底部 tab 栏收起来（出水自动放回） ───────── */
@media (max-width:860px){
  aside{transition:transform .35s ease,opacity .35s ease}
  body.at-ocean aside{transform:translateY(130%);opacity:0;pointer-events:none}
}

/* ── 登录页（同一片海） ─────────────────────────────────────────── */
body.login-ocean{margin:0;min-height:100vh;min-height:100svh;overflow:hidden}
.login-stage{position:fixed;inset:0;z-index:0;overflow:hidden}
.login-stage .fallback-sea{position:absolute;inset:0}
.login-stage .waves{position:absolute;left:-6%;right:-6%;top:58%;height:46%}
.login-stage .waves svg{position:absolute;left:0;bottom:0;width:112%;height:100%}
.login-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.2s ease}
.login-vid.ready{opacity:1}
.login-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,35,55,.30) 0%,rgba(5,35,55,.06) 36%,rgba(4,42,62,.34) 100%)}
.login-wrap{position:relative;z-index:2;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;padding:24px 18px}
.login-card{width:100%;max-width:412px;padding:34px 30px 28px;border-radius:24px;text-align:center;
  background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 26px 70px rgba(4,44,66,.3)}
.login-card img.brand{width:68px;height:68px;border-radius:20px;display:block;margin:0 auto 14px;
  box-shadow:0 12px 30px rgba(127,178,240,.4)}
.login-card h1{margin:0;font-size:22px;letter-spacing:1.4px;color:#1f3a68;font-weight:700}
.login-card .tagline{margin:10px 0 0;color:#5f7c9e;font-size:13px;line-height:1.8}
.login-card form{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.login-card input{padding:12px 14px;border-radius:12px;border:1px solid #dbe7f8;background:#f8fbff;
  color:#1f3a68;font-size:15px;outline:none;font-family:inherit;text-align:center}
.login-card input:focus{border-color:#7fb2f0;box-shadow:0 0 0 3px rgba(127,178,240,.2)}
.login-card button.go{padding:13px;font-size:15px;width:100%}
.login-card .err{min-height:18px;font-size:12.5px;color:#dc2626;margin-top:2px}
.login-card .foot{margin-top:16px;font-size:12px;color:#93aac6;line-height:1.9}
.login-card .foot a{color:#2f5d9e;text-decoration:none}
.login-card .foot a:hover{text-decoration:underline}

/* ── 移动端 / 平板 ─────────────────────────────────────────────── */
@media (max-width:1100px){
  .under2 .under-entries{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero nav.onav,.hero .hero-tip{display:none}
  .hero .topbar{padding:14px 16px;gap:12px}
  .hero .pillbtn{padding:8px 15px;font-size:12.5px;margin-left:auto}
  /* 手机上天空亮部占比更大：给文案再压一层自下而上的暗纱，保证白字读得清 */
  .hero .hero-veil{background:
    linear-gradient(180deg,rgba(5,35,55,.40) 0%,rgba(5,35,55,.14) 20%,rgba(5,35,55,0) 40%),
    linear-gradient(0deg,rgba(3,28,44,.72) 0%,rgba(3,28,44,.34) 32%,rgba(3,28,44,0) 62%),
    radial-gradient(140% 60% at 10% 96%,rgba(3,26,40,.62) 0%,rgba(3,26,40,0) 70%)}
  .hero-copy{left:16px;right:16px;bottom:13%;max-width:none}
  .hero-copy h1{font-size:clamp(38px,11.5vw,56px)}
  .hero-copy p{font-size:13.5px;max-width:none;line-height:1.9}
  .hero-copy .cta{margin-top:26px;gap:12px}
  .hero-copy .btn{padding:12px 20px;font-size:13.5px}
  .hero .corner{font-size:10.5px}
  .hero .c-bl{left:16px;bottom:18px}.hero .c-br{right:16px;bottom:18px}
  .water .water-cue{display:block;bottom:6%;font-size:11.5px;letter-spacing:.2em}
  /* 水下段：手机上字号整体抬一档、卡片给够点按面积，别把字挤成蚂蚁 */
  .under{gap:26px;padding:52px 0 60px}
  .under-copy h2{font-size:clamp(26px,8.2vw,36px)}
  .under-copy p{font-size:14.5px;line-height:1.9;max-width:none}
  .under-in{padding:0 16px}
  .under-stats{gap:12px 22px;margin-top:20px}
  .ustat .k{font-size:23px}
  .ustat .l{font-size:13.5px}
  .ustat .n{font-size:12px}
  .under2{padding:40px 0 56px}
  .under2 .head{margin-bottom:16px}
  .under2 .under-entries{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 16px;gap:12px}
  .oentry{padding:16px 15px;border-radius:18px}
  .oentry .t{font-size:16px}
  .oentry .d{font-size:12.5px;line-height:1.7;margin-top:7px}
  .under-cue{display:none}
  /* 应用区：底部 tab 栏 + iPhone 安全区都要让开，否则最后一张卡被压住；
     tab 标签也抬一档字号，390 宽下 6 个标签才不挤成一团 */
  main{padding:12px 12px calc(104px + env(safe-area-inset-bottom,0px))}
  nav.menu button{font-size:11.5px;padding:8px 4px}
  aside{padding:8px 8px calc(6px + env(safe-area-inset-bottom,0px))}
  .login-card{padding:28px 22px 24px}
}

/* 视频起不来时（无 JS / 加载失败）也保证有画面：给个静态暖色底 */
.hero.no-video{background:linear-gradient(180deg,#ffd9a8 0%,#f7b26f 38%,#0e7ba4 62%,#083f5c 100%)}

/* 尊重系统「减弱动态」：关掉起伏动画与滚动下潜的连续变化 */
@media (prefers-reduced-motion: reduce){
  .hero .c-br .arw{animation:none}
  .hero-vid,.under-vid,.login-vid{transition:none}
}