/* ------------------------------------------------------------- /doconomy - dark case page Loaded only on this page (via `extra_css` in _cases/doconomy.html), so none of it ships with the home page. Implemented from Figma 107:36782. Like the home page this is a rigid 1400px canvas that main.css scales with `zoom`. Layout lengths are the site's rem spacing scale (8px grid, tokens in main.css); the only raw pixels left are the Figma artwork coordinates - the hero wash and rays here, and the tile scenes in the appendix, which are authored against the 628x504 Figma tile and cannot be re-gridded without redrawing them. Contents 1. Tokens 2. Page shell + top bar 3. Shared pieces (pill, figure) 4. Hero 5. Stats 6. Screenshot grid - three of the six tiles are animated 7. Prose blocks 8. Case-study teaser 9. Narrow widths 10. Appendix: generated @keyframes (see MOTION.md) ------------------------------------------------------------- */ /* ============================================================= 1. Tokens ============================================================= */ :root { /* the product's own palette - these are Doconomy UI colours, not site brand colours, which is why they live here and not in main.css */ --doco-green: #40c466; --doco-green-dark: #1b7e39; --doco-success: #7be098; /* dt-notice/success-bg */ --doco-surface: #f7f6f2; /* dt-surface/page-bg */ --doco-ink: #272725; /* dt-content/default */ --doco-phone: #1a1a1a; /* the hero device bezel */ --doco-prose: #e4e4e4; /* body copy on the dark page */ /* one Figma tile, and the loop the animated ones are built on */ --doco-tile-w: 628px; --doco-tile-h: 504px; /* aspect-ratio takes unitless numbers, so it cannot reuse the pair above - `628px / 504px` is invalid and silently computes to `auto`, which collapsed the animated tiles to zero height wherever the grid did not pair them with an image tile (i.e. the whole mobile view). */ --doco-tile-ar: 628 / 504; --doco-loop: 6.000643s; /* Two tiles hold still for a beat before repeating, so they run a little longer than the base loop. The extra time is padding only - every keyframe was remapped so the motion itself is unchanged, and each track holds its last value across the added time. Bike: the amount is back to EUR25 at 5.874s and nothing moves after 6.001s, so the 1s tail lands entirely in that dead stretch - it reads as a pause between the reset and the next confetti burst (0.682s into the following loop), stretching that gap to 1.81s. */ --doco-loop-bike: 7.000643s; /* + 1s before it starts over */ --doco-loop-coins: 7.200643s; /* + 2 x 600ms while the coins are up */ /* the theme fan is ours, not Figma's - one steady clockwise revolution, slow enough to read as ambient rather than a carousel. The mask repeats every 72deg, so the pattern comes round every 9s. */ --doco-fan: 45s; } /* ============================================================= 2. Page shell + top bar ============================================================= */ /* the map on is a home-page detail; this page is dark and flat */ body.case-dark { color: var(--inverted-muted); background: var(--inverted-background); background-image: none; /* dark ground: gradient text takes the on-dark ramp (main.css). The white .case-pill overrides this back to the light one itself. */ --gradient: var(--gradient-brand-on-dark); --gradient-fallback: var(--gradient-orange); } .case-page { position: relative; display: flex; flex-direction: column; align-items: stretch; overflow-x: clip; /* the hero wash bleeds a couple of px past 1400 */ } @media (min-width: 1250px) { .case-page { width: var(--canvas-width); margin: 0 auto; } } /* the warm gradient wash behind the header + hero. Same artwork as the Doconomy work card's background: one gradient with two soft light sweeps, exported as a single SVG. */ .case-page__bg { position: absolute; left: 0; top: 0; width: 1398px; height: 1186px; max-width: 100%; /* the sweeps used to be baked into hero-bg.svg, which is why they sat still; this is the same file with the two ellipses taken out. The overflow clip stands in for the SVG's own clipPath. */ overflow: hidden; background: url("images/doconomy/hero-bg-base.svg") no-repeat left top / 1398px 1186px; pointer-events: none; } /* -- Hero light sweeps --------------------------------------------- Figma Ellipse 2170 / 2171, lifted into their own SVGs (each viewBox padded by 120px so the 37.194 blur is not clipped) and positioned at the coordinates they had inside the flat export. They drift on the same two unrelated cycles as the home page's hero card - `--dur-glow` against `--dur-glow * 0.72`, with a negative delay on the second - so the light wanders instead of pulsing. Compositor-only work. ------------------------------------------------------------- */ .case-page__ray { position: absolute; display: block; background-repeat: no-repeat; background-size: 100% 100%; } .case-page__ray--a { left: 286.84px; top: -481.39px; width: 1822.57px; height: 1027.53px; background-image: url("images/doconomy/hero-ray-a.svg"); } .case-page__ray--b { left: 482.39px; top: -127.25px; width: 1637.35px; height: 951.62px; background-image: url("images/doconomy/hero-ray-b.svg"); } @media (prefers-reduced-motion: no-preference) { .case-page__ray--a { animation: case-ray-drift-a var(--dur-glow) ease-in-out infinite alternate; } .case-page__ray--b { animation: case-ray-drift-b calc(var(--dur-glow) * 0.72) ease-in-out infinite alternate; animation-delay: calc(var(--dur-glow) * -0.31); /* start out of phase */ } } /* same shape as the home card's sweeps: midpoints so each ray swells and fades twice on the way across, rather than one slow zoom. */ @keyframes case-ray-drift-a { 0% { transform: translate(0, 0) scale(0.84); opacity: 0.32; } 32% { transform: translate(20px, -10px) scale(1.18); opacity: 0.94; } 58% { transform: translate(31px, -17px) scale(0.97); opacity: 0.52; } 100% { transform: translate(58px, -32px) scale(1.38); opacity: 1; } } @keyframes case-ray-drift-b { 0% { transform: translate(0, 0) scale(1.32); opacity: 1; } 27% { transform: translate(-15px, 11px) scale(1.03); opacity: 0.48; } 63% { transform: translate(-30px, 21px) scale(1.24); opacity: 0.96; } 100% { transform: translate(-50px, 36px) scale(0.86); opacity: 0.38; } } /* every section sits above the wash */ .case-page > *:not(.case-page__bg) { position: relative; } /* -- Top bar ------------------------------------------------------- */ .case-topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-3); } .case-back { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; } .case-back:hover { text-decoration: none; } .case-back__icon { width: var(--icon-lg); height: var(--icon-lg); background: var(--inverted-main); -webkit-mask: url("icons/angle-left.svg") no-repeat center / contain; mask: url("icons/angle-left.svg") no-repeat center / contain; transition: transform var(--dur-fast) var(--ease-standard); } .case-back:hover .case-back__icon { transform: translateX(calc(var(--move-sm) * -1)); } /* the brand block is the home page's .profile-* component; only its colours change on the dark page (its tracking used to be re-declared here at different values, so the same name set in two ways) */ .case-back .profile-name { color: var(--inverted-main); } .case-back .profile-role { color: var(--inverted-muted); } /* ============================================================= 3. Shared pieces ============================================================= */ /* White pill with gradient label - the same button as the work cards' CTA, so its box and label live in main.css (.work-card__cta, .case-pill). Only the leading glyph is different: a Font Awesome "book" instead of the chevron. */ .case-pill__icon { background: var(--gradient-nav); -webkit-mask: url("icons/book.svg") no-repeat center / contain; mask: url("icons/book.svg") no-repeat center / contain; } .case-figure { margin: 0; } .case-figure img { display: block; width: 100%; height: auto; border-radius: 12px; } /* ============================================================= 4. Hero ============================================================= */ .case-hero { display: flex; gap: var(--space-4); align-items: flex-end; justify-content: center; padding: 0 var(--space-16) var(--space-4) var(--space-8); } .case-hero__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } /* the mark keeps its own aspect ratio off a grid-aligned height */ .case-hero__logo { display: block; width: auto; height: var(--space-4); /* 32px */ margin: var(--space-4) 0 0; } .case-hero__title { margin: 0; font: var(--font-heading-64); color: var(--inverted-main); } .case-hero__lead { width: 39.5rem; /* 632px */ max-width: 100%; } .case-hero__lead p { margin: 0 0 var(--space-4); font: var(--font-lead-22); font-weight: 400; color: var(--inverted-muted); } .case-hero__lead p:last-child { margin-bottom: 0; } .case-hero__lead strong { font-weight: 900; color: var(--inverted-main); } /* the product blurb hangs off the right edge of the text column, under the phone (Figma 107:43918) */ .case-hero__product { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); width: 100%; padding-top: var(--space-5); text-align: right; } .case-hero__product-title { width: 23rem; /* 368px */ margin: 0; font: var(--font-heading-24); line-height: normal; color: var(--inverted-main); } .case-hero__product-body { width: 28rem; /* 448px */ max-width: 100%; margin: 0; font: var(--font-body-16); color: var(--inverted-muted); } /* 375 x 764 is the screenshot's own device box, not a layout size */ .case-hero__visual { flex: none; width: 375px; height: 764px; overflow: hidden; border-radius: var(--radius-xl); background: var(--doco-phone); } .case-hero__visual img { display: block; width: 375px; height: 764px; object-fit: cover; object-position: top center; } /* ============================================================= 5. Stats ============================================================= */ .case-stats { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-8) 0; } .case-stats__list { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .case-stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin: 0; } .case-stat__label { font: var(--font-uppercase-14); line-height: normal; letter-spacing: 1px; text-transform: uppercase; color: var(--inverted-muted); } /* Lato Light - the one place on the site that uses 300 */ .case-stat__value { font-weight: 300; font-size: 3rem; /* 48px */ line-height: 1; color: var(--inverted-main); } .case-rule { height: var(--space-1); border-radius: var(--radius-sm); background: var(--gray-700); } /* ============================================================= 6. Screenshot grid Six tiles. Three are plain screenshots; the other three are the Figma Motion animations rebuilt as elements - their structure is below, their keyframes in the appendix. ============================================================= */ .case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); padding: var(--space-8); } .case-grid__tile { margin: 0; } .case-grid__tile img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); } /* -- Static tiles -------------------------------------------------- Same flat panel as the animated ones, so the panel is drawn in CSS and only the UI inside it ships as a PNG (exported at 3x from the content node, not the whole tile). The export still carries a couple of px of --doco-surface behind each card's drop shadow, which is the same colour as the panel below it, so the seam is invisible. Widths are the export's own size as a share of the 628px Figma tile. ------------------------------------------------------------- */ .case-grid__tile--panel { position: relative; aspect-ratio: var(--doco-tile-ar); overflow: hidden; border-radius: var(--radius-sm); background: var(--doco-surface); } .case-grid__tile--panel img { position: absolute; border-radius: 0; } /* Centred in the tile. In the export the date picker already sits dead centre, but the deposit form is 26px left of it - both are centred here, and each export box is symmetric about its own content. */ .case-grid__tile--calendar img, .case-grid__tile--frequency img { left: 50%; top: 50%; transform: translate(-50%, -50%); } .case-grid__tile--calendar img { width: 54.777%; /* 344 / 628 */ } .case-grid__tile--frequency img { width: 55.892%; /* 351 / 628 */ } /* The goal row is meant to run off the right edge - Figma clips it at the panel bound - so it keeps its authored placement instead. */ .case-grid__tile--selection img { left: 11.783%; /* 74 / 628 */ top: 42.46%; /* 214 / 504 */ width: 88.217%; /* 554 / 628 */ } /* ============================================================= 7. Prose blocks ============================================================= */ .case-block { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-10) var(--space-8) 0; } .case-block__title { margin: 0; font: var(--font-heading-36); text-align: center; color: var(--inverted-main); } .case-cols { display: flex; gap: var(--space-4); align-items: flex-start; } .case-cols__prose { flex: 1 1 0; min-width: 0; } /* the aside and the split's media column are the same 560px slot in the design (they were 561 and 558) */ .case-cols__aside { flex: none; width: 35rem; /* 560px */ display: flex; flex-direction: column; gap: var(--space-3); } /* two stats side by side in the 560px aside: 272 + 16 gap + 272 */ .case-stats__list--pair .case-stat { flex: none; width: 17rem; /* 272px */ gap: var(--space-0-5); } .case-caption { margin: 0; font-style: italic; font-size: 0.875rem; /* 14px */ line-height: normal; color: var(--inverted-muted); } .case-split { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-8); } .case-split__media { flex: none; width: 35rem; /* 560px */ } .case-split__prose { flex: 1 1 0; min-width: 0; } /* shared prose scale for both text columns (Figma 107:44399 / 107:44877) */ .case-cols__prose h3, .case-split__prose h3 { margin: 0 0 var(--space-3); font: var(--font-heading-24); line-height: 1.15; color: var(--inverted-main); } .case-cols__prose p, .case-split__prose p { margin: 0 0 var(--space-3); font: var(--font-body-16); color: var(--doco-prose); } .case-cols__prose p:last-child, .case-split__prose p:last-child { margin-bottom: 0; } .case-cols__prose strong, .case-split__prose strong { font-weight: 400; color: var(--inverted-main); } /* ============================================================= 8. Case-study teaser ============================================================= */ .case-study { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-10) var(--space-8) var(--space-16); } /* Figma crops this to a short strip (1272/206) rather than the full screenshot - the board reads as a peek at the product, not a poster. */ .case-study__board { aspect-ratio: 1272 / 206; overflow: hidden; border-radius: 0.5rem; /* 8px */ } .case-study__board img { height: 100%; object-fit: cover; object-position: top; border-radius: 0; background: var(--gray-0); } .case-study__outro { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding-top: var(--space-2); text-align: center; } .case-study__title { width: 36.5rem; /* 584px */ max-width: 100%; margin: 0; font: var(--font-heading-24); line-height: normal; color: var(--inverted-main); } .case-study__lead { width: 55.5rem; /* 888px */ max-width: 100%; margin: 0; font: var(--font-lead-22); color: var(--doco-prose); } /* ============================================================= 9. Narrow widths No zoom down here, so the Figma-fixed widths go fluid and the two side-by-side sections stack. Same idea as the home page. ============================================================= */ @media (max-width: 1250px) { .case-page__bg { width: 100%; height: 62.5rem; /* 1000px */ background-size: cover; background-position: left top; } .case-topbar { padding: var(--space-3); } .case-hero { flex-direction: column; align-items: stretch; gap: var(--space-5); padding: 0 var(--space-3) var(--space-3); } .case-hero__title { font-size: clamp(2.25rem, 6vw, 4rem); /* 36 -> 64px */ } .case-hero__lead { width: 100%; } .case-hero__lead p { font: var(--font-body-18); } /* the blurb loses its hang-off-the-phone placement and reads as a normal paragraph under the intro */ .case-hero__product { align-items: flex-start; padding-top: var(--space-1); text-align: left; } .case-hero__product-title, .case-hero__product-body { width: 100%; } .case-hero__visual { align-self: center; max-width: 100%; } .case-stats { gap: var(--space-3); padding: var(--space-5) var(--space-3) 0; } .case-stats__list { flex-wrap: wrap; } .case-stat { flex: 1 1 12.5rem; /* 200px */ } .case-stat__value { font-size: clamp(2rem, 4.5vw, 3rem); /* 32 -> 48px */ } .case-grid { padding: var(--space-5) var(--space-3); } .case-block { gap: var(--space-4); padding: var(--space-7) var(--space-3) 0; } .case-block__title { font: var(--font-heading-28); } .case-cols { flex-direction: column; gap: var(--space-4); } .case-cols__aside { width: 100%; } .case-stats__list--pair .case-stat { flex: 1 1 0; width: auto; } .case-split { flex-direction: column; padding: var(--space-5) var(--space-3) 0; } .case-split__media { width: 100%; } .case-study { padding: var(--space-7) var(--space-3) var(--space-10); } .case-study__title, .case-study__lead { width: 100%; } .case-study__lead { font: var(--font-body-18); } .case-study__lead br { display: none; } } @media (max-width: 700px) { .case-grid { grid-template-columns: 1fr; } /* Single column re-orders the pair in the middle: the coins animation leads into the recurring-deposit form rather than following it. Only here - the two-column grid above reads left-to-right and keeps the authored order. Every tile is listed so the sequence is explicit rather than an offset against the default 0. */ .case-grid__tile--bike { order: 1; } .case-grid__tile--calendar { order: 2; } .case-grid__tile--coins { order: 3; } .case-grid__tile--frequency { order: 4; } .case-grid__tile--confirm { order: 5; } .case-grid__tile--selection { order: 6; } /* Keep the three hero stats on one row. The 1250px rule gives them `flex: 1 1 200px` with wrapping, which can never fit three columns on a phone, so they broke 2 + 1. Scoped to .case-stats so the Before / After pair in the design-system block keeps its larger type. */ .case-stats .case-stats__list { flex-wrap: nowrap; gap: var(--space-1); } .case-stats .case-stat { flex: 1 1 0; min-width: 0; } .case-stats .case-stat__label { font-size: 0.75rem; /* 12px */ letter-spacing: 0.4px; } .case-stats .case-stat__value { font-size: clamp(1.25rem, 5.4vw, 2rem); /* 20 -> 32px */ } /* Not full-column: the artwork is a 1:2 phone screen, so `width: 100%` made it ~700px tall on a phone - taller than it is on desktop, and a screenful on its own. Capped at 260px it still reads as a device and sits in view with the copy above it. The box takes its height from the image rather than an aspect-ratio of its own: Safari would not resolve the img's `height: 100%` against an aspect-ratio-derived height, so the image came up short and left a band of the --doco-phone background under it. The carries its 375x764 in width/height attributes, so the ratio is known before it loads and nothing shifts. */ .case-hero__visual { width: min(100%, 260px); margin-inline: auto; height: auto; aspect-ratio: auto; } .case-hero__visual img { width: 100%; height: auto; } } /* the scene is authored at the Figma tile size and scaled to whatever width the tile actually gets, so every offset below is a design px */ .doco-scene { position: absolute; left: 0; top: 0; width: var(--doco-tile-w); height: var(--doco-tile-h); zoom: calc(100cqw / var(--doco-tile-w)); } /* -- coins tile (Figma 107:43942) ---------------------------------- The whole tile is a flat var(--doco-surface) panel plus nine coins that drop in, settle, then lift back out - twice per loop. Nothing else is in it, so there is no background screenshot: the coins are real elements. ------------------------------------------------------------- */ .case-grid__tile--coins { position: relative; aspect-ratio: var(--doco-tile-ar); overflow: hidden; border-radius: var(--radius-sm); background: var(--doco-surface); container-type: inline-size; } .doco-coins { position: absolute; left: 179.5px; top: 133.63px; width: 216.5px; height: 146.739px; } .doco-coin { position: absolute; width: 32.475px; height: 15.636px; opacity: 0; background: url("images/doconomy/coin.svg") no-repeat center / 100% 100%; animation-duration: var(--doco-loop-coins); animation-timing-function: linear; animation-iteration-count: infinite; } .doco-coin--1 { left: 93.44px; top: 130.23px; animation-name: doco-coin1-op, doco-coin1-rot, doco-coin1-mv; } .doco-coin--2 { left: 44.65px; top: 130.62px; animation-name: doco-coin2-op, doco-coin2-rot, doco-coin2-mv; } .doco-coin--3 { left: 92.51px; top: 124.56px; animation-name: doco-coin3-op, doco-coin3-rot, doco-coin3-mv; } .doco-coin--4 { left: 92.51px; top: 118.88px; animation-name: doco-coin4-op, doco-coin4-rot, doco-coin4-mv; } .doco-coin--5 { left: 90.6px; top: 113.21px; animation-name: doco-coin5-op, doco-coin5-rot, doco-coin5-mv; } .doco-coin--6 { left: 92.51px; top: 107.52px; animation-name: doco-coin6-op, doco-coin6-rot, doco-coin6-mv; } .doco-coin--7 { left: 139.37px; top: 131.8px; animation-name: doco-coin7-op, doco-coin7-rot, doco-coin7-mv; } .doco-coin--8 { left: 47.05px; top: 123.08px; animation-name: doco-coin8-op, doco-coin8-rot, doco-coin8-mv; } .doco-coin--9 { left: 91.56px; top: 99.02px; animation-name: doco-coin9-op, doco-coin9-rot, doco-coin9-mv; } /* rest state: coins settled, nothing moving. Coin 9 rests at a slight angle in the design, so give it that as its base. */ @media (prefers-reduced-motion: reduce) { .doco-coin { opacity: 1; animation: none; } .doco-coin--9 { rotate: 1.43239deg; } } /* -- confirm tile (Figma 107:43946) -------------------------------- Also entirely vector: a flat success panel, four drifting dots, a twenty-piece confetti burst and a checkmark that pops in and draws itself. No screenshot behind it either. ------------------------------------------------------------- */ .case-grid__tile--confirm { position: relative; aspect-ratio: var(--doco-tile-ar); overflow: hidden; border-radius: 8px; background: var(--doco-success); /* dt-notice/success-bg */ container-type: inline-size; } /* dots and confetti are plain circles in the design, so they are drawn with border-radius rather than shipped as 24 near-identical SVGs. The four drifting dots run 1-4 with 2 missing: that one sat on the bottom edge and slid 102px right-to-left, reading as a stray dot detached from the burst rather than part of it. Keep the gap if the tile is ever re-exported. */ .doco-dot, .doco-spark { position: absolute; border-radius: 50%; opacity: 0; animation-duration: var(--doco-loop); animation-timing-function: linear; animation-iteration-count: infinite; } .doco-dot--1 { left: 177.0px; top: 493.0px; width: 20.0px; height: 20.0px; background: var(--doco-green); animation-name: doco-dot1-op, doco-dot1-mv, doco-dot1-sc; } .doco-dot--3 { left: 174.0px; top: 253.0px; width: 20.0px; height: 20.0px; background: var(--doco-green); animation-name: doco-dot3-op, doco-dot3-mv, doco-dot3-sc; } .doco-dot--4 { left: 396.0px; top: 145.0px; width: 20.0px; height: 20.0px; background: var(--doco-green-dark); animation-name: doco-dot4-op, doco-dot4-mv, doco-dot4-sc; } .doco-spark--1 { left: 293.14px; top: 268.14px; width: 13.725px; height: 13.725px; background: var(--doco-green); animation-name: doco-spark1-op, doco-spark1-mv, doco-spark1-sc; } .doco-spark--2 { left: 293.44px; top: 268.44px; width: 13.124px; height: 13.124px; background: var(--doco-green-dark); animation-name: doco-spark2-op, doco-spark2-mv, doco-spark2-sc; } .doco-spark--3 { left: 293.76px; top: 268.76px; width: 12.472px; height: 12.472px; background: var(--doco-green); animation-name: doco-spark3-op, doco-spark3-mv, doco-spark3-sc; } .doco-spark--4 { left: 296.55px; top: 271.55px; width: 6.891px; height: 6.891px; background: var(--doco-green-dark); animation-name: doco-spark4-op, doco-spark4-mv, doco-spark4-sc; } .doco-spark--5 { left: 294.21px; top: 269.21px; width: 11.579px; height: 11.579px; background: var(--doco-green); animation-name: doco-spark5-op, doco-spark5-mv, doco-spark5-sc; } .doco-spark--6 { left: 295.57px; top: 270.57px; width: 8.866px; height: 8.866px; background: var(--doco-green-dark); animation-name: doco-spark6-op, doco-spark6-mv, doco-spark6-sc; } .doco-spark--7 { left: 294.36px; top: 269.36px; width: 11.279px; height: 11.279px; background: var(--doco-green); animation-name: doco-spark7-op, doco-spark7-mv, doco-spark7-sc; } .doco-spark--8 { left: 294.33px; top: 269.34px; width: 11.329px; height: 11.329px; background: var(--doco-green-dark); animation-name: doco-spark8-op, doco-spark8-mv, doco-spark8-sc; } .doco-spark--9 { left: 296.52px; top: 271.52px; width: 6.958px; height: 6.958px; background: var(--doco-green); animation-name: doco-spark9-op, doco-spark9-mv, doco-spark9-sc; } .doco-spark--10 { left: 292.52px; top: 267.52px; width: 14.957px; height: 14.957px; background: var(--doco-green-dark); animation-name: doco-spark10-op, doco-spark10-mv, doco-spark10-sc; } .doco-spark--11 { left: 295.78px; top: 270.78px; width: 8.44px; height: 8.44px; background: var(--doco-green); animation-name: doco-spark11-op, doco-spark11-mv, doco-spark11-sc; } .doco-spark--12 { left: 291.32px; top: 266.32px; width: 17.358px; height: 17.358px; background: var(--doco-green-dark); animation-name: doco-spark12-op, doco-spark12-mv, doco-spark12-sc; } .doco-spark--13 { left: 295.24px; top: 270.24px; width: 9.518px; height: 9.518px; background: var(--doco-green); animation-name: doco-spark13-op, doco-spark13-mv, doco-spark13-sc; } .doco-spark--14 { left: 295.57px; top: 270.57px; width: 8.869px; height: 8.869px; background: var(--doco-green-dark); animation-name: doco-spark14-op, doco-spark14-mv, doco-spark14-sc; } .doco-spark--15 { left: 293.17px; top: 268.17px; width: 13.658px; height: 13.658px; background: var(--doco-green); animation-name: doco-spark15-op, doco-spark15-mv, doco-spark15-sc; } .doco-spark--16 { left: 292.27px; top: 267.27px; width: 15.455px; height: 15.455px; background: var(--doco-green-dark); animation-name: doco-spark16-op, doco-spark16-mv, doco-spark16-sc; } .doco-spark--17 { left: 294.6px; top: 269.6px; width: 10.805px; height: 10.805px; background: var(--doco-green); animation-name: doco-spark17-op, doco-spark17-mv, doco-spark17-sc; } .doco-spark--18 { left: 292.67px; top: 267.67px; width: 14.663px; height: 14.663px; background: var(--doco-green-dark); animation-name: doco-spark18-op, doco-spark18-mv, doco-spark18-sc; } .doco-spark--19 { left: 291.56px; top: 266.56px; width: 16.876px; height: 16.876px; background: var(--doco-green); animation-name: doco-spark19-op, doco-spark19-mv, doco-spark19-sc; } .doco-spark--20 { left: 293.67px; top: 268.67px; width: 12.651px; height: 12.651px; background: var(--doco-green-dark); animation-name: doco-spark20-op, doco-spark20-mv, doco-spark20-sc; } /* Re-centre the confirm composition. In the export the 92px check box sits at 254,229 in the 628x504 scene, where centred would be 268,206, and the confetti is authored around the check's old centre. Offsetting both by the same delta moves the group to the middle of the tile and keeps the burst anchored to the mark, without editing any of the coordinates taken from Figma. */ .doco-check, .doco-spark { margin: -23px 0 0 14px; } .doco-check { position: absolute; left: 254px; top: 229px; width: 92px; height: 92px; opacity: 0; animation-duration: var(--doco-loop); animation-timing-function: linear; animation-iteration-count: infinite; animation-name: doco-check-op, doco-check-sc; } .doco-check__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--doco-green); } /* the two strokes are drawn, not faded in, so the SVG has to be inline: the keyframes animate stroke-dasharray on the real elements. Both already carry pathLength="1" from the Figma export. */ .doco-check__mark { position: absolute; inset: 0; width: 92px; height: 92px; overflow: visible; } .doco-check__mark line { stroke: #fff; stroke-width: 5.45185; stroke-linecap: round; stroke-dashoffset: 0; animation-duration: var(--doco-loop); animation-timing-function: linear; animation-iteration-count: infinite; } .doco-check__mark .doco-stroke--1 { animation-name: doco-stroke1-op, doco-stroke1-draw; } .doco-check__mark .doco-stroke--2 { animation-name: doco-stroke2-op, doco-stroke2-draw; } @media (prefers-reduced-motion: reduce) { .doco-dot, .doco-spark { animation: none; } .doco-spark { display: none; /* the burst has no meaningful resting state */ } .doco-dot { opacity: 1; } .doco-check { opacity: 1; animation: none; } .doco-check__mark line { animation: none; stroke-dasharray: 1 1; } } /* -- bike tile (Figma 26:11036 via 107:43925) ---------------------- Rebuilt as elements, not a screenshot. It has to be: the progress arc grows as the deposit lands and the ripple ring is a real 16px ellipse at rest, so an exported frame bakes both of them in - the ring showed up as a stray dot sitting on the arc for the whole loop. What is left of the export is the photograph alone. This is also the tile whose tracks needed retiming (see the header): its confetti, ripple and amount swap are authored on the longer 6.752982s track. The ripple is the giveaway - its size runs on the loop and its position on the long track, so left alone the ring drifts off the end of the arc it is supposed to expand from. The two clipping boxes below are Figma's own ("This one" and the panel); they are what stops the confetti spraying across the tile, so they have to be reproduced rather than flattened away. ------------------------------------------------------------- */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/nunito-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .case-grid__tile--bike { position: relative; aspect-ratio: var(--doco-tile-ar); overflow: hidden; border-radius: var(--radius-sm); background: var(--doco-surface); container-type: inline-size; } .doco-bike__screen { position: absolute; left: 100px; top: 0; width: 375px; height: 505px; overflow: hidden; } .doco-bike__panel { position: absolute; left: 0; top: 74px; width: 375px; height: 439px; overflow: hidden; animation-duration: var(--doco-loop-bike); animation-timing-function: linear; animation-iteration-count: infinite; } /* the 328x327 "Dream states" box, centred in the 375 panel - every offset below is measured from its top-left */ .doco-bike__states { position: absolute; left: 23.5px; top: 0; width: 328px; height: 327px; } /* the goal photo, circle-cropped, with the image itself oversized and pulled left exactly as the Figma fill is framed */ .doco-bike__photo { position: absolute; left: 18.99px; top: 17px; width: 294px; height: 294px; overflow: hidden; border-radius: 50%; } .doco-bike__photo img { position: absolute; left: -28.25px; top: 0; width: 454.5px; height: 303px; max-width: none; border-radius: 0; } /* fades the photo into the panel behind the amount */ .doco-bike__fade { position: absolute; left: 20.01px; top: 17.99px; width: 294px; height: 294px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0) 53.99%, var(--doco-surface) 84.524%); } /* the grey track is static; the green arc on top of it is not. Both selectors are scoped through .doco-bike__states so they outrank the grid's generic `.case-grid__tile img { width: 100% }`. */ .doco-bike__states .doco-bike__track, .doco-bike__states .doco-bike__progress { position: absolute; left: 0.5px; top: 0; width: 327px; height: 327px; border-radius: 0; } .doco-bike__states .doco-bike__progress { overflow: visible; } /* one arc drawn to its fullest extent, revealed by stroke-dasharray: Figma animates the ellipse's ending angle (106.51deg -> 136.51deg of a 61.5deg start), which is 0.6 -> 1 of the path */ .doco-bike__states .doco-bike__progress path { fill: none; stroke: var(--doco-green); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 0.6 1; animation: doco-bike-progress var(--doco-loop-bike) linear infinite; } /* the deposit swaps the amount: 25 slides out right as 50 slides in */ .doco-bike__amount, .doco-bike__of { position: absolute; right: 0.5px; margin: 0; font-family: "Nunito", var(--font-family); font-weight: 400; text-align: right; white-space: nowrap; color: var(--doco-ink); font-feature-settings: "zero" 1, "lnum" 1, "tnum" 1; } .doco-bike__amount { top: 232.13px; font-size: 32px; line-height: 36px; letter-spacing: -0.2px; animation-duration: var(--doco-loop-bike); animation-timing-function: linear; animation-iteration-count: infinite; } .doco-bike__of { top: 268.13px; font-size: 16px; line-height: 20px; } /* a ring that pulses out from the head of the arc on every deposit. Figma keeps the 4px stroke as the ellipse grows, so this is a border rather than a scaled-up SVG - which would thicken to 66px at full size and read as a disc instead of a ripple. */ .doco-ripple { position: absolute; left: 138.5px; top: 383.5px; box-sizing: border-box; width: 16px; height: 16px; opacity: 0; border: 4px solid var(--doco-green); border-radius: 50%; animation-duration: var(--doco-loop-bike); animation-timing-function: linear; animation-iteration-count: infinite; } .doco-burst { position: absolute; border-radius: 50%; opacity: 0; animation-duration: var(--doco-loop-bike); animation-timing-function: linear; animation-iteration-count: infinite; } .doco-bike__panel { animation-name: doco-bike-panel-h; } .doco-bike__amount--from { animation-name: doco-amount-from-op, doco-amount-from-mv; } .doco-bike__amount--to { animation-name: doco-amount-to-op, doco-amount-to-mv; } .doco-ripple { animation-name: doco-ripple-size, doco-ripple-op, doco-ripple-mv; } .doco-burst--1 { left: 116.64px; top: 311.14px; width: 13.725px; height: 13.725px; background: var(--doco-green); animation-name: doco-burst1-op, doco-burst1-mv, doco-burst1-sc; } .doco-burst--2 { left: 116.94px; top: 311.44px; width: 13.124px; height: 13.124px; background: var(--doco-green-dark); animation-name: doco-burst2-op, doco-burst2-mv, doco-burst2-sc; } .doco-burst--3 { left: 117.26px; top: 311.76px; width: 12.472px; height: 12.472px; background: var(--doco-green); animation-name: doco-burst3-op, doco-burst3-mv, doco-burst3-sc; } .doco-burst--4 { left: 120.05px; top: 314.55px; width: 6.891px; height: 6.891px; background: var(--doco-green-dark); animation-name: doco-burst4-op, doco-burst4-mv, doco-burst4-sc; } .doco-burst--5 { left: 117.71px; top: 312.21px; width: 11.579px; height: 11.579px; background: var(--doco-green); animation-name: doco-burst5-op, doco-burst5-mv, doco-burst5-sc; } .doco-burst--6 { left: 119.07px; top: 313.57px; width: 8.866px; height: 8.866px; background: var(--doco-green-dark); animation-name: doco-burst6-op, doco-burst6-mv, doco-burst6-sc; } .doco-burst--7 { left: 117.86px; top: 312.36px; width: 11.279px; height: 11.279px; background: var(--doco-green); animation-name: doco-burst7-op, doco-burst7-mv, doco-burst7-sc; } .doco-burst--8 { left: 117.83px; top: 312.34px; width: 11.329px; height: 11.329px; background: var(--doco-green-dark); animation-name: doco-burst8-op, doco-burst8-mv, doco-burst8-sc; } .doco-burst--9 { left: 120.02px; top: 314.52px; width: 6.958px; height: 6.958px; background: var(--doco-green); animation-name: doco-burst9-op, doco-burst9-mv, doco-burst9-sc; } .doco-burst--10 { left: 116.02px; top: 310.52px; width: 14.957px; height: 14.957px; background: var(--doco-green-dark); animation-name: doco-burst10-op, doco-burst10-mv, doco-burst10-sc; } .doco-burst--11 { left: 119.28px; top: 313.78px; width: 8.44px; height: 8.44px; background: var(--doco-green); animation-name: doco-burst11-op, doco-burst11-mv, doco-burst11-sc; } .doco-burst--12 { left: 114.82px; top: 309.32px; width: 17.358px; height: 17.358px; background: var(--doco-green-dark); animation-name: doco-burst12-op, doco-burst12-mv, doco-burst12-sc; } .doco-burst--13 { left: 118.74px; top: 313.24px; width: 9.518px; height: 9.518px; background: var(--doco-green); animation-name: doco-burst13-op, doco-burst13-mv, doco-burst13-sc; } .doco-burst--14 { left: 119.07px; top: 313.57px; width: 8.869px; height: 8.869px; background: var(--doco-green-dark); animation-name: doco-burst14-op, doco-burst14-mv, doco-burst14-sc; } .doco-burst--15 { left: 116.67px; top: 311.17px; width: 13.658px; height: 13.658px; background: var(--doco-green); animation-name: doco-burst15-op, doco-burst15-mv, doco-burst15-sc; } .doco-burst--16 { left: 115.77px; top: 310.27px; width: 15.455px; height: 15.455px; background: var(--doco-green-dark); animation-name: doco-burst16-op, doco-burst16-mv, doco-burst16-sc; } .doco-burst--17 { left: 118.1px; top: 312.6px; width: 10.805px; height: 10.805px; background: var(--doco-green); animation-name: doco-burst17-op, doco-burst17-mv, doco-burst17-sc; } .doco-burst--18 { left: 116.17px; top: 310.67px; width: 14.663px; height: 14.663px; background: var(--doco-green-dark); animation-name: doco-burst18-op, doco-burst18-mv, doco-burst18-sc; } .doco-burst--19 { left: 115.06px; top: 309.56px; width: 16.876px; height: 16.876px; background: var(--doco-green); animation-name: doco-burst19-op, doco-burst19-mv, doco-burst19-sc; } .doco-burst--20 { left: 117.17px; top: 311.67px; width: 12.651px; height: 12.651px; background: var(--doco-green-dark); animation-name: doco-burst20-op, doco-burst20-mv, doco-burst20-sc; } @media (prefers-reduced-motion: reduce) { .doco-bike__panel, .doco-bike__amount, .doco-ripple, .doco-burst, .doco-bike__states .doco-bike__progress path { animation: none; } /* rest state: the arc at its starting fill, no burst, no amount */ .doco-bike__amount, .doco-ripple, .doco-burst { display: none; } } /* -- Design-system theme fan (Figma 107:44395, reworked) ----------- The same design-system board rendered three times - cream #f7f6f2, white and dark #20201d - stacked, with the top two masked into diagonal bands that sweep steadily clockwise, after the daisyUI theme preview. All three themes are on screen at once, which showcases "one system, any brand" far better than the Figma original. That original swept one flat mask off to the right, but it stops at translate: 1237px against a 1272px board, so it never cleared - roughly the right tenth of the previous theme stayed behind, slicing through the form fields. Geometry. The bands radiate from a pivot just below-left of the board (-120, 780 in board px, which is -9.434% 155.378% of the box), so like daisyUI they converge off-canvas rather than running parallel or meeting in the middle. Each band is a repeating conic gradient centred on that pivot, used as a mask. The period is 72deg, near enough to the 70deg the board subtends from the pivot that one full set of three bands is always on screen - as one sweeps off the bottom-right the next arrives from the top-left. 72 rather than 70 because a repeating conic still wraps at 360deg: a period that does not divide 360 leaves a runt repetition at the seam, which would sweep across the board once per revolution as one odd narrow band. 360/72 = 5 exactly, so there is no seam at all. Offsets are conic angles, which measure clockwise from "up" (screen angle + 90); each stop pair is split by 0.05deg. That split has to be small: it is an *angle*, so its width on screen grows with distance from the pivot, and at 0.2deg the far edge of the board was an 11px wash of half-lit cream showing through the dark band - read as white bleeding along the edge. At 0.05deg it is under 3px at the far edge and sub-pixel near the pivot, where the rasteriser's own antialiasing takes over. Dark is opaque for the first 24deg and white for the first 48deg, so stacked they read as three equal 24deg bands - dark / white / base board. Equal in angle, that is. They still look different sizes across the sweep, and that is the geometry rather than a bug: the bands radiate from a pivot off the bottom-left corner, so a fixed angle covers far more of the board out at the far edge than it does close in. Parallel bands would be even, but converging ones are what makes it read as a fan. Motion. The gradient angle itself is animated through a registered custom property rather than by rotating the layers. An earlier version turned a pivot-centred wrapper 360deg with the board counter-turning inside it; that wrapper had to be 3300 board px square to still cover the far corner, which at the page's 2x zoom is a 6600px layer, and Chrome intermittently dropped the mask on it - the board flashed a single flat theme. Animating the angle keeps every layer at board size and needs no counter-rotation at all. It repaints the mask each frame instead of compositing, but on a 1272x502 box that is far cheaper than the layer it replaces. ------------------------------------------------------------- */ @property --doco-fan-angle { syntax: ""; initial-value: 0deg; inherits: false; } /* No background here on purpose. A light one (it used to be --doco-surface) sits under all three boards, and the rounded corner's antialiased clip blends it with whatever is on top - which left a pale fringe wherever the dark theme reached an edge: the corner ran 1f1e1d / 403f3e / 676666 / 20201d, mid-greys that two near-blacks cannot produce between them. With nothing behind, the clip blends the board against the page instead, which is what a rounded card should do. */ .doco-fan { position: relative; aspect-ratio: 1272 / 502; /* The boards overhang this box by a pixel on every side (see below) and it clips them back, so the visible edge always lands on solid board and never on a board's own edge. That is what makes the edge clean. The boards are stacked and masked, so wherever an edge coincided with the boundary the dark band's antialiasing blended it with the light boards underneath instead of covering them - a pale hairline along the dark theme. The page's zoom also leaves this box on fractional device rows, so top and bottom are partially covered and were the worst of it: the top edge measured 1f1e1d / 535350 / 20201d. overflow rather than clip-path, incidentally - clip-path put the top hairline back even when inset inside the boards. */ isolation: isolate; overflow: hidden; /* border-radius: 1rem; */ } /* A pixel oversized on every side and square-cornered; the container clips them back to the rounded card. max-width has to be released explicitly or the global img reset clamps the width to 100% and silently swallows the horizontal half of the overhang. */ .doco-fan img { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); max-width: none; height: calc(100% + 2px); border-radius: 0; } .doco-fan__board--dark { -webkit-mask-image: repeating-conic-gradient( from calc(8.7deg + var(--doco-fan-angle)) at -9.434% 155.378%, #000 0deg 23.975deg, transparent 24.025deg 71.975deg, #000 72deg ); mask-image: repeating-conic-gradient( from calc(8.7deg + var(--doco-fan-angle)) at -9.434% 155.378%, #000 0deg 23.975deg, transparent 24.025deg 71.975deg, #000 72deg ); } .doco-fan__board--white { -webkit-mask-image: repeating-conic-gradient( from calc(8.7deg + var(--doco-fan-angle)) at -9.434% 155.378%, #000 0deg 47.975deg, transparent 48.025deg 71.975deg, #000 72deg ); mask-image: repeating-conic-gradient( from calc(8.7deg + var(--doco-fan-angle)) at -9.434% 155.378%, #000 0deg 47.975deg, transparent 48.025deg 71.975deg, #000 72deg ); } /* At rest the bands hold their authored angles - three diagonal slices, which is the daisyUI still. Browsers without @property land here too, since the angle then never leaves its initial value. */ @media (prefers-reduced-motion: no-preference) { .doco-fan__board--white, .doco-fan__board--dark { animation: doco-fan-sweep var(--doco-fan) linear infinite; } } @keyframes doco-fan-sweep { to { --doco-fan-angle: 1turn; } } /* -- AI treatment (Figma Motion 107:44875) -------------------------- The editor and its colour picker are one flat 3x PNG. Only three things sit on top of it, and all three run on the shared --doco-loop timeline: a white veil breathing between 50% and 25%, the frame's border colour, and a sparkle that spins twice a loop. ------------------------------------------------------------- */ .doco-ai { position: relative; border-radius: var(--radius-sm); overflow: hidden; } /* .doco-ai__shot is left to .case-figure img - width: 100% is exactly right for it, and it is what gives the box its height, which the three absolute layers below are then positioned against. */ .doco-ai__veil, .doco-ai__edge { position: absolute; inset: 0; pointer-events: none; } .doco-ai__veil { background-color: rgba(255, 255, 255, 0.5); } /* Figma flattens the stroke to a vector and keyframes its `fill`; a real 4px border is the same thing (see doco-ai-edge below). */ .doco-ai__edge { box-sizing: border-box; border: 4px solid #4e27dd; border-radius: inherit; } /* The 29px star is centred in a 36px box at 500,19 of the 558x419 frame, so the offsets are percentages and it holds its place as the figure scales. Width only, and the pair of classes to outweigh `.case-figure img`, whose width: 100% would otherwise blow the star up to the full column. */ .doco-ai .doco-ai__spark { position: absolute; left: 90.28%; /* 503.76 / 558 */ top: 5.43%; /* 22.76 / 419 */ width: 5.104%; /* 28.48 / 558 */ height: auto; border-radius: 0; } /* At rest every layer already holds its 0% keyframe - veil at 50%, border indigo, star upright - so there is nothing to restate. */ @media (prefers-reduced-motion: no-preference) { .doco-ai__veil, .doco-ai__edge, .doco-ai .doco-ai__spark { animation-duration: var(--doco-loop); animation-timing-function: linear; animation-iteration-count: infinite; } .doco-ai__veil { animation-name: doco-ai-veil; } .doco-ai__edge { animation-name: doco-ai-edge; } .doco-ai .doco-ai__spark { animation-name: doco-ai-spark; } } /* ============================================================= 10. Appendix: generated @keyframes GENERATED from Figma Motion (file 3bj2vwJkv0ykpj5xoku8fo, nodes 107:43922 for the tiles and 107:44875 for the AI editor) - not written by hand and not read closely. The theme fan that replaced 107:44395 is hand-written and lives with its component, not here. Percentages, per-stop easings and values are verbatim from get_motion_context; the only rewrites are mechanical: - Figma's `--rotate-transform` custom property becomes the native `rotate` property, which drops the @property registration; - tracks Figma emitted at 6.752982s (they outlive the loop, so it normalised them against their own length) are rescaled onto the 6.000643s loop by multiplying every stop by 6.752982 / 6.000643. Bike and coins were later retimed onto their own longer loops (see :root) by remapping every stop; confirm and slides still run on the 6.000643s original. Re-export rather than hand-edit - MOTION.md records every rewrite and how to verify them. ============================================================= */ @keyframes doco-coin1-op { 0% { opacity: 0; } 0.0116% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 0.5117% { opacity: 1; } 35.8415% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 38.6748% { opacity: 0; } 50% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 50.5% { opacity: 1; } 85.8298% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 88.6632% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-coin1-rot { 0% { rotate: -0.375rad; } 0.0116% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.375rad; } 3.3442% { rotate: 0rad; } 35.8415% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 38.6748% { rotate: -0.375rad; } 50% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.375rad; } 53.3326% { rotate: 0rad; } 85.8298% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 88.6632% { rotate: -0.375rad; } 100% { rotate: -0.375rad; } } @keyframes doco-coin1-mv { 0% { translate: 0px -6.347px; } 0.0116% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -6.347px; } 3.3442% { translate: 0px 0px; } 35.8415% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 38.6748% { translate: 0px -6.347px; } 50% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -6.347px; } 53.3326% { translate: 0px 0px; } 85.8298% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 88.6632% { translate: 0px -6.347px; } 100% { translate: 0px -6.347px; } } @keyframes doco-coin2-op { 0% { opacity: 0; } 0.5667% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 1.0875% { opacity: 1; } 33.8972% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 36.8482% { opacity: 0; } 50.555% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 51.0758% { opacity: 1; } 83.8856% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 86.8365% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-coin2-rot { 0% { rotate: 0.369rad; } 0.5667% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.369rad; } 4.0392% { rotate: 0rad; } 33.8972% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 36.8482% { rotate: 0.369rad; } 50.555% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.369rad; } 54.0276% { rotate: 0rad; } 83.8856% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 86.8365% { rotate: 0.369rad; } 100% { rotate: 0.369rad; } } @keyframes doco-coin2-mv { 0% { translate: 0px -16.355px; } 0.5667% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -16.355px; } 4.0392% { translate: 0px 0px; } 33.8972% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 36.8482% { translate: 0px -16.355px; } 50.555% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -16.355px; } 54.0276% { translate: 0px 0px; } 83.8856% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 86.8365% { translate: 0px -16.355px; } 100% { translate: 0px -16.355px; } } @keyframes doco-coin3-op { 0% { opacity: 0; } 1.1226% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 1.5809% { opacity: 1; } 35.0082% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 37.6056% { opacity: 0; } 51.1108% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 51.5692% { opacity: 1; } 84.9964% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 87.594% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-coin3-rot { 0% { rotate: 0.229rad; } 1.1226% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.229rad; } 4.1776% { rotate: 0rad; } 35.0082% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 37.6056% { rotate: 0.229rad; } 51.1108% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.229rad; } 54.1659% { rotate: 0rad; } 84.9964% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 87.594% { rotate: 0.229rad; } 100% { rotate: 0.229rad; } } @keyframes doco-coin3-mv { 0% { translate: 0px -4.28px; } 1.1226% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -4.28px; } 4.1776% { translate: 0px 0px; } 35.0082% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 37.6056% { translate: 0px -4.28px; } 51.1108% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -4.28px; } 54.1659% { translate: 0px 0px; } 84.9964% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 87.594% { translate: 0px -4.28px; } 100% { translate: 0px -4.28px; } } @keyframes doco-coin4-op { 0% { opacity: 0; } 2.0951% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 2.6367% { opacity: 1; } 34.314% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 37.3832% { opacity: 0; } 52.0833% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 52.6243% { opacity: 1; } 84.3023% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 87.3715% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-coin4-rot { 0% { rotate: 0.268rad; } 2.0951% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.268rad; } 5.7051% { rotate: 0rad; } 34.314% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 37.3832% { rotate: 0.268rad; } 52.0833% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.268rad; } 55.6935% { rotate: 0rad; } 84.3023% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 87.3715% { rotate: 0.268rad; } 100% { rotate: 0.268rad; } } @keyframes doco-coin4-mv { 0% { translate: 0px -8.227px; } 2.0951% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -8.227px; } 5.7051% { translate: 0px 0px; } 34.314% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 37.3832% { translate: 0px -8.227px; } 52.0833% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -8.227px; } 55.6935% { translate: 0px 0px; } 84.3023% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 87.3715% { translate: 0px -8.227px; } 100% { translate: 0px -8.227px; } } @keyframes doco-coin5-op { 0% { opacity: 0; } 3.0667% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 3.6501% { opacity: 1; } 33.6198% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 36.9248% { opacity: 0; } 53.0551% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 53.6384% { opacity: 1; } 83.6081% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 86.9132% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-coin5-rot { 0% { rotate: -0.537rad; } 3.0667% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.537rad; } 6.9551% { rotate: 0rad; } 33.6198% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 36.9248% { rotate: -0.537rad; } 53.0551% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.537rad; } 56.9434% { rotate: 0rad; } 83.6081% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 86.9132% { rotate: -0.537rad; } 100% { rotate: -0.537rad; } } @keyframes doco-coin5-mv { 0% { translate: 0px -20.593px; } 3.0667% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -20.593px; } 6.9551% { translate: 0px 0px; } 33.6198% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 36.9248% { translate: 0px -20.593px; } 53.0551% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -20.593px; } 56.9434% { translate: 0px 0px; } 83.6081% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 86.9132% { translate: 0px -20.593px; } 100% { translate: 0px -20.593px; } } @keyframes doco-coin6-op { 0% { opacity: 0; } 4.1776% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 4.8025% { opacity: 1; } 32.7864% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 36.3282% { opacity: 0; } 54.1659% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 54.7909% { opacity: 1; } 82.7748% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 86.3156% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-coin6-rot { 0% { rotate: 0.524rad; } 4.1776% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.524rad; } 8.3443% { rotate: 0rad; } 32.7864% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 36.3282% { rotate: 0.524rad; } 54.1659% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.524rad; } 58.3327% { rotate: 0rad; } 82.7748% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 86.3156% { rotate: 0.524rad; } 100% { rotate: 0.524rad; } } @keyframes doco-coin6-mv { 0% { translate: 0px -44.977px; } 4.1776% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -44.977px; } 8.3443% { translate: 0px 0px; } 32.7864% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 36.3282% { translate: 0px -44.977px; } 54.1659% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -44.977px; } 58.3327% { translate: 0px 0px; } 82.7748% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 86.3156% { translate: 0px -44.977px; } 100% { translate: 0px -44.977px; } } @keyframes doco-coin7-op { 0% { opacity: 0; } 0.845% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 1.3033% { opacity: 1; } 33.0639% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 35.6615% { opacity: 0; } 50.8333% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 51.2917% { opacity: 1; } 83.0522% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 85.6498% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-coin7-rot { 0% { rotate: 0.295rad; } 0.845% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.295rad; } 3.9001% { rotate: 0rad; } 33.0639% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 35.6615% { rotate: 0.295rad; } 50.8333% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.295rad; } 53.8884% { rotate: 0rad; } 83.0522% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 85.6498% { rotate: 0.295rad; } 100% { rotate: 0.295rad; } } @keyframes doco-coin7-mv { 0% { translate: 0px -13.931px; } 0.845% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -13.931px; } 3.9001% { translate: 0px 0px; } 33.0639% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 35.6615% { translate: 0px -13.931px; } 50.8333% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -13.931px; } 53.8884% { translate: 0px 0px; } 83.0522% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 85.6498% { translate: 0px -13.931px; } 100% { translate: 0px -13.931px; } } @keyframes doco-coin8-op { 0% { opacity: 0; } 2.5117% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 3.0942% { opacity: 1; } 32.3698% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 35.6748% { opacity: 0; } 52.4992% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 53.0826% { opacity: 1; } 82.358% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 85.6631% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-coin8-rot { 0% { rotate: -0.281rad; } 2.5117% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.281rad; } 6.4001% { rotate: 0rad; } 32.3698% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 35.6748% { rotate: -0.281rad; } 52.4992% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: -0.281rad; } 56.3885% { rotate: 0rad; } 82.358% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0rad; } 85.6631% { rotate: -0.281rad; } 100% { rotate: -0.281rad; } } @keyframes doco-coin8-mv { 0% { translate: 0px -31.672px; } 2.5117% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -31.672px; } 6.4001% { translate: 0px 0px; } 32.3698% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 35.6748% { translate: 0px -31.672px; } 52.4992% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -31.672px; } 56.3885% { translate: 0px 0px; } 82.358% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 85.6631% { translate: 0px -31.672px; } 100% { translate: 0px -31.672px; } } @keyframes doco-coin9-op { 0% { opacity: 0; } 5.5668% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 6.2751% { opacity: 1; } 31.9531% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 35.9664% { opacity: 0; } 55.5551% { animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); opacity: 0; } 56.2635% { opacity: 1; } 81.9414% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 85.9548% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-coin9-rot { 0% { rotate: 0.612rad; } 5.5668% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.612rad; } 10.2885% { rotate: 0.025rad; } 31.9531% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.025rad; } 35.9664% { rotate: 0.612rad; } 55.5551% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.612rad; } 60.2768% { rotate: 0.025rad; } 81.9414% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); rotate: 0.025rad; } 85.9548% { rotate: 0.612rad; } 100% { rotate: 0.612rad; } } @keyframes doco-coin9-mv { 0% { translate: 0px -73.366px; } 5.5668% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -73.366px; } 10.2885% { translate: 0px 0px; } 31.9531% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 35.9664% { translate: 0px -73.366px; } 55.5551% { animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); translate: 0px -73.366px; } 60.2768% { translate: 0px 0px; } 81.9414% { animation-timing-function: cubic-bezier(0.4, 0, 0.8, 1); translate: 0px 0px; } 85.9548% { translate: 0px -73.366px; } 100% { translate: 0px -73.366px; } } @keyframes doco-dot1-op { 0% { opacity: 0; } 9.999% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.832% { animation-timing-function: ease-out; opacity: 1; } 19.665% { animation-timing-function: ease-out; opacity: 0.7; } 21.664% { opacity: 0; } 59.994% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 60.827% { animation-timing-function: ease-out; opacity: 1; } 69.659% { animation-timing-function: ease-out; opacity: 0.7; } 71.659% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-dot1-mv { 0% { translate: 0px 0px; } 9.999% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 16.998% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 86.933px 23.294px; } 49.995% { translate: 0px 0px; } 59.994% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 66.993% { translate: 86.933px 23.294px; } 100% { translate: 86.933px 23.294px; } } @keyframes doco-dot1-sc { 0% { scale: 0 0; } 9.999% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.665% { animation-timing-function: ease-out; scale: 1 1; } 21.664% { scale: 0 0; } 59.994% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 61.66% { animation-timing-function: ease-out; scale: 1 1; } 71.659% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-dot3-op { 0% { opacity: 0; } 10.266% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.099% { animation-timing-function: ease-out; opacity: 1; } 19.931% { animation-timing-function: ease-out; opacity: 0.7; } 21.931% { opacity: 0; } 60.26% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 61.093% { animation-timing-function: ease-out; opacity: 1; } 69.926% { animation-timing-function: ease-out; opacity: 0.7; } 71.926% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-dot3-mv { 0% { translate: 0px 0px; } 10.266% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 17.265% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 47.92px -131.544px; } 49.995% { translate: 0px 0px; } 60.26% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 67.259% { translate: 47.92px -131.544px; } 100% { translate: 47.92px -131.544px; } } @keyframes doco-dot3-sc { 0% { scale: 0 0; } 10.266% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.932% { animation-timing-function: ease-out; scale: 1 1; } 21.931% { scale: 0 0; } 60.26% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 61.927% { animation-timing-function: ease-out; scale: 1 1; } 71.926% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-dot4-op { 0% { opacity: 0; } 10.399% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.232% { animation-timing-function: ease-out; opacity: 1; } 20.065% { animation-timing-function: ease-out; opacity: 0.7; } 22.064% { opacity: 0; } 60.394% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 61.227% { animation-timing-function: ease-out; opacity: 1; } 70.059% { animation-timing-function: ease-out; opacity: 0.7; } 72.059% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-dot4-mv { 0% { translate: 0px 0px; } 10.399% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 17.398% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 63.079px 152.467px; } 49.995% { translate: 0px 0px; } 60.394% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 67.393% { translate: 63.079px 152.467px; } 100% { translate: 63.079px 152.467px; } } @keyframes doco-dot4-sc { 0% { scale: 0 0; } 10.399% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.065% { animation-timing-function: ease-out; scale: 1 1; } 22.064% { scale: 0 0; } 60.394% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 62.06% { animation-timing-function: ease-out; scale: 1 1; } 72.059% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark1-op { 0% { opacity: 0; } 10.532% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.365% { animation-timing-function: ease-out; opacity: 1; } 20.198% { animation-timing-function: ease-out; opacity: 0.7; } 22.198% { opacity: 0; } 60.527% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 61.36% { animation-timing-function: ease-out; opacity: 1; } 70.192% { animation-timing-function: ease-out; opacity: 0.7; } 72.192% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark1-mv { 0% { translate: 0px 0px; } 10.532% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 17.531% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: -172.154px -80.394px; } 49.995% { translate: 0px 0px; } 60.527% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 67.526% { translate: -172.154px -80.394px; } 100% { translate: -172.154px -80.394px; } } @keyframes doco-spark1-sc { 0% { scale: 0 0; } 10.532% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.199% { animation-timing-function: ease-out; scale: 1 1; } 22.198% { scale: 0 0; } 60.527% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 62.193% { animation-timing-function: ease-out; scale: 1 1; } 72.192% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark2-op { 0% { opacity: 0; } 10.666% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.499% { animation-timing-function: ease-out; opacity: 1; } 20.331% { animation-timing-function: ease-out; opacity: 0.7; } 22.331% { opacity: 0; } 60.66% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 61.493% { animation-timing-function: ease-out; opacity: 1; } 70.326% { animation-timing-function: ease-out; opacity: 0.7; } 72.326% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark2-mv { 0% { translate: 0px 0px; } 10.666% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 17.665% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 85.853px -27.004px; } 49.995% { translate: 0px 0px; } 60.66% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 67.659% { translate: 85.853px -27.004px; } 100% { translate: 85.853px -27.004px; } } @keyframes doco-spark2-sc { 0% { scale: 0 0; } 10.666% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.332% { animation-timing-function: ease-out; scale: 1 1; } 22.331% { scale: 0 0; } 60.66% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 62.327% { animation-timing-function: ease-out; scale: 1 1; } 72.326% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark3-op { 0% { opacity: 0; } 10.799% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.632% { animation-timing-function: ease-out; opacity: 1; } 20.464% { animation-timing-function: ease-out; opacity: 0.7; } 22.464% { opacity: 0; } 60.793% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 61.627% { animation-timing-function: ease-out; opacity: 1; } 70.459% { animation-timing-function: ease-out; opacity: 0.7; } 72.459% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark3-mv { 0% { translate: 0px 0px; } 10.799% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 17.798% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: -57.583px 99.545px; } 49.995% { translate: 0px 0px; } 60.793% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 67.793% { translate: -57.583px 99.545px; } 100% { translate: -57.583px 99.545px; } } @keyframes doco-spark3-sc { 0% { scale: 0 0; } 10.799% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.465% { animation-timing-function: ease-out; scale: 1 1; } 22.464% { scale: 0 0; } 60.793% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 62.46% { animation-timing-function: ease-out; scale: 1 1; } 72.459% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark4-op { 0% { opacity: 0; } 10.932% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.765% { animation-timing-function: ease-out; opacity: 1; } 20.598% { animation-timing-function: ease-out; opacity: 0.7; } 22.598% { opacity: 0; } 60.927% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 61.76% { animation-timing-function: ease-out; opacity: 1; } 70.592% { animation-timing-function: ease-out; opacity: 0.7; } 72.592% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark4-mv { 0% { translate: 0px 0px; } 10.932% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 17.931% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: -30.168px -136.711px; } 49.995% { translate: 0px 0px; } 60.927% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 67.926% { translate: -30.168px -136.711px; } 100% { translate: -30.168px -136.711px; } } @keyframes doco-spark4-sc { 0% { scale: 0 0; } 10.932% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.599% { animation-timing-function: ease-out; scale: 1 1; } 22.598% { scale: 0 0; } 60.927% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 62.593% { animation-timing-function: ease-out; scale: 1 1; } 72.592% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark5-op { 0% { opacity: 0; } 11.065% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.899% { animation-timing-function: ease-out; opacity: 1; } 20.731% { animation-timing-function: ease-out; opacity: 0.7; } 22.731% { opacity: 0; } 61.06% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 61.893% { animation-timing-function: ease-out; opacity: 1; } 70.726% { animation-timing-function: ease-out; opacity: 0.7; } 72.726% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark5-mv { 0% { translate: 0px 0px; } 11.065% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 18.065% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 135.054px 94.791px; } 49.995% { translate: 0px 0px; } 61.06% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 68.059% { translate: 135.054px 94.791px; } 100% { translate: 135.054px 94.791px; } } @keyframes doco-spark5-sc { 0% { scale: 0 0; } 11.065% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.732% { animation-timing-function: ease-out; scale: 1 1; } 22.731% { scale: 0 0; } 61.06% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 62.727% { animation-timing-function: ease-out; scale: 1 1; } 72.726% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark6-op { 0% { opacity: 0; } 11.199% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 12.032% { animation-timing-function: ease-out; opacity: 1; } 20.864% { animation-timing-function: ease-out; opacity: 0.7; } 22.864% { opacity: 0; } 61.193% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 62.027% { animation-timing-function: ease-out; opacity: 1; } 70.859% { animation-timing-function: ease-out; opacity: 0.7; } 72.859% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark6-mv { 0% { translate: 0px 0px; } 11.199% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 18.198% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: -188.406px 24.563px; } 49.995% { translate: 0px 0px; } 61.193% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 68.193% { translate: -188.406px 24.563px; } 100% { translate: -188.406px 24.563px; } } @keyframes doco-spark6-sc { 0% { scale: 0 0; } 11.199% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.865% { animation-timing-function: ease-out; scale: 1 1; } 22.864% { scale: 0 0; } 61.193% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 62.86% { animation-timing-function: ease-out; scale: 1 1; } 72.859% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark7-op { 0% { opacity: 0; } 11.332% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 12.165% { animation-timing-function: ease-out; opacity: 1; } 20.998% { animation-timing-function: ease-out; opacity: 0.7; } 22.998% { opacity: 0; } 61.327% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 62.16% { animation-timing-function: ease-out; opacity: 1; } 70.992% { animation-timing-function: ease-out; opacity: 0.7; } 72.992% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark7-mv { 0% { translate: 0px 0px; } 11.332% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 18.331% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 57.947px -68.863px; } 49.995% { translate: 0px 0px; } 61.327% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 68.326% { translate: 57.947px -68.863px; } 100% { translate: 57.947px -68.863px; } } @keyframes doco-spark7-sc { 0% { scale: 0 0; } 11.332% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.999% { animation-timing-function: ease-out; scale: 1 1; } 22.998% { scale: 0 0; } 61.327% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 62.993% { animation-timing-function: ease-out; scale: 1 1; } 72.992% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark8-op { 0% { opacity: 0; } 11.465% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 12.299% { animation-timing-function: ease-out; opacity: 1; } 21.131% { animation-timing-function: ease-out; opacity: 0.7; } 23.131% { opacity: 0; } 61.46% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 62.293% { animation-timing-function: ease-out; opacity: 1; } 71.126% { animation-timing-function: ease-out; opacity: 0.7; } 73.125% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark8-mv { 0% { translate: 0px 0px; } 11.465% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 18.465% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 4.84px 114.898px; } 49.995% { translate: 0px 0px; } 61.46% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 68.459% { translate: 4.84px 114.898px; } 100% { translate: 4.84px 114.898px; } } @keyframes doco-spark8-sc { 0% { scale: 0 0; } 11.465% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 13.132% { animation-timing-function: ease-out; scale: 1 1; } 23.131% { scale: 0 0; } 61.46% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 63.127% { animation-timing-function: ease-out; scale: 1 1; } 73.125% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark9-op { 0% { opacity: 0; } 11.599% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 12.432% { animation-timing-function: ease-out; opacity: 1; } 21.264% { animation-timing-function: ease-out; opacity: 0.7; } 23.264% { opacity: 0; } 61.593% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 62.427% { animation-timing-function: ease-out; opacity: 1; } 71.259% { animation-timing-function: ease-out; opacity: 0.7; } 73.259% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark9-mv { 0% { translate: 0px 0px; } 11.599% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 18.598% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: -98.829px -99.161px; } 49.995% { translate: 0px 0px; } 61.593% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 68.593% { translate: -98.829px -99.161px; } 100% { translate: -98.829px -99.161px; } } @keyframes doco-spark9-sc { 0% { scale: 0 0; } 11.599% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 13.265% { animation-timing-function: ease-out; scale: 1 1; } 23.264% { scale: 0 0; } 61.593% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 63.26% { animation-timing-function: ease-out; scale: 1 1; } 73.259% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark10-op { 0% { opacity: 0; } 11.732% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 12.565% { animation-timing-function: ease-out; opacity: 1; } 21.398% { animation-timing-function: ease-out; opacity: 0.7; } 23.397% { opacity: 0; } 61.727% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 62.56% { animation-timing-function: ease-out; opacity: 1; } 71.392% { animation-timing-function: ease-out; opacity: 0.7; } 73.392% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark10-mv { 0% { translate: 0px 0px; } 11.732% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 18.731% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 164.83px 7.496px; } 49.995% { translate: 0px 0px; } 61.727% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 68.726% { translate: 164.83px 7.496px; } 100% { translate: 164.83px 7.496px; } } @keyframes doco-spark10-sc { 0% { scale: 0 0; } 11.732% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 13.399% { animation-timing-function: ease-out; scale: 1 1; } 23.397% { scale: 0 0; } 61.727% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 63.393% { animation-timing-function: ease-out; scale: 1 1; } 73.392% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark11-op { 0% { opacity: 0; } 11.865% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 12.699% { animation-timing-function: ease-out; opacity: 1; } 21.531% { animation-timing-function: ease-out; opacity: 0.7; } 23.531% { opacity: 0; } 61.86% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 62.693% { animation-timing-function: ease-out; opacity: 1; } 71.526% { animation-timing-function: ease-out; opacity: 0.7; } 73.525% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark11-mv { 0% { translate: 0px 0px; } 11.865% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 18.865% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: -145.787px 121.845px; } 49.995% { translate: 0px 0px; } 61.86% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 68.859% { translate: -145.787px 121.845px; } 100% { translate: -145.787px 121.845px; } } @keyframes doco-spark11-sc { 0% { scale: 0 0; } 11.865% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 13.532% { animation-timing-function: ease-out; scale: 1 1; } 23.531% { scale: 0 0; } 61.86% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 63.527% { animation-timing-function: ease-out; scale: 1 1; } 73.525% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark12-op { 0% { opacity: 0; } 11.999% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 12.832% { animation-timing-function: ease-out; opacity: 1; } 21.664% { animation-timing-function: ease-out; opacity: 0.7; } 23.664% { opacity: 0; } 61.993% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 62.827% { animation-timing-function: ease-out; opacity: 1; } 71.659% { animation-timing-function: ease-out; opacity: 0.7; } 73.659% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark12-mv { 0% { translate: 0px 0px; } 11.999% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 18.998% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 11.934px -89.205px; } 49.995% { translate: 0px 0px; } 61.993% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 68.993% { translate: 11.934px -89.205px; } 100% { translate: 11.934px -89.205px; } } @keyframes doco-spark12-sc { 0% { scale: 0 0; } 11.999% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 13.665% { animation-timing-function: ease-out; scale: 1 1; } 23.664% { scale: 0 0; } 61.993% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 63.66% { animation-timing-function: ease-out; scale: 1 1; } 73.659% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark13-op { 0% { opacity: 0; } 12.132% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 12.965% { animation-timing-function: ease-out; opacity: 1; } 21.798% { animation-timing-function: ease-out; opacity: 0.7; } 23.797% { opacity: 0; } 62.127% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 62.96% { animation-timing-function: ease-out; opacity: 1; } 71.792% { animation-timing-function: ease-out; opacity: 0.7; } 73.792% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark13-mv { 0% { translate: 0px 0px; } 12.132% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 19.131% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 65.751px 94.35px; } 49.995% { translate: 0px 0px; } 62.127% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 69.126% { translate: 65.751px 94.35px; } 100% { translate: 65.751px 94.35px; } } @keyframes doco-spark13-sc { 0% { scale: 0 0; } 12.132% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 13.799% { animation-timing-function: ease-out; scale: 1 1; } 23.797% { scale: 0 0; } 62.127% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 63.793% { animation-timing-function: ease-out; scale: 1 1; } 73.792% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark14-op { 0% { opacity: 0; } 12.265% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 13.099% { animation-timing-function: ease-out; opacity: 1; } 21.931% { animation-timing-function: ease-out; opacity: 0.7; } 23.931% { opacity: 0; } 62.26% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 63.093% { animation-timing-function: ease-out; opacity: 1; } 71.926% { animation-timing-function: ease-out; opacity: 0.7; } 73.925% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark14-mv { 0% { translate: 0px 0px; } 12.265% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 19.265% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: -136.609px -30.626px; } 49.995% { translate: 0px 0px; } 62.26% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 69.259% { translate: -136.609px -30.626px; } 100% { translate: -136.609px -30.626px; } } @keyframes doco-spark14-sc { 0% { scale: 0 0; } 12.265% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 13.932% { animation-timing-function: ease-out; scale: 1 1; } 23.931% { scale: 0 0; } 62.26% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 63.926% { animation-timing-function: ease-out; scale: 1 1; } 73.925% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark15-op { 0% { opacity: 0; } 12.399% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 13.232% { animation-timing-function: ease-out; opacity: 1; } 22.064% { animation-timing-function: ease-out; opacity: 0.7; } 24.064% { opacity: 0; } 62.393% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 63.227% { animation-timing-function: ease-out; opacity: 1; } 72.059% { animation-timing-function: ease-out; opacity: 0.7; } 74.059% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark15-mv { 0% { translate: 0px 0px; } 12.399% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 19.398% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 143.101px -82.141px; } 49.995% { translate: 0px 0px; } 62.393% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 69.393% { translate: 143.101px -82.141px; } 100% { translate: 143.101px -82.141px; } } @keyframes doco-spark15-sc { 0% { scale: 0 0; } 12.399% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 14.065% { animation-timing-function: ease-out; scale: 1 1; } 24.064% { scale: 0 0; } 62.393% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 64.06% { animation-timing-function: ease-out; scale: 1 1; } 74.059% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark16-op { 0% { opacity: 0; } 12.532% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 13.365% { animation-timing-function: ease-out; opacity: 1; } 22.198% { animation-timing-function: ease-out; opacity: 0.7; } 24.197% { opacity: 0; } 62.527% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 63.36% { animation-timing-function: ease-out; opacity: 1; } 72.192% { animation-timing-function: ease-out; opacity: 0.7; } 74.192% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark16-mv { 0% { translate: 0px 0px; } 12.532% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 19.531% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: -57.615px 181.054px; } 49.995% { translate: 0px 0px; } 62.527% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 69.526% { translate: -57.615px 181.054px; } 100% { translate: -57.615px 181.054px; } } @keyframes doco-spark16-sc { 0% { scale: 0 0; } 12.532% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 14.198% { animation-timing-function: ease-out; scale: 1 1; } 24.197% { scale: 0 0; } 62.527% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 64.193% { animation-timing-function: ease-out; scale: 1 1; } 74.192% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark17-op { 0% { opacity: 0; } 12.665% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 13.499% { animation-timing-function: ease-out; opacity: 1; } 22.331% { animation-timing-function: ease-out; opacity: 0.7; } 24.331% { opacity: 0; } 62.66% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 63.493% { animation-timing-function: ease-out; opacity: 1; } 72.326% { animation-timing-function: ease-out; opacity: 0.7; } 74.325% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark17-mv { 0% { translate: 0px 0px; } 12.665% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 19.665% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: -37.808px -81.674px; } 49.995% { translate: 0px 0px; } 62.66% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 69.659% { translate: -37.808px -81.674px; } 100% { translate: -37.808px -81.674px; } } @keyframes doco-spark17-sc { 0% { scale: 0 0; } 12.665% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 14.332% { animation-timing-function: ease-out; scale: 1 1; } 24.331% { scale: 0 0; } 62.66% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 64.326% { animation-timing-function: ease-out; scale: 1 1; } 74.325% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark18-op { 0% { opacity: 0; } 12.799% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 13.632% { animation-timing-function: ease-out; opacity: 1; } 22.464% { animation-timing-function: ease-out; opacity: 0.7; } 24.464% { opacity: 0; } 62.793% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 63.627% { animation-timing-function: ease-out; opacity: 1; } 72.459% { animation-timing-function: ease-out; opacity: 0.7; } 74.459% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark18-mv { 0% { translate: 0px 0px; } 12.799% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 19.798% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 106.117px 44.32px; } 49.995% { translate: 0px 0px; } 62.793% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 69.793% { translate: 106.117px 44.32px; } 100% { translate: 106.117px 44.32px; } } @keyframes doco-spark18-sc { 0% { scale: 0 0; } 12.799% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 14.465% { animation-timing-function: ease-out; scale: 1 1; } 24.464% { scale: 0 0; } 62.793% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 64.46% { animation-timing-function: ease-out; scale: 1 1; } 74.459% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark19-op { 0% { opacity: 0; } 12.932% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 13.765% { animation-timing-function: ease-out; opacity: 1; } 22.598% { animation-timing-function: ease-out; opacity: 0.7; } 24.597% { opacity: 0; } 62.927% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 63.76% { animation-timing-function: ease-out; opacity: 1; } 72.592% { animation-timing-function: ease-out; opacity: 0.7; } 74.592% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark19-mv { 0% { translate: 0px 0px; } 12.932% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 19.931% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: -131.703px 47.478px; } 49.995% { translate: 0px 0px; } 62.927% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 69.926% { translate: -131.703px 47.478px; } 100% { translate: -131.703px 47.478px; } } @keyframes doco-spark19-sc { 0% { scale: 0 0; } 12.932% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 14.598% { animation-timing-function: ease-out; scale: 1 1; } 24.597% { scale: 0 0; } 62.927% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 64.593% { animation-timing-function: ease-out; scale: 1 1; } 74.592% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-spark20-op { 0% { opacity: 0; } 13.065% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 13.899% { animation-timing-function: ease-out; opacity: 1; } 22.731% { animation-timing-function: ease-out; opacity: 0.7; } 24.731% { opacity: 0; } 63.06% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 63.893% { animation-timing-function: ease-out; opacity: 1; } 72.726% { animation-timing-function: ease-out; opacity: 0.7; } 74.725% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-spark20-mv { 0% { translate: 0px 0px; } 13.065% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 20.065% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); translate: 76.658px -146.111px; } 49.995% { translate: 0px 0px; } 63.06% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 70.059% { translate: 76.658px -146.111px; } 100% { translate: 76.658px -146.111px; } } @keyframes doco-spark20-sc { 0% { scale: 0 0; } 13.065% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 14.732% { animation-timing-function: ease-out; scale: 1 1; } 24.731% { scale: 0 0; } 63.06% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 64.726% { animation-timing-function: ease-out; scale: 1 1; } 74.725% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-check-op { 0% { opacity: 0; } 4.999% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 6.333% { opacity: 1; } 46.028% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 49.995% { opacity: 0; } 54.994% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 56.327% { opacity: 1; } 100% { opacity: 1; } } @keyframes doco-check-sc { 0% { scale: 0 0; } 4.999% { scale: 0 0; } 6.666% { scale: 0.859 0.859; } 8.332% { scale: 1.061 1.061; } 9.999% { scale: 1.026 1.06; } 11.665% { scale: 0.97 1.04; } 13.332% { scale: 0.999 1.002; } 14.998% { scale: 1 1; } 26.664% { scale: 1 1; } 28.33% { scale: 1.041 1.041; } 29.997% { scale: 1.082 1.08; } 31.663% { scale: 1.045 1.037; } 33.33% { scale: 1 1; } 41.662% { scale: 1 1; } 43.329% { scale: 1.024 1.024; } 44.995% { scale: 1.079 1.079; } 46.662% { scale: 0.7 0.7; } 48.328% { scale: 0.01 0.01; } 49.995% { scale: 0 0; } 54.994% { scale: 0 0; } 56.661% { scale: 0.859 0.859; } 58.327% { scale: 1.061 1.061; } 59.994% { scale: 1.026 1.06; } 61.66% { scale: 0.97 1.04; } 63.327% { scale: 0.999 1.002; } 64.993% { scale: 1 1; } 76.658% { scale: 1 1; } 78.325% { scale: 1.041 1.041; } 79.991% { scale: 1.082 1.08; } 81.658% { scale: 1.045 1.037; } 83.324% { scale: 1 1; } 91.657% { scale: 1 1; } 93.323% { scale: 1.024 1.024; } 94.99% { scale: 1.079 1.079; } 96.656% { scale: 0.7 0.7; } 98.323% { scale: 0.01 0.01; } 98.593% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-stroke1-op { 0% { opacity: 0; } 8.332% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 8.499% { opacity: 1; } 38.329% { animation-timing-function: step-end; opacity: 1; } 48.395% { opacity: 0; } 58.327% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 58.494% { opacity: 1; } 100% { opacity: 1; } } @keyframes doco-stroke1-draw { 0% { stroke-dasharray: 0 1; visibility: hidden; } 8.332% { animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); stroke-dasharray: 0 1; visibility: hidden; } 12.499% { stroke-dasharray: 1 1; visibility: visible; } 48.395% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); stroke-dasharray: 1 1; visibility: visible; } 49.995% { stroke-dasharray: 0 1; visibility: hidden; } 58.327% { animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); stroke-dasharray: 0 1; visibility: hidden; } 62.493% { stroke-dasharray: 1 1; visibility: visible; } 100% { stroke-dasharray: 1 1; visibility: visible; } } @keyframes doco-stroke2-op { 0% { opacity: 0; } 10.832% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.999% { opacity: 1; } 38.329% { animation-timing-function: step-end; opacity: 1; } 49.111% { opacity: 0; } 60.827% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 60.993% { opacity: 1; } 100% { opacity: 1; } } @keyframes doco-stroke2-draw { 0% { stroke-dasharray: 0 1; stroke-dashoffset: -1; visibility: hidden; } 10.832% { animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); stroke-dasharray: 0 1; stroke-dashoffset: -1; visibility: hidden; } 14.998% { stroke-dasharray: 1 1; stroke-dashoffset: 0; visibility: visible; } 49.111% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); stroke-dasharray: 1 1; stroke-dashoffset: 0; visibility: visible; } 49.995% { stroke-dasharray: 0 1; stroke-dashoffset: -1; visibility: hidden; } 60.827% { animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1); stroke-dasharray: 0 1; stroke-dashoffset: -1; visibility: hidden; } 64.993% { stroke-dasharray: 1 1; stroke-dashoffset: 0; visibility: visible; } 100% { stroke-dasharray: 1 1; stroke-dashoffset: 0; visibility: visible; } } @keyframes doco-bike-progress { 0% { stroke-dasharray: 0.6001 1; } 19.941% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); stroke-dasharray: 0.6001 1; } 34.2254% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); stroke-dasharray: 1.0 1; } 72.8664% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); stroke-dasharray: 1.0 1; } 80.7801% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); stroke-dasharray: 0.6001 1; } 85.7156% { stroke-dasharray: 0.6001 1; } 100% { stroke-dasharray: 0.6001 1; } } @keyframes doco-bike-panel-h { 0% { height: 439px; } 35.1743% { height: 397px; } 100% { height: 397px; } } @keyframes doco-amount-from-op { 0% { opacity: 1; } 34.2253% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 37.6034% { opacity: 0; } 80.9172% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 83.9079% { opacity: 1; } 100% { opacity: 1; } } @keyframes doco-amount-from-mv { 0% { translate: 0px 0px; } 34.2981% { translate: 0px 0px; } 37.7177% { translate: 92px 0px; } 80.8634% { translate: 92px 0px; } 83.9811% { translate: 0px 0px; } 100% { translate: 0px 0px; } } @keyframes doco-amount-to-op { 0% { opacity: 0; } 37.7174% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 40.4149% { opacity: 1; } 78.092% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 80.7741% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-amount-to-mv { 0% { translate: 92px 0px; } 37.8065% { translate: 92px 0px; } 40.5518% { translate: 1px 0px; } 78.092% { translate: 1px 0px; } 80.8634% { translate: 92px 0px; } 100% { translate: 92px 0px; } } @keyframes doco-ripple-size { 0% { width: 7px; height: 7px } 5.7121% { animation-timing-function: ease-in-out; width: 7px; height: 7px } 21.5549% { width: 265px; height: 265px } 100% { width: 265px; height: 265px } } @keyframes doco-ripple-op { 0% { opacity: 0; } 5.7121% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; } 14.1928% { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 1; } 21.5695% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-ripple-mv { 0% { translate: 4.5px 4.5px; } 5.7125% { animation-timing-function: ease-in-out; translate: 4.5px 4.5px; } 21.5555% { translate: -124.5px -124.5px; } 100% { translate: -124.5px -124.5px; } } @keyframes doco-burst1-op { 0% { opacity: 0; } 9.0275% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 9.7416% { animation-timing-function: ease-out; opacity: 1; } 17.3129% { animation-timing-function: ease-out; opacity: 0.7; } 19.0271% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst1-mv { 0% { translate: 0px 0px; } 9.0279% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 15.0269% { translate: -172.154px -80.394px; } 100% { translate: -172.154px -80.394px; } } @keyframes doco-burst1-sc { 0% { scale: 0 0; } 9.0279% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 10.4565% { animation-timing-function: ease-out; scale: 1 1; } 19.0271% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst2-op { 0% { opacity: 0; } 9.1424% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 9.8564% { animation-timing-function: ease-out; opacity: 1; } 17.4268% { animation-timing-function: ease-out; opacity: 0.7; } 19.1411% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst2-mv { 0% { translate: 0px 0px; } 9.1418% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 15.1417% { translate: 85.853px -27.004px; } 100% { translate: 85.853px -27.004px; } } @keyframes doco-burst2-sc { 0% { scale: 0 0; } 9.1418% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 10.5704% { animation-timing-function: ease-out; scale: 1 1; } 19.141% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst3-op { 0% { opacity: 0; } 9.2564% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 9.9704% { animation-timing-function: ease-out; opacity: 1; } 17.5408% { animation-timing-function: ease-out; opacity: 0.7; } 19.2552% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst3-mv { 0% { translate: 0px 0px; } 9.2565% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 15.2555% { translate: -57.583px 99.545px; } 100% { translate: -57.583px 99.545px; } } @keyframes doco-burst3-sc { 0% { scale: 0 0; } 9.2565% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 10.6851% { animation-timing-function: ease-out; scale: 1 1; } 19.2558% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst4-op { 0% { opacity: 0; } 9.3705% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.0844% { animation-timing-function: ease-out; opacity: 1; } 17.6557% { animation-timing-function: ease-out; opacity: 0.7; } 19.37% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst4-mv { 0% { translate: 0px 0px; } 9.3704% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 15.3703% { translate: -30.168px -136.711px; } 100% { translate: -30.168px -136.711px; } } @keyframes doco-burst4-sc { 0% { scale: 0 0; } 9.3704% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 10.799% { animation-timing-function: ease-out; scale: 1 1; } 19.3697% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst5-op { 0% { opacity: 0; } 9.4844% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.1993% { animation-timing-function: ease-out; opacity: 1; } 17.7697% { animation-timing-function: ease-out; opacity: 0.7; } 19.484% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst5-mv { 0% { translate: 0px 0px; } 9.4851% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 15.4841% { translate: 135.054px 94.791px; } 100% { translate: 135.054px 94.791px; } } @keyframes doco-burst5-sc { 0% { scale: 0 0; } 9.4851% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 10.9138% { animation-timing-function: ease-out; scale: 1 1; } 19.4835% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst6-op { 0% { opacity: 0; } 9.5993% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.3133% { animation-timing-function: ease-out; opacity: 1; } 17.8837% { animation-timing-function: ease-out; opacity: 0.7; } 19.598% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst6-mv { 0% { translate: 0px 0px; } 9.599% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 15.599% { translate: -188.406px 24.563px; } 100% { translate: -188.406px 24.563px; } } @keyframes doco-burst6-sc { 0% { scale: 0 0; } 9.599% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.0276% { animation-timing-function: ease-out; scale: 1 1; } 19.5983% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst7-op { 0% { opacity: 0; } 9.7133% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.4273% { animation-timing-function: ease-out; opacity: 1; } 17.9985% { animation-timing-function: ease-out; opacity: 0.7; } 19.7129% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst7-mv { 0% { translate: 0px 0px; } 9.7138% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 15.7127% { translate: 57.947px -68.863px; } 100% { translate: 57.947px -68.863px; } } @keyframes doco-burst7-sc { 0% { scale: 0 0; } 9.7138% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.1414% { animation-timing-function: ease-out; scale: 1 1; } 19.7121% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst8-op { 0% { opacity: 0; } 9.8273% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.5421% { animation-timing-function: ease-out; opacity: 1; } 18.1126% { animation-timing-function: ease-out; opacity: 0.7; } 19.8269% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst8-mv { 0% { translate: 0px 0px; } 9.8275% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 15.8275% { translate: 4.84px 114.898px; } 100% { translate: 4.84px 114.898px; } } @keyframes doco-burst8-sc { 0% { scale: 0 0; } 9.8275% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.2561% { animation-timing-function: ease-out; scale: 1 1; } 19.8269% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst9-op { 0% { opacity: 0; } 9.9422% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.6562% { animation-timing-function: ease-out; opacity: 1; } 18.2266% { animation-timing-function: ease-out; opacity: 0.7; } 19.9408% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst9-mv { 0% { translate: 0px 0px; } 9.9424% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 15.9414% { translate: -98.829px -99.161px; } 100% { translate: -98.829px -99.161px; } } @keyframes doco-burst9-sc { 0% { scale: 0 0; } 9.9424% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.37% { animation-timing-function: ease-out; scale: 1 1; } 19.9407% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst10-op { 0% { opacity: 0; } 10.0561% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.7702% { animation-timing-function: ease-out; opacity: 1; } 18.3415% { animation-timing-function: ease-out; opacity: 0.7; } 20.0549% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst10-mv { 0% { translate: 0px 0px; } 10.0561% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 16.0552% { translate: 164.83px 7.496px; } 100% { translate: 164.83px 7.496px; } } @keyframes doco-burst10-sc { 0% { scale: 0 0; } 10.0561% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.4847% { animation-timing-function: ease-out; scale: 1 1; } 20.0555% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst11-op { 0% { opacity: 0; } 10.1702% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.8851% { animation-timing-function: ease-out; opacity: 1; } 18.4554% { animation-timing-function: ease-out; opacity: 0.7; } 20.1697% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst11-mv { 0% { translate: 0px 0px; } 10.17% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 16.17% { translate: -145.787px 121.845px; } 100% { translate: -145.787px 121.845px; } } @keyframes doco-burst11-sc { 0% { scale: 0 0; } 10.17% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.5986% { animation-timing-function: ease-out; scale: 1 1; } 20.1693% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst12-op { 0% { opacity: 0; } 10.285% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 10.999% { animation-timing-function: ease-out; opacity: 1; } 18.5694% { animation-timing-function: ease-out; opacity: 0.7; } 20.2838% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst12-mv { 0% { translate: 0px 0px; } 10.2848% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 16.2838% { translate: 11.934px -89.205px; } 100% { translate: 11.934px -89.205px; } } @keyframes doco-burst12-sc { 0% { scale: 0 0; } 10.2848% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.7134% { animation-timing-function: ease-out; scale: 1 1; } 20.284% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst13-op { 0% { opacity: 0; } 10.3991% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.113% { animation-timing-function: ease-out; opacity: 1; } 18.6843% { animation-timing-function: ease-out; opacity: 0.7; } 20.3977% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst13-mv { 0% { translate: 0px 0px; } 10.3987% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 16.3986% { translate: 65.751px 94.35px; } 100% { translate: 65.751px 94.35px; } } @keyframes doco-burst13-sc { 0% { scale: 0 0; } 10.3987% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.8272% { animation-timing-function: ease-out; scale: 1 1; } 20.3979% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst14-op { 0% { opacity: 0; } 10.513% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.2279% { animation-timing-function: ease-out; opacity: 1; } 18.7983% { animation-timing-function: ease-out; opacity: 0.7; } 20.5126% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst14-mv { 0% { translate: 0px 0px; } 10.5135% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 16.5124% { translate: -136.609px -30.626px; } 100% { translate: -136.609px -30.626px; } } @keyframes doco-burst14-sc { 0% { scale: 0 0; } 10.5135% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 11.9421% { animation-timing-function: ease-out; scale: 1 1; } 20.5127% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst15-op { 0% { opacity: 0; } 10.6279% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.3419% { animation-timing-function: ease-out; opacity: 1; } 18.9123% { animation-timing-function: ease-out; opacity: 0.7; } 20.6266% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst15-mv { 0% { translate: 0px 0px; } 10.6273% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 16.6272% { translate: 143.101px -82.141px; } 100% { translate: 143.101px -82.141px; } } @keyframes doco-burst15-sc { 0% { scale: 0 0; } 10.6273% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.0559% { animation-timing-function: ease-out; scale: 1 1; } 20.6265% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst16-op { 0% { opacity: 0; } 10.7419% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.4559% { animation-timing-function: ease-out; opacity: 1; } 19.0271% { animation-timing-function: ease-out; opacity: 0.7; } 20.7406% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst16-mv { 0% { translate: 0px 0px; } 10.7421% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 16.7411% { translate: -57.615px 181.054px; } 100% { translate: -57.615px 181.054px; } } @keyframes doco-burst16-sc { 0% { scale: 0 0; } 10.7421% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.1707% { animation-timing-function: ease-out; scale: 1 1; } 20.7413% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst17-op { 0% { opacity: 0; } 10.8559% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.5707% { animation-timing-function: ease-out; opacity: 1; } 19.1411% { animation-timing-function: ease-out; opacity: 0.7; } 20.8555% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst17-mv { 0% { translate: 0px 0px; } 10.8559% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 16.8558% { translate: -37.808px -81.674px; } 100% { translate: -37.808px -81.674px; } } @keyframes doco-burst17-sc { 0% { scale: 0 0; } 10.8559% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.2845% { animation-timing-function: ease-out; scale: 1 1; } 20.8551% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst18-op { 0% { opacity: 0; } 10.9708% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.6848% { animation-timing-function: ease-out; opacity: 1; } 19.2552% { animation-timing-function: ease-out; opacity: 0.7; } 20.9694% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst18-mv { 0% { translate: 0px 0px; } 10.9707% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 16.9697% { translate: 106.117px 44.32px; } 100% { translate: 106.117px 44.32px; } } @keyframes doco-burst18-sc { 0% { scale: 0 0; } 10.9707% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.3993% { animation-timing-function: ease-out; scale: 1 1; } 20.97% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst19-op { 0% { opacity: 0; } 11.0847% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.7988% { animation-timing-function: ease-out; opacity: 1; } 19.37% { animation-timing-function: ease-out; opacity: 0.7; } 21.0835% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst19-mv { 0% { translate: 0px 0px; } 11.0845% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 17.0844% { translate: -131.703px 47.478px; } 100% { translate: -131.703px 47.478px; } } @keyframes doco-burst19-sc { 0% { scale: 0 0; } 11.0845% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.5131% { animation-timing-function: ease-out; scale: 1 1; } 21.0838% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-burst20-op { 0% { opacity: 0; } 11.1987% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); opacity: 0; } 11.9137% { animation-timing-function: ease-out; opacity: 1; } 19.484% { animation-timing-function: ease-out; opacity: 0.7; } 21.1983% { opacity: 0; } 100% { opacity: 0; } } @keyframes doco-burst20-mv { 0% { translate: 0px 0px; } 11.1993% { animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1); translate: 0px 0px; } 17.1982% { translate: 76.658px -146.111px; } 100% { translate: 76.658px -146.111px; } } @keyframes doco-burst20-sc { 0% { scale: 0 0; } 11.1993% { animation-timing-function: cubic-bezier(0, 0, 0.1, 1); scale: 0 0; } 12.6279% { animation-timing-function: ease-out; scale: 1 1; } 21.1976% { scale: 0 0; } 100% { scale: 0 0; } } @keyframes doco-ai-veil { 0% { animation-timing-function: step-end; background-color: rgba(255, 255, 255, 0.5); } 0.014% { animation-timing-function: ease-in-out; background-color: rgba(255, 255, 255, 0.5); } 25.011% { animation-timing-function: ease-in-out; background-color: rgba(255, 255, 255, 0.25); } 50.009% { animation-timing-function: ease-in-out; background-color: rgba(255, 255, 255, 0.5); } 75.006% { animation-timing-function: ease-in-out; background-color: rgba(255, 255, 255, 0.25); } 100% { background-color: rgba(255, 255, 255, 0.5); } } /* Figma keyframes `fill` on the flattened stroke vector; border-color is the same thing on a real border. */ @keyframes doco-ai-edge { 0% { animation-timing-function: step-end; border-color: #572cf5; } 0.014% { animation-timing-function: ease-in-out; border-color: #5b36e0; } 25.011% { animation-timing-function: ease-in-out; border-color: #aa75ff; } 50.009% { animation-timing-function: ease-in-out; border-color: #4c26d5; } 75.006% { animation-timing-function: ease-in-out; border-color: #a977fa; } 100% { border-color: #552fde; } } @keyframes doco-ai-spark { 0% { rotate: 0rad; } 0.014% { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); rotate: 0rad; } 25.011% { animation-timing-function: step-end; rotate: 6.283rad; } 25.178% { rotate: 0rad; } 66.673% { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); rotate: 0rad; } 91.671% { animation-timing-function: step-end; rotate: 6.283rad; } 91.837% { rotate: 0rad; } 100% { rotate: 0rad; } }