/* 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 and the Soon tag beside a mark. Split off base.css so the
   Shards pages that show the v2 header (common/bodies/shards) get them 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)}
.lot.ready{opacity:1}
.lot__c{position:absolute;display:block;width:var(--k);height:var(--k);left:var(--lx);top:var(--ly)}

.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)}
}