/* 10-16 第十七轮：点「收工」时整页的那一下（策划：代表今天收工了、明天见；白晨：要酷但别浮夸，老电视关机那种太过）。
   白晨看过三批后定：当前版本只做「收成一摞」亮底版；化成光（亮底）、收成一摞＋入夜、化成光＋入夜留作以后让用户选的版本。
   一、共用的结尾一屏；二、亮底配色；三、收成一摞 pack；四、化成光 dust；五、入夜 night=1；六、手机与减少动态效果。
   都是 2 秒上下的慢过渡，不闪、不塌成一条线、不弹跳；最后停在一屏安静的字上。没选上的暮色、收拢、熄灯、翻到明天已删，见提交 51ac11d。 */

   都是 2 秒上下的慢过渡，不闪、不塌成一条线、不弹跳；最后停在一屏安静的字上。 */

/* ============ 一、结尾一屏 ============ */
body.is-bye { overflow: hidden; }
.bye { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; pointer-events: none; color: #F7EEE5; }
.bye.on { pointer-events: auto; }
.bye.off { opacity: 0; transition: opacity 380ms var(--ease); }
.bye-sky { position: absolute; inset: 0; overflow: hidden; }
.bye-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 420px; text-align: center;
  opacity: 0; transform: translateY(12px); transition: opacity 700ms var(--ease), transform 800ms cubic-bezier(.2, .7, .2, 1); transition-delay: var(--cd, 1050ms); }
.bye.on .bye-c { opacity: 1; transform: none; }
.bye-moon { width: 46px; height: 46px; margin-bottom: 6px; fill: none; stroke: var(--bye-moon, #F2C890); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.bye-moon path { stroke-dasharray: 1; stroke-dashoffset: 1; fill: transparent; transition: stroke-dashoffset 1000ms cubic-bezier(.65, 0, .35, 1), fill 600ms var(--ease); transition-delay: var(--md, 900ms), calc(var(--md, 900ms) + 900ms); }
.bye.on .bye-moon path { stroke-dashoffset: 0; fill: color-mix(in srgb, var(--bye-moon, #F2C890) 22%, transparent); }
.bye-h { margin: 0; font: 600 30px/1.3 var(--font-sans); letter-spacing: .02em; }
.bye-sum { margin: 0; font: 500 14px var(--font-sans); opacity: .72; font-variant-numeric: tabular-nums; }
.bye-tmr { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 14px; padding: 12px 22px; border-radius: 16px; background: var(--bye-card, rgba(255, 255, 255, .07)); box-shadow: inset 0 0 0 1px var(--bye-line, rgba(255, 255, 255, .12)); }
.bye-tmr span { font: 600 11.5px var(--font-sans); letter-spacing: .06em; opacity: .62; }
.bye-tmr b { font: 600 16px var(--font-sans); }
.bye-tmr small { font-size: 12.5px; opacity: .62; }
.bye-carry { margin: 2px 0 0; font-size: 12.5px; opacity: .62; }
.bye-back { margin-top: 18px; height: 36px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--bye-card, rgba(255, 255, 255, .1)); box-shadow: inset 0 0 0 1px var(--bye-line, rgba(255, 255, 255, .18)); color: inherit; font: 600 13px var(--font-sans); cursor: pointer; transition: background-color 160ms var(--ease); }
.bye-back:hover { background: var(--bye-hover, rgba(255, 255, 255, .16)); }

/* ============ 二、亮底配色：页面不变暗，中间一圈淡淡的暖白托住字 ============ */
.bye.is-light { --bye-moon: var(--dusk, #C9782A); --bye-card: rgba(255, 255, 255, .7); --bye-line: var(--line-strong); --bye-hover: #FFFFFF; color: var(--ink); }
.is-light .bye-sky { background: radial-gradient(60% 50% at 50% 48%, rgba(255, 246, 236, .55), rgba(255, 246, 236, 0) 70%); opacity: 0; transition: opacity 900ms 700ms var(--ease); }
.is-light.on .bye-sky { opacity: 1; }
.is-light .bye-sum, .is-light .bye-tmr span, .is-light .bye-tmr small, .is-light .bye-carry { color: var(--ink-2); opacity: 1; }

/* ============ 三、收成一摞（当前版本）：卡片飞到中间叠好（动画在 app.js 的 byePack），浮层里「明天第一件」底下垫两张歪着的纸接住 ============ */
.v-pack { --cd: 1150ms; --md: 1100ms; }
.bye-stk { position: relative; margin-top: 14px; }
.bye-stk .bye-tmr { position: relative; margin-top: 0; background: #FFFDF9; box-shadow: inset 0 0 0 1px var(--line-strong), 0 10px 26px -14px rgba(120, 70, 20, .32); }
.bye-stk i { position: absolute; inset: 0; border-radius: 16px; background: #FBF4EA; box-shadow: inset 0 0 0 1px rgba(120, 80, 40, .12), 0 6px 18px -10px rgba(120, 70, 20, .28); transition: transform 700ms cubic-bezier(.2, .7, .2, 1); transition-delay: var(--cd); }
.v-pack .bye-stk i:nth-child(1) { transform: rotate(0); }
.v-pack .bye-stk i:nth-child(2) { transform: rotate(0); }
.v-pack.on .bye-stk i:nth-child(1) { transform: rotate(-6.5deg) translate(-6px, 6px); }
.v-pack.on .bye-stk i:nth-child(2) { transform: rotate(5deg) translate(7px, 3px); }

/* ============ 四、化成光（留作以后的可选版本）：卡片原地虚化，光点画在 .bye-dust 画布上（app.js 的 byeDust），汇到月亮后月亮再一笔描出来 ============ */
.v-dust { --cd: 1450ms; --md: 1500ms; }
.bye-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.bye-probe { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============ 五、入夜（留作以后的可选版本，night=1）：叠在收成一摞、化成光上的全局一层（白晨：要有一点全屏变暗、夜间颜色的效果）——整屏连顶栏一起慢慢转成夜空，
   天边留一抹暖色，星星陆续亮起；字换成浅色，卡片换成夜里的玻璃 ============ */
.bye.is-night { --nd: 250ms; --bye-moon: #F2C890; --bye-card: rgba(255, 255, 255, .08); --bye-line: rgba(255, 255, 255, .15); --bye-hover: rgba(255, 255, 255, .16); color: #F6EFE6; }
.is-night .bye-sky { background: radial-gradient(90% 46% at 50% 108%, rgba(226, 142, 86, .5), rgba(226, 142, 86, 0) 70%), linear-gradient(180deg, #121527 0%, #1A1C34 40%, #262443 74%, #3A2C48 100%);
  opacity: 0; transition: opacity 1700ms cubic-bezier(.45, 0, .25, 1) var(--nd); }
.is-night.on .bye-sky { opacity: 1; }
.bye-stars { position: absolute; inset: 0; }
.bye-stars i { position: absolute; width: var(--z); height: var(--z); border-radius: 50%; background: #FFF6E6; box-shadow: 0 0 5px 1px rgba(255, 236, 200, .4); opacity: 0; }
.is-night.on .bye-stars i { animation: bye-tw 2600ms var(--d) ease-in-out infinite alternate; }
@keyframes bye-tw { 0% { opacity: 0; } 30% { opacity: var(--o); } 100% { opacity: calc(var(--o) * .45); } }
.is-night .bye-moon { filter: drop-shadow(0 0 10px rgba(242, 200, 144, .5)); }
.is-night .bye-stk .bye-tmr { background: #2B2A46; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 12px 30px -12px rgba(0, 0, 0, .55); }
.is-night .bye-stk i { background: #23223B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 20px -10px rgba(0, 0, 0, .5); }
.is-night .bye-back:focus-visible { outline-color: #F6EFE6; }

/* ============ 六、手机与减少动态效果 ============ */
@media (max-width: 760px) {
  .bye-h { font-size: 24px; }
  .bye-moon { width: 40px; height: 40px; }
}
.bye.is-quiet .bye-sky, .bye.is-quiet .bye-c, .bye.is-quiet .bye-moon path { transition: opacity 200ms linear !important; transition-delay: 0ms !important; transform: none !important; }
.bye.is-quiet .bye-moon path { stroke-dashoffset: 0; }
.bye.is-quiet .bye-c > *, .bye.is-quiet .bye-stk i { transition: opacity 200ms linear !important; transition-delay: 0ms !important; transform: none !important; }
.bye.is-quiet .bye-stars i { animation: none; opacity: var(--o); }