/* Home part 3 pictures and layout. One clock for every part-3 picture: --ds-motion-loop-long. Loaded after art2.css, which carries the figure base. */ /* ---- part 3 of Home: how it is built, how it works, what is happening now, founder and company, call to action, footer ---- Pictures on the page surface take their ink from the primary text colour and their accent from the logo bar (as part 2); the call to action's picture sits on the brand surface and takes the on-brand ink and the on-brand bar. Every picture always runs; under prefers-reduced-motion the global rule of components.css stills it. Petrol is only on the static key. */ .fig-cta{--el-ink:var(--ds-text-on-brand);--il-ink:var(--ds-text-on-brand);--el-accent:var(--ds-logo-bar-on-brand);--ds-bg-surface:var(--ds-bg-brand);color:var(--ds-text-on-brand)} /* how it is built and how it works: two cells, each an animated isometric picture (one 3:2 window), one sentence and its button */ .cells-2{grid-template-columns:1fr} @media (min-width:768px){.cells-2{grid-template-columns:repeat(2,minmax(0,1fr))}} .cells-2 .fig-cell{padding:var(--ds-spacing-md) var(--ds-spacing-md) 0} @media (min-width:768px){.cells-2 .fig-cell{padding:var(--ds-spacing-lg) var(--ds-spacing-lg) 0}} .cells-2 .fig-cell svg{max-inline-size:none;margin-inline:0;inline-size:100%;block-size:auto} .cells-2 .tile{flex:1;padding-bottom:var(--ds-spacing-lg)} .cell-act{background:var(--ds-bg-surface);padding:0 var(--ds-spacing-lg) var(--ds-spacing-lg)} @media (min-width:768px){.cell-act{padding:0 var(--ds-spacing-xl) var(--ds-spacing-xl)}.cells-2 .tile{padding-bottom:var(--ds-spacing-xl)}} /* what is happening now: the three steps, each a calm pictogram on one thin line */ .timeline-box{--ic:56px;margin-top:var(--ds-spacing-xl);border:1px solid var(--ds-border-default);background:var(--ds-bg-surface);padding:var(--ds-spacing-lg)} @media (min-width:768px){.timeline-box{padding:var(--ds-spacing-xl)}} .timeline{list-style:none;margin:0;padding:0} .timeline li{position:relative;display:grid;grid-template-columns:var(--ic) minmax(0,1fr);gap:var(--ds-spacing-lg);align-items:center;padding-block:var(--ds-spacing-md)} .timeline li::before{content:"";position:absolute;left:calc(var(--ic) / 2);top:0;bottom:0;border-left:1px solid color-mix(in srgb,var(--ds-text-primary) 32%,transparent)} .timeline li:first-child::before{top:50%} .timeline li:last-child::before{bottom:50%} .tl-ic{position:relative;z-index:1;inline-size:var(--ic);block-size:var(--ic);background:var(--ds-bg-surface);padding:2px} .tl-ic .ic-svg{display:block;inline-size:100%;block-size:100%} .timeline .li-text{max-width:var(--ds-size-measure-text);margin:0} .timeline li[data-state="now"] .li-text{font-weight:var(--ds-type-ui-weight)} .now-more,.co .more{margin-top:var(--ds-spacing-lg)} .more-link{display:inline-flex;align-items:center;gap:var(--ds-spacing-sm);min-height:36px;transition:text-decoration-thickness var(--ds-motion-micro) var(--ds-motion-ease-move)} .more-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2} /* founder and company: the photo inside the corner marks of a wall; the company as a card */ .founder .frame{position:relative;inline-size:fit-content;padding:var(--ds-spacing-md);--c:color-mix(in srgb,var(--ds-text-primary) 70%,transparent); background: linear-gradient(var(--c),var(--c)) top left/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top left/1.5px 16px no-repeat, linear-gradient(var(--c),var(--c)) top right/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top right/1.5px 16px no-repeat, linear-gradient(var(--c),var(--c)) bottom left/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1.5px 16px no-repeat, linear-gradient(var(--c),var(--c)) bottom right/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1.5px 16px no-repeat} .founder .photo .label{margin-top:var(--ds-spacing-lg)} .founder .photo .name{margin-top:var(--ds-spacing-xs)} .founder .photo .facts{margin-top:var(--ds-spacing-md)} .founder .co{margin-top:var(--ds-spacing-xl);padding:var(--ds-spacing-lg);border:1px solid var(--ds-border-default);background:var(--ds-bg-surface)} .founder .co > p + p{margin-top:var(--ds-spacing-xs)} .founder .co .more{margin-top:var(--ds-spacing-md)} /* closing offer: the plus marks of the brand surface, the key's light running along its wire to the offer */ .cta-row{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--ds-spacing-lg)} .fig-cta{flex:0 0 auto;inline-size:min(360px,100%);min-inline-size:72px;margin:0} .fig-cta svg.mt,.fig-cta svg.il-svg{inline-size:100%;block-size:auto} .offer{margin:0;max-width:30ch;font-size:var(--ds-font-size-lg);line-height:var(--ds-font-leading-heading);font-weight:var(--ds-type-heading-weight);color:var(--ds-text-on-brand)} @media (min-width:768px){ .cta-row{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ds-spacing-xl)} .fig-cta{flex:0 1 360px} .offer{font-size:var(--ds-font-size-xl);max-width:26ch} } /* the closing block: SANKORD is a project of the AIVIS company; a button to AIVIS */ .cta-text{display:grid;gap:var(--ds-spacing-md);justify-items:start} .cta-h{margin:0;max-width:none;font-size:var(--ds-font-size-md);font-weight:var(--ds-type-heading-weight);color:var(--ds-text-on-brand);letter-spacing:.04em} .cta-text .offer{max-width:34ch} .cta-act{margin:0} .cta-act .btn{display:inline-flex;justify-content:center;max-inline-size:100%} /* footer: the form of the AIVIS footer in SANKORD's tokens -- brand and line, Navigate, Legal, the contacts block (the design system's IconTile group row: AIVIS.ONE online, Write to the founder, Telegram app), the bottom line with the flag. The older .foot rules of site.css are no longer used by the page. */ .site-footer{padding-block:var(--ds-spacing-2xl) var(--ds-spacing-xl)} .sf{display:grid;gap:var(--ds-spacing-xl)} .sf ul{margin:0;padding:0;list-style:none} .sf__grid{display:grid;grid-template-columns:1fr;gap:var(--ds-spacing-xl)} .sf__brand .logo{padding-block:0} .sf__tag{margin-top:var(--ds-spacing-md);max-inline-size:34ch;font-size:var(--ds-font-size-xs);line-height:var(--ds-type-body-leading);color:var(--ds-text-secondary)} .sf__h{margin:0 0 var(--ds-spacing-sm);max-width:none;font-size:var(--ds-font-size-sm);font-weight:var(--ds-type-heading-weight);color:var(--ds-text-secondary)} .sf__nav a{display:inline-flex;align-items:baseline;flex-wrap:wrap;column-gap:var(--ds-spacing-sm);min-block-size:var(--ds-size-control-touch);align-content:center; color:var(--ds-text-primary);font-weight:var(--ds-type-ui-weight)} .sf__nav a,.sf__co a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:var(--ds-border-width-focus);transition:text-decoration-color var(--ds-motion-micro) var(--ds-motion-ease-move)} .sf__nav a:hover,.sf__co a:hover{text-decoration-color:currentColor} .sf__hint{font-family:var(--ds-font-family-mono);font-size:var(--ds-font-size-xs);font-weight:400;color:var(--ds-text-secondary)} .sf__contacts{padding-top:var(--ds-spacing-xl);border-top:var(--ds-border-width-hairline) solid var(--ds-border-default)} .sf__who{margin-top:var(--ds-spacing-md);font-size:var(--ds-font-size-xs);color:var(--ds-text-secondary)} .sf__bottom{display:flex;flex-direction:column;gap:var(--ds-spacing-sm);padding-top:var(--ds-spacing-lg);border-top:var(--ds-border-width-hairline) solid var(--ds-border-default); font-size:var(--ds-font-size-xs);color:var(--ds-text-secondary)} .sf__co{display:flex;align-items:center;gap:var(--ds-spacing-md)} .sf__co a{color:var(--ds-text-secondary)} .sf__lang{margin:0;padding-top:var(--ds-spacing-sm);font-size:var(--ds-font-size-xs);color:var(--ds-text-secondary)} .flag-ge{flex:none;inline-size:28px;block-size:28px;overflow:visible} .flag-ge .flag-frame{fill:none;stroke:var(--ds-border-strong);stroke-width:1;vector-effect:non-scaling-stroke} @media (min-width:640px){ .sf__grid{grid-template-columns:1fr 1fr;grid-template-areas:"brand brand" "site legal";column-gap:var(--ds-spacing-lg)} .sf__brand{grid-area:brand}.sf__nav--site{grid-area:site}.sf__nav--legal{grid-area:legal} } @media (min-width:1024px){ .sf__grid{grid-template-columns:5fr 3fr 4fr;grid-template-areas:"brand site legal";column-gap:var(--ds-spacing-2xl)} .sf__bottom{flex-direction:row;justify-content:space-between;align-items:center;gap:var(--ds-spacing-lg)} } /* ---- the flat pictures of how it is built (Architecture, variant C) and how it works (Work scenarios, variant B) ---- KEYFRAME EASINGS ARE LITERAL COPIES OF THE TOKENS (Chromium drops var() inside a keyframe's animation-timing-function), in the keyframes below: cubic-bezier(0, 0, 0.2, 1) = --ds-motion-ease-enter cubic-bezier(0.4, 0, 1, 1) = --ds-motion-ease-exit cubic-bezier(0.2, 0, 0, 1) = --ds-motion-ease-move cubic-bezier(0.3, 0, 0.1, 1) = --ds-motion-ease-travel cubic-bezier(0.37, 0, 0.63, 1)= --ds-motion-ease-breathe */ .b6-pic{--il-ink:var(--ds-text-primary);--el-ink:var(--il-ink);--el-accent:var(--ds-logo-bar);--b6-bg:var(--ds-bg-surface);color:var(--ds-text-primary);display:block} .b6-pic svg{display:block;inline-size:100%;block-size:auto;overflow:visible} .b6-pic .el-s{vector-effect:non-scaling-stroke;fill:none;stroke:var(--el-ink);stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;opacity:.7} .b6-pic .el-dim{opacity:.32} .b6-pic .el-f{fill:var(--el-ink);stroke:none;opacity:.1} .b6-pic .el-ac{vector-effect:non-scaling-stroke;fill:none;stroke:var(--el-accent);stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;opacity:1} .b6-pic .neutral-agent{--el-accent:var(--el-ink)} .b6-pic .el-af{fill:var(--el-accent);stroke:none} .b6-pic .el-dash{stroke-dasharray:5 4} .b6-pic .hd{fill:var(--el-ink);stroke:none;opacity:.7} .b6-pic .bar{fill:var(--el-ink);opacity:.9} .b6-pic .ov{fill:var(--el-ink);opacity:.9} .b6-pic .rx{fill:var(--el-ink);opacity:0} .b6-pic .halo{fill:var(--el-ink);fill-opacity:.35;stroke:var(--el-ink);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center} .b6-pic .ring{fill:none;stroke:var(--el-ink);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center} .b6-pic .pkd{opacity:0} .b6-pic .pkd .h{fill:var(--el-ink);fill-opacity:var(--ds-motion-glow-peak)} .b6-pic .pkd .c{fill:var(--el-ink)} .b6-pic .cur{fill:var(--el-ink);stroke:var(--b6-bg);stroke-width:1;stroke-linejoin:miter;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:0 0} .b6-pic .hit{fill:transparent;stroke:none} .b6-pic .rx,.b6-pic .halo,.b6-pic .ring,.b6-pic .pkd,.b6-pic .cur{pointer-events:none} .b6-pic [role="button"],.b6-pic .hov{cursor:pointer} .b6-pic .hit:focus-visible,.b6-pic svg:focus-visible{outline:var(--ds-border-width-focus) solid var(--ds-border-focus);outline-offset:var(--ds-spacing-2xs)} .b6-pic .sc{transform-box:fill-box;transform-origin:center} /* motion: one clock per picture, set on the svg as --loop */ .b6-pic .a{animation-duration:var(--loop);animation-iteration-count:infinite;animation-timing-function:linear} .b6-pic .rs .a{animation:none} /* hover / focus isolates a part and its arrows (opacity only) */ .b6-pic .part,.b6-pic .lk,.b6-pic .stp{transition:opacity var(--ds-motion-quick) var(--ds-motion-ease-move)} .b6-pic .dim{opacity:var(--ds-state-dim)} /* the stepped picture: the finished still is the base; a step dims what is not reached yet */ .b6-pic [data-step] .stp{opacity:var(--ds-state-dim)} .b6-pic [data-step] .stp.done{opacity:1} .b6-pic .stp.now .pk{animation-name:var(--kf);animation-duration:var(--ds-motion-loop-short);animation-iteration-count:1;animation-timing-function:linear} .b6-pic .cur-w{transition:transform var(--ds-motion-travel) var(--ds-motion-ease-travel)} .b6-pic .row .rsel{opacity:0;transition:opacity var(--ds-motion-quick) var(--ds-motion-ease-move)} .b6-pic .row.on .rsel{opacity:1} /* plus marks on the call to action: design-system/surfaces/ (step 33 px, arm 4 px, line 1.5 px, 6%, a fixed 33 px tile) */ .cta-marks{position:relative;isolation:isolate} .cta-marks::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--ds-text-on-brand);opacity:0.06;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' viewBox='0 0 33 33' fill='none' stroke='black'%3E%3Cpath stroke-width='1.5' d='M12.5 16.5H20.5M16.5 12.5V20.5'/%3E%3C/svg%3E") center/33px 33px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' viewBox='0 0 33 33' fill='none' stroke='black'%3E%3Cpath stroke-width='1.5' d='M12.5 16.5H20.5M16.5 12.5V20.5'/%3E%3C/svg%3E") center/33px 33px repeat} /* plus marks behind the two flat pictures, inside their frames: the same surface, drawn in --ds-text-primary (light card by day, dark by night), 6%, static */ .b6-marks{position:relative;isolation:isolate} .b6-marks::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--ds-text-primary);opacity:0.06;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' viewBox='0 0 33 33' fill='none' stroke='black'%3E%3Cpath stroke-width='1.5' d='M12.5 16.5H20.5M16.5 12.5V20.5'/%3E%3C/svg%3E") center/33px 33px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='33' viewBox='0 0 33 33' fill='none' stroke='black'%3E%3Cpath stroke-width='1.5' d='M12.5 16.5H20.5M16.5 12.5V20.5'/%3E%3C/svg%3E") center/33px 33px repeat} /* the closing offer is an isometric picture: no keyframes of its own */ /* the flat pictures of how it is built / how it works: the keyframes, baked */ @keyframes b6k1{0%{transform:translate(127px,37px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(127px,37px);opacity:0;animation-timing-function:linear}10%{transform:translate(127px,37px);opacity:1;animation-timing-function:linear}80%{transform:translate(127px,52px);opacity:1;animation-timing-function:linear}80.1%{transform:translate(127px,52px);opacity:0;animation-timing-function:linear}100%{transform:translate(127px,37px);opacity:0;animation-timing-function:linear}} @keyframes b6k2{0%{transform:translate(127px,66px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(127px,66px);opacity:0;animation-timing-function:linear}10%{transform:translate(127px,66px);opacity:1;animation-timing-function:linear}80%{transform:translate(127px,80px);opacity:1;animation-timing-function:linear}80.1%{transform:translate(127px,80px);opacity:0;animation-timing-function:linear}100%{transform:translate(127px,66px);opacity:0;animation-timing-function:linear}} @keyframes b6k3{0%{transform:translate(68px,76px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(68px,76px);opacity:0;animation-timing-function:linear}10%{transform:translate(68px,76px);opacity:1;animation-timing-function:linear}38.571%{transform:translate(88px,76px);opacity:1;animation-timing-function:linear}55.714%{transform:translate(88px,88px);opacity:1;animation-timing-function:linear}80%{transform:translate(105px,88px);opacity:1;animation-timing-function:linear}80.1%{transform:translate(105px,88px);opacity:0;animation-timing-function:linear}100%{transform:translate(68px,76px);opacity:0;animation-timing-function:linear}} @keyframes b6k4{0%{transform:translate(68px,116px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(68px,116px);opacity:0;animation-timing-function:linear}10%{transform:translate(68px,116px);opacity:1;animation-timing-function:linear}38.571%{transform:translate(88px,116px);opacity:1;animation-timing-function:linear}55.714%{transform:translate(88px,104px);opacity:1;animation-timing-function:linear}80%{transform:translate(105px,104px);opacity:1;animation-timing-function:linear}80.1%{transform:translate(105px,104px);opacity:0;animation-timing-function:linear}100%{transform:translate(68px,116px);opacity:0;animation-timing-function:linear}} @keyframes b6k5{0%{transform:translate(186px,76px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(186px,76px);opacity:0;animation-timing-function:linear}10%{transform:translate(186px,76px);opacity:1;animation-timing-function:linear}38.571%{transform:translate(166px,76px);opacity:1;animation-timing-function:linear}55.714%{transform:translate(166px,88px);opacity:1;animation-timing-function:linear}80%{transform:translate(149px,88px);opacity:1;animation-timing-function:linear}80.1%{transform:translate(149px,88px);opacity:0;animation-timing-function:linear}100%{transform:translate(186px,76px);opacity:0;animation-timing-function:linear}} @keyframes b6k6{0%{transform:translate(186px,116px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(186px,116px);opacity:0;animation-timing-function:linear}10%{transform:translate(186px,116px);opacity:1;animation-timing-function:linear}38.571%{transform:translate(166px,116px);opacity:1;animation-timing-function:linear}55.714%{transform:translate(166px,104px);opacity:1;animation-timing-function:linear}80%{transform:translate(149px,104px);opacity:1;animation-timing-function:linear}80.1%{transform:translate(149px,104px);opacity:0;animation-timing-function:linear}100%{transform:translate(186px,116px);opacity:0;animation-timing-function:linear}} @keyframes b6k7{0%{transform:translate(127px,142px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(127px,142px);opacity:0;animation-timing-function:linear}10%{transform:translate(127px,142px);opacity:1;animation-timing-function:linear}80%{transform:translate(127px,112px);opacity:1;animation-timing-function:linear}80.1%{transform:translate(127px,112px);opacity:0;animation-timing-function:linear}100%{transform:translate(127px,142px);opacity:0;animation-timing-function:linear}} @keyframes b6k8{0%{transform:translate(245px,96px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(245px,96px);opacity:0;animation-timing-function:linear}10%{transform:translate(245px,96px);opacity:1;animation-timing-function:linear}90%{transform:translate(149px,96px);opacity:1;animation-timing-function:linear}90.1%{transform:translate(149px,96px);opacity:0;animation-timing-function:linear}100%{transform:translate(245px,96px);opacity:0;animation-timing-function:linear}} @keyframes b6k9{0%{transform:translate(116px,53px);opacity:0;animation-timing-function:linear}25.9%{transform:translate(116px,53px);opacity:0;animation-timing-function:linear}26%{transform:translate(116px,53px);opacity:1;animation-timing-function:linear}33.5%{transform:translate(146px,53px);opacity:1;animation-timing-function:linear}33.6%{transform:translate(146px,53px);opacity:0;animation-timing-function:linear}100%{transform:translate(116px,53px);opacity:0;animation-timing-function:linear}} @keyframes b6k10{0%{transform:translate(162px,53px);opacity:0;animation-timing-function:linear}41.9%{transform:translate(162px,53px);opacity:0;animation-timing-function:linear}42%{transform:translate(162px,53px);opacity:1;animation-timing-function:linear}49.5%{transform:translate(192px,53px);opacity:1;animation-timing-function:linear}49.6%{transform:translate(192px,53px);opacity:0;animation-timing-function:linear}100%{transform:translate(162px,53px);opacity:0;animation-timing-function:linear}} @keyframes b6k11{0%{transform:translate(200px,61px);opacity:0;animation-timing-function:linear}57.9%{transform:translate(200px,61px);opacity:0;animation-timing-function:linear}58%{transform:translate(200px,61px);opacity:1;animation-timing-function:linear}67.5%{transform:translate(200px,99px);opacity:1;animation-timing-function:linear}67.6%{transform:translate(200px,99px);opacity:0;animation-timing-function:linear}100%{transform:translate(200px,61px);opacity:0;animation-timing-function:linear}} @keyframes b6k12{0%{opacity:0;animation-timing-function:linear}33.5%{opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}37%{opacity:var(--ds-motion-glow-peak);animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}43.5%{opacity:0;animation-timing-function:linear}100%{opacity:0;animation-timing-function:linear}} @keyframes b6k13{0%{opacity:0;animation-timing-function:linear}49.5%{opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}53%{opacity:var(--ds-motion-glow-peak);animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}59.5%{opacity:0;animation-timing-function:linear}100%{opacity:0;animation-timing-function:linear}} @keyframes b6k14{0%{opacity:0;animation-timing-function:linear}67.5%{opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}71%{opacity:var(--ds-motion-glow-peak);animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}77.5%{opacity:0;animation-timing-function:linear}100%{opacity:0;animation-timing-function:linear}} @keyframes b6k15{0%{transform:translate(74px,53px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(74px,53px);opacity:0;animation-timing-function:linear}10%{transform:translate(74px,53px);opacity:1;animation-timing-function:linear}16.75%{transform:translate(101px,53px);opacity:1;animation-timing-function:linear}16.85%{transform:translate(101px,53px);opacity:0;animation-timing-function:linear}100%{transform:translate(74px,53px);opacity:0;animation-timing-function:linear}} @keyframes b6k16{0%{transform:scale(0.4);opacity:0;animation-timing-function:linear}4%{transform:scale(0.4);opacity:0.7;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}14%{transform:scale(1.6);opacity:0;animation-timing-function:linear}100%{transform:scale(0.4);opacity:0;animation-timing-function:linear}} @keyframes b6k17{0%{opacity:0;animation-timing-function:linear}16.75%{opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}20.25%{opacity:var(--ds-motion-glow-peak);animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}26.75%{opacity:0;animation-timing-function:linear}100%{opacity:0;animation-timing-function:linear}} @keyframes b6k18{0%{transform:translate(74px,79px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(74px,79px);opacity:0;animation-timing-function:linear}10%{transform:translate(74px,79px);opacity:1;animation-timing-function:linear}11.5%{transform:translate(80px,79px);opacity:1;animation-timing-function:linear}18%{transform:translate(80px,53px);opacity:1;animation-timing-function:linear}23.25%{transform:translate(101px,53px);opacity:1;animation-timing-function:linear}23.35%{transform:translate(101px,53px);opacity:0;animation-timing-function:linear}100%{transform:translate(74px,79px);opacity:0;animation-timing-function:linear}} @keyframes b6k19{0%{transform:scale(0.4);opacity:0;animation-timing-function:linear}4%{transform:scale(0.4);opacity:0.7;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}14%{transform:scale(1.6);opacity:0;animation-timing-function:linear}100%{transform:scale(0.4);opacity:0;animation-timing-function:linear}} @keyframes b6k20{0%{opacity:0;animation-timing-function:linear}23.25%{opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}26.75%{opacity:var(--ds-motion-glow-peak);animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}33.25%{opacity:0;animation-timing-function:linear}100%{opacity:0;animation-timing-function:linear}} @keyframes b6k21{0%{transform:translate(74px,105px);opacity:0;animation-timing-function:linear}9.9%{transform:translate(74px,105px);opacity:0;animation-timing-function:linear}10%{transform:translate(74px,105px);opacity:1;animation-timing-function:linear}11.5%{transform:translate(80px,105px);opacity:1;animation-timing-function:linear}24.5%{transform:translate(80px,53px);opacity:1;animation-timing-function:linear}29.75%{transform:translate(101px,53px);opacity:1;animation-timing-function:linear}29.85%{transform:translate(101px,53px);opacity:0;animation-timing-function:linear}100%{transform:translate(74px,105px);opacity:0;animation-timing-function:linear}} @keyframes b6k22{0%{transform:scale(0.4);opacity:0;animation-timing-function:linear}4%{transform:scale(0.4);opacity:0.7;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}14%{transform:scale(1.6);opacity:0;animation-timing-function:linear}100%{transform:scale(0.4);opacity:0;animation-timing-function:linear}} @keyframes b6k23{0%{opacity:0;animation-timing-function:linear}29.75%{opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}33.25%{opacity:var(--ds-motion-glow-peak);animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}39.75%{opacity:0;animation-timing-function:linear}100%{opacity:0;animation-timing-function:linear}}