/* OEAF — kompaktowy kontroler ruchu */
.oeaf-motion-control,
.oeaf-motion-control * {
  box-sizing: border-box;
}

.oeaf-motion-control {
  --oeaf-admin-bar-height: var(--wp-admin--admin-bar--height, 0px);
  --oeaf-sticky-top-gap: clamp(10px, 1.2vw, 16px);
  --oeaf-sticky-side-gap: clamp(10px, 1.4vw, 20px);
  position: fixed;
  top: 50%;
  right: max(var(--oeaf-sticky-side-gap), env(safe-area-inset-right));
  z-index: 2147483000;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  transform: translateY(-50%);
  transition: opacity 140ms linear;
	width: 44px;
	height: 44px;
}

/*
 * Menu prowadzi ten sam, pojedynczy węzeł nad swoim pustym slotem. Przycisk
 * pozostaje fixed, więc jego pozycja w DOM i kolejność Tab nigdy się nie zmieniają.
 */
.oeaf-motion-control.oeaf-motion-control--menu-guided {
  top: var(--oeaf-motion-guided-top);
  right: auto;
  left: var(--oeaf-motion-guided-left);
  width: 44px;
  height: 44px;
  transform: none;
}

.oeaf-motion-toggle {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 44px;
	min-width: 44px;
	max-width: 44px;
	min-height: 44px;
	max-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  appearance: none;
}

.oeaf-motion-toggle::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.25px solid #f0f0f0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.82);
}

.oeaf-motion-toggle:hover {
  color: #000;
}

.oeaf-motion-toggle:hover::before {
  background: #f0f0f0;
}

.oeaf-motion-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #000;
}

.oeaf-motion-toggle-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.oeaf-motion-toggle-icon svg {
  display: block;
  width: 100%;
  height: 100%;
	max-width: none !important;
	max-height: none !important;
  overflow: visible;
  fill: currentColor;
}

.oeaf-motion-pause,
.oeaf-motion-play {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.oeaf-motion-pause {
  opacity: 1;
  transform: scale(1);
}

.oeaf-motion-play {
  opacity: 0;
  transform: scale(0.62);
}

.oeaf-motion-toggle[aria-pressed="true"] .oeaf-motion-pause {
  opacity: 0;
  transform: scale(0.62);
}

.oeaf-motion-toggle[aria-pressed="true"] .oeaf-motion-play {
  opacity: 1;
  transform: scale(1);
}

.oeaf-motion-tooltip {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  left: auto;
  width: max-content;
  max-width: 15rem;
  padding: 0.55rem 0.75rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 4px));
  transition: opacity 120ms linear, transform 120ms linear;
}

.oeaf-motion-toggle:hover .oeaf-motion-tooltip,
.oeaf-motion-toggle:focus-visible .oeaf-motion-tooltip {
  opacity: 1;
  transform: translateY(-50%);
}

.oeaf-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-oeaf-motion="reduce"] .oeaf-motion-tooltip {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-oeaf-motion]) .oeaf-motion-tooltip {
    transition: none;
  }
}

/* Na urządzeniu dotykowym ruch postaci nie jest informacją ani stanem
   kontrolki. Wyłączamy go, aby podczas przewijania cała ikona była optycznie
   nieruchoma; animacja pozostaje na komputerach z precyzyjnym kursorem. */
@media (hover: none) and (pointer: coarse) {
  .oeaf-motion-toggle[aria-pressed="false"] .oeaf-motion-person,
  .oeaf-motion-toggle[aria-pressed="false"] .oeaf-motion-streaks {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 31.25rem) {
  .oeaf-motion-tooltip {
    top: 50%;
    right: calc(100% + 8px);
    bottom: auto;
    left: auto;
    transform: translateY(calc(-50% + 4px));
  }

  .oeaf-motion-toggle:hover .oeaf-motion-tooltip,
  .oeaf-motion-toggle:focus-visible .oeaf-motion-tooltip {
    transform: translateY(-50%);
  }
}

@media (forced-colors: active) {
  .oeaf-motion-toggle,
  .oeaf-motion-tooltip {
    forced-color-adjust: auto;
  }
}

/* Po połączeniu z menu podpowiedź rozwija się pod grupą, nie nad PL/EN. */
.oeaf-motion-control--menu-joined .oeaf-motion-tooltip {
  top: calc(100% + 8px);
  right: 0;
  transform: translateY(-4px);
}

.oeaf-motion-control--menu-joined .oeaf-motion-toggle:hover .oeaf-motion-tooltip,
.oeaf-motion-control--menu-joined .oeaf-motion-toggle:focus-visible .oeaf-motion-tooltip {
  transform: translateY(0);
}

body.oeaf-menu-is-open .oeaf-motion-control {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.admin-bar .oeaf-motion-control {
  --oeaf-admin-bar-height: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 782px) {
  body.admin-bar .oeaf-motion-control {
    --oeaf-admin-bar-height: var(--wp-admin--admin-bar--height, 46px);
  }
}

@media (max-width: 47.99rem) {
  .oeaf-motion-control {
    --oeaf-sticky-top-gap: 10px;
    --oeaf-sticky-side-gap: 10px;
  }
}

html[data-oeaf-motion="reduce"] .oeaf-motion-control {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-oeaf-motion]) .oeaf-motion-control {
    transition: none;
  }
}