/* ============================================================
   恋爱日记 · 动态效果（追加层）
   在 editorial.css 之后加载，用于覆盖并叠加动效样式
   ============================================================ */

/* ---------- 4. 顶部滚动进度条 ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  z-index: 120;
  pointer-events: none;
  background: linear-gradient(90deg, var(--rose), var(--champagne));
  box-shadow: 0 0 14px rgba(224, 92, 122, 0.6);
}

/* ---------- 6. 鼠标跟随光晕 ---------- */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(224, 92, 122, 0.10) 0%, rgba(217, 168, 126, 0.05) 42%, transparent 70%);
  transition: opacity 0.5s ease;
  will-change: transform;
}
.cursor-glow.is-active { opacity: 1; }
@media (hover: none) { .cursor-glow { display: none; } }

/* ---------- 1. 首屏照片层（滚动切换） ---------- */
.hero-media__layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}

/* ---------- 2. 照片滚动视差 ---------- */
.memory__media img {
  transform: scale(1);
  will-change: transform, filter;
  transition: filter .2s ease, transform .2s ease;
}
.memory__media::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--black); transform: scaleX(1); transform-origin: right; transition: transform 900ms cubic-bezier(.77,0,.18,1); pointer-events: none; }
.memory.is-revealed .memory__media::before { transform: scaleX(0); }

/* ---------- 5. 照片 3D 倾斜 ---------- */
.memory {
  perspective: 1000px;
}
.memory__card {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) scale(var(--s, 1));
  transition: transform 0.18s ease-out, box-shadow 0.5s var(--ease);
  will-change: transform;
}
.memory__card:hover {
  --ty: -6px;
  --s: 1.012;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)) scale(var(--s, 1));
}

/* ---------- 8. 便签墙漂浮 ---------- */
.note__inner {
  /* Keep note content on a stable compositing layer; the wall should not
     continuously rewrite transform while the page is scrolling. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ---------- 10. 主标题逐字浮现 ---------- */
.hero-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  animation: charIn 0.7s var(--ease) forwards;
}
@keyframes charIn {
  to { opacity: 1; transform: translateY(0); }
}