/* ============================================================
   GTA METALS — live element plate
   Loads AFTER mineral.css on all four mineral pages. Self-contained:
   this file, mineral-card.js and the .mp-plate block already in each
   page. No markup changed to add it and none is needed to remove it.

   The plate tilts a little towards the cursor, catches a copper glow
   where the cursor is, and its face picks up a sheen in its OWN metal
   — copper on copper.html, the grey iron ramp on iron.html, and so on.
   Ported from a React/Tailwind holographic-card component; this repo
   has no React, no build step and no package manager, so it is plain
   CSS and 90 lines of vanilla JS like everything else here.

   Three house rules shaped what it is NOT:
   - "no hover lift, no bounce". The tilt is 4 degrees at the corners
     and eases over half a second. It reads as the plate catching light,
     not as a card jumping at you.
   - "the general brand accent stays copper; do not repaint a whole page
     in one mineral's metal". So the GLOW is copper on all four pages —
     it is brand light falling on the plate — and only the SHEEN, which
     is the plate's own surface, takes the mineral's ramp.
   - "never hard-code a colour". Every value below is a token.
   ============================================================ */

/* The mineral's own ramp, for the sheen. The plate faces are light, so
   these are the on-light ramps; copper is the default because copper.html
   writes a bare `class="mp-plate "` with no modifier. */
.mp-plate    { --ore: var(--metal-copper); }
.mp-plate.fe { --ore: var(--metal-iron-on-light); }
.mp-plate.mn { --ore: var(--metal-mang-on-light); }
.mp-plate.li { --ore: var(--metal-lith-on-light); }

/* Depth for the tilt. It sits on the SECTION rather than the plate,
   because an element cannot supply its own perspective — set it on
   .mp-plate and the rotation renders flat. The copy column beside the
   plate carries no 3D transform, so this does nothing to it. */
.mp-plate-sec { perspective: 1400px; }

.mp-plate {
  /* Set by mineral-card.js. The axis is degenerate at rest, so it is
     parked on x with a zero angle rather than 0 0 0 — an all-zero axis
     is invalid and drops the whole declaration. */
  --tilt-ax: 1;
  --tilt-ay: 0;
  --tilt: 0deg;
  --mx: 50%;
  --my: 50%;
  --bx: 50%;
  --by: 50%;

  /* Deliberately the `rotate` property, NOT transform. mineral.css already
     puts a transform on this element — the 18-40px lift into the hero fade,
     which was tuned twice and is documented there — and writing transform
     here would silently drop it, landing the plate back on the section edge.
     `rotate` composes with an existing transform instead of replacing it, so
     that clamp stays in exactly one file. Per spec the matrix is
     translate x rotate x scale x transform, and transform-origin is the
     centre, so the plate tilts about its own middle after being lifted. */
  rotate: var(--tilt-ax) var(--tilt-ay) 0 var(--tilt);

  position: relative;
  /* Deliberately NO overflow: hidden. Both layers below are inset: 0 on a
     square-cornered box, so neither can escape it and there is nothing to
     clip — while the plate holds a clamp(110px, 15vw, 200px) display glyph,
     and a clip here would be silently trimming its cap or its tail at some
     widths. Nothing gained, a real regression risked. */
  isolation: isolate;        /* keeps the sheen's blend off the page behind */
  transition: rotate 620ms var(--ease-slow);
}

/* While a pointer is on the plate the tilt has to keep up with it; 620ms
   of easing on every move reads as lag rather than weight. The long ease
   is for the journey home, which is the only part that wants to be slow. */
.mp-plate.is-live { transition-duration: 120ms; }

/* Both layers sit UNDER the type. They could just as easily sit over it —
   the source component sheens its whole card — but the plate carries 13px
   mono at --faint, and a blend mode across that is the difference between
   a sheen and a legibility bug. A metal face catching light while the
   engraved letters stay solid is the truer picture anyway. */
.mp-plate > * { position: relative; z-index: 1; }

/* The glow: brand copper, following the cursor. */
.mp-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(260px circle at var(--mx) var(--my),
      rgb(var(--accent-rgb) / 0.22) 0%,
      rgb(var(--accent-rgb) / 0.09) 38%,
      rgb(var(--accent-rgb) / 0) 70%);
  opacity: 0;
  transition: opacity 520ms var(--ease);
}

/* The sheen: the mineral's own ramp, oversized and panned by the cursor so
   the highlight travels across the face rather than sitting still. soft-light
   rather than overlay — overlay on a plate face this light blows the ramp's
   pale stops out to white and the sheen stops reading as metal. */
.mp-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--ore);
  background-size: 280% 280%;
  background-position: var(--bx) var(--by);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 620ms var(--ease);
}

.mp-plate.is-live::before { opacity: 1; }
.mp-plate.is-live::after  { opacity: 0.85; }

/* ---------- no cursor to follow ---------- */
/* Coarse pointers never get is-live, so the plate renders exactly as it
   did before this file existed. Nothing to declare — the gate is in the JS,
   which does not bind a single listener on a touch device. */

/* ---------- reduced motion ---------- */
/* The tilt is movement and goes. The glow and sheen are not — they are
   surface, and they only ever appear under a cursor the reader is already
   moving — but with no tilt to justify the machinery the JS bails out
   entirely, so these are belt and braces for a runtime change of
   preference mid-session. */
@media (prefers-reduced-motion: reduce) {
  .mp-plate { rotate: none; transition: none; }
  .mp-plate::before,
  .mp-plate::after { display: none; }
}