@charset "UTF-8";
/* 奇遇手记 · 动效（二）：页面转场、毛玻璃顶栏、跟随光斑、3D 微倾、磁吸按钮、环境光等。
   与 motion.css 共用缓动和时长变量；全部遵守 prefers-reduced-motion。 */

/* ===== 8. 页面之间：共享元素变形 + 方向切换（View Transitions API）=====
   点日记标题：卡片本身“展开”成文章页（App Store 卡片式）；往深处走内容向左滑，返回向右滑；页头和侧栏不动。 */
::view-transition { pointer-events: none; }
.site-header { view-transition-name: site-header; }
.sidebar { view-transition-name: site-sidebar; }
.compact-bar { view-transition-name: compact-bar; }
.fab-top { view-transition-name: fab-top; }
.read-progress { view-transition-name: read-progress; }
::view-transition-group(site-header), ::view-transition-group(site-sidebar), ::view-transition-group(compact-bar), ::view-transition-group(fab-top), ::view-transition-group(read-progress) { animation: none; z-index: 100; }
::view-transition-old(site-header), ::view-transition-old(site-sidebar), ::view-transition-old(compact-bar), ::view-transition-old(fab-top), ::view-transition-old(read-progress) { display: none; }
::view-transition-new(site-header), ::view-transition-new(site-sidebar), ::view-transition-new(compact-bar), ::view-transition-new(fab-top), ::view-transition-new(read-progress) { animation: none; }

::view-transition-old(.nav-forward) { --slide: -64px; animation: 170ms var(--m3-emphasized-accel) both vt-fade reverse, 460ms var(--m3-standard) both vt-slide reverse; }
::view-transition-new(.nav-forward) { --slide: 64px; animation: 300ms var(--m3-emphasized-decel) 130ms both vt-fade, 560ms var(--m3-emphasized-decel) both vt-slide; }
::view-transition-old(.nav-back) { --slide: 64px; animation: 170ms var(--m3-emphasized-accel) both vt-fade reverse, 460ms var(--m3-standard) both vt-slide reverse; }
::view-transition-new(.nav-back) { --slide: -64px; animation: 300ms var(--m3-emphasized-decel) 130ms both vt-fade, 560ms var(--m3-emphasized-decel) both vt-slide; }
::view-transition-old(.page-fade) { animation: 150ms var(--m3-emphasized-accel) both vt-fade reverse; }
::view-transition-new(.page-fade) { animation: 320ms var(--m3-emphasized-decel) 90ms both vt-fade, 480ms var(--m3-emphasized-decel) both vt-rise; }

/* 卡片 → 文章：盒子平滑变形，内容不拉伸（从顶部裁切），中途带一点模糊掩盖插值 */
::view-transition-group(.card-morph) { animation-duration: 560ms; animation-timing-function: var(--m3-emphasized-decel); z-index: 50; }
::view-transition-image-pair(.card-morph) { border-radius: var(--radius-lg); overflow: hidden; animation: vt-blur 560ms var(--m3-standard); }
::view-transition-old(.card-morph), ::view-transition-new(.card-morph) { width: 100%; height: 100%; object-fit: none; object-position: top left; }
::view-transition-old(.card-morph) { animation: 220ms var(--m3-emphasized-accel) both vt-fade-plain reverse; }
::view-transition-new(.card-morph) { animation: 360ms var(--m3-emphasized-decel) 120ms both vt-fade-plain; }
::view-transition-group(.title-morph) { animation-duration: 560ms; animation-timing-function: var(--m3-emphasized-decel); z-index: 60; }
@keyframes vt-fade { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
@keyframes vt-fade-plain { from { opacity: 0; } to { opacity: 1; } }
@keyframes vt-slide { from { translate: var(--slide) 0; } to { translate: 0 0; } }
@keyframes vt-rise { from { translate: 0 18px; } to { translate: 0 0; } }
@keyframes vt-blur { 35% { filter: blur(2px); } }

/* ===== 9. 毛玻璃顶栏（滚过页头后出现，往下读时收起，往上滑立刻回来）+ 带进度环的回到顶部 ===== */
.compact-bar {
  position: fixed; z-index: 45; top: 10px; left: 50%; translate: -50% -150%; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 14px; padding: 5px 5px 5px 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper-raised) 70%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid color-mix(in srgb, var(--rule-strong) 70%, transparent); box-shadow: var(--shadow-md);
  transition: translate var(--d-long) var(--spring), opacity var(--d-short) var(--m3-standard);
}
.compact-bar.on { translate: -50% 0; opacity: 1; pointer-events: auto; }
.compact-title { padding: 0; border: 0; background: none; font: 600 16px var(--serif); letter-spacing: .06em; color: var(--ink); white-space: nowrap; cursor: pointer; }
.compact-title .title-dot { color: var(--clay); }
.compact-nav { position: relative; isolation: isolate; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper-sunk); }
.compact-nav a { position: relative; padding: 5px 13px; border-radius: 999px; font-size: 13px; color: var(--muted); transition: color var(--d-short); }
.compact-nav a[aria-current="page"] { color: var(--ink); }
.compact-nav .nav-indicator { top: 3px; height: calc(100% - 6px); }
.fab-top {
  position: fixed; z-index: 44; right: 24px; bottom: 24px; width: 52px; height: 52px; overflow: hidden;
  display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%;
  background: color-mix(in srgb, var(--paper-raised) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md); color: var(--accent); font-size: 18px; cursor: pointer;
  scale: .3; opacity: 0; pointer-events: none; translate: var(--tx, 0px) var(--ty, 0px);
  transition: scale var(--d-long) var(--spring), opacity var(--d-short), translate var(--d-medium) var(--spring);
}
.fab-top.on { scale: 1; opacity: 1; pointer-events: auto; }
.fab-top.on:active { scale: .9; transition-duration: var(--d-press); }
.fab-top svg { position: absolute; inset: 4px; rotate: -90deg; }
.fab-top .track { fill: none; stroke: var(--rule); stroke-width: 2.4; }
.fab-top .ring { fill: none; stroke: var(--clay); stroke-width: 2.4; stroke-linecap: round; transition: stroke-dashoffset 120ms linear; }
.site-shell:has(.owner-link) .fab-top { bottom: 86px; }
@media (max-width: 680px) {
  .compact-bar { left: 10px; right: 10px; translate: 0 -150%; justify-content: space-between; padding-left: 14px; }
  .compact-bar.on { translate: 0 0; }
  .compact-nav a { padding: 5px 9px; }
  .fab-top { right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  .site-shell:has(.owner-link) .fab-top { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ===== 10. 鼠标设备：跟随光斑、社团卡片 3D 微倾、磁吸按钮 ===== */
@media (hover: hover) and (pointer: fine) {
  .auth-card, .account-card, .author-head, .about-prose, .archive-list { position: relative; }
  .diary-entry::after, .club-card::after, .auth-card::after, .account-card::after, .author-head::after, .about-prose::after, .archive-list::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--clay) 9%, transparent), transparent 55%);
    transition: opacity var(--d-long) var(--m3-standard);
  }
  .lit::after { opacity: 1; }
  .club-card {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    transition: transform var(--d-long) var(--spring-soft), box-shadow var(--d-medium) var(--m3-standard), border-color var(--d-medium);
  }
  .club-card:hover { --lift: -4px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
  .owner-link, .auth-submit, .masthead-link.primary, .pager a, .manager-btn.primary { translate: var(--tx, 0px) var(--ty, 0px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-color-scheme: dark) {
  .diary-entry::after, .club-card::after, .auth-card::after, .account-card::after, .author-head::after, .about-prose::after, .archive-list::after {
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--clay) 14%, transparent), transparent 55%);
  }
}

/* ===== 11. 页头后方缓慢流动的环境光 ===== */
html, body { overflow-x: clip; }
.site-shell { position: relative; isolation: isolate; }
.ambient { position: absolute; z-index: -1; top: -180px; left: 50%; width: min(1300px, 150vw); height: 640px; translate: -50% 0; pointer-events: none; filter: blur(72px); opacity: .6; }
.ambient span { position: absolute; border-radius: 50%; will-change: transform; }
.ambient span:nth-child(1) { width: 440px; height: 440px; left: 6%; top: 60px; background: color-mix(in srgb, var(--clay) 26%, transparent); animation: drift-a 24s ease-in-out infinite alternate; }
.ambient span:nth-child(2) { width: 380px; height: 380px; right: 10%; top: 0; background: color-mix(in srgb, #e3a857 30%, transparent); animation: drift-b 28s ease-in-out infinite alternate; }
.ambient span:nth-child(3) { width: 320px; height: 320px; left: 44%; top: 200px; background: color-mix(in srgb, var(--accent) 14%, transparent); animation: drift-c 32s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(140px, 60px) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-160px, 90px) scale(.9); } }
@keyframes drift-c { to { transform: translate(90px, -70px) scale(1.2); } }
@media (prefers-color-scheme: dark) { .ambient { opacity: .38; } }
.intro .ambient { animation: fade-in 1.6s var(--m3-standard) both; }

/* ===== 12. 细节 ===== */
/* 社费余额卡：一道光沿着边框缓缓绕行 */
@property --edge-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.club-balance::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--edge-angle), transparent 0 65%, color-mix(in srgb, var(--clay) 70%, transparent) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: edge-orbit 7s linear infinite;
}
@keyframes edge-orbit { to { --edge-angle: 360deg; } }
/* 正文链接：下划线从左向右扫过 */
.entry-prose a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat, linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent)) 0 100% / 100% 1px no-repeat; transition: background-size var(--d-long) var(--m3-emphasized-decel); }
.entry-prose a:hover { background-size: 100% 1.5px, 100% 1px; }
/* 配图：滚进视野时从略放大慢慢落定 */
@supports (animation-timeline: view()) {
  .post-image img { animation: img-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes img-settle { from { scale: 1.14; filter: saturate(.6) brightness(1.04); } to { scale: 1; filter: none; } }
}
/* 标签云：悬停时轻轻弹起，相邻的跟着动一点 */
@media (hover: hover) and (pointer: fine) {
  .tag-cloud li { transition: transform var(--d-medium) var(--spring); }
  .tag-cloud li:hover { transform: translateY(-3px); }
  .tag-cloud li:has(+ li:hover), .tag-cloud li:hover + li { transform: translateY(-1px); }
}
/* 输入框获得焦点：光晕柔和收拢 */
.auth-field input:focus, .manager-main input:focus, .manager-main textarea:focus { animation: focus-ring var(--d-long) var(--m3-emphasized-decel); }
@keyframes focus-ring { from { box-shadow: 0 0 0 8px transparent; } }

/* ===== 减弱动态效果 ===== */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*), ::view-transition-new(*), ::view-transition-group(*), ::view-transition-image-pair(*) { animation-duration: 0s !important; animation-delay: 0s !important; }
  .compact-bar, .fab-top { transition: opacity var(--d-short) !important; }
  .club-balance::before, .post-image img, .ambient span, .intro .ambient { animation: none !important; }
  .motion .reveal, .motion .reveal .entry-prose > *, .motion .reveal .entry-header h2 { transition: none !important; }
  .club-card { transform: none !important; }
}