/* Shared motion. Transform and opacity only. Durations live in tokens.css. */

@keyframes nfc-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nfc-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nfc-sheet {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nfc-modal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nfc-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

.view > * {
  animation: nfc-enter var(--dur-normal) var(--ease-out) both;
}

.modal-back {
  animation: nfc-fade var(--dur-fast) var(--ease-out);
}

.sheet {
  animation: nfc-sheet var(--dur-normal) var(--ease-out);
}

.toast.show {
  animation: nfc-enter var(--dur-fast) var(--ease-out);
}

.sk {
  background: linear-gradient(100deg, var(--paper-2) 30%, var(--surface) 50%, var(--paper-2) 70%);
  background-size: 220% 100%;
  animation: nfc-shimmer 1.2s var(--ease-out) infinite;
  border-radius: var(--radius-sm);
}

button.btn:active,
button.btn-line:active,
a.btn:active,
.icon-btn:active,
.bottomnav a:active,
.side-link:active {
  transform: scale(0.98);
}

@media (min-width: 980px) {
  .sheet,
  .modal {
    animation: nfc-modal var(--dur-normal) var(--ease-out);
  }
}

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

  .view > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  button.btn:active,
  button.btn-line:active,
  a.btn:active,
  .icon-btn:active {
    transform: none;
  }
}