/* Desktop pointer details inspired by the reference, tuned to this portfolio's blue palette. */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  body::after {
    content: "";
    position: fixed;
    z-index: 0;
    top: -390px;
    left: -390px;
    width: 780px;
    height: 780px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0);
    background: radial-gradient(circle, rgba(113, 160, 224, .17) 0%, rgba(91, 139, 204, .095) 29%, rgba(76, 122, 184, .035) 49%, transparent 69%);
    transition: opacity 400ms ease;
  }
  html[data-pointer-active] body::after { opacity: 1; }

  .section-nav a { justify-content: flex-start; gap: 16px; }
  .section-nav i {
    order: -1;
    flex: 0 0 30px;
    width: 30px;
    background: #647d9e;
    transform: none;
    transition: flex-basis 300ms cubic-bezier(.2,.7,.2,1), background-color 300ms ease;
  }
  .section-nav a:hover i,
  .section-nav a:focus-visible i,
  .section-nav a[aria-current="location"] i {
    flex-basis: 62px;
    background: #d0e0f7;
    transform: none;
  }
  .section-nav a:hover span,
  .section-nav a:focus-visible span { color: var(--text); }

  .experience-row {
    border-radius: 3px;
    transition: background-color 260ms ease, box-shadow 260ms ease;
  }
  .experience-row:hover,
  .experience-row:focus-within {
    background-color: rgba(143, 187, 245, .055);
    box-shadow: 0 0 0 12px rgba(143, 187, 245, .055);
  }
  .experience-row .role h3 { transition: color 260ms ease; }
  .experience-row:hover .role h3,
  .experience-row:focus-within .role h3 { color: #c7dfff; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}
html[data-motion="reduced"] body::after { display: none; }