/* ============================================================
   14 — ARTWORKS
   The five hero animations, placed.

   They were built as competing concepts. All five ship, because
   each says something different and the site has to say all five
   things somewhere:

     ORBIT  one hub               the hero
     RELAY  this is a journey     how it works, and the only clock
     GRID   twenty, all real      the chooser — the artwork IS the matrix
     WEB    everything joins      the platforms section
     RAILS  pick any, pick any    a band between sections

   Every one animates transform, opacity or stroke-dashoffset only,
   and every one settles rather than looping — except RAILS, where
   the loop is the idea, and which therefore pauses on hover.
   ============================================================ */

.artwork{position:relative;margin:0 auto;max-width:100%}
/*  the constellation the orbit replaced. Kept hidden rather than deleted so
    the class name still resolves and nothing renders unstyled. */
.constel-off{display:none}
.artwork.gridart{width:100%}
.artwork svg{display:block;margin:0 auto;max-width:100%;height:auto;overflow:visible}

/* ---------- 1 · ORBIT ---------------------------------------- */
.artwork.orbit{width:440px}
.hring.b{animation-delay:.12s}

/* ---------- 2 · WEB ------------------------------------------ */
.artwork.web{width:960px}

.hweb.binomo .hplate{stroke:rgba(255,79,216,.55)}

/* ---------- 3 · RELAY ---------------------------------------- */
.artwork.relay{width:960px}

.hclock .ms{fill:var(--cyan);font-weight:500}

/* ---------- 4 · GRID ----------------------------------------- */
.hgrid{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.02)}
.hghead,.hgrow{display:flex}
.hghead > *,.hgrow > *{flex:1 1 0;min-width:0}
.hghead > :first-child,.hgrow > :first-child{flex:0 0 168px}
.hghead{border-bottom:1px solid var(--line)}
.hgcorner{padding:16px 14px;font:500 10px/1.4 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);border-right:1px solid var(--line)}
.hgh{display:block;text-align:center;padding:15px 10px;color:var(--dim)}
.hgh svg{display:block;margin:0 auto 7px}
.hgh span{display:block;font:600 12px/1 var(--display)}
.hgs{display:flex;align-items:center;gap:9px;padding:15px 14px;
  border-right:1px solid var(--line);font:600 13px/1 var(--display)}
.hgrow + .hgrow{border-top:1px solid var(--line-2)}
.hcell{
  position:relative;text-align:center;padding:19px 8px;
  border-left:1px solid var(--line-2);
  opacity:0;animation:hcellon .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:var(--d);
}
.hcell b{display:block;font:700 12px/1.5 var(--display);color:var(--text)}
.hcell span{display:block;font:500 10px/1.5 var(--mono);letter-spacing:.06em;color:var(--faint)}
@keyframes hcellon{
  0%{opacity:0}
  55%{opacity:1;background:rgba(255,79,216,.22)}
  100%{opacity:1;background:transparent}
}
/*  a second pass, slow and rare, so the grid keeps breathing without ever
    looking like it is loading */
.hcell::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,rgba(255,79,216,.3),transparent 70%);
  opacity:0;animation:hcellbeat 9s ease-in-out infinite;
  animation-delay:calc(2.6s + var(--d) * 1.6);
}
@keyframes hcellbeat{0%,88%,100%{opacity:0} 93%{opacity:1}}
.hcell:hover{background:rgba(255,79,216,.12)}
@media(max-width:860px){
  .hghead > :first-child,.hgrow > :first-child{flex:0 0 104px}
  .hgs span{display:none}
  .hcell{padding:13px 4px}
  .hcell span{display:none}
}

/* ---------- 5 · RAILS ---------------------------------------- */
.artwork.rails{width:100%}
.hrail{
  overflow:hidden;position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.hrun{display:flex;gap:14px;width:max-content;animation:hroll 26s linear infinite}
.hrail.back .hrun{animation-direction:reverse;animation-duration:32s}
@keyframes hroll{to{transform:translateX(-50%)}}
/*  26 and 32, deliberately unequal: two rails on the same duration eventually
    line up, and the moment they do the band stops reading as two things */
.artwork.rails:hover .hrun{animation-play-state:paused}
.hri{
  display:inline-block;flex:0 0 auto;white-space:nowrap;
  padding:13px 20px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  font:600 14px/1 var(--display);
}
.hri svg{vertical-align:-6px;margin-right:9px}
.hbeam{position:relative;height:74px;text-align:center}
.hbar{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;
  background:var(--spectrum);opacity:.32}
.hrider{
  position:absolute;top:50%;margin-top:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 18px 3px rgba(255,79,216,.9);
  animation:hride 3.2s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes hride{0%{left:-2%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:102%;opacity:0}}
.hchip{
  position:relative;z-index:1;display:inline-block;margin-top:24px;
  padding:11px 20px;border-radius:var(--r-pill);
  border:1px solid rgba(255,79,216,.4);background:rgba(18,10,34,.96);
  font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);
}

/* ---------- reduced motion, and the escape hatch -------------- */
@media(prefers-reduced-motion:reduce){
  .hspin,.hunspin,.hspoke,.hhot,.hrun,.hrider,.hcell::after,.hpacket{
    animation:none !important;
  }
  .hcell{opacity:1;animation:none}
}
html[data-fx-off] .hspin,
html[data-fx-off] .hunspin,
html[data-fx-off] .hrun,
html[data-fx-off] .hrider{animation:none !important}
html[data-fx-off] .hcell::after{display:none}

/* ---------- placement --------------------------------------- */
.heroart{
  margin-top:34px;
  /*  The orbit is the first thing on the page that moves, so it gets room.
      On a narrow screen it scales down rather than scrolling sideways — a
      diagram you have to pan is a diagram nobody reads. */
}
.heroart .artwork.orbit{width:min(440px,88vw)}
@media(max-width:900px){.heroart{margin-top:24px}}
/*  deliberately no filter, no opacity and no mix-blend-mode on .logo-official */

/* ---------- badge carrying a real logo -----------------------
   The tinted tile is what makes a two-letter badge legible. A real
   logo brings its own colour and must not be tinted, so the tile
   steps back to a neutral plate and lets the mark speak.
   ------------------------------------------------------------ */
.src.has-logo i{background:rgba(255,255,255,.08);padding:0;overflow:hidden}
.src.has-logo i svg{width:100%;height:100%;display:block}