/* 参考 Astro / Hexo 主题加入的细节，最后载入。不需要时删掉各页面的引用即可。 */

/* —— 翻页过渡：页面之间柔和淡入淡出，导航保持不动 —— */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: page-out .32s ease both; }
::view-transition-new(root) { animation: page-in .6s cubic-bezier(.22, .8, .28, 1) both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }

/* —— 顶部阅读进度 —— */
.read-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #cfe6b8, #8fc17c 60%, #f2cc63);
  box-shadow: 0 0 8px #f2cc6380;
  pointer-events: none;
}

/* —— 回到顶部：一圈细细的进度环 —— */
.to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 55;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(250, 252, 246, .82);
  box-shadow: 0 10px 28px -12px rgba(40, 80, 50, .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(12px) scale(.9);
  pointer-events: none;
  transition: opacity .35s, transform .45s cubic-bezier(.22, .8, .28, 1), background .25s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: #fff; }
.to-top:hover path { transform: translateY(-2px); }
.to-top svg { width: 100%; height: 100%; display: block; }
.to-top path { transition: transform .3s; }
.to-top circle { fill: none; stroke-width: 1.5; }
.to-top .ring-bg { stroke: #9fbf9a40; }
.to-top .ring { stroke: #6fa866; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }

/* —— 照片渐显：加载好后从轻微模糊变清晰 —— */
.polish .photo-button img, .polish .note-cover img { transition: opacity .7s ease, filter .9s ease, transform 1.1s cubic-bezier(.22, .8, .28, 1); }
.polish .photo-button img:not(.is-loaded), .polish .note-cover img:not(.is-loaded) { opacity: 0; filter: blur(14px); transform: scale(1.03); }
.polish .photo-button, .polish .note-cover { background-color: #eaf1e2; }

/* —— 沉浸式看图 —— */
#photo-dialog.immersive {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  color: #eef5e8;
  background: #0e1f15;
  box-shadow: none;
}
#photo-dialog.immersive[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; animation: viewer-in .45s ease; }
#photo-dialog.immersive::backdrop { background: #0e1f15; backdrop-filter: none; -webkit-backdrop-filter: none; }
@keyframes viewer-in { from { opacity: 0; } }
.lightbox-ambient {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background: center / cover no-repeat;
  filter: blur(70px) saturate(1.1) brightness(.55);
  opacity: .75;
  transition: background-image .6s;
  pointer-events: none;
}
#photo-dialog.immersive > :not(.lightbox-ambient) { position: relative; z-index: 1; }
#photo-dialog.immersive .dialog-top { position: relative; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 16px 20px 6px 28px; color: #dcebd5; font-size: 14px; }
#photo-dialog.immersive .close-dialog { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
#photo-dialog.immersive .close-dialog:hover { background: rgba(255, 255, 255, .2); }
#photo-dialog.immersive .lightbox-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: 6px 84px; touch-action: pan-y; }
#photo-dialog.immersive .lightbox-figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  border-radius: 4px;
  box-shadow: 0 30px 80px -30px #000c;
  filter: blur(6px);
  transition: filter .45s ease;
  user-select: none;
  -webkit-user-drag: none;
}
#photo-dialog.immersive .lightbox-figure img.is-sharp { filter: none; }
#photo-dialog.immersive .lightbox-figure.swap img { animation: photo-swap .45s ease; }
@keyframes photo-swap { from { opacity: .35; transform: scale(.985); } }
#photo-dialog.immersive figcaption { color: #cfe0c8; margin-top: 12px; font-size: 13px; letter-spacing: 1px; }
#photo-dialog.immersive figcaption:empty { display: none; }
#photo-dialog.immersive .lightbox-controls { position: static; padding: 8px 20px 4px; justify-content: center; color: #b9cdb3; font-size: 12px; letter-spacing: 2px; }
#photo-dialog.immersive #photo-prev, #photo-dialog.immersive #photo-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  min-height: 0;
  padding: 0;
  translate: 0 -50%;
  border-radius: 50%;
  font-size: 0;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  box-shadow: none;
  transition: background .25s;
}
#photo-dialog.immersive #photo-prev { left: 18px; }
#photo-dialog.immersive #photo-next { right: 18px; }
#photo-dialog.immersive #photo-prev::before, #photo-dialog.immersive #photo-next::before { font-size: 20px; }
#photo-dialog.immersive #photo-prev::before { content: '←'; }
#photo-dialog.immersive #photo-next::before { content: '→'; }
#photo-dialog.immersive #photo-prev:hover, #photo-dialog.immersive #photo-next:hover { background: rgba(255, 255, 255, .2); }
.lightbox-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px max(20px, calc(50vw - 360px)) max(18px, env(safe-area-inset-bottom));
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.lightbox-strip::-webkit-scrollbar { display: none; }
.lightbox-strip[hidden] { display: none; }
.lightbox-strip button { flex: 0 0 auto; width: 58px; height: 58px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #ffffff14; opacity: .45; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .25s, outline-color .25s, transform .25s; }
.lightbox-strip button:hover { opacity: .8; }
.lightbox-strip button.active { opacity: 1; outline-color: #f2cc63; transform: translateY(-2px); }
.lightbox-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 640px) {
  ::view-transition-new(root) { animation-duration: .4s; }
  .to-top { width: 44px; height: 44px; right: 16px; bottom: 18px; }
  #photo-dialog.immersive .lightbox-figure { padding: 4px 10px; }
  #photo-dialog.immersive #photo-prev, #photo-dialog.immersive #photo-next { top: auto; bottom: 96px; translate: none; width: 44px; height: 44px; }
  #photo-dialog.immersive #photo-prev { left: 14px; }
  #photo-dialog.immersive #photo-next { right: 14px; }
  .lightbox-strip button { width: 50px; height: 50px; }
  .lightbox-ambient { filter: blur(40px) brightness(.5); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .polish .photo-button img:not(.is-loaded), .polish .note-cover img:not(.is-loaded) { filter: none; transform: none; }
}

/* —— 首页随拍：统一的正方形相框，一屏看完 ——
   照片铺满相框；特别宽或特别窄的照片改为完整显示，空处用同一张照片的柔光填满。点开仍可看完整原图。 */
.photo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: min(1000px, calc((100svh - 330px) * 4 + 54px));
}
.photo-grid .photo-button,
.photo-grid .photo-placeholder { aspect-ratio: 1 / 1; position: relative; overflow: hidden; border-radius: 6px; }
.photo-grid .photo-button img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.photo-grid .photo-button.fit-whole img { object-fit: contain; }
.photo-grid .photo-button.fit-whole::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: var(--bg) center / cover no-repeat;
  filter: blur(18px) saturate(1.05);
  opacity: .9;
}
.photo-grid .photo-button:hover img { opacity: 1; transform: scale(1.03); }
.photo-grid .photo-button img { transition: opacity .7s ease, filter .9s ease, transform .6s cubic-bezier(.22, .8, .28, 1); }

@media (max-width: 640px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: min(100%, calc((100svh - 300px) * 2 + 12px)); }
}

/* —— 首页整屏翻页 —— 由 polish.js 控制（轻轻一滑即带缓冲地翻到上一个 / 下一个板块），这里不使用 CSS 吸附。 */
html.paging { scroll-behavior: auto !important; }

/* —— 首页每个板块正好一整屏 ——
   翻页时板块顶端对齐屏幕最上面，导航浮在上方；内容向下让出导航高度，避免露出上一板块。 */
html:has(#home.hero) { --nav-h: 66px; scroll-padding-top: 0; }
#work.scene-field { min-height: 100svh; padding-top: calc(64px + var(--nav-h)); }
#redbook { min-height: 100svh; padding-top: calc(32px + var(--nav-h)); }
#moments { min-height: 100svh; padding-top: calc(40px + var(--nav-h)); display: flex; flex-direction: column; justify-content: center; }
#moments > .album-controls { align-self: flex-start; }
@media (max-width: 640px) {
  html:has(#home.hero) { --nav-h: 60px; }
  #work.scene-field { padding-top: calc(42px + var(--nav-h)); }
  #moments { padding-top: calc(24px + var(--nav-h)); }
}