@charset "UTF-8";

/* Angled reflections give the floating surfaces volume without drawing a border. */
:is(#portal-layout > .site-header, .portal-hero-copy, .collection-heading > .search,
    .collection-card .card-arrow, .dialog, .toast,
    .viewer-page-header button, .exhibit-info, .music-button,
    .view-modes, .view-actions, .loading-card, .social-actions, .danmaku-form input,
    .danmaku-form button) {
  background-color: var(--liquid-solid, #303030);
  background-image:
    radial-gradient(ellipse 75% 84% at 22% 0%, #fff2dc18, transparent 68%),
    radial-gradient(ellipse 58% 75% at 100% 100%, #edc79611, transparent 72%),
    linear-gradient(165deg, #ffffff07, #ffffff01 48%, #00000012);
  box-shadow:
    inset 0 5px 7px -6px #fff6e258,
    inset 0 -6px 10px -8px #e7c59a3d,
    0 8px 22px #0005;
}

.dialog, .portal-hero-copy {
  --liquid-solid: #303030;
  --liquid-tint: rgb(34 34 34 / .84);
  --liquid-filter: blur(10px) saturate(1.1);
}

.viewer-page :is(.exhibit-info, .view-modes, .view-actions, .loading-card, .music-button) {
  --liquid-tint: rgb(40 40 40 / .66);
}

.viewer-page .exhibit-info h2 { text-shadow: 0 1px 5px #000b; }

.viewer-page :is(.music-button.active, .danmaku-form button) {
  --liquid-solid: #47382a;
  --liquid-tint: rgb(65 46 30 / .76);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(#portal-layout > .site-header, .portal-hero-copy, .collection-heading > .search,
      .collection-card .card-arrow, .dialog, .toast,
      .viewer-page-header button, .exhibit-info, .music-button,
      .view-modes, .view-actions, .loading-card, .social-actions) {
    background-color: var(--liquid-tint, rgb(34 34 34 / .67));
    -webkit-backdrop-filter: var(--liquid-filter, blur(5px) saturate(1.14));
    backdrop-filter: var(--liquid-filter, blur(5px) saturate(1.14));
  }
}

/* Limit refraction to compact scene overlays. The CSS glass works on touch devices. */
@supports (backdrop-filter: blur(2px) url("#liquid-refraction")) {
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-transparency: no-preference) {
    .viewer-page :is(.exhibit-info, .view-modes, .view-actions, .music-button) {
      --liquid-filter: blur(2px) url("#liquid-refraction") saturate(1.14);
    }
  }
}

#portal-layout .collection-heading > .search:focus-within,
.viewer-page .danmaku-form input:focus-visible {
  background-color: #38332d;
  box-shadow: 0 0 0 2px var(--ios-action);
}

@media (hover: hover) and (pointer: fine) {
  #exhibition :is(.viewer-page-header button, .music-button, .danmaku-form button):not(:disabled):hover,
  #portal-layout .collection-card:hover .card-arrow {
    background-color: #554638;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :is(#portal-layout > .site-header, .portal-hero-copy, .collection-heading > .search,
      .collection-card .card-arrow, .dialog, .toast,
      .viewer-page-header button, .exhibit-info, .music-button,
      .view-modes, .view-actions, .loading-card, .social-actions) {
    background-color: var(--liquid-solid, #303030);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}