/*
 * 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      a disc that arrives in three pieces and closes into one whole.
 *              On the homepage it plays once when you scroll to it. In the
 *              builder the same object is a progress meter: a piece lands for
 *              each part of the trade you finish, and it locks when you are
 *              ready to send.
 *
 * 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 ====================== */

.seal{--seal-size:128px;--seal-fall:.74s;
  display:grid;justify-items:center;gap:9px}
.seal-disc{position:relative;width:var(--seal-size);height:var(--seal-size);
  border-radius:50%;isolation:isolate;
  filter:drop-shadow(0 12px 22px rgba(15,21,25,.17))}

/* Three sectors of one disc. They carry the same background geometry, so when
   the last one lands the grain runs straight across all three seams and the
   thing stops looking assembled and starts looking milled. */
.seal-seg{position:absolute;inset:0;border-radius:50%;
  background:var(--chr-light),var(--chr-metal)}
.seal-seg-1{clip-path:polygon(50% 50%,50% -50%,114.3% -26.6%,148.5% 32.6%,136.6% 100%);
  --seal-dx:16%;--seal-tilt:6deg}
.seal-seg-2{clip-path:polygon(50% 50%,136.6% 100%,84.2% 144%,15.8% 144%,-36.6% 100%);
  --seal-dx:0%;--seal-tilt:-3deg}
.seal-seg-3{clip-path:polygon(50% 50%,-36.6% 100%,-48.5% 32.6%,-14.3% -26.6%,50% -50%);
  --seal-dx:-16%;--seal-tilt:-7deg}

/* The joins. Barely there once it is closed, which is the point. */
.seal-seams{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  transition:opacity .5s;
  background:conic-gradient(from 0deg,
    rgba(15,21,25,.20) 0deg .5deg,rgba(255,255,255,0) .5deg 119.5deg,
    rgba(15,21,25,.20) 119.5deg 120.5deg,rgba(255,255,255,0) 120.5deg 239.5deg,
    rgba(15,21,25,.20) 239.5deg 240.5deg,rgba(255,255,255,0) 240.5deg 360deg)}

/* The rim, and the shadow the rim casts inward. */
.seal-disc::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),
             inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -9px 18px rgba(15,21,25,.16);z-index:3}

/* The lock, on a smaller disc turned the other way so the two surfaces catch
   the light differently. */
.seal-core{position:absolute;left:50%;top:50%;z-index:2;
  width:44%;height:44%;margin:-22% 0 0 -22%;border-radius:50%;
  display:grid;place-items:center;opacity:0;transform:scale(.6);
  background:radial-gradient(96% 80% at 34% 16%,rgba(255,255,255,.92),rgba(255,255,255,0) 58%),
    conic-gradient(from 28deg at 50% 50%,#f4f8fa,#aebac3,#ffffff,#94a3ae,#eef3f6,#ffffff,#b6c2ca,#f4f8fa);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 3px 8px rgba(15,21,25,.22)}
.seal-core svg{width:52%;height:52%;color:#3d4c56;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.85))}

/* One pass of light when it closes. Not a loop — a loop would make a finished
   thing look like it is still working. */
.seal-gleam{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:4;
  background:linear-gradient(102deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.96) 48%,
    rgba(255,255,255,.3) 55%,rgba(255,255,255,0) 66%);
  background-size:300% 100%;background-position:200% 0;opacity:0;mix-blend-mode:screen}

.seal-cap{font-size:11px;font-weight:650;letter-spacing:.02em;text-align:center;
  color:var(--sub,#68757d);max-width:20ch;line-height:1.45}

@keyframes sealDrop{
  0%{transform:translate3d(var(--seal-dx,0),-58%,0) rotate(var(--seal-tilt,0)) scale(.93);opacity:0}
  38%{opacity:1}
  74%{transform:translate3d(0,2.5%,0) rotate(0deg) scale(1.008);opacity:1}
  88%{transform:translate3d(0,-1%,0) rotate(0deg) scale(.997)}
  100%{transform:translate3d(0,0,0) rotate(0deg) scale(1);opacity:1}
}
@keyframes sealCore{
  0%{opacity:0;transform:scale(.55)}
  60%{opacity:1;transform:scale(1.07)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes sealGleam{
  0%{background-position:200% 0;opacity:0}
  12%{opacity:1}
  78%{background-position:-100% 0;opacity:1}
  100%{background-position:-100% 0;opacity:0}
}

/* --- played once, on arrival (homepage) --- */
.seal.is-armed .seal-seg,.seal.is-armed .seal-core{opacity:0}
.seal.is-live .seal-seg{animation:sealDrop var(--seal-fall) cubic-bezier(.3,1.2,.48,1) both}
.seal.is-live .seal-seg-2{animation-delay:0ms}
.seal.is-live .seal-seg-1{animation-delay:150ms}
.seal.is-live .seal-seg-3{animation-delay:300ms}
.seal.is-live .seal-seams{opacity:1;transition-delay:1s}
.seal.is-live .seal-core{animation:sealCore .5s cubic-bezier(.3,1.3,.5,1) .92s both}
.seal.is-live .seal-gleam{animation:sealGleam 1.15s cubic-bezier(.4,0,.2,1) 1.05s both}

/* --- driven by how much of the form is done (trade builder) --- */
.seal-steps{--seal-size:64px;--seal-fall:.66s;gap:0}
/* One sector per thing you have settled, so the shape says which part is
   missing rather than only how many. Written as three independent flags, not
   a count, because a count would fill the sectors in the wrong order. */
.seal-steps .seal-seg,.seal-steps .seal-core{opacity:0}
.seal-steps[data-s1] .seal-seg-1,
.seal-steps[data-s2] .seal-seg-2,
.seal-steps[data-s3] .seal-seg-3{
  animation:sealDrop var(--seal-fall) cubic-bezier(.3,1.2,.48,1) both;animation-delay:0ms}
.seal-steps[data-s1][data-s2][data-s3] .seal-seams{opacity:1;transition-delay:.55s}
.seal-steps[data-s1][data-s2][data-s3] .seal-core{
  animation:sealCore .44s cubic-bezier(.3,1.3,.5,1) .5s both}
.seal-steps[data-s1][data-s2][data-s3] .seal-gleam{
  animation:sealGleam 1s cubic-bezier(.4,0,.2,1) .6s both}
/* An unfinished seal should look unfinished, not broken: the empty sectors
   sit as a faint outline so you can see what is still missing. */
.seal-steps .seal-disc{filter:none;background:rgba(15,21,25,.045);border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(15,21,25,.07)}
.seal-steps[data-s1][data-s2][data-s3] .seal-disc{background:none;
  filter:drop-shadow(0 6px 12px rgba(15,21,25,.15));box-shadow:none}

/* 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)}
  .seal .seal-seg,.seal .seal-core{animation:none!important;transform:none}
  .seal:not(.seal-steps) .seal-seg,.seal:not(.seal-steps) .seal-core{opacity:1}
  .seal:not(.seal-steps) .seal-seams{opacity:1;transition:none}
  /* The builder's seal still means something without motion, so the pieces
     still appear one by one — they simply appear rather than fall. */
  .seal-steps[data-s1] .seal-seg-1,.seal-steps[data-s2] .seal-seg-2,
  .seal-steps[data-s3] .seal-seg-3{opacity:1}
  .seal-steps[data-s1][data-s2][data-s3] .seal-core{opacity:1}
  .seal .seal-gleam{animation:none!important;opacity:0}
  .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}
}