/* sky.css — 「餘光」：隨一天時間流動的天空、太陽／月亮的光與影、滑鼠的光斑與藏在背景裡的字海、顆粒感、首屏日晷 */
:root{--gl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cg font-family='Noto Serif TC,serif' font-size='34' fill='black'%3E%3Ctext x='34' y='55' transform='rotate(0 34 55)'%3E%E5%85%89%3C/text%3E%3Ctext x='175' y='49' transform='rotate(-10 175 49)'%3E%E5%A4%A2%3C/text%3E%3Ctext x='288' y='52' transform='rotate(-1 288 52)'%3E%E6%99%82%3C/text%3E%3Ctext x='411' y='49' transform='rotate(4 411 49)'%3E%E6%98%9F%3C/text%3E%3Ctext x='27' y='168' transform='rotate(-10 27 168)'%3E%E9%9B%A8%3C/text%3E%3Ctext x='161' y='192' transform='rotate(-10 161 192)'%3E%E8%AA%9E%3C/text%3E%3Ctext x='269' y='171' transform='rotate(5 269 171)'%3E%E5%BD%B1%3C/text%3E%3Ctext x='401' y='169' transform='rotate(6 401 169)'%3E%E5%BF%83%3C/text%3E%3Ctext x='21' y='300' transform='rotate(8 21 300)'%3E%E6%9C%88%3C/text%3E%3Ctext x='174' y='323' transform='rotate(-11 174 323)'%3E%E6%9C%9D%3C/text%3E%3Ctext x='290' y='323' transform='rotate(0 290 323)'%3E%E3%81%B2%3C/text%3E%3Ctext x='377' y='300' transform='rotate(-11 377 300)'%3E%E9%9B%B2%3C/text%3E%3Ctext x='49' y='414' transform='rotate(-3 49 414)'%3E%E3%81%82%3C/text%3E%3Ctext x='160' y='415' transform='rotate(5 160 415)'%3E%E6%97%A5%3C/text%3E%3Ctext x='261' y='442' transform='rotate(-3 261 442)'%3E%E5%A4%9C%3C/text%3E%3Ctext x='409' y='449' transform='rotate(-7 409 449)'%3E%E7%A9%BA%3C/text%3E%3C/g%3E%3C/svg%3E");--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E")}
html{background:var(--bg)}
body{background:none!important}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- 天空：漸層、太陽／月亮、星星 ---------- */
#sky{position:fixed;inset:0;z-index:-4;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,var(--sky) 0%,var(--bg) 64%)}
#sky .orb{position:absolute;left:var(--ox,50%);top:var(--oy,120px);width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;
  animation:orb-float 16s ease-in-out infinite alternate}
/* 光暈用獨立的漸層（box-shadow 只畫在元素外面，月牙缺口處會缺一塊光） */
#sky .orb::before{content:"";position:absolute;inset:-190%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sun) var(--h1,33%),transparent) 0%,color-mix(in srgb,var(--sun) var(--h2,16%),transparent) 30%,transparent 100%)}
/* 圓盤單獨一層做遮罩：夜晚（--night→1）時挖掉一個偏移的圓，真正變成新月；光暈在外層，不受遮罩影響 */
#sky .orb b{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 36% 34%,#fff 0%,var(--sun) 46%,color-mix(in srgb,var(--sun) 70%,var(--sky)) 100%);
  -webkit-mask-image:radial-gradient(circle at calc(50% + var(--night,0) * 27px) calc(50% - var(--night,0) * 11px),transparent calc(var(--night,0) * 47px),#000 calc(var(--night,0) * 47px));
  mask-image:radial-gradient(circle at calc(50% + var(--night,0) * 27px) calc(50% - var(--night,0) * 11px),transparent calc(var(--night,0) * 47px),#000 calc(var(--night,0) * 47px))}
#sky .stars{position:absolute;left:0;top:0;width:2px;height:2px;border-radius:50%;opacity:calc(var(--night,0) * .9)}
#sky .s2{animation:twinkle 6s ease-in-out infinite alternate}
@keyframes orb-float{to{transform:translate3d(0,14px,0)}}
@keyframes twinkle{from{opacity:calc(var(--night,0) * .25)}to{opacity:calc(var(--night,0) * .95)}}

/* ---------- 字海：藏在背景裡的字，平時隱約可見，滑鼠的光走到哪裡就亮到哪裡 ---------- */
#glyphs{position:fixed;inset:0;z-index:-3;pointer-events:none;background:var(--fg);opacity:.04;-webkit-mask-image:var(--gl);mask-image:var(--gl);-webkit-mask-size:480px 480px;mask-size:480px 480px}
#pool{position:fixed;left:0;top:0;width:640px;height:640px;z-index:-2;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(closest-side,color-mix(in srgb,var(--sun) 26%,transparent),transparent)}
#spot{position:fixed;left:0;top:0;width:520px;height:520px;z-index:-2;pointer-events:none;opacity:0;transition:opacity .5s;background:var(--accent);
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 42%,transparent 100%),var(--gl);mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 42%,transparent 100%),var(--gl);
  -webkit-mask-size:100% 100%,480px 480px;mask-size:100% 100%,480px 480px;-webkit-mask-position:0 0,var(--gx,0) var(--gy,0);mask-position:0 0,var(--gx,0) var(--gy,0);
  -webkit-mask-composite:source-in;mask-composite:intersect}
#pool.on{opacity:1}#spot.on{opacity:.6}
/* 顆粒：像底片的質感，不用混合模式（捲動時才不會卡） */
#grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;background-image:var(--noise)}

/* ---------- 光源決定陰影方向：太陽在右邊，影子就落在左邊 ---------- */
#homeList .post,.deck,.jp-stat,#about,#sub,.quote,#article .pn .pc,.fc-face,.opt,.fb,.wrong{box-shadow:calc(var(--lx,0) * -20px) 24px 44px -32px var(--shadow-c)}

/* ---------- 閱讀區的紙面：字海與光斑留在紙下，正文不再和背景字疊在一起 ----------
   紙面畫在 ::before 上並向外延伸，不改變正文寬度，也不影響目錄的定位 */
#article,#archive,.cat-list{position:relative;isolation:isolate}
#article::before,#archive::before,.cat-list::before{content:"";position:absolute;z-index:-1;inset:0 calc(-1 * clamp(12px,3vw,32px)) calc(-1 * clamp(20px,3vw,40px));border:1px solid var(--line);border-radius:28px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:none}
#archive::before{top:-12px}
/* 首頁底部目錄：給每一篇一層薄薄的紙 */
#homeList .post:nth-child(n+4){padding:20px 22px 22px;border:1px solid var(--line);border-radius:18px;
  background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#homeList .post:nth-child(n+4)::before{inset:0;border-radius:18px}

/* ---------- 首屏日晷 ---------- */
.hero-art{position:relative;display:grid;place-items:center;height:auto;min-height:340px;pointer-events:auto}
.hero::before{display:none}
.dial{position:relative;width:min(100%,310px);aspect-ratio:1;user-select:none;-webkit-user-select:none}
.dial:focus-visible{outline-offset:8px;border-radius:50%}
.dial-ring{position:absolute;inset:0;border-radius:50%;cursor:grab;touch-action:none;
  -webkit-mask-image:radial-gradient(closest-side,transparent 78%,#000 79%,#000 94%,transparent 95%);mask-image:radial-gradient(closest-side,transparent 78%,#000 79%,#000 94%,transparent 95%);
  box-shadow:0 0 0 1px var(--line)}
.dial.drag .dial-ring{cursor:grabbing}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dial-ticks line{stroke:var(--mute);opacity:.55}
.dial-labels text{fill:var(--mute);font:500 9.5px var(--sans);letter-spacing:.3em;text-anchor:middle}
.dial-hole{position:absolute;inset:11%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--sun) 30%,var(--card)),var(--card) 62%);
  box-shadow:inset calc(var(--lx,0) * -10px) 14px 34px -18px var(--shadow-c),0 0 0 1px var(--line)}
.dial-core{display:grid;gap:2px;justify-items:center;text-align:center;pointer-events:none}
.dial-core small{font-size:11px;letter-spacing:.3em;color:var(--mute)}
.dial-phase{font:700 clamp(30px,4.4vw,42px)/1.2 var(--serif);letter-spacing:.12em}
.dial-time{font:400 16px var(--sans);letter-spacing:.24em;color:var(--accent);font-variant-numeric:tabular-nums}
.dial-hint{margin-top:6px;opacity:.75}
.dial-now{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);padding:6px 18px;border:1px solid var(--accent);border-radius:99px;background:var(--card);color:var(--accent);font:500 13px var(--sans);cursor:pointer;z-index:2;animation:rise .4s var(--ease)}
.dial-now:hover{background:var(--accent);color:var(--on-accent)}
.hero-vert{position:absolute;right:-2px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;letter-spacing:.95em;font:400 12px/1 var(--sans);color:var(--mute);white-space:nowrap}
.seal{right:2%;bottom:0}
@media (max-width:960px){
  .hero-art{position:relative;right:auto;top:auto;z-index:auto;width:100%;height:auto;opacity:1;margin-top:4px;min-height:0}
  .dial{width:min(76vw,290px)}
  .hero-vert{display:none}
  .seal{display:none}
}