/* HTML 默认可见。进入/退出动画由 motion.js 临时执行，不依赖隐藏类。 */
.like-button > span:first-child {
  display: inline-block;
  transform-origin: 50% 58%;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 240ms ease;
}

.main-nav a.active::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
  .button > span,
  .memory-card-meta small {
    display: inline-block;
    transition: translate 220ms ease;
  }
  .button:active,
  .icon-button:active,
  .zoom-controls button:active {
    scale: .98;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .memory-card {
    transition: translate 240ms cubic-bezier(.22,.61,.36,1);
  }
  .memory-card:hover {
    translate: 0 -3px;
  }
  .button:hover > span,
  .memory-card:hover .memory-card-meta small {
    translate: 3px 0;
  }
  .main-memory,
  .person-photos button {
    transition: filter 220ms ease;
  }
  .main-memory:hover,
  .person-photos button:hover {
    filter: brightness(1.035);
  }
  .like-button {
    transition: color 180ms ease;
  }
  .subtle-link,
  .text-button {
    transition: color 180ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-card,
  .main-memory,
  .person-photos button,
  .like-button,
  .like-button > span:first-child,
  .subtle-link,
  .text-button {
    animation: none !important;
    transition: none !important;
  }
  .memory-card:hover {
    translate: none;
  }
}