/* Only opacity and visibility change, so every mode keeps its exact layout. */
body [data-focus-control] {
  opacity: 1;
  visibility: visible;
  transition: opacity 160ms ease-out, visibility 0s linear;
}

body[data-focus-hidden="true"] [data-focus-control] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}

body[data-focus-hidden="true"],
body[data-focus-hidden="true"] * {
  cursor: none !important;
}

/* The controller also makes hidden controls inert. Attribution stays visible. */
#fullscreen-settings .quiet-note {
  margin: 0 0 6px;
}

.fullscreen-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 3px 0 0;
  color: #b8cdccab;
  font-size: 10px;
  line-height: 1.6;
}

.fullscreen-shortcuts > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fullscreen-shortcuts kbd {
  min-width: 20px;
  padding: 1px 5px;
  border: 1px solid #d9e4df26;
  border-radius: 4px;
  background: #d9e4df08;
  color: #e0e5dcc9;
  font: inherit;
  text-align: center;
}

body[data-motion="reduced"] [data-focus-control],
body[data-motion="off"] [data-focus-control] {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  body [data-focus-control],
  body[data-focus-hidden="true"] [data-focus-control] {
    transition: none;
  }
}