/* Homepage portal hit areas
   The large visual regions are navigation, not decoration. */

.home-portal {
  position: relative;
  isolation: isolate;
  cursor: pointer;
}

.home-portal-hit,
.home-item-hit {
  position: absolute;
  inset: 0;
  display: block;
  color: transparent;
  text-decoration: none;
}

.home-portal-hit {
  z-index: 1;
}

.home-portal > :not(.home-portal-hit) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.home-portal a:not(.home-portal-hit),
.home-portal button,
.home-portal input,
.home-portal select,
.home-portal textarea,
.home-portal [tabindex]:not([tabindex="-1"]) {
  pointer-events: auto;
}

.home-portal-hit:focus-visible,
.home-item-hit:focus-visible {
  outline: 2px solid rgba(111, 234, 255, 0.9);
  outline-offset: -8px;
  box-shadow: inset 0 0 0 1px rgba(241, 213, 143, 0.5);
}

.home-portal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 72% 34%, rgba(111, 234, 255, 0.055), transparent 28rem),
    linear-gradient(90deg, rgba(241, 213, 143, 0.026), transparent 42%);
  transition: opacity 180ms ease;
}

.home-portal:hover::after,
.home-portal:focus-within::after {
  opacity: 1;
}

.home-portal .art-preview img,
.home-portal .home-writing-feature,
.home-portal .section-heading h2,
.home-portal .art-heading h2,
.home-portal .home-writing-copy h2 {
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1), filter 240ms ease, color 180ms ease;
}

.home-portal:hover .art-preview img,
.home-portal:focus-within .art-preview img {
  transform: scale(1.025);
  filter: saturate(1.06) brightness(1.03);
}

.home-portal:hover .home-writing-feature,
.home-portal:focus-within .home-writing-feature {
  transform: translateY(-3px);
  border-color: rgba(241, 213, 143, 0.48);
}

.home-portal:hover .section-heading h2,
.home-portal:focus-within .section-heading h2,
.home-portal:hover .art-heading h2,
.home-portal:focus-within .art-heading h2,
.home-portal:hover .home-writing-copy h2,
.home-portal:focus-within .home-writing-copy h2 {
  color: var(--ivory, #ece6da);
  transform: translateX(4px);
}

.writing-index-item {
  cursor: pointer;
  isolation: isolate;
}

.writing-index-item .home-item-hit {
  z-index: 3;
}

.writing-index-item > :not(.home-item-hit) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.writing-index-item:hover,
.writing-index-item:focus-within {
  border-bottom-color: rgba(111, 234, 255, 0.34);
  background:
    radial-gradient(circle at 70% 50%, rgba(111, 234, 255, 0.055), transparent 22rem),
    linear-gradient(90deg, rgba(241, 213, 143, 0.035), transparent 44%);
}

.writing-index-item:hover h3,
.writing-index-item:focus-within h3 {
  color: var(--editorial-gold-bright, #f1d58f);
}

@media (prefers-reduced-motion: reduce) {
  .home-portal .art-preview img,
  .home-portal .home-writing-feature,
  .home-portal .section-heading h2,
  .home-portal .art-heading h2,
  .home-portal .home-writing-copy h2 {
    transition: none;
  }

  .home-portal:hover .art-preview img,
  .home-portal:focus-within .art-preview img,
  .home-portal:hover .home-writing-feature,
  .home-portal:focus-within .home-writing-feature,
  .home-portal:hover .section-heading h2,
  .home-portal:focus-within .section-heading h2,
  .home-portal:hover .art-heading h2,
  .home-portal:focus-within .art-heading h2,
  .home-portal:hover .home-writing-copy h2,
  .home-portal:focus-within .home-writing-copy h2 {
    transform: none;
  }
}