:root {
  --site-popup-dissolve-duration: 520ms;
  --site-page-dissolve-duration: 380ms;
}

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  body * {
    cursor: url("/assets/cursors/pixel-pointer.png") 1 1, auto !important;
    cursor: -webkit-image-set(url("/assets/cursors/pixel-pointer.png") 1.6x) 1 1, auto !important;
    cursor: image-set(url("/assets/cursors/pixel-pointer.png") 1.6x) 1 1, auto !important;
  }

  a,
  a *,
  button,
  button *,
  [role="button"],
  [role="button"] *,
  .friends-table-wrap {
    cursor: url("/assets/cursors/pixel-link.png") 7 2, pointer !important;
    cursor: -webkit-image-set(url("/assets/cursors/pixel-link.png") 1.6x) 7 2, pointer !important;
    cursor: image-set(url("/assets/cursors/pixel-link.png") 1.6x) 7 2, pointer !important;
  }

  html.site-cursor-pressed,
  html.site-cursor-pressed body,
  html.site-cursor-pressed body * {
    cursor: url("/assets/cursors/pixel-pointer-mint.png") 1 1, auto !important;
    cursor: -webkit-image-set(url("/assets/cursors/pixel-pointer-mint.png") 1.6x) 1 1, auto !important;
    cursor: image-set(url("/assets/cursors/pixel-pointer-mint.png") 1.6x) 1 1, auto !important;
  }

  html.site-cursor-pressed a,
  html.site-cursor-pressed a *,
  html.site-cursor-pressed button,
  html.site-cursor-pressed button *,
  html.site-cursor-pressed [role="button"],
  html.site-cursor-pressed [role="button"] *,
  html.site-cursor-pressed .friends-table-wrap {
    cursor: url("/assets/cursors/pixel-link-mint.png") 7 2, pointer !important;
    cursor: -webkit-image-set(url("/assets/cursors/pixel-link-mint.png") 1.6x) 7 2, pointer !important;
    cursor: image-set(url("/assets/cursors/pixel-link-mint.png") 1.6x) 7 2, pointer !important;
  }
}

canvas.site-cursor-bubbles {
  z-index: 2147483646;
}

.site-motion-enabled [data-page-transition] {
  opacity: 1;
  transition: opacity var(--site-page-dissolve-duration) ease;
}

.site-motion-enabled:not(.site-motion-ready) [data-page-transition],
.site-motion-enabled.site-motion-leaving [data-page-transition] {
  opacity: 0;
  pointer-events: none;
}

dialog.site-dissolve-dialog {
  opacity: 0;
  transition:
    opacity var(--site-popup-dissolve-duration) ease,
    display var(--site-popup-dissolve-duration) allow-discrete,
    overlay var(--site-popup-dissolve-duration) allow-discrete;
}

dialog.site-dissolve-dialog[open] {
  opacity: 1;
}

dialog.site-dissolve-dialog::backdrop {
  opacity: 0;
  transition:
    opacity var(--site-popup-dissolve-duration) ease,
    display var(--site-popup-dissolve-duration) allow-discrete,
    overlay var(--site-popup-dissolve-duration) allow-discrete;
}

dialog.site-dissolve-dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  dialog.site-dissolve-dialog[open],
  dialog.site-dissolve-dialog[open]::backdrop {
    opacity: 0;
  }
}

/* Paper sheet slide-down & slide-up transition from top frame with 15deg rotation for Friends & Notes popups */
dialog.friend-popup,
dialog.kiosk-popup {
  opacity: 1;
  transform: translate3d(0, calc(-50vh - 50% - 120px), 0) rotate(15deg);
  transition:
    transform 340ms cubic-bezier(0.32, 0, 0.67, 0),
    display 340ms allow-discrete,
    overlay 340ms allow-discrete;
}

dialog.friend-popup[open],
dialog.kiosk-popup[open] {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transition:
    transform var(--site-popup-dissolve-duration) cubic-bezier(0.16, 1, 0.3, 1),
    display var(--site-popup-dissolve-duration) allow-discrete,
    overlay var(--site-popup-dissolve-duration) allow-discrete;
}

@starting-style {
  dialog.friend-popup[open],
  dialog.kiosk-popup[open] {
    opacity: 1;
    transform: translate3d(0, calc(-50vh - 50% - 120px), 0) rotate(15deg);
  }
}

/* Keep the language control clear of the final navigation links on phones. */
@media (max-width: 767px) {
  .global-header:has(> .header-lang-switch),
  .kiosk-header:has(> .header-lang-switch),
  .friends-header:has(> .header-lang-switch),
  .books-header:has(> .header-lang-switch) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: start;
    column-gap: 12px;
  }

  .global-header:has(> .header-lang-switch) .global-nav,
  .kiosk-header:has(> .header-lang-switch) .kiosk-nav,
  .friends-header:has(> .header-lang-switch) .friends-nav,
  .books-header:has(> .header-lang-switch) .books-nav {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    flex-wrap: wrap;
    gap: 12px 16px;
    overflow: visible;
  }

  .global-header:has(> .header-lang-switch) > .header-lang-switch,
  .kiosk-header:has(> .header-lang-switch) > .header-lang-switch,
  .friends-header:has(> .header-lang-switch) > .header-lang-switch,
  .books-header:has(> .header-lang-switch) > .header-lang-switch {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-motion-enabled [data-page-transition],
  dialog.site-dissolve-dialog,
  dialog.site-dissolve-dialog::backdrop,
  dialog.friend-popup,
  dialog.kiosk-popup {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }
}