/* Small interaction and accessibility layer for the deployed static build. */
:root {
  --focus-ring: #f4c430;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

.button,
.lang-button,
.github-button,
.wallpaper-button,
.space-card,
.note-card,
.about-card__btn,
.back-top {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease,
    background-color 160ms ease, color 160ms ease;
}

@media (hover: hover) {
  .button:hover,
  .about-card__btn:hover,
  .back-top:hover {
    transform: translateY(-2px);
  }

  .space-card:hover,
  .note-card:hover {
    transform: translateY(-4px);
  }
}

.button:active,
.lang-button:active,
.github-button:active,
.wallpaper-button:active,
.about-card__btn:active,
.back-top:active {
  transform: translateY(1px) scale(0.985);
}

.space-card--private {
  position: relative;
  border-color: color-mix(in srgb, #f4c430 68%, currentColor);
  background-image: linear-gradient(135deg, rgba(244, 196, 48, 0.09), transparent 46%);
}

.space-card--private .space-card__tag {
  color: #101820;
  background: #f4c430;
  border-color: #f4c430;
  letter-spacing: 0.08em;
}

.space-card--private .space-card__foot {
  font-weight: 800;
}

.space-card--private .space-card__foot::before {
  content: "受保护入口";
  margin-right: auto;
  opacity: 0.66;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

@media (max-width: 720px) {
  .button,
  .lang-button,
  .github-button,
  .wallpaper-button,
  .menu-button,
  .about-card__btn,
  .back-top {
    min-height: 44px;
  }

  .hero__actions .button {
    justify-content: center;
  }

  .space-card__foot {
    min-height: 44px;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}