/* ============================================================
   zzz-press-feedback.css — tactile press feedback
   ------------------------------------------------------------
   The cards across the home / section pages already lift on
   hover (custom.css, homepage-daypage.css) which reads well with
   a mouse — but on a phone, where there is no hover, tapping a
   whole article card gives no "I felt that" response before the
   navigation happens. This layer adds a quick press-down (scale)
   the instant a finger or mouse button lands, then releases.

   Design rules followed here:
   • Loads late (zzz- prefix) so its `:active` transforms win over
     the earlier `:hover` transforms at equal specificity.
   • Touch gets a clear scale-down; fine pointers get a subtler
     press that composes with the existing hover lift.
   • Everything is additive feedback — never required to read or
     navigate — and is fully neutralised under reduced motion.
   ============================================================ */

/* The card families that act as a single tap target. */
.post-entry,
.ai-tech-card,
.growth-card,
.hp-post-card,
.hp-ai-card,
/* Homepage day-page tiles are whole-card links too (homepage-daypage.html):
   category tiles, the field-notebook "books", the featured project cards,
   the repo chips and the compact post rows. They lift on hover but had no
   press response, so a tap on a phone navigated with no "I felt that" beat.
   Bring them into the same tactile family. */
.hp-cat-tile,
.hp-book,
.hp-project-featured,
.hp-repo,
.hp-posts-list-row,
/* Related-post cards (rpc) at the foot of an article are whole-card
   links too. They lift/shift their arrow on hover but had no press
   response, so a tap on a phone navigated with no tactile beat — bring
   them into the same family. */
.rpc {
  /* Replace the default grey tap-flash on mobile with our own scale
     cue so the press reads as intentional, not like a mis-tap. */
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Fine pointers (mouse / trackpad) ----------
   On press, settle the card down from its hover lift to a slight
   inset so the click feels like a physical button press. A short
   transition keeps it snappy; the longer hover transition handles
   the release back up. */
@media (hover: hover) and (pointer: fine) {
  .post-entry:active,
  .ai-tech-card:active,
  .growth-card:active,
  .hp-post-card:active,
  .hp-ai-card:active,
  .hp-cat-tile:active,
  .hp-book:active,
  .hp-project-featured:active,
  .hp-repo:active,
  .hp-posts-list-row:active,
  .rpc:active {
    transform: translateY(0) scale(0.985);
    transition: transform 0.1s ease;
  }
}

/* ---------- Touch / coarse pointers (phones, tablets) ----------
   No hover lift exists here, so the press is the only motion. A
   touch slightly deeper than the mouse press makes the tap feel
   confirmed even through a finger. */
@media (hover: none) and (pointer: coarse) {
  .post-entry:active,
  .ai-tech-card:active,
  .growth-card:active,
  .hp-post-card:active,
  .hp-ai-card:active,
  .hp-cat-tile:active,
  .hp-book:active,
  .hp-project-featured:active,
  .hp-repo:active,
  .hp-posts-list-row:active,
  .rpc:active {
    transform: scale(0.97);
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* ---------- Primary nav links: tap press ----------
   #menu links only change background on hover (nav-elegant.css).
   Add a small press response so tapping the top nav feels as
   tactile on a phone as the in-article TOC links already do
   (interaction-polish.css). Pointer + touch both benefit. */
#menu > li > a {
  -webkit-tap-highlight-color: transparent;
}
#menu > li > a:active {
  transform: scale(0.94);
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The minimal search chip in the nav gets the same press cue. */
.nav-search-trigger {
  -webkit-tap-highlight-color: transparent;
}
.nav-search-trigger:active {
  transform: scale(0.94);
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   Reduced motion: neutralise every press transform above.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .post-entry:active,
  .ai-tech-card:active,
  .growth-card:active,
  .hp-post-card:active,
  .hp-ai-card:active,
  .hp-cat-tile:active,
  .hp-book:active,
  .hp-project-featured:active,
  .hp-repo:active,
  .hp-posts-list-row:active,
  .rpc:active,
  #menu > li > a:active,
  .nav-search-trigger:active {
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Pagination & tag-link controls — bring them into the family
   ------------------------------------------------------------
   The article prev/next pair (.paginav a) already settles on
   :active (micro-interactions.css), and whole-card links press
   above. But three other interactive controls only changed on
   HOVER and gave no tap response on a phone:

   • Section list pagination — .eit-page-btn / .eig-page-btn
     (AI-tech & growth "← prev / next →") lift on hover
     (editorial-sections.css) but had no press beat.
   • The PaperMod-style .pagination a buttons (technology section
     + default list) lift on hover (custom.css) with the same gap.
   • The homepage profile tag links (.profile_nav_tag) recolour on
     hover (custom.css) but, as real <a> links, never confirmed a
     tap.

   Add the same press cue used for the rest of the family: fine
   pointers settle down out of their hover lift; touch gets a
   slightly deeper scale so the tap reads as confirmed before the
   page changes. Loads last (zzz-) so :active wins at equal
   specificity, and the default grey tap-flash is replaced by our
   own cue. Fully neutralised under reduced motion below.
   ============================================================ */
.eit-page-btn,
.eig-page-btn,
.pagination a,
.profile_nav_tag {
  -webkit-tap-highlight-color: transparent;
}

/* Fine pointers (mouse / trackpad): settle down from the hover lift. */
@media (hover: hover) and (pointer: fine) {
  .eit-page-btn:active,
  .eig-page-btn:active,
  .pagination a:active {
    transform: translateY(0) scale(0.97);
    transition: transform 0.1s ease;
  }
  .profile_nav_tag:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
}

/* Touch / coarse pointers: a slightly deeper, springy press. */
@media (hover: none) and (pointer: coarse) {
  .eit-page-btn:active,
  .eig-page-btn:active,
  .pagination a:active {
    transform: scale(0.96);
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .profile_nav_tag:active {
    transform: scale(0.93);
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eit-page-btn:active,
  .eig-page-btn:active,
  .pagination a:active,
  .profile_nav_tag:active {
    transform: none !important;
    transition: none !important;
  }
}
