.index-special-planner__open {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.index-special-planner__slide:focus-visible .index-special-planner__open {
  opacity: 1;
  pointer-events: auto;
}

.index-hero-modal.is-special-planner-modal:hover .index-hero-modal__close,
.index-hero-modal.is-special-planner-modal:focus-within .index-hero-modal__close {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .index-special-planner__nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
  }

  .index-special-planner__stage:hover .index-special-planner__nav,
  .index-special-planner__stage:focus-within .index-special-planner__nav {
    opacity: 1;
    pointer-events: auto;
  }

  .index-special-planner__stage:hover .index-special-planner__nav img,
  .index-special-planner__stage:focus-within .index-special-planner__nav img {
    filter: brightness(0) invert(1);
  }

  .index-special-planner__slide:hover .index-special-planner__open {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: none), (pointer: coarse) {
  .index-special-planner__slide.is-active .index-special-planner__open,
  .index-hero-modal.is-special-planner-modal .index-hero-modal__close {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .index-special-planner__open,
  .index-special-planner__nav {
    transition: none;
  }
}