/* ============================================================
 *  恋爱纪念日 · 自定义样式
 *  （Tailwind 管布局和颜色，这里只放 Tailwind 写不出来的：动画和交互反馈）
 *  ============================================================ */

body { font-family: 'Nunito', 'Quicksand', ui-rounded, system-ui, sans-serif; }

/* ---------- 动画关键帧 ---------- */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.18); }
  35% { transform: scale(1); }
  55% { transform: scale(1.12); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(14px); }
}
@keyframes fall {
  0% { transform: translateY(-8px); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translateY(90px); opacity: 0; }
}
@keyframes sakura-fall {
  0%   { transform: translateY(-8vh) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--op, 0.7); }
  92%  { opacity: var(--op, 0.7); }
  100% { transform: translateY(108vh) rotate(var(--spin, 320deg)); opacity: 0; }
}
@keyframes sakura-sway {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(var(--sway, 28px)); }
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 动画工具类 ---------- */
.heart-beat { animation: heartbeat 1.6s ease-in-out infinite; transform-origin: center; }
.floaty { animation: floaty 5s ease-in-out infinite; }
.drift { animation: drift 8s ease-in-out infinite; }
.petal { animation: fall 4.5s linear infinite; }
/* 背景一直飘落的樱花：外层往下落，内层左右轻轻摆 */
.sakura { animation: sakura-fall 12s linear infinite; will-change: transform; }
.sakura-inner { animation: sakura-sway 4s ease-in-out infinite; }
.modal-pop { animation: pop-in 0.22s ease-out both; }
.modal-fade { animation: fade-in 0.18s ease-out both; }

/* ---------- 悬停上浮（卡片） ---------- */
.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(45, 45, 45, 0.13); }

/* ---------- 按下回弹（按钮） ---------- */
.btn-press { transition: transform 0.12s ease, background-color 0.2s ease, color 0.2s ease; }
.btn-press:active { transform: scale(0.93); }

/* ---------- 互动背景 ----------
 * 元素的位置由 JS 直接写（见 js/components/backdrop.js），这里只管外观。
 */
/* 点屏幕炸开的粒子（动画由 el.animate() 给，这里只定位置和字形） */
.burst-bit {
  position: absolute;
  line-height: 1;
  user-select: none;
}

/* ---------- RPG 头像框 ----------
 * 套在头像外面的一圈，等级到了自动戴上（等级表在 data/rpg.js）。
 * 用 ::after 画，不去动头像本身的 ring，这样两边不会打架。
 * 套的容器需要有 relative。
 */
.rpg-frame::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 3px solid transparent;
  pointer-events: none;
}
.frame-petal::after { border-color: #F9B8C8; box-shadow: 0 0 10px rgba(249, 184, 200, 0.75); }
.frame-star::after  { border-color: #F9C25E; box-shadow: 0 0 14px rgba(249, 194, 94, 0.85); }
.frame-heart::after { border-color: #F48FB1; box-shadow: 0 0 16px rgba(244, 143, 177, 0.80); }
.frame-crown::after {
  border-color: #F2994A;
  box-shadow: 0 0 20px rgba(242, 153, 74, 0.85);
  animation: frame-glow 2.4s ease-in-out infinite;
}
@keyframes frame-glow {
  0%, 100% { border-color: #F2994A; box-shadow: 0 0 20px rgba(242, 153, 74, 0.85); }
  50%      { border-color: #F48FB1; box-shadow: 0 0 26px rgba(244, 143, 177, 0.95); }
}

/* ---------- 其它 ---------- */
::selection { background: #F7D5D5; }

/* 弹窗里滚到头了，别再把手势传给后面的页面（JS 那边也锁了一道，这里挡漏网的） */
.modal-fade { overscroll-behavior: contain; }
.warm-scroll { overscroll-behavior: contain; }

/* 弹窗内部滚动条：细一点、暖色一点 */
.warm-scroll { scrollbar-width: thin; scrollbar-color: #F0D9C4 transparent; }
.warm-scroll::-webkit-scrollbar { width: 6px; }
.warm-scroll::-webkit-scrollbar-thumb { background: #F0D9C4; border-radius: 999px; }
.warm-scroll::-webkit-scrollbar-track { background: transparent; }