/* A brief slate highlight follows the existing viewport entrance.
   No observer, scroll handler, layout change or continuous animation is added.
   The controller already rearms mobile cards only after a 72px departure. */
@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .reveal:is(
    .pub-card, .video-card, .event-card, .meeting-card, .linkedin-card, .thought-card,
    .snapshot-panel, .blog-feature, .blog-external-card,
    .role-card, .theme-row:not(:first-child), .archive-row, .past-event,
    .security-toolbar
  ) {
    position: relative;
    isolation: isolate;
    --aw-highlight-edge: rgba(109, 139, 160, .8);
    --aw-highlight-glow: rgba(132, 158, 177, .28);
  }

  .motion-enabled .reveal:is(
    .pub-card, .video-card, .event-card, .meeting-card, .linkedin-card, .thought-card,
    .snapshot-panel, .blog-feature, .blog-external-card,
    .role-card, .theme-row:not(:first-child), .archive-row, .past-event,
    .security-toolbar
  )::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    animation: none;
  }

  /* A distinct 2px rim stays at the edge, away from card copy and controls.
     Its soft inner halo is painted once; only its opacity is animated. */
  .motion-enabled .reveal:is(
    .pub-card, .video-card, .event-card, .meeting-card, .linkedin-card, .thought-card,
    .snapshot-panel, .blog-feature, .blog-external-card
  )::after {
    z-index: 1;
    box-shadow: inset 0 0 0 2px var(--aw-highlight-edge),
                inset 0 0 26px var(--aw-highlight-glow);
  }

  .motion-enabled .reveal:is(.event-card, .snapshot-panel) {
    --aw-highlight-edge: rgba(194, 213, 226, .86);
    --aw-highlight-glow: rgba(197, 216, 229, .24);
  }

  /* The row wash sits behind content in the whitespace beside a divider.
     Its 20px band leaves the reading-area background and text untouched. */
  .motion-enabled .reveal:is(
    .role-card, .theme-row:not(:first-child), .archive-row, .past-event,
    .security-toolbar
  )::after {
    z-index: -1;
    --aw-highlight-wash-angle: 180deg;
    background:
      linear-gradient(90deg, var(--aw-highlight-edge), rgba(148, 171, 188, .5) 66%, transparent)
        left top / 65% 2px no-repeat,
      linear-gradient(var(--aw-highlight-wash-angle), rgba(131, 157, 176, .24), rgba(165, 184, 199, .1) 46%, transparent)
        left top / 65% 20px no-repeat;
  }

  .motion-enabled .reveal:is(.past-event, .security-toolbar)::after {
    --aw-highlight-wash-angle: 0deg;
    background-position: left bottom, left bottom;
  }

  .motion-enabled .reveal.is-visible:is(
    .pub-card, .video-card, .event-card, .meeting-card, .linkedin-card, .thought-card,
    .snapshot-panel, .blog-feature, .blog-external-card,
    .role-card, .theme-row:not(:first-child), .archive-row, .past-event,
    .security-toolbar
  )::after {
    animation: aw-scroll-highlight 2.6s ease-in-out both;
    animation-delay: calc(var(--reveal-delay, 0ms) + 100ms);
  }

  /* Clear the effect synchronously, even before the pause observer runs. */
  .motion-paused .reveal:is(
    .pub-card, .video-card, .event-card, .meeting-card, .linkedin-card, .thought-card,
    .snapshot-panel, .blog-feature, .blog-external-card,
    .role-card, .theme-row:not(:first-child), .archive-row, .past-event,
    .security-toolbar
  )::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

@keyframes aw-scroll-highlight {
  0% { opacity: 0; }
  26%, 44% { opacity: 1; }
  100% { opacity: 0; }
}