@charset "UTF-8";

/* Interface motion only. Scene rendering, loading, and danmaku own their timing. */
:root {
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-hover: 240ms;
  --ui-press: 120ms;
  --ui-focus: 200ms;
  --ui-hover-lift: -2px;
  --ui-press-scale: .98;
  --ui-icon-shift: 2px;
  --ui-slide-ease: cubic-bezier(.45, 0, .22, 1);
  --ui-slide-time: 460ms;
}

:is(.button, .admin-link, .shortcut, .dialog-close,
    .filters button, .admin-tabs button, .admin-row button,
    .comment-pagination button, .viewer-page-header button,
    .view-modes button, .view-actions button, .music-button,
    .social-actions button, .danmaku-form button) {
  transition:
    background-color var(--ui-hover) var(--ui-ease),
    border-color var(--ui-hover) var(--ui-ease),
    color var(--ui-hover) var(--ui-ease),
    box-shadow var(--ui-hover) var(--ui-ease),
    opacity var(--ui-focus) var(--ui-ease),
    transform var(--ui-hover) var(--ui-ease) !important;
  transform-origin: center;
}

:is(.button, .shortcut, .collection-card):hover { transform: none; }

.collection-card {
  transition:
    border-color var(--ui-hover) var(--ui-ease),
    background-color var(--ui-hover) var(--ui-ease),
    box-shadow var(--ui-hover) var(--ui-ease),
    transform var(--ui-hover) var(--ui-ease) !important;
}
.collection-card .card-art>img {
  transition: transform 520ms var(--ui-ease), opacity var(--ui-hover) var(--ui-ease) !important;
}
.collection-card:hover .card-art>img { transform: none; }
.card-art, .shortcut-icon {
  transition:
    background-color var(--ui-hover) var(--ui-ease),
    border-color var(--ui-hover) var(--ui-ease),
    box-shadow var(--ui-hover) var(--ui-ease),
    color var(--ui-hover) var(--ui-ease) !important;
}
.card-arrow {
  transition:
    color var(--ui-hover) var(--ui-ease),
    background-color var(--ui-hover) var(--ui-ease),
    transform var(--ui-hover) var(--ui-ease),
    box-shadow var(--ui-hover) var(--ui-ease) !important;
}
.button>svg, .shortcut-icon>svg, .social-actions button>svg,
.viewer-page-header button>svg, .music-button>svg {
  transition:
    color var(--ui-hover) var(--ui-ease),
    fill var(--ui-hover) var(--ui-ease),
    opacity var(--ui-hover) var(--ui-ease),
    transform var(--ui-hover) var(--ui-ease) !important;
}

.search,
.dialog :is(input:not([type="checkbox"]), textarea, select),
.danmaku-form input,
.file-field {
  transition:
    background-color var(--ui-focus) var(--ui-ease),
    border-color var(--ui-focus) var(--ui-ease),
    box-shadow var(--ui-focus) var(--ui-ease),
    color var(--ui-focus) var(--ui-ease),
    opacity var(--ui-focus) var(--ui-ease) !important;
}
.search:focus-within {
  border-color: #bd985d;
  box-shadow: 0 0 0 3px #b3915420;
  background-color: #fffdf8;
}
.search:focus-within>svg { color: #9c743d; }
.search>svg { transition: color var(--ui-focus) var(--ui-ease) !important; }
.dialog :is(input:not([type="checkbox"]), textarea, select):focus {
  border-color: #b99053;
  box-shadow: 0 0 0 3px #b391541c;
}
.danmaku-form input:focus {
  border-color: #d0b57e;
  box-shadow: 0 0 0 3px #c6aa691c;
  background-color: #2a3d31;
}
.file-field:focus-within {
  border-color: #b38b4c;
  box-shadow: 0 0 0 3px #b3915417;
}
.dialog input[type="file"]::file-selector-button {
  font: inherit;
  border: 1px solid #dbc5a0;
  border-radius: 5px;
  padding: 6px 9px;
  margin-right: 9px;
  background-color: #f5ead4;
  color: #82623b;
  cursor: pointer;
  transition:
    background-color var(--ui-hover) var(--ui-ease),
    border-color var(--ui-hover) var(--ui-ease),
    color var(--ui-hover) var(--ui-ease) !important;
}

.filters button.active, .admin-tabs button.active {
  text-shadow: 0 0 .01px currentColor;
}
.viewer-page .music-button.active {
  border-color: #d4b77d99;
  background-color: #aa855026;
  box-shadow: 0 0 0 3px #c5a66a0d;
}
.viewer-page .social-actions button.liked {
  color: #e5ad91;
  text-shadow: 0 0 12px #cb8d6b26;
}
.viewer-page .social-actions button.liked>svg { fill: #d99b7f36; }
#danmaku-toggle[aria-pressed="false"] { opacity: .62; }

.dialog::backdrop {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
}
.inline-message {
  transition: color var(--ui-focus) var(--ui-ease), opacity var(--ui-focus) var(--ui-ease) !important;
}
.inline-message.success { color: #6d8848; }
.admin-comment-status {
  transition: background-color var(--ui-hover) var(--ui-ease), color var(--ui-hover) var(--ui-ease) !important;
}
.toast {
  transition: opacity var(--ui-hover) var(--ui-ease), transform var(--ui-hover) var(--ui-ease) !important;
}

/* Hover and press transforms are confined to devices with precise hover input. */
@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(var(--ui-hover-lift));
    box-shadow: 0 5px 12px #5b3d2814;
  }
  .collection-card:not(:disabled):hover {
    transform: translateY(var(--ui-hover-lift));
    border-color: #d9c4a2;
    box-shadow: 0 10px 24px #92704215;
  }
  .collection-card:not(:disabled):hover .card-art>img { transform: scale(1.035); }
  .collection-card:not(:disabled):hover .card-arrow { transform: translateX(var(--ui-icon-shift)); background-color: #fffdf8; }
  .shortcut:not(:disabled):hover { transform: translateY(var(--ui-hover-lift)); }
  .shortcut:not(:disabled):hover .shortcut-icon { border-color: #d8bd8c; box-shadow: 0 7px 18px #a47b3920; }
  .admin-link:not(:disabled):hover,
  .admin-row button:not(:disabled):hover,
  .comment-pagination button:not(:disabled):hover { background-color: #f4ead7; border-color: #c7ab7c; color: #8b6537; }
  .filters button:not(:disabled):hover,
  .admin-tabs button:not(:disabled):hover { color: #86602f; border-bottom-color: #cbb38c; }
  .dialog-close:not(:disabled):hover { color: #714d2e; background-color: #e9d8b845; }
  .dialog input[type="file"]:not(:disabled):hover::file-selector-button { background-color: #ebdabb; border-color: #c7a775; }
  .viewer-page-header button:not(:disabled):hover,
  .view-actions button:not(:disabled):hover,
  .view-modes button:not(:disabled):not(.active):hover { background-color: #d7c39b1c; color: #f0e4ca; }
  .music-button:not(:disabled):hover { background-color: #c1a36a26; border-color: #ceb47d99; }
  .social-actions button:not(:disabled):hover { color: #f0dfb8; opacity: 1; }
  .social-actions button.liked:not(:disabled):hover { color: #f0b99f; }
  .danmaku-form button:not(:disabled):hover { background-color: #ead3aa; box-shadow: 0 3px 12px #ddbd7f17; }
  .button:not(:disabled):hover>svg { transform: translateX(var(--ui-icon-shift)); }

  :is(.button, .admin-link, .shortcut, .collection-card, .dialog-close,
      .filters button, .admin-tabs button, .admin-row button,
      .comment-pagination button, .viewer-page-header button,
      .view-modes button, .view-actions button, .music-button,
      .social-actions button, .danmaku-form button):not(:disabled):not([aria-disabled="true"]):active {
    transform: scale(var(--ui-press-scale));
    transition-duration: var(--ui-press) !important;
  }
}

/* Override prior hover rules when a control becomes disabled during a request. */
:is(.button, .admin-link, .shortcut, .collection-card, .dialog-close,
    .filters button, .admin-tabs button, .admin-row button,
    .comment-pagination button, .viewer-page-header button,
    .view-modes button, .view-actions button, .music-button,
    .social-actions button, .danmaku-form button):disabled { pointer-events: none; }
:is(.button, .shortcut, .collection-card):disabled:hover,
.button[aria-disabled="true"]:hover { transform: none; }
.collection-card:disabled:hover .card-art>img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-hover: 160ms;
    --ui-focus: 140ms;
    --ui-press: 120ms;
    --ui-hover-lift: 0px;
    --ui-press-scale: 1;
    --ui-icon-shift: 0px;
  }
  .collection-card .card-art>img { transition: opacity 160ms var(--ui-ease) !important; }
  .collection-card:not(:disabled):hover .card-art>img { transform: none; }
  .toast, .toast.show { transform: translate(-50%, 0); }
  .toast { transition: opacity 160ms var(--ui-ease) !important; }
}

#portal-layout.is-route-slide {
  position: fixed;
  inset: 0;
  z-index: 59;
  overflow: hidden;
  background: inherit;
}

.admin-tab-pages { display: grid; overflow: clip; }
.admin-tab-pages > div { grid-area: 1 / 1; min-width: 0; }

#exhibition .loading-overlay {
  opacity: 1;
  translate: 0 0;
  transition: translate var(--ui-slide-time) var(--ui-slide-ease) !important;
}
#exhibition .loading-overlay.done {
  translate: 0 100%;
  transition: translate var(--ui-slide-time) var(--ui-slide-ease), visibility 0s var(--ui-slide-time) !important;
}
#exhibition .loading-overlay.done .loading-card { transform: none; }
#exhibition .viewer-toolbar {
  opacity: 1;
  translate: 0 0;
  transition: translate var(--ui-slide-time) var(--ui-slide-ease) !important;
}
#exhibition .is-loading .viewer-toolbar { translate: 0 200px; }

@media (prefers-reduced-motion: reduce) {
  #exhibition :is(.loading-overlay, .viewer-toolbar) { transition-duration: 160ms !important; }
  #exhibition .loading-overlay.done { transition-duration: 160ms, 0s !important; transition-delay: 0s, 160ms !important; }
}