.pressable {
  transition: transform var(--press-ms) ease-out;
}

.pressable.is-pressed {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .card {
    transition: transform 0.38s var(--ease-out);
  }

  .card:hover {
    transform: scale(1.08);
  }

  .card:first-child {
    transform-origin: left center;
  }

  .gcard .poster {
    transition: transform 0.28s var(--ease-out);
  }

  .gcard:hover .poster {
    transform: translateY(-5px);
  }

  .zt-item {
    transition: border-color 0.2s ease, transform 0.28s var(--ease-out);
  }

  .zt-item:hover {
    border-color: #4a5c4e;
    transform: translateX(4px);
  }
}

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

  .page.is-enter,
  .page.is-enter-back {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .card:hover,
  .gcard:hover .poster,
  .zt-item:hover {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav,
  .btn-ghost,
  .drawer,
  .toast {
    backdrop-filter: none;
    background: var(--bg);
  }
}

@media (prefers-contrast: more) {
  :root {
    --bg: #0a0e0b;
    --txt: #fff8e8;
    --line: #6fa85a;
  }

  .nav,
  .chip,
  .ep-num,
  .sbox {
    border: 1px solid var(--line);
  }
}