/* ============================================================
   interaction-polish.css — detail micro-interactions
   ------------------------------------------------------------
   Small, tasteful touches that complement micro-interactions.css.
   Focus: deep-link / TOC navigation feedback and tap affordances
   on both mobile and desktop. Everything here is purely additive
   feedback — never required for content to be readable — and is
   fully neutralised under prefers-reduced-motion at the bottom.
   ============================================================ */

/* ---------- Deep-link / TOC jump: target highlight pulse ----------
   When a reader follows a table-of-contents link, a footnote, or an
   external deep link to "#some-id", the destination briefly washes
   with the accent colour and slides a short accent bar in from the
   left. This answers "where did I just land?" — a common point of
   confusion on long articles — without moving any layout.
   Gated behind .motion-reveal so no-JS / reduced-motion visitors are
   unaffected. */
@keyframes target-wash {
  0%   { background-color: color-mix(in srgb, var(--color-accent, var(--primary)) 20%, transparent); }
  70%  { background-color: color-mix(in srgb, var(--color-accent, var(--primary)) 14%, transparent); }
  100% { background-color: transparent; }
}

html.motion-reveal .post-content :is(h1, h2, h3, h4, h5, h6):target,
html.motion-reveal .post-content :is(p, li, blockquote, figure, table, pre):target,
html.motion-reveal .post-content :is(.footnote-definition, [id^="fn:"], [id^="fnref"]):target {
  animation: target-wash 2s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
  border-radius: 6px;
  /* keep the highlight clear of the sticky header */
  scroll-margin-top: calc(var(--header-height, 64px) + 20px);
}

/* Headings additionally get a brief accent bar that grows in from the
   left edge — a quiet "you are here" marker that fades with the wash. */
@keyframes target-bar {
  0%   { opacity: 0; transform: scaleY(0); }
  20%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}
html.motion-reveal .post-content :is(h1, h2, h3, h4, h5, h6):target {
  position: relative;
}
html.motion-reveal .post-content :is(h1, h2, h3, h4, h5, h6):target::before {
  content: "";
  position: absolute;
  left: -0.6rem;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  border-radius: 3px;
  background: var(--color-accent, var(--primary));
  transform-origin: top center;
  animation: target-bar 2s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
  pointer-events: none;
}

/* ---------- JS-triggered landing flash (in-page TOC clicks) ----------
   The :target pulse above only fires on real fragment navigation: an
   initial deep-link load, or the browser changing the hash. The sidebar
   table of contents (toc-highlight.js) intercepts its own clicks for
   smooth scrolling and updates the URL with history.replaceState(), which
   does NOT re-match :target — so following a heading from the contents
   list scrolled the reader to it with no "you landed here" cue at all.
   (The right-side reading-companion TOC uses native anchors, so :target
   still fires there; this only backfills the sidebar / any JS jump.)
   toc-highlight.js adds .anchor-target-flash to the destination on click;
   we replay the exact same wash + accent-bar so the two paths feel
   identical. Same .motion-reveal gate and reduced-motion neutralisation
   as the :target rules, so no-JS / motion-averse visitors are unaffected. */
html.motion-reveal .post-content .anchor-target-flash {
  animation: target-wash 2s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
  border-radius: 6px;
}
html.motion-reveal .post-content :is(h1, h2, h3, h4, h5, h6).anchor-target-flash {
  position: relative;
}
html.motion-reveal .post-content :is(h1, h2, h3, h4, h5, h6).anchor-target-flash::before {
  content: "";
  position: absolute;
  left: -0.6rem;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  border-radius: 3px;
  background: var(--color-accent, var(--primary));
  transform-origin: top center;
  animation: target-bar 2s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
  pointer-events: none;
}

/* ---------- TOC links: tap feedback (mobile) ----------
   micro-interactions.css already adds a hover slide for pointer users.
   Add a quick press response so taps on the contents list feel as
   tactile on a phone as a card does. */
.toc a,
.toc-highlight a {
  -webkit-tap-highlight-color: transparent;
}
.toc a:active,
.toc-highlight a:active {
  transform: translateX(2px) scale(0.98);
  transition: transform 0.1s ease;
}

/* ---------- Footnote references: tap target + press ----------
   Footnote superscripts are tiny; give them a comfortable hit area
   and a small press cue so jumping to / back from notes feels solid
   on touch screens. */
.post-content .footnote-ref a,
.post-content a.footnote-backref {
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.post-content .footnote-ref a:active,
.post-content a.footnote-backref:active {
  transform: scale(0.85);
}

/* ---------- Reading-progress bar: soft leading glow ----------
   The bar (custom.css) fills as the page scrolls. Add a faint glow at
   its leading edge so motion reads clearly as it advances, on phones
   especially where the bar is the primary scroll cue. Additive only. */
html.motion-reveal .reading-progress-bar {
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent, var(--primary)) 55%, transparent);
}

/* ============================================================
   Reduced motion: neutralise every effect above.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.motion-reveal .post-content :is(h1, h2, h3, h4, h5, h6):target,
  html.motion-reveal .post-content :is(p, li, blockquote, figure, table, pre):target,
  html.motion-reveal .post-content :is(.footnote-definition, [id^="fn:"], [id^="fnref"]):target {
    animation: none !important;
    background-color: transparent !important;
  }
  html.motion-reveal .post-content :is(h1, h2, h3, h4, h5, h6):target::before {
    animation: none !important;
    display: none !important;
  }
  html.motion-reveal .post-content .anchor-target-flash {
    animation: none !important;
    background-color: transparent !important;
  }
  html.motion-reveal .post-content :is(h1, h2, h3, h4, h5, h6).anchor-target-flash::before {
    animation: none !important;
    display: none !important;
  }
  .toc a:active,
  .toc-highlight a:active,
  .post-content .footnote-ref a:active,
  .post-content a.footnote-backref:active {
    transform: none !important;
  }
  html.motion-reveal .reading-progress-bar {
    box-shadow: none !important;
    /* The bar fills via a `width` transition (custom.css). For visitors who
       ask for reduced motion, drop the easing so the indicator snaps to the
       read position instead of sliding — informational, not animated. */
    transition: none !important;
  }
}
