/* Keep the existing opening; carry its soft settling motion into other actions. */
@supports (transition-behavior: allow-discrete) and (overlay: auto) {
  .modal {
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition:
      opacity 180ms ease-out,
      transform 220ms cubic-bezier(.22,.8,.22,1),
      display 220ms allow-discrete,
      overlay 220ms allow-discrete;
  }
  .modal[open] {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* Closing still changes native state immediately. Exiting paint never blocks a tap. */
  .modal:not([open]),
  .modal:not([open])::backdrop {
    pointer-events: none;
  }
  .modal::backdrop {
    background-color: #3d483400;
    backdrop-filter: blur(0);
    transition:
      background-color 220ms ease-out,
      backdrop-filter 220ms ease-out,
      display 220ms allow-discrete,
      overlay 220ms allow-discrete;
  }
  .modal[open]::backdrop {
    background-color: #3d483453;
    backdrop-filter: blur(6px);
  }
  @starting-style {
    .modal[open] {
      opacity: 0;
      transform: translateY(8px) scale(.98);
    }
    .modal[open]::backdrop {
      background-color: #3d483400;
      backdrop-filter: blur(0);
    }
  }
}
#next-time-overview,
#next-time-detail,
#collection-browse {
  animation: panel-settle 220ms cubic-bezier(.22,.8,.22,1);
}
.collection-grid button {
  transition: background-color 180ms ease-out, border-color 180ms ease-out,
    box-shadow 180ms ease-out, transform 180ms ease-out;
}
.collection-grid button:active,
.next-time-action:not(:disabled):active {
  transform: scale(.98);
}
@keyframes panel-settle {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .collection-grid button:active,
  .next-time-action:not(:disabled):active {
    transform: none;
  }
}