/* ==========================================================================
   PCP — microinteractions
   --------------------------------------------------------------------------
   Two jobs, in order of importance:

   1. TAKE HOVER AWAY FROM TOUCH. Almost every hover rule on this site was
      written unguarded, which on a phone leaves a tapped button or card stuck
      in its hover state until something else is tapped. Those effects are
      neutralised here for coarse pointers rather than edited in place, so the
      original rules stay readable and this is one file to review or revert.

   2. Add the pointer ring, and only where something is genuinely interactive.

   Focus-visible is never neutralised: keyboard users keep every affordance.
   ========================================================================== */

/* ---- 1. Coarse pointers: no hover transforms, no lifts, no sweeps -------- */
@media (hover: none), (pointer: coarse) {
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-ghost:hover,
  .btn-dark:hover,
  .site-header .btn-primary:hover,
  .nav-link:hover,
  .card:hover,
  .card-static:hover,
  .panel:hover,
  .media-frame:hover,
  body > footer .icon-tile:hover {
    transform: none;
  }
  /* Light sweeps and glows are pointer affordances; a tap should not leave
     one burnt on. */
  .site-header .btn-primary:hover::before,
  .nav-link:hover::before,
  .card:hover::before,
  .card-static:hover::before { opacity: 0; }
  .nav-link:hover::after { transform: scaleX(0); }
  /* The current-page underline is state, not hover, so it stays. */
  .nav-link[aria-current="page"]::after { transform: scaleX(1); }
  .btn-text:hover svg { transform: none; }
  /* No pointer ring, ever. */
  .pcp-cursor { display: none !important; }
}

/* ---- 2. The pointer phoenix ----------------------------------------------
   An addition to the cursor, never a replacement: the real cursor is never
   hidden, the bird trails behind it rather than covering it, and it cannot
   receive a single event. Mounted only for a fine pointer with motion
   allowed — see assets/js/cursor.js, which also explains why the translate,
   the bank and the flight loop live on three different elements. */
.pcp-cursor,
/* site.css sets `.grain > *:not(.pcp-cinematic-bg) { z-index: 1 }` on every
   direct child of body, which silently pinned the ring under the sticky
   header. Matching that selector's specificity from a later file is what
   actually lifts it. */
.grain > .pcp-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;              /* under the preloader, over the page */
  /* NOT IN THE WAY OF ANYTHING. Every layer of this is inert: the bird is a
     decoration drawn over the page, and a click, a drag over a field or a
     press on a button reaches the page exactly as if it were not there. */
  pointer-events: none;
  display: grid;
  place-items: center;
  width: var(--pc-size, 38px);
  height: var(--pc-size, 38px);
  /* Centred on the pointer by offsetting half its own size, so growing it on
     hover does not shift where it sits. */
  margin: calc(var(--pc-size, 38px) / -2) 0 0 calc(var(--pc-size, 38px) / -2);
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition:
    opacity 260ms ease,
    width 320ms var(--ease-spring),
    height 320ms var(--ease-spring),
    margin 320ms var(--ease-spring);
  will-change: transform;
}
.pcp-cursor * { pointer-events: none; }

/* The bank. Its rotation is written by cursor.js every frame; nothing else
   may touch transform on this element. */
.pcp-cursor-bank {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* The mark itself — the bird, not the wordmark. */
.pcp-cursor-bird {
  display: block;
  width: 100%;
  height: 100%;
  background: url('../img/pcp-mark-120.png') center / contain no-repeat;
  /* A little lift off the near-black page, in the brand's own gold. */
  filter: drop-shadow(0 2px 6px rgba(212, 175, 55, 0.35));
  opacity: var(--pc-bird, 0.9);
  transition: opacity 260ms ease;
  /* The idle flight: a slow rise and fall with the faintest wingbeat in the
     vertical scale. transform and opacity only, and it owns this element's
     transform outright — the bank sits on the parent for that reason. */
  animation: pcp-fly 2.6s ease-in-out infinite;
}

@keyframes pcp-fly {
  0%, 100% { transform: translateY(0) scaleY(1); }
  25%      { transform: translateY(-2.5px) scaleY(0.94); }
  50%      { transform: translateY(0) scaleY(1); }
  75%      { transform: translateY(2px) scaleY(1.04); }
}

.pcp-cursor.is-on { opacity: 1; }
/* Over something interactive: it comes closer and brightens. */
.pcp-cursor.is-hot { --pc-size: 50px; --pc-bird: 1; }
/* Carrying a word. */
/* Smaller and barely tinted: the ring sits on top of whatever is being
   hovered, so a heavy scrim hid the label of the very thing it was
   pointing at. The page is uniformly near-black, so gold caps read
   without a backdrop — which is cheaper to composite too. */
.pcp-cursor.is-labelled { --pc-size: 54px; --pc-bird: 1; }
/* Under the bird rather than through it: the mark is solid, and a word laid
   over it was legible on a ring and is not on a bird. */
.pcp-cursor-label {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0.15rem;
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pcp-gold-light);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 220ms ease, transform 220ms var(--ease-spring);
  white-space: nowrap;
}
.pcp-cursor.is-labelled .pcp-cursor-label { opacity: 1; transform: translateY(0); }
/* Pressed: it tucks in, the way a bird does. */
.pcp-cursor.is-down .pcp-cursor-bird { transform: scale(0.86); animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .pcp-cursor { display: none !important; }
}

/* ---- 3. Restrained polish where it was missing --------------------------
   Only under a fine pointer, and only transform/opacity/colour. */
@media (hover: hover) and (pointer: fine) {
  /* Inline icons travel with their link rather than sitting still beside it. */
  .btn-text svg,
  .link-muted svg { transition: transform 320ms var(--ease-spring); }
  .link-muted:hover svg { transform: translateX(3px); }

  /* Icon tiles in the pillar cards warm up with the card. */
  .icon-line { transition: color 320ms ease, transform 380ms var(--ease-spring), border-color 320ms ease; }
  .panel:hover .icon-line,
  .panel.is-hovered .icon-line { transform: translateY(-2px); border-color: rgba(212, 175, 55, 0.45); }

  /* Social icons: a small lift and a warm border, nothing more. */
  .social { transition: transform 320ms var(--ease-spring), border-color 320ms ease, color 320ms ease; }
  .social:hover { transform: translateY(-2px); border-color: rgba(212, 175, 55, 0.5); color: var(--pcp-gold); }

  /* The globe's country list reads as a legend. Hovering one brings its
     connection forward, so it is a real control rather than a label. */
  .globe-links li { transition: color 320ms ease, transform 320ms var(--ease-spring); }
  .globe-links li:hover { color: rgba(255, 255, 255, 0.9); transform: translateX(2px); }
}

/* Keyboard parity: anything the pointer can do, focus shows too. */
.social:focus-visible { transform: translateY(-2px); border-color: rgba(212, 175, 55, 0.5); }
.link-muted:focus-visible svg { transform: translateX(3px); }