/* ---------------------------------------------------------------------------
   Tilt pills — shared by /careers and the home page.

   Three words set as objects rather than text. Each rests at its own small
   angle, set inline per pill via --a, so the row looks placed by hand rather
   than laid out by a grid. On hover the pill rotates the other way, lifts, and
   takes the green: the twist is the point, and it only reads if the resting
   state is already off-square.

   Angles are per-pill because a single shared angle looks like a mistake and
   alternating +/- looks like a pattern. Uneven values look deliberate.

   This lives in its own file because two pages use it and they are styled by
   different stylesheets — careers.css and style.css share nothing. Duplicating
   it into both is the thing the README tells you not to do.

   Geometry is here once. Colour is a palette of custom properties, because the
   two pages are opposite: /careers is the only light page on the site and its
   greens are darkened to survive white, while everything else is dark and uses
   the green built to glow on black. Same object, inverted palette.
--------------------------------------------------------------------------- */

.tilt {
  /* Light palette (default) — /careers. #14500a is a TEXT green: #4abf2c and
     #30ff5d both fail contrast on white, which is why they are borders here. */
  --tilt-bg: #eef7ea;
  --tilt-border: rgba(74, 191, 44, .45);
  --tilt-text: #14500a;
  --tilt-bg-hover: rgba(74, 191, 44, .18);
  --tilt-border-hover: rgba(74, 191, 44, .85);
  --tilt-shadow-hover: 0 4px 14px rgba(17, 21, 15, .1);

  display: inline-block;
  padding: 1px 12px 3px;
  margin: 0 1px;
  border-radius: 100px;
  background: var(--tilt-bg);
  border: 1px solid var(--tilt-border);
  color: var(--tilt-text);
  font-weight: 600;
  white-space: nowrap;
  transform: rotate(var(--a, 0deg));
  /* Slight overshoot on the way out, so it settles rather than stops. */
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1),
              background-color .2s ease,
              border-color .2s ease,
              box-shadow .28s ease;
}

.tilt:hover,
.tilt:focus-visible {
  /* Twist against the resting angle rather than to zero: straightening reads as
     a correction, over-rotating reads as the object being nudged. */
  transform: rotate(calc(var(--a, 0deg) * -1.9)) translateY(-2px) scale(1.04);
  background: var(--tilt-bg-hover);
  border-color: var(--tilt-border-hover);
  box-shadow: var(--tilt-shadow-hover);
}

/* Dark palette — the home page and anything else on the dark site. #30ff5d is
   the green built to glow on black; on white it fails contrast, which is the
   whole reason the light palette above exists separately. The hover shadow
   becomes a green glow rather than a drop shadow, because a dark shadow on a
   dark ground is invisible and the lift would read as nothing happening. */
.tilt--dark {
  --tilt-bg: rgba(48, 255, 93, .10);
  --tilt-border: rgba(48, 255, 93, .35);
  --tilt-text: #30ff5d;
  --tilt-bg-hover: rgba(48, 255, 93, .20);
  --tilt-border-hover: rgba(48, 255, 93, .85);
  --tilt-shadow-hover: 0 4px 18px rgba(48, 255, 93, .28);
}

/* Display-size copy. The base padding is in px because it was tuned against
   17px body copy on /careers and is left pixel-identical there. At 40px that
   same padding reads as a tight collar, so sizes that large switch to em and
   scale with the text instead. */
.tilt--lg {
  padding: .1em .46em .2em;
  margin: 0 .05em;
}

@media (prefers-reduced-motion: reduce) {
  .tilt {
    transform: none;
    transition: background-color .2s ease, border-color .2s ease;
  }

  .tilt:hover,
  .tilt:focus-visible {
    transform: none;
  }
}