/*
 * Chrome — the metal parts.
 *
 * Two objects, one material, shared by the homepage and the trade builder:
 *
 *   .chr-coin  a rank medal that turns once, like a coin flicked on a table,
 *              with a specular sweep that keeps travelling afterwards.
 *   .seal-steps a row of three hairline dots, filled solid --ink one at a
 *              time as each part of the trade builder form is finished
 *              (see readiness() in assets/new-trade.js, which only ever
 *              toggles data-s1/s2/s3 - this file owns what that looks
 *              like). No motion of its own: a dot is either filled or not.
 *
 * Everything here is decoration and nothing here is required. If the file
 * fails to load, the medals are still medals and the builder still works;
 * if the JavaScript never runs, both objects render finished and still. That
 * is deliberate — an animation that can hide content when it half-loads is a
 * bug wearing a nice coat.
 *
 * Cost: no images beyond the medals already on the page, no canvas, no
 * library. Gradients and transforms only, so the compositor does the work.
 */

:root{
  /* Turned metal. The stops are uneven on purpose: evenly spaced ones read as
     a striped pattern, uneven ones read as a surface catching a room. */
  --chr-metal:conic-gradient(from 208deg at 50% 42%,
    #ffffff 0deg,#c9d4db 30deg,#ffffff 62deg,#9dabb5 96deg,#eef3f6 132deg,
    #ffffff 170deg,#b4c1c9 206deg,#f6f9fb 244deg,#90a0ab 280deg,
    #e6edf1 316deg,#ffffff 360deg);
  /* A cold white key light from above and a warm bounce off the brand gold
     underneath, so the metal belongs to this site and not to a stock render. */
  --chr-light:radial-gradient(118% 88% at 30% 10%,rgba(255,255,255,.95),rgba(255,255,255,0) 56%),
              radial-gradient(88% 68% at 72% 98%,rgba(203,158,74,.26),rgba(203,158,74,0) 64%);
}

/* ============================ the medal ============================ */
/*
 * A rank medal, turning on its own axis, for ever.
 *
 * Not a 3D transform. A disc rotating about a vertical axis projects to its
 * face scaled horizontally by the cosine of the angle, its blank reverse by
 * the same cosine the other way, and its milled rim by the sine. So three flat
 * layers sharing one clock give a real turning coin — edge, reeding and all —
 * with no 3D context to establish, no backface-visibility to get wrong, and
 * nothing that behaves differently in an old browser. The cosine itself lives
 * in /assets/bench.css as medFace / medBack / medRim, sampled every fortieth
 * of a turn, and is shared with the medal in the hero.
 *
 * The turn is slow and the medals are a beat apart, so the section shimmers
 * rather than spins.
 */

.chr-coin{--chr-T:11s;position:relative;
  filter:drop-shadow(0 5px 11px rgba(15,21,25,.14))}
.chr-coin-in{position:relative;display:grid;place-items:center}
.chr-coin img,.chr-back,.chr-edge,.chr-gloss{
  transform-origin:center;
  animation-duration:var(--chr-T);animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-delay:calc(var(--i) * -1.37s)}

/* the face */
.chr-coin .chr-coin-in img{position:relative;z-index:2;filter:none;
  animation-name:medFace;will-change:transform,opacity}
/* the blank reverse, cut from the medal's own outline so it fits exactly */
.chr-back{position:absolute;inset:0;z-index:2;animation-name:medBack;
  /* A struck blank, not a white shape: the mid-tones have to be dark enough
     to read as metal against a pale page. */
  background:
    radial-gradient(72% 56% at 46% 26%,rgba(255,255,255,.86),rgba(255,255,255,0) 62%),
    radial-gradient(84% 66% at 70% 96%,rgba(196,152,72,.22),rgba(196,152,72,0) 66%),
    conic-gradient(from 206deg at 50% 46%,
      #E9EFF3 0deg,#93A2AE 44deg,#FAFCFD 88deg,#6F7E8B 132deg,#D6DFE6 176deg,
      #FFFFFF 214deg,#7D8C99 258deg,#CBD5DC 302deg,#8B99A5 340deg,#E9EFF3 360deg);
  -webkit-mask-image:var(--chr-src);mask-image:var(--chr-src);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
/* the rim: reeded, like the edge of a struck coin */
.chr-edge{position:absolute;left:50%;top:9%;height:82%;width:12px;margin-left:-6px;z-index:1;
  border-radius:6px;animation-name:medRim;
  background:
    repeating-linear-gradient(90deg,rgba(20,28,38,.40) 0 1px,rgba(255,255,255,0) 1px 2.7px),
    linear-gradient(90deg,#6C7986 0%,#F6F9FB 30%,#55616D 58%,#D2DBE2 80%,#79868F 100%);
  box-shadow:inset 0 0 0 1px rgba(28,38,48,.42),0 1px 3px rgba(15,21,25,.28)}
/* a fixed specular on the face, which turns with it */
.chr-gloss{position:absolute;inset:0;z-index:3;pointer-events:none;animation-name:medFace;
  -webkit-mask-image:var(--chr-src);mask-image:var(--chr-src);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background:linear-gradient(104deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.55) 46%,
    rgba(255,255,255,.12) 54%,rgba(255,255,255,0) 66%);
  mix-blend-mode:screen}

/* Stopped while nobody is looking at it. */
.chr-stage.is-idle .chr-coin *{animation-play-state:paused}
/* the marquee's medals are flex items, so the wrapper has to be the size the
   image used to be */
.hrw-track .chr-coin{flex:0 0 auto;width:62px;height:62px}
.hrw-track .chr-coin img{width:62px;height:62px}

/* ====================== the seal ======================
   Was a three-sector milled coin with a drop-in animation, a gleam pass
   and a lock icon - the only remaining consumer is the trade builder's
   readiness indicator (the homepage's own copy of this component was
   retired with the "Held" homepage rebuild), and per that brief: keep
   the staged messages, strip the rest. Three small hairline circles,
   filling solid --ink as each condition is met. */
.seal-steps{display:flex;gap:6px;flex:0 0 auto}
.seal-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-2);
  background:var(--paper);transition:background .25s,border-color .25s}
.seal-steps[data-s1] .seal-dot:nth-child(1),
.seal-steps[data-s2] .seal-dot:nth-child(2),
.seal-steps[data-s3] .seal-dot:nth-child(3){background:var(--ink);border-color:var(--ink)}

/* The travelling highlight, shared by the icon chips and the hero button.
   Long dark, short flash: a sweep that runs continuously reads as a loading
   bar, one that waits and then passes reads as a reflection. */
@keyframes chrSheen{
  0%{background-position:190% 0}
  26%{background-position:-90% 0}
  100%{background-position:-90% 0}
}

/* ====================== chrome finish on an icon chip ====================== */
/* No moving parts of its own — just a highlight that crosses the chip when the
   card it belongs to is pointed at. */
.chr-chip{position:relative;overflow:hidden}
.chr-chip::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(102deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.85) 47%,
    rgba(255,255,255,.2) 54%,rgba(255,255,255,0) 66%);
  background-size:280% 100%;background-position:190% 0;opacity:0}
.chr-chip-host:hover .chr-chip::after,.chr-chip-host:focus-visible .chr-chip::after{
  opacity:1;animation:chrSheen 1.5s cubic-bezier(.4,0,.2,1) both}

@media(prefers-reduced-motion:reduce){
  .chr-coin img,.chr-back,.chr-edge,.chr-gloss{animation:none!important}
  .chr-coin img{transform:none;opacity:1}
  .chr-back{opacity:0}
  .chr-edge{transform:scaleX(.02)}
  .chr-chip-host:hover .chr-chip::after{animation:none;opacity:0}
}

/* ====================== a gleam across a solid button ====================== */
/* The one call to action on the page, given the same finish as the metal
   elsewhere. It passes rarely — a highlight that runs constantly stops being
   a highlight and starts being a progress bar. */
.chr-sweep{position:relative;overflow:hidden;isolation:isolate}
.chr-sweep::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  border-radius:inherit;
  background:linear-gradient(102deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.40) 47%,
    rgba(255,255,255,.10) 55%,rgba(255,255,255,0) 66%);
  background-size:280% 100%;background-position:190% 0;opacity:0}
.chr-sweep.is-live::after{opacity:1;animation:chrSheen 7s linear 1.1s infinite}
.chr-sweep:hover::after{opacity:1;animation:chrSheen 1.35s cubic-bezier(.4,0,.2,1) both}
@media(prefers-reduced-motion:reduce){
  .chr-sweep::after{display:none}
}