/* ============================================================
   动效补充：入场序列、卡片/按钮反馈、数字滚动、弹层节奏。
   参考 GSAP 的 timeline + stagger 与 anime.js 的 spring/loop，
   用 CSS keyframes + 一个很小的 JS 助手实现，不引入依赖。
   ============================================================ */

:root {
  --m-ease-out: cubic-bezier(.22, 1, .36, 1);
  --m-ease-soft: cubic-bezier(.16, 1, .3, 1);
  --m-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- 通用小反馈 ---------- */
.btn,
.destination-card,
.seed-card {
  position: relative;
}

.btn,
.seed-card {
  overflow: hidden;
}

.motion-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .15;
  transform: scale(0);
  pointer-events: none;
  animation: m-ripple .62s var(--m-ease-out) forwards;
}

@keyframes m-ripple {
  to { transform: scale(1); opacity: 0; }
}

.is-bumping {
  animation: m-bump .44s var(--m-ease-spring);
}

#dayNow,
#objProg {
  display: inline-block;
  transform-origin: 50% 60%;
}

@keyframes m-bump {
  0% { transform: scale(1); }
  38% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ---------- 首页入场 ---------- */
#view-home.is-entering .hero-copy > * {
  animation: m-rise .82s var(--m-ease-out) both;
}
#view-home.is-entering .hero-copy > :nth-child(1) { animation-delay: .04s; }
#view-home.is-entering .hero-copy > :nth-child(2) { animation-delay: .10s; }
#view-home.is-entering .hero-copy > :nth-child(3) { animation-delay: .16s; }
#view-home.is-entering .hero-copy > :nth-child(4) { animation-delay: .24s; }
#view-home.is-entering .hero-copy > :nth-child(5) { animation-delay: .31s; }
#view-home.is-entering .hero-copy > :nth-child(6) { animation-delay: .38s; }

/* 标题下划线像毛笔一样从左铺开 */
.hero h1 em:after {
  transform-origin: left center;
}
#view-home.is-entering .hero h1 em:after {
  animation: m-brush .8s var(--m-ease-out) .54s both;
}
@keyframes m-brush {
  from { opacity: .3; transform: scaleX(.04); }
  to { opacity: 1; transform: scaleX(1); }
}

/* 花信小印章轻轻摇晃 */
.note-stamp {
  animation: m-stamp 7s ease-in-out infinite;
}
@keyframes m-stamp {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-5.5deg) translateY(-2px); }
}

#view-home.is-entering .hero-picture {
  animation: m-picture 1.05s var(--m-ease-out) .16s both;
}

#view-home.is-entering .section-top {
  animation: m-rise .7s var(--m-ease-out) .30s both;
}
#view-home.is-entering .destination-card {
  animation: m-card .72s var(--m-ease-out) both;
  animation-delay: calc(.38s + var(--i, 0) * .08s);
}
#view-home.is-entering .departure {
  animation: m-rise .72s var(--m-ease-out) .62s both;
}
#view-home.is-entering .meta-row {
  animation: m-rise .6s var(--m-ease-out) .70s both;
}
#view-home.is-entering .links,
#view-home.is-entering .footnote {
  animation: m-rise .6s var(--m-ease-out) .76s both;
}

@keyframes m-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes m-card {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes m-picture {
  from { opacity: 0; transform: rotate(5deg) translateY(24px) scale(.97); }
  to { opacity: 1; transform: rotate(2deg) translateY(0) scale(1); }
}

/* 贴纸的持续浮动：周期错开，像手帐里被风吹着的小纸条 */
.sticker-cloud {
  animation: m-float-cloud 7.5s ease-in-out infinite;
  will-change: transform;
}
.sticker-flower {
  animation: m-float-flower 6.2s ease-in-out -1.4s infinite;
  will-change: transform;
}

@keyframes m-float-cloud {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  50% { transform: rotate(-7.5deg) translateY(-7px); }
}
@keyframes m-float-flower {
  0%, 100% { transform: rotate(7deg) translateY(0); }
  50% { transform: rotate(9.5deg) translateY(-6px); }
}

/* 相纸上的缓慢斜光，给静态插画一点呼吸 */
.hero-picture::after {  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, .34) 50%, transparent 58%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0;
  animation: m-sheen 9.5s ease-in-out 2.4s infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

@keyframes m-sheen {
  0%, 62% { background-position: 180% 0; }
  82%, 100% { background-position: -80% 0; }
}

/* 桌面端：相片跟着鼠标做很小的透视偏移 */
@media (hover: hover) and (pointer: fine) {
  .hero-picture {
    transform: perspective(900px) rotate(2deg) rotateX(var(--m-rx, 0deg)) rotateY(var(--m-ry, 0deg));
    transition: transform .32s var(--m-ease-out);
    will-change: transform;
  }
}

/* ---------- 目的地卡与按钮 ---------- */
.destination-card {
  transition: transform .4s var(--m-ease-out), border-color .25s ease, box-shadow .4s var(--m-ease-out);
}
.destination-card.selected {
  border-color: #879D73;
  box-shadow: 0 0 0 3px rgba(221, 230, 204, .5);
}
.destination-card.just-selected {
  animation: m-select-ring .58s var(--m-ease-out);
}
@keyframes m-select-ring {
  0% { box-shadow: 0 0 0 0 rgba(135, 157, 115, 0); }
  55% { box-shadow: 0 0 0 6px rgba(221, 230, 204, .55); }
  100% { box-shadow: 0 0 0 3px rgba(221, 230, 204, .5); }
}

/* 选中目的地时，SVG 里的纸片按顺序“拼”回去，像重新摆了一次贴纸 */
.destination-card.just-selected .destination-art svg > * {
  transform-box: fill-box;
  transform-origin: 50% 55%;
  animation: m-piece .52s var(--m-ease-out) both;
}
@keyframes m-piece {
  from { opacity: .15; transform: translateY(7px) scale(.93) rotate(-2deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
.destination-card.just-selected .destination-art svg > :nth-child(1) { animation-delay: .02s; }
.destination-card.just-selected .destination-art svg > :nth-child(2) { animation-delay: .05s; }
.destination-card.just-selected .destination-art svg > :nth-child(3) { animation-delay: .08s; }
.destination-card.just-selected .destination-art svg > :nth-child(4) { animation-delay: .11s; }
.destination-card.just-selected .destination-art svg > :nth-child(5) { animation-delay: .14s; }
.destination-card.just-selected .destination-art svg > :nth-child(6) { animation-delay: .17s; }
.destination-card.just-selected .destination-art svg > :nth-child(7) { animation-delay: .20s; }
.destination-card.just-selected .destination-art svg > :nth-child(8) { animation-delay: .23s; }
.destination-card.just-selected .destination-art svg > :nth-child(9) { animation-delay: .26s; }
.destination-card.just-selected .destination-art svg > :nth-child(n+10) { animation-delay: .29s; }

.destination-art svg {
  transform-origin: 50% 62%;
  transition: transform .65s var(--m-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .destination-card {
    transform: perspective(900px) rotateX(var(--m-crx, 0deg)) rotateY(var(--m-cry, 0deg));
    transform-style: preserve-3d;
  }
  .destination-card:hover {
    transform: perspective(900px) translateY(-6px) rotateX(var(--m-crx, 0deg)) rotateY(var(--m-cry, 0deg));
    box-shadow: 0 14px 26px rgba(133, 144, 107, .16);
  }
  .destination-card:active {
    transform: perspective(900px) translateY(-2px) scale(.996) rotateX(var(--m-crx, 0deg)) rotateY(var(--m-cry, 0deg));
  }
  .destination-card:hover .destination-art svg {
    transform: scale(1.045) translateY(-2px);
  }
  .destination-card:hover .destination-rule span {
    transform: translate(2px, -2px);
  }
  .destination-rule span {
    display: inline-block;
    transition: transform .3s var(--m-ease-out);
  }

  .btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(88, 122, 73, .26);
  }
  .btn.primary:active {
    transform: translateY(0) scale(.985);
  }
  .btn.ghost:hover {
    background: #F5F0E1;
  }
  .btn.primary span {
    display: inline-block;
    transition: transform .28s var(--m-ease-out);
  }
  .btn.primary:hover span {
    transform: translate(2px, -2px);
  }
}

/* `:active` 的轻微回弹在触屏上也保留 */
.btn:active,
.seed-card:active {
  transition-duration: .08s;
}

/* ---------- 游戏页入场 ---------- */
#view-game.is-entering .topbar {
  animation: m-rise .55s var(--m-ease-out) both;
}
#view-game.is-entering .hud-cell {
  animation: m-rise .55s var(--m-ease-out) both;
}
#view-game.is-entering .hud-cell:nth-child(1) { animation-delay: .06s; }
#view-game.is-entering .hud-cell:nth-child(2) { animation-delay: .11s; }
#view-game.is-entering .hud-cell:nth-child(3) { animation-delay: .16s; }
#view-game.is-entering .trip-banner {
  animation: m-rise .65s var(--m-ease-out) .14s both;
}
#view-game.is-entering .day-path {
  animation: m-rise .6s var(--m-ease-out) .22s both;
}
#view-game.is-entering .garden-area {
  animation: m-rise .72s var(--m-ease-out) .26s both;
}
#view-game.is-entering .care-area {
  animation: m-rise .72s var(--m-ease-out) .34s both;
}

/* 当前这一天：一圈很轻的呼吸光环 */
.day-stop.current i {
  animation: m-day-pulse 2.8s ease-in-out infinite;
}
@keyframes m-day-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(231, 235, 217, .9); }
  50% { box-shadow: 0 0 0 7px rgba(231, 235, 217, 0); }
}

/* 水滴刚落下时弹一下，只在“新填满”的那一颗上触发 */
.drop.just-filled {
  animation: m-drop .42s var(--m-ease-spring);
}
@keyframes m-drop {
  0% { transform: rotate(-45deg) scale(.6); }
  55% { transform: rotate(-45deg) scale(1.18); }
  100% { transform: rotate(-45deg) scale(1); }
}

/* ---------- 结算页 ---------- */
#view-ending.is-entering .ending-trip {
  animation: m-rise .6s var(--m-ease-out) .08s both;
}
#view-ending.is-entering .result-head {
  animation: m-rise .7s var(--m-ease-out) .16s both;
}
#view-ending.is-entering .card {
  animation: m-rise .7s var(--m-ease-out) .30s both;
}
#view-ending.is-entering .actions {
  animation: m-rise .7s var(--m-ease-out) .42s both;
}
#view-ending.is-entering .star {
  animation: m-star .58s var(--m-ease-spring) both;
}
#view-ending.is-entering .star:nth-child(1) { animation-delay: .30s; }
#view-ending.is-entering .star:nth-child(2) { animation-delay: .40s; }
#view-ending.is-entering .star:nth-child(3) { animation-delay: .50s; }
@keyframes m-star {
  0% { opacity: 0; transform: scale(.45) rotate(-18deg); }
  70% { opacity: 1; transform: scale(1.18) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

#view-ending.is-entering .breakdown li {
  animation: m-row .55s var(--m-ease-out) both;
  animation-delay: calc(.42s + var(--i, 0) * .06s);
}
@keyframes m-row {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 结算大分数：底下的纸片先轻轻托一下 */
#view-ending.is-entering .score-big b {
  display: inline-block;
  animation: m-score-settle .7s var(--m-ease-spring) .2s both;
}
@keyframes m-score-settle {
  0% { opacity: 0; transform: translateY(10px) scale(.9); }
  65% { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 图鉴 / 设置 ---------- */
#view-album.is-entering .album-card {
  animation: m-rise .62s var(--m-ease-out) both;
  animation-delay: calc(.05s + var(--i, 0) * .055s);
}
#view-settings.is-entering .card {
  animation: m-rise .6s var(--m-ease-out) both;
}
#view-settings.is-entering .card:nth-of-type(1) { animation-delay: .06s; }
#view-settings.is-entering .card:nth-of-type(2) { animation-delay: .14s; }

/* ---------- 弹层与提示 ---------- */
.overlay-mask {
  background: rgba(48, 39, 26, .40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: m-fade .28s ease both;
}
@keyframes m-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

#overlayRoot:not(.hidden) .sheet {
  animation: m-sheet .44s var(--m-ease-soft) both;
}
@keyframes m-sheet {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#overlayRoot:not(.hidden) .sheet > * {
  animation: m-sheet-item .46s var(--m-ease-out) both;
}
#overlayRoot:not(.hidden) .sheet > :nth-child(1) { animation-delay: .06s; }
#overlayRoot:not(.hidden) .sheet > :nth-child(2) { animation-delay: .10s; }
#overlayRoot:not(.hidden) .sheet > :nth-child(3) { animation-delay: .14s; }
#overlayRoot:not(.hidden) .sheet > :nth-child(4) { animation-delay: .18s; }
#overlayRoot:not(.hidden) .sheet > :nth-child(n+5) { animation-delay: .22s; }
@keyframes m-sheet-item {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

#overlayRoot:not(.hidden) .report li {
  animation: m-row .48s var(--m-ease-out) both;
  animation-delay: calc(.20s + var(--i, 0) * .05s);
}

.toast:not(.hidden) {
  animation: m-toast .38s var(--m-ease-spring) both;
}
@keyframes m-toast {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.hint {
  transition: background .25s ease, color .25s ease;
}

/* 低动态偏好由 body.reduce-motion 与系统媒体查询统一兜底 */
@media (prefers-reduced-motion: reduce) {
  .floating-sticker,
  .hero-picture::after,
  .day-stop.current i {
    animation: none !important;
  }
}