/* ===========================================================
   陈雪倪 · 首页 —— 白花垂枝 · 克莱因蓝
   底是画；六串花束抠图叠在上面，悬停时单独点亮；文字压在花上
   =========================================================== */

:root{
  --blue:#002FA7;
  --blue-deep:#001A5E;
  --ink:#0B0D11;
  --white:#FFFFFF;
  --line:rgba(255,255,255,.42);
  --sans:"Noto Sans SC","Source Han Sans SC",-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",SimSun,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(20px,3.4vw,56px);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
  background:var(--blue);
  color:var(--white);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

img{-webkit-user-drag:none;user-drag:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:#fff;color:var(--blue)}

/* ===========================================================
   舞台
   =========================================================== */
.stage{position:fixed;inset:0;z-index:1;overflow:hidden}

.stage__art{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
  user-select:none;pointer-events:none;
  transition:opacity .6s var(--ease), filter .6s var(--ease);
}
.stage__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,20,70,.72) 0%, rgba(0,20,70,.12) 20%, rgba(0,20,70,0) 42%),
    linear-gradient(0deg,  rgba(0,14,52,.90) 0%, rgba(0,14,52,.42) 20%, rgba(0,20,70,0) 46%);
  transition:opacity .6s var(--ease);
}

/* 有花束被点亮时：底图整体压暗（含其他花串），点亮的这串单独提亮，形成对比 */
.stage.is-focus .stage__art{opacity:.74; filter:brightness(.88) saturate(.94)}

/* ===========================================================
   六串花束（透明抠图）
   =========================================================== */
.blooms{position:absolute;inset:0;z-index:2;pointer-events:none}
.bloom{
  position:absolute;
  opacity:0;
  transform:scale(1);
  transform-origin:50% 8%;
  transition:opacity .5s var(--ease), transform .7s var(--ease), filter .5s var(--ease);
  will-change:opacity, transform;
  filter:brightness(1) saturate(1);
}
.bloom.is-on{
  opacity:1;
  transform:scale(1.018);
  filter:brightness(1.16) saturate(.94)
         drop-shadow(0 0 16px rgba(255,255,255,.34))
         drop-shadow(0 0 46px rgba(170,205,255,.26));
}

/* ===========================================================
   热区（不可见）+ 花上的标签
   =========================================================== */
.hot{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.hot .zone{
  pointer-events:auto;
  fill:rgba(255,255,255,0);
  stroke:none;
  cursor:pointer;
}
.hot .zone:focus-visible{outline:none;stroke:rgba(255,255,255,.9);stroke-width:1.5;stroke-dasharray:5 5}

/* 调试：?debug=1 显形 */
body.is-debug .hot .zone{
  fill:rgba(0,255,255,.16);
  stroke:rgba(0,255,255,.95);
  stroke-width:1.2;
  stroke-dasharray:6 5;
}

/* ---------- 花束上的标签 ---------- */
.label{
  position:absolute;z-index:6;left:0;top:0;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:20px 34px 18px;
  opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(.94);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
/* 柔和的暗色衬底：白字压在白花上也能读清 */
.label::before{
  content:"";position:absolute;inset:-10px;z-index:-1;
  background:radial-gradient(closest-side,
    rgba(0,12,52,.66) 0%, rgba(0,12,52,.46) 50%, rgba(0,12,52,0) 100%);
  filter:blur(3px);
}
.label.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}

.label__no{
  font-size:11.5px;font-weight:700;letter-spacing:.34em;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 4px rgba(0,14,60,.95), 0 2px 16px rgba(0,14,60,.9);
}
.label__cn{
  font-family:var(--serif);
  font-size:clamp(21px,2.1vw,31px);font-weight:700;letter-spacing:.2em;
  color:#fff;line-height:1.25;
  text-shadow:
    0 1px 3px rgba(0,12,55,.98),
    0 3px 14px rgba(0,12,55,.95),
    0 8px 40px rgba(0,12,55,.9),
    0 0 24px rgba(255,255,255,.35);
}
.label__meta{
  font-size:11.5px;letter-spacing:.18em;
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 5px rgba(0,14,60,.95), 0 3px 14px rgba(0,14,60,.9);
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.55);
}

/* ===========================================================
   顶端：作品全集索引
   =========================================================== */
.crown{
  position:absolute;z-index:7;
  left:50%;top:clamp(14px,3.4vh,42px);
  transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  padding:11px 22px 11px 18px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(0,20,70,.34);
  backdrop-filter:blur(9px);
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
.crown:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.95);
  transform:translateX(-50%) translateY(-2px);
}
.crown__dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.crown__t{font-size:13.5px;letter-spacing:.2em}
.crown__n{font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.66)}

/* ===========================================================
   页眉 / 页脚
   =========================================================== */
.head{
  position:fixed;z-index:8;left:var(--pad);top:clamp(16px,3.4vh,38px);right:var(--pad);
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  pointer-events:none;
}
.head__brand{display:flex;align-items:baseline;gap:11px}
.head__cn{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);font-weight:600;letter-spacing:.2em}
.head__en{font-size:9.5px;letter-spacing:.34em;color:rgba(255,255,255,.66)}
.head__meta{font-size:10.5px;letter-spacing:.24em;color:rgba(255,255,255,.62)}

.foot{
  position:fixed;z-index:8;left:var(--pad);right:var(--pad);bottom:clamp(18px,3.6vh,42px);
  display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:clamp(24px,4vw,64px);
  align-items:end;
  opacity:0;animation:up 1s var(--ease) .45s forwards;
}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.foot__l h1{font-family:var(--serif);font-size:clamp(16px,1.65vw,23px);font-weight:600;letter-spacing:.1em}
.foot__l h1 i{font-style:normal;color:rgba(255,255,255,.5);margin:0 8px}
.foot__l p{
  margin-top:12px;max-width:40em;font-size:clamp(11.5px,1vw,13.5px);
  line-height:1.95;color:rgba(255,255,255,.76);letter-spacing:.04em;
}

.foot__r{display:flex;flex-wrap:wrap;gap:9px 16px;justify-content:flex-end;max-width:52vw}
.foot__r a{
  position:relative;font-size:11.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.78);text-decoration:none;padding-bottom:3px;
  transition:color .35s var(--ease);
}
.foot__r a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:#fff;transition:width .4s var(--ease);
}
.foot__r a:hover{color:#fff}
.foot__r a:hover::after{width:100%}
.foot__r a b{font-weight:400;color:rgba(255,255,255,.5);margin-right:6px;font-size:9.5px}

.foot__hint{
  grid-column:1 / -1;margin-top:2px;
  font-size:10.5px;letter-spacing:.26em;color:rgba(255,255,255,.42);
  transition:opacity .4s var(--ease);
}

/* ===========================================================
   响应式
   =========================================================== */
@media (max-width:900px){
  body{overflow:auto}
  .stage{position:relative;height:62vh;min-height:340px}
  .stage__art{object-position:46% 46%}
  .head{position:relative;left:0;right:0;top:0;padding:18px var(--pad) 0}
  .head__meta{display:none}
  .foot{
    position:relative;left:0;right:0;bottom:0;
    /* minmax(0,1fr)：避免网格列被长文本撑破，导致文字溢出屏幕右边缘 */
    grid-template-columns:minmax(0,1fr);gap:26px;
    padding:22px var(--pad) 34px;
    background:linear-gradient(180deg,rgba(0,18,64,0) 0%,rgba(0,18,64,.9) 18%,var(--blue-deep) 100%);
  }
  .foot__l{min-width:0}
  .foot__l p{max-width:100%;width:100%}
  .foot__r{max-width:none;justify-content:flex-start}
  .crown{top:auto;bottom:12px}
  .label{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* 备案号（工信部要求展示在页脚） */
.bei{
  width:100%;
  padding:14px 0 2px;
  text-align:center;
  font-size:10px;
  letter-spacing:.12em;
  line-height:1.8;
}
.bei a{
  color:inherit;
  opacity:.55;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:opacity .3s,border-color .3s;
}
.bei a:hover{opacity:.95;border-bottom-color:currentColor}