/* v2 app marks (views/common/v2/mark), shared by the header and the page content: the Lottie box of the You Exec X
   and the Margin mark, the shape stagger of the plain marks, the wordmark and the
   lockup of the two (common/v2/wordmark, lockup) and the Soon tag beside a mark. Split off base.css so the
   Shards pages (common/bodies/shards) get them under either header without the rest of the design system.
   Behaviour in javascripts/v2/marks.js */

/* Animated X: the Lottie sits where the static mark was and matches its box.
   .is-lottie is only added once the animation has mounted. */
.mark.is-lottie{display:none}
/* A Lottie mark occupies a box the same size as the static mark it replaces, so
   it drops into any layout unchanged. The animation's own canvas is roughly
   twice its drawn ink, so the <svg> inside is blown up by --k and nudged by
   --lx/--ly (set in site.js, measured per animation) until the ink lands
   exactly where the static mark's did. */
.lot{position:relative;display:block;flex:none;line-height:0;opacity:0;transition:opacity .2s var(--ease)}
/* marks.js puts the box in before Lottie's DOMLoaded hides the static mark, so until then it stays out of the flow or
   the lockup is a mark wider for a frame and the wordmark jumps left when the static mark goes */
.lot:not(.ready){position:absolute;visibility:hidden}
.lot.ready{opacity:1}
.lot__c{position:absolute;display:block;width:var(--k);height:var(--k);left:var(--lx);top:var(--ly)}

/* The wordmark (common/v2/wordmark): inline SVG filled with the current text colour, so it follows the page.
   --ar is the viewBox's width over its height, so a height alone sizes it */
.wordmark{display:block;flex:none;fill:currentColor}

/* The lockup (common/v2/lockup): mark and wordmark share --brand-h, 22px unless the page says otherwise, and the gap
   is the artwork's own, in the logo file the wordmark starts .52 of the height after the mark. Margin draws the same
   in its components/brand (brand.css), keep the two alike */
.brand-lockup{--_h:var(--brand-h,22px);display:inline-flex;align-items:center;gap:calc(var(--_h) * .52);vertical-align:middle}
.brand-lockup .mark{width:var(--_h);height:var(--_h);flex:none}
.brand-lockup .wordmark{height:var(--_h);width:calc(var(--_h) * var(--ar))}

.soon{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-dark);background:var(--orange-10);padding:2px 7px;border-radius:var(--pill)}

/* App marks assemble shape by shape. .mark--anim is the inline copy that
   site.js renders into the belt and the Apps menu; each <g> carries --i. */
/* the shapes scale and turn past the viewBox mid-animation, so the SVG must
   be allowed to paint outside its own viewport or the edges get clipped */
.mark--anim{overflow:visible}
/* held back until its intro starts, the way a Lottie mark waits at opacity 0 */
.mark--hold > g{opacity:0}
.mark--anim > g{transform-box:fill-box;transform-origin:50% 50%}
.belt a:hover .mark--anim > g,
.apps-panel a:hover .mark--anim > g,
.lockup__part:hover .mark--anim > g,
.incl .card:hover .mark--anim > g,
.ft-apps > :hover .mark--anim > g,
.mark--intro > g{animation:mark-part .68s cubic-bezier(.22,.86,.28,1) both;animation-delay:var(--d,0ms)}
@keyframes mark-part{
  0%{opacity:0;transform:scale(.46) rotate(-14deg)}
  60%{opacity:1;transform:scale(1.06) rotate(2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}