/* 已确认的水平文字目录；局部毛玻璃随标题展开。 */
@font-face { font-family:"Canglan Preview Han"; src:url("/assets/沧澜预览中文-250.woff2") format("woff2"); font-weight:250; font-style:normal; font-display:swap; }
@font-face { font-family:"Canglan Preview Han"; src:url("/assets/沧澜预览中文-300.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Canglan Preview Latin"; src:url("/assets/沧澜预览拉丁-变量.woff2") format("woff2"); font-weight:200 400; font-style:normal; font-display:swap; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
/* 右侧局部渐变固定在视频层，避免随首屏文字退场产生亮度跳变。 */
.ocean-directory-shade {
  position:absolute; z-index:1; top:clamp(72px,10vh,96px); right:0; bottom:max(104px,14vh); width:min(360px,40vw); pointer-events:none;
  background:linear-gradient(90deg,rgba(4,25,38,0),rgba(4,25,38,.08) 48%,rgba(4,25,38,.16));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
#ocean-works {
  --directory-width:244px;
  --directory-gap:20px;
  --reveal-duration:320ms;
  --close-duration:176ms;
  --motion-ease:cubic-bezier(.16,1,.3,1);
  --glass-blur:18px;
  --glass-opacity:.30;
  --work-font:"Canglan Preview Latin","Canglan Preview Han","PingFang SC",sans-serif;
  --ocean-ink:#eff5f6;
  --ocean-secondary:#e8f0f3;
  --ocean-panel:rgba(19,48,61,var(--glass-opacity));
  position:absolute; z-index:3; inset:24% clamp(24px,3.5%,44px) 12% 7%;
  font:300 14px/1.8 var(--work-font); color:var(--ocean-ink); pointer-events:none;
}
#ocean-works .works-directory { width:max-content; max-width:min(var(--directory-width),100%); margin-left:auto; display:flex; flex-direction:column; gap:22px; }
#ocean-works .work-item { min-width:0; padding:2px 0; text-align:right; text-shadow:0 1px 2px rgba(1,20,31,.65); }
#ocean-works .work-name { position:relative; display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:0; border:0; background:none; color:#fff; font:300 18px/1.55 var(--work-font); letter-spacing:.025em; text-decoration:none; text-shadow:inherit; transition:color 130ms ease; }
#ocean-works .work-name::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor; opacity:0; transition:opacity 130ms ease; pointer-events:none; }
#ocean-works .work-entry-arrow { width:14px; height:14px; flex:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
#ocean-works .work-item:not([data-work="0"]) .work-name { font-size:16px; color:#e0ebef; }
#ocean-works .work-item:not([data-work="0"]) p { color:#dce7ea; }
#ocean-works .work-item p { margin:8px 0 0; color:var(--ocean-secondary); font-size:12.5px; font-weight:300; line-height:1.7; }
#ocean-works .work-item[data-active="true"] .work-name { color:#fff; }
#ocean-works .work-item[data-active="true"] .work-name::after,#ocean-works .work-name:focus-visible::after { opacity:.8; }
#ocean-works .work-detail { position:absolute; z-index:2; left:0; top:0; width:380px; max-width:100%; min-height:294px; padding:30px 32px; border:1px solid rgba(231,244,247,.2); border-radius:14px; background:var(--ocean-panel); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.15); backdrop-filter:blur(var(--glass-blur)) saturate(1.15); color:var(--ocean-ink); opacity:0; visibility:hidden; pointer-events:none; transform:translateX(var(--reveal-shift,0px)); clip-path:inset(var(--reveal-top,12px) 0 var(--reveal-bottom,278px) calc(100% - 2px) round 14px); transition:opacity var(--close-duration) ease,transform var(--close-duration) var(--motion-ease),clip-path var(--close-duration) var(--motion-ease),visibility 0s var(--close-duration); }
#ocean-works[data-open="true"] .work-detail { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0); clip-path:inset(0 0 0 0 round 14px); transition-duration:var(--reveal-duration),var(--reveal-duration),var(--reveal-duration),0s; transition-delay:0s; }
#ocean-works .detail-content { opacity:0; transform:translateX(8px); transition:opacity 90ms ease,transform 90ms ease; }
#ocean-works[data-open="true"] .detail-content { opacity:1; transform:translateX(0); transition-duration:160ms,220ms; transition-delay:70ms; }
#ocean-works .work-detail[data-kind="pending"] { min-height:200px; }
#ocean-works .work-detail[data-kind="pending"] .detail-secondary { margin-bottom:0; }
#ocean-works .detail-content h2 { margin:0 0 23px; font:250 24px/1.35 var(--work-font); letter-spacing:.025em; }
#ocean-works .detail-content p { margin:0 0 15px; color:var(--ocean-secondary); font-size:13px; font-weight:300; line-height:1.9; }
#ocean-works .detail-content .detail-secondary { margin-bottom:27px; }
#ocean-works .detail-entry { display:inline-flex; align-items:center; min-height:34px; padding-bottom:4px; color:var(--ocean-ink); text-decoration:none; border-bottom:1px solid #cadfe5; font-size:13px; font-weight:300; }
#ocean-works .detail-entry[hidden] { display:none; }

#ocean-works .works-directory { pointer-events:auto; }
#ocean-works .work-name { cursor:pointer; }
#ocean-works .work-name:disabled { cursor:default; opacity:1; }
#ocean-works .work-name:focus-visible, #ocean-works .detail-entry:focus-visible { outline:2px solid #b7deef; outline-offset:6px; }
#ocean-works .detail-entry:hover { color:#fff; border-color:#fff; }
.catalogue-product { display:inline-flex; align-items:center; min-height:44px; text-underline-offset:6px; }
@media (max-width:850px) {
  #ocean-works { --directory-width:212px; --directory-gap:18px; left:5%; right:clamp(24px,3.5%,32px); }
  #ocean-works .work-item p { font-size:12px; }
  #ocean-works .work-detail { padding:27px 26px; }
}
@media (max-width:620px) {
  .ocean-directory-shade { width:min(310px,84vw); }
  #ocean-works { top:128px; left:24px; right:24px; }
  #ocean-works .work-detail { min-height:0; max-height:calc(100svh - 120px); overflow:auto; transform:none; clip-path:none; }
  #ocean-works[data-open="true"] .work-detail { transform:none; clip-path:none; }
}
@media (max-height:700px) {
  #ocean-works { top:112px; }
  #ocean-works .works-directory { gap:12px; }
  #ocean-works .work-item p { margin-top:4px; }
}
@media (max-height:560px) {
  #ocean-works { top:98px; }
  #ocean-works .works-directory { gap:6px; }
  #ocean-works .work-item p { font-size:12px; line-height:1.5; }
}
@media (prefers-reduced-motion:reduce) {
  #ocean-works .work-detail { transform:none; clip-path:none; transition:opacity 100ms ease,visibility 0s 100ms; }
  #ocean-works[data-open="true"] .work-detail { transform:none; clip-path:none; transition-duration:100ms,0s; }
  #ocean-works .detail-content,#ocean-works[data-open="true"] .detail-content { transform:none; transition:opacity 100ms ease; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #ocean-works .work-detail { background:rgba(19,48,61,.95); }
}