/* ===================================================================
   Cricket feel on every button, and the ball-and-wicket click strike.

   Two separate things live here:

   1. Button behaviour. A press has to answer instantly — the existing
      buttons only had a hover lift, so a click read as nothing at all
      until the page changed. Every button now dips under the finger
      and lights up in the site's blue.

   2. The strike. Clicking anything that navigates throws a ball at a
      set of stumps at the pointer. It is decorative and it NEVER
      delays the click it decorates — the markup is appended after the
      browser has already been handed the event.

   Reduced motion removes the strike entirely and keeps a plain,
   instant press state. There are no visible motion controls.
   =================================================================== */

:root {
  --hit-ball: #f7fbff;
  --hit-stump: #7fe4ff;
  --hit-near: #00caff;
  --hit-bloom: #007aff;
}

/* ------------------------- button press --------------------------- */

/* One transition list, matching the convention set in core.css: an
   element gets exactly one `transition`, so this supersedes the short
   list the base .button rule declares rather than fighting it. */
.button {
  transition:
    background 0.2s,
    transform 0.14s cubic-bezier(0.22, 0.8, 0.28, 1),
    border-color 0.2s,
    box-shadow 0.24s ease;
  will-change: transform;
}

@media (hover: hover) {
  .button:hover {
    box-shadow:
      0 0 8px color-mix(in srgb, var(--hit-near) 62%, transparent),
      0 0 24px color-mix(in srgb, var(--hit-bloom) 46%, transparent);
  }
}

/* The press. Fast down, so it feels like contact rather than a slide. */
.button:active {
  transform: translateY(1px) scale(0.972);
  transition-duration: 60ms;
  box-shadow:
    inset 0 2px 7px rgba(0, 12, 30, 0.42),
    0 0 10px color-mix(in srgb, var(--hit-near) 72%, transparent);
}

/* Keyboard users get the same confirmation the mouse gets. */
.button:focus-visible {
  outline: 2px solid var(--hit-stump);
  outline-offset: 3px;
}

/* ------------------------- the strike ----------------------------- */

.hit-strike {
  position: fixed;
  left: 0;
  top: 0;
  width: 58px;
  height: 64px;
  margin: -46px 0 0 -29px;   /* stumps stand on the click point */
  pointer-events: none;
  z-index: 120;
  color: var(--hit-stump);
  animation: hit-strike-out 0.72s ease-out forwards;
}

/* stumps */
.hit-strike i {
  position: absolute;
  bottom: 6px;
  width: 5px;
  height: 42px;
  border-radius: 3px;
  background: currentColor;
  transform-origin: 50% 100%;
  box-shadow:
    0 0 5px var(--hit-near),
    0 0 13px var(--hit-bloom);
  animation: hit-stump 0.72s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.hit-strike i:nth-child(1) { left: 14px; --fall: -54deg; --slide: -9px; }
.hit-strike i:nth-child(2) { left: 26px; --fall: 16deg;  --slide: 2px; }
.hit-strike i:nth-child(3) { left: 38px; --fall: 62deg;  --slide: 11px; }

/* bails */
.hit-strike b {
  position: absolute;
  top: 14px;
  width: 15px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 5px var(--hit-near), 0 0 12px var(--hit-bloom);
  animation: hit-bail 0.72s cubic-bezier(0.18, 0.7, 0.3, 1) forwards;
}
.hit-strike b:nth-of-type(1) { left: 15px; --bx: -26px; --by: -34px; --br: -150deg; }
.hit-strike b:nth-of-type(2) { left: 28px; --bx: 30px;  --by: -28px; --br: 190deg; }

/* the ball: comes in from off to the left and arrives at contact */
.hit-strike s {
  position: absolute;
  left: 22px;
  top: 20px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fff, var(--hit-ball) 42%, #91cafa 78%, #53a5e8);
  box-shadow: 0 0 7px var(--hit-near), 0 0 18px var(--hit-bloom);
  animation: hit-ball 0.72s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}

/* impact flash at the moment of contact */
.hit-strike u {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.92), color-mix(in srgb, var(--hit-near) 55%, transparent) 42%, transparent 70%);
  animation: hit-flash 0.72s ease-out forwards;
}

@keyframes hit-ball {
  0%   { transform: translate(-120px, -58px) scale(0.72); opacity: 0; }
  14%  { opacity: 1; }
  /* 30% is contact — everything else reacts from here */
  30%  { transform: translate(0, 0) scale(1); opacity: 1; }
  58%  { transform: translate(40px, 34px) scale(0.9); opacity: 0.85; }
  100% { transform: translate(78px, 96px) scale(0.72); opacity: 0; }
}
@keyframes hit-stump {
  0%, 28%  { rotate: 0deg; translate: 0 0; }
  46%      { rotate: calc(var(--fall) * 0.72); translate: calc(var(--slide) * 0.7) 0; }
  100%     { rotate: var(--fall); translate: var(--slide) 0; }
}
@keyframes hit-bail {
  0%, 28%  { translate: 0 0; rotate: 0deg; opacity: 1; }
  100%     { translate: var(--bx) var(--by); rotate: var(--br); opacity: 0; }
}
@keyframes hit-flash {
  0%, 26%  { opacity: 0; scale: 0.4; }
  33%      { opacity: 1; scale: 1; }
  100%     { opacity: 0; scale: 1.7; }
}
@keyframes hit-strike-out {
  0%, 74%  { opacity: 1; }
  100%     { opacity: 0; }
}

/* The loop parks with the rest of the site's motion. */
body.v7-document-hidden .hit-strike { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hit-strike { display: none; }
  .button { transition: background 0.2s, border-color 0.2s; will-change: auto; }
  .button:active { transform: none; box-shadow: inset 0 2px 7px rgba(0, 12, 30, 0.42); }
}

/* ------------------------- target sizes --------------------------- */

/* WCAG 2.5.8 asks for a 24x24 minimum. It exempts links sitting inline
   inside a sentence, which is why body copy is left alone — but these
   are stacked navigation lists, and the exemption does not cover them.
   Measured before this rule: guide and legal contents links were 15-17px
   tall, so on a phone they sat well under a fingertip.

   Padding rather than a height, so the text position does not move and
   nothing below reflows. */
.reading-nav a {
  display: block;
  padding-block: 5px;
}

/* The guide breadcrumb and the contact email are single standalone
   targets, not words in a sentence. */
.eyebrow a,
dd > a[href^="mailto:"],
dd > a[href^="tel:"] {
  display: inline-block;
  padding-block: 5px;
}