/*
 * Small progressive-enhancement additions for vanilla-interactions.js.
 * Page-specific visuals remain in the generated/source CSS.
 */

.lp-root .ref-media:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.lp-root .ph-mx-reset[hidden] {
  display: none;
}

.lp-root .ph-mx-besttag {
  position: relative;
  z-index: 2;
}

.lp-root .ph-mx-cell.is-hover:not(.is-best) {
  background-color: var(--color-bg-tertiary);
}

.lp-root .ct-map.is-loaded .ct-map__frame {
  display: block;
  width: 100%;
  min-height: inherit;
  border: 0;
}

.lp-root .qf-turnstile[data-state="failed"] {
  border-color: var(--color-error-text);
}

.lp-root .qf-turnstile[data-state="failed"] .cf-turnstile {
  display: none;
}

.lp-root.js-io .io-item {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 480ms ease,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: min(calc(var(--io-i, 0) * 60ms), 420ms);
}

.lp-root.js-io .io-item.is-inview {
  opacity: 1;
  transform: none;
}

.lp-root.reveal-armed .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(14px);
}

.lp-root.reveal-armed .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lp-root.js-io .io-item,
  .lp-root.reveal-armed .reveal,
  .lp-root .ref-track,
  .lp-root .ph-cm-img,
  .lp-root .ph-mx-cell,
  .lp-root .ketut-stage {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .lp-root.js-io .io-item,
  .lp-root.reveal-armed .reveal {
    opacity: 1 !important;
  }
}