/* Block 首屏时间段光晕特效（dawn: 窗格晨光 / day: 宣纸墨晕 / night: 暮色首屏 + 整页深色） */

:root {
  --bg-page: #F7F6F2;
  --bg-hero: #F7F6F2;
  --bg-alt: #EFECE4;
  --bg-surface: #FFFFFF;
  --bg-stage: #FBFAF7;
  --bg-well: #FAF9F5;
  --bg-elevated: #FFFFFF;
  --bg-chip: #EFECE4;
  --bg-handle: #F2F0EB;
  --bg-selection: #E3DFD2;
  --bg-track: #E2DED4;
  --bar-muted: #C5C1B5;
  --border-main: #E5E2D9;
  --border-row: #DEDAD0;
  --border-divider: #EAE7DF;
  --border-card: #DFDCD3;
  --border-stage: #DCD8CE;
  --border-well: #E6E3DA;
  --border-note: #E3E1DC;
  --border-dashed: #B9B5A8;
  --border-input: #CFCBBE;
  --border-check: #87867F;
  --text-primary: #141413;
  --text-ink: #1F1E1D;
  --text-body: #4A4842;
  --text-muted: #5E5D59;
  --text-placeholder: #6F6D66;
  --text-hover: #3D3B36;
  --nav-text: #4A4842;
  --nav-hover-bg: #ECEAE3;
  --accent: #D97757;
  --cta-bg: #D97757;
  --cta-border: #C4613F;
  --cta-hover-bg: #C4613F;
  --cta-text: #FAF9F5;
  --cta-shadow: none;
  --btn-solid-bg: #141413;
  --btn-solid-text: #FAF9F5;
  --diff-del-bg: rgba(220, 38, 38, 0.12);
  --diff-del-text: #B42318;
  --diff-ins-bg: rgba(30, 160, 100, 0.14);
  --diff-ins-text: #087443;
  --stage-shadow: 0 20px 50px rgba(20, 20, 19, 0.07);
  --card-shadow: 0 8px 20px rgba(20, 20, 19, 0.06);
  --pop-shadow: 0 12px 32px rgba(20, 20, 19, 0.08);
}

html[data-glow="dawn"] {
  --stage-shadow: 0 20px 50px rgba(20, 20, 19, 0.07), 0 1px 0 rgba(255, 250, 240, 0.9) inset;
}

html[data-glow="night"] {
  color-scheme: dark;
  --bg-page: #141413;
  --bg-hero: linear-gradient(180deg, #141413 0%, #141413 86%, #1B1A18 100%);
  --bg-alt: #1B1A18;
  --bg-surface: #1F1E1B;
  --bg-stage: #1F1E1B;
  --bg-well: #171614;
  --bg-elevated: #252320;
  --bg-chip: #2E2C28;
  --bg-handle: #2A2824;
  --bg-selection: rgba(217, 119, 87, 0.22);
  --bg-track: #2A2824;
  --bar-muted: #5C5952;
  --border-main: #2E2C28;
  --border-row: #2E2C28;
  --border-divider: #2E2C28;
  --border-card: #2E2C28;
  --border-stage: #2E2C28;
  --border-well: #2A2824;
  --border-note: #2E2C28;
  --border-dashed: #3D3A34;
  --border-input: #3D3A34;
  --border-check: #8C887E;
  --text-primary: #ECEAE3;
  --text-ink: #ECEAE3;
  --text-body: #C7C3B8;
  --text-muted: #A8A49A;
  --text-placeholder: #A8A49A;
  --text-hover: #FAF9F5;
  --nav-text: #CFCBC0;
  --nav-hover-bg: rgba(236, 234, 227, 0.08);
  --accent: #D97757;
  --cta-bg: #C4613F;
  --cta-border: #D97757;
  --cta-hover-bg: #B0552F;
  --cta-text: #FAF9F5;
  --cta-shadow: 0 10px 32px rgba(217, 119, 87, 0.28);
  --btn-solid-bg: #ECEAE3;
  --btn-solid-text: #141413;
  --diff-del-bg: rgba(248, 113, 113, 0.16);
  --diff-del-text: #FCA5A5;
  --diff-ins-bg: rgba(52, 211, 153, 0.16);
  --diff-ins-text: #6EE7B7;
  --stage-shadow: 0 0 0 1px rgba(217, 119, 87, 0.14), 0 56px 140px -20px rgba(0, 0, 0, 0.82), 0 24px 60px rgba(0, 0, 0, 0.62);
  --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --pop-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}

/* 首屏容器与三套光晕层的显隐控制（非当前时段 display:none，不运行动画） */
#top { position: relative; overflow: hidden; isolation: isolate; background: var(--bg-hero); }
.hero-glow, .hero-glow-sill { display: none; position: absolute; inset: 0; pointer-events: none; user-select: none; }
.hero-glow { z-index: 0; }
html[data-glow="dawn"] .hero-glow-dawn,
html[data-glow="dawn"] .hero-glow-sill,
html[data-glow="day"] .hero-glow-day,
html[data-glow="night"] .hero-glow-night { display: block; }

/* ==================== B · 清晨：窗格晨光 (dawn) ==================== */
.hero-glow-dawn {
  opacity: 0.8;
  --glow-light: #EDC795;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 90%);
}
.glow-rays {
  position: absolute; top: -38%; right: -22%; width: 96%; height: 170%;
  transform: rotate(27deg); transform-origin: 70% 30%;
}
.glow-beam-a, .glow-beam-b, .glow-beam-c { position: absolute; top: 0; bottom: 0; }
.glow-beam-a { animation: glow-sway-a 16s ease-in-out infinite alternate; }
.glow-beam-b { animation: glow-sway-b 21s ease-in-out infinite alternate; }
.glow-beam-c { animation: glow-sway-c 13s ease-in-out infinite alternate; }
.glow-frame  { position: absolute; inset: 0; animation: glow-frame 18s ease-in-out infinite alternate; }
.glow-cloud  {
  position: absolute; top: 4%; left: 10%; width: 62%; height: 58%; border-radius: 50%;
  background: rgba(120, 108, 90, 0.16); filter: blur(90px);
  animation: glow-cloud 24s linear infinite;
}
.hero-glow-sill {
  z-index: 3; mix-blend-mode: multiply; opacity: 0.44; --glow-light: #EDC795;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, #000 30%, transparent 78%);
  mask-image: linear-gradient(225deg, #000 0%, #000 30%, transparent 78%);
}
.glow-sill-rays {
  position: absolute; top: -50%; right: -30%; width: 110%; height: 200%;
  transform: rotate(27deg); transform-origin: 70% 30%;
}
.glow-sill { position: absolute; top: 0; bottom: 0; animation: glow-sill 17s ease-in-out infinite alternate; }

@keyframes glow-sway-a { 0% { transform: translate3d(-200px,0,0); opacity: .25; } 50% { opacity: 1; } 100% { transform: translate3d(220px,0,0); opacity: .45; } }
@keyframes glow-sway-b { 0% { transform: translate3d(180px,0,0); opacity: .9; } 45% { opacity: .2; } 100% { transform: translate3d(-240px,0,0); opacity: 1; } }
@keyframes glow-sway-c { 0% { transform: translate3d(-140px,0,0); opacity: .15; } 60% { opacity: 1; } 100% { transform: translate3d(170px,0,0); opacity: .35; } }
@keyframes glow-frame  { 0% { transform: translate3d(-120px,0,0); opacity: 1; } 100% { transform: translate3d(160px,0,0); opacity: .35; } }
@keyframes glow-cloud  { 0% { transform: translate3d(-60%,-14%,0); opacity: 0; } 18% { opacity: 1; } 72% { opacity: 1; } 100% { transform: translate3d(90%,22%,0); opacity: 0; } }
@keyframes glow-sill   { 0% { transform: translate3d(-160px,0,0); opacity: .3; } 50% { opacity: 1; } 100% { transform: translate3d(180px,0,0); opacity: .5; } }

/* ==================== A · 白天：宣纸墨晕 (day) ==================== */
.hero-glow-day {
  isolation: isolate;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 36%, transparent 68%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 110px, #000 36%, transparent 68%);
}
.ink {
  position: absolute; mix-blend-mode: multiply; will-change: transform;
  animation: ink-drift-a 16s ease-in-out infinite alternate;
}
.ink-core {
  width: 100%; height: 100%;
  border-radius: 46% 54% 61% 39% / 42% 47% 53% 58%;
  filter: blur(72px); will-change: transform, opacity;
  animation: ink-breathe 12s ease-in-out infinite alternate;
}
.ink-2 { animation-name: ink-drift-b; animation-duration: 14s; animation-delay: -9s; }
.ink-3 { animation-name: ink-drift-c; animation-duration: 19s; animation-delay: -17s; }
.ink-4 { animation-name: ink-drift-b; animation-duration: 20s; animation-delay: -23s; animation-direction: alternate-reverse; }
.ink-5 { animation-name: ink-drift-c; animation-duration: 13s; animation-delay: -5s; }
.ink-2 .ink-core { border-radius: 58% 42% 37% 63% / 55% 38% 62% 45%; animation-duration: 15s; animation-delay: -12s; }
.ink-3 .ink-core { border-radius: 39% 61% 52% 48% / 61% 43% 57% 39%; animation-duration: 11s; animation-delay: -4s; }
.ink-4 .ink-core { border-radius: 63% 37% 45% 55% / 40% 58% 42% 60%; animation-duration: 17s; animation-delay: -20s; }
.ink-5 .ink-core { border-radius: 44% 56% 66% 34% / 52% 36% 64% 48%; animation-duration: 10s; animation-delay: -8s; }
.ink-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.22; mix-blend-mode: multiply; }

@keyframes ink-drift-a { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-32%,22%,0) rotate(28deg); } 100% { transform: translate3d(24%,-18%,0) rotate(-18deg); } }
@keyframes ink-drift-b { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(28%,-26%,0) rotate(-30deg); } 100% { transform: translate3d(-26%,20%,0) rotate(20deg); } }
@keyframes ink-drift-c { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-22%,-30%,0) rotate(36deg); } 100% { transform: translate3d(34%,14%,0) rotate(-14deg); } }
@keyframes ink-breathe { 0% { transform: rotate(0deg) scale(1,1); opacity: .35; } 50% { transform: rotate(60deg) scale(1.35,.78); opacity: 1; } 100% { transform: rotate(-40deg) scale(.75,1.3); opacity: .55; } }

/* ==================== D · 夜晚：暮色光晕 (night) ==================== */
.hero-glow-night {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 98%);
}
.glow-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  will-change: transform, opacity; filter: blur(68px);
}
.glow-orb-a { animation: glow-drift-a 16s ease-in-out 0s infinite alternate; }
.glow-orb-b { animation: glow-drift-b 20s ease-in-out -5.5s infinite alternate; }
.glow-orb-c { animation: glow-rise-c 13s ease-in-out -3.2s infinite alternate; }

@keyframes glow-drift-a {
  0%   { transform: translate3d(0,0,0) scale(0.84); opacity: 0.36; }
  50%  { transform: translate3d(380px,240px,0) scale(1.24); opacity: 0.96; }
  100% { transform: translate3d(180px,360px,0) scale(0.92); opacity: 0.68; }
}
@keyframes glow-drift-b {
  0%   { transform: translate3d(0,0,0) scale(1.22); opacity: 0.98; }
  50%  { transform: translate3d(-360px,280px,0) scale(0.82); opacity: 0.35; }
  100% { transform: translate3d(-420px,110px,0) scale(1.18); opacity: 0.72; }
}
@keyframes glow-rise-c {
  0%   { transform: translate3d(-50%,140px,0) scale(0.82,0.8); opacity: 0.35; }
  50%  { transform: translate3d(-34%,-120px,0) scale(1.25,1.18); opacity: 0.95; }
  100% { transform: translate3d(-64%,-220px,0) scale(0.94,1.08); opacity: 0.65; }
}

/* 必须置于全部 animation 简写之后：滚出首屏或隐藏标签页时暂停；减少动态效果时静帧 */
.glow-anim { will-change: transform, opacity; }
html[data-glow-paused="true"] .hero-glow *,
html[data-glow-paused="true"] .hero-glow-sill *,
#top[data-glow-paused="true"] .hero-glow *,
#top[data-glow-paused="true"] .hero-glow-sill * {
  animation-play-state: paused !important;
}
html[data-glow-motion="off"] .hero-glow *,
html[data-glow-motion="off"] .hero-glow-sill * {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow, .hero-glow *, .hero-glow-sill, .hero-glow-sill * {
    animation: none !important;
  }
}
@media (max-width: 920px) {
  .glow-rays { width: 160% !important; right: -70% !important; }
}