/* Photo-real hardware (the owner's renders, 27 Oct 2026) with see-through screens. Inside them the website is typed as
   code on a black screen, then built part by part as a gold line passes, laptop first, then tablet and phone; it stays
   live, the screens go dark, and it starts again. All three logos use the exact master SVG. */
.visual{--dur:20s}
.device-showcase{position:relative;isolation:isolate;width:100%;aspect-ratio:1.25;container-type:inline-size;pointer-events:none}
.device-showcase *{box-sizing:border-box}
/* hardware: each photo lies over its device; its screen hole (measured in devices/measure.json) shows the screen */
.ds-laptop,.ds-tablet,.ds-phone{position:absolute}
.ds-laptop{left:0;top:13%;width:84%;aspect-ratio:1600/897;z-index:1}
.ds-tablet{left:63%;top:31%;width:28.5%;aspect-ratio:900/1217;z-index:2}
.ds-phone{left:83.5%;top:50%;width:15%;aspect-ratio:640/1440;z-index:3}
.ds-photo{position:absolute;inset:0;z-index:8;width:100%;height:100%}
.ds-lid{position:absolute;left:10.13%;top:4.59%;width:79.68%;height:76.15%;background:#000;overflow:hidden}
.ds-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
.ds-tablet .ds-screen{position:absolute;left:4.61%;top:3.78%;width:90.68%;height:92.44%;border-radius:4%/3%}
.ds-phone .ds-screen{position:absolute;left:4.38%;top:1.65%;width:91.1%;height:96.69%;border-radius:13%/6%}
.ds-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#ffffff08,transparent 40%,#ffffff02 60%,transparent);z-index:2} /* taste-skill-ignore: approved device mock-up, screen glare (owner, 23 Oct 2026) */
.ds-laptop::after,.ds-tablet::after,.ds-phone::after{content:"";position:absolute;z-index:-1;left:4%;right:4%;bottom:-3%;height:7%;border-radius:50%;background:radial-gradient(closest-side,#000000b3,#0000);pointer-events:none} /* taste-skill-ignore: ground contact under the approved device photos (owner, 27 Oct 2026) */
.ds-laptop::after{left:1%;right:1%;bottom:-2%;height:8%}
/* the website on each screen: four planes */
.ds-site{height:100%;position:relative;overflow:hidden;color:#f7f5ed;font-family:'Archivo',system-ui,sans-serif;border-radius:inherit}
.ds-site-nav{position:absolute;top:5%;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font-size:.67cqi;line-height:1.1;color:#eee8d8}
.ds-site-nav>span:first-child{font-size:.88cqi;font-weight:600;letter-spacing:.12em}
.ds-site-nav svg{width:1.3cqi;height:.8cqi;fill:none;stroke:currentColor;stroke-width:1.2}
.ds-screen-logo{position:absolute;left:35%;top:18%;width:30%;height:auto;display:block;filter:drop-shadow(0 .2cqi .4cqi #0004)} /* taste-skill-ignore: approved device mock-up, rendered hardware (owner, 23 Oct 2026) */
.ds-site-copy{position:absolute;top:52%;left:8%;right:8%;text-align:center;display:flex;align-items:center;flex-direction:column;gap:1.35cqi}
.ds-site-title{font-size:2.28cqi;line-height:1.12;font-weight:400;letter-spacing:-.035em}
.ds-site-description{font-size:.9cqi;line-height:1.5;color:#f1eadb}
.ds-site-button{display:flex;gap:1.5cqi;align-items:center;justify-content:center;background:#e8c547;color:#15170e;padding:1cqi 1.6cqi;border-radius:99px;font-size:.77cqi;line-height:1.1;font-weight:700}
.ds-site-footer{position:absolute;left:5%;right:5%;bottom:4%;display:flex;justify-content:space-between;font-size:.61cqi;line-height:1.3;color:#e7dfcf}
.ds-screen-tablet .ds-plane-scenery{background-position:57% center}
.ds-screen-tablet .ds-site-nav{top:5%;font-size:.62cqi}
.ds-screen-tablet .ds-site-nav>span:first-child{font-size:.8cqi}
.ds-screen-tablet .ds-screen-logo{left:19%;width:62%;top:23%}
.ds-screen-tablet .ds-site-copy{top:53%;left:6%;right:6%;gap:1.4cqi}
.ds-screen-tablet .ds-site-title{font-size:2cqi}
.ds-screen-tablet .ds-site-description{font-size:.92cqi}
.ds-screen-tablet .ds-site-button{padding:1.05cqi 1.2cqi;font-size:.72cqi;gap:.9cqi}
.ds-screen-tablet .ds-site-footer{justify-content:center;bottom:4%;font-size:.55cqi}
.ds-screen-phone .ds-plane-scenery{background-position:58% center}
.ds-screen-phone .ds-site-nav{top:8%;left:9%;right:9%}
.ds-screen-phone .ds-site-nav>span:first-child{font-size:.52cqi}
.ds-screen-phone .ds-site-nav svg{width:.85cqi;height:.5cqi}
.ds-screen-phone .ds-screen-logo{left:11%;width:78%;top:24%}
.ds-screen-phone .ds-site-copy{top:53%;left:5%;right:5%;gap:1cqi}
.ds-screen-phone .ds-site-title{font-size:1.18cqi;line-height:1.16}
.ds-screen-phone .ds-site-description{font-size:.58cqi;line-height:1.45}
.ds-screen-phone .ds-site-button{padding:.8cqi .75cqi;font-size:.47cqi;gap:.45cqi}
.ds-screen-phone .ds-site-footer{justify-content:center;bottom:5%;font-size:.4cqi}
.ds-plane{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.ds-plane-scenery{background:linear-gradient(180deg,#0810151a 30%,#080e1380 85%,#080d0f),url('/settled-1600.webp') center center/cover;z-index:0} /* taste-skill-ignore: neutral scrim over a photo */
.ds-plane-navigation{z-index:1}
.ds-plane-brand{z-index:2}
.ds-plane-content{z-index:3}
/* the code layer */
.ds-code { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: .55cqi; padding: 0 7%; border-radius: inherit; font: 500 1.02cqi/1.35 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; color: #F7F5ED; letter-spacing: 0; opacity: 0; pointer-events: none; }
.ds-code-tablet { font-size: .66cqi; padding: 0 7%; gap: .45cqi; }
.ds-code-phone { font-size: .5cqi; padding: 0 9%; gap: .35cqi; }
.ds-code .ln { display: block; white-space: nowrap; overflow: hidden; }
.ds-code .ln em { display: inline-block; width: 2.2em; font-style: normal; color: #7d7969; }
.ds-code .tg { font-weight: 500; color: #E8C547; }
.ds-code .pn { font-style: normal; color: #8f8a78; }
.ds-code .at { font-style: normal; color: #cfc9b9; }
/* the build */
.device-showcase .ds-plane-scenery { animation: build-paint var(--dur) cubic-bezier(.4,0,.2,1) var(--dd, 0s) infinite both; }
.device-showcase .ds-site-nav { animation: var(--dur) cubic-bezier(.16,1,.3,1) var(--dd, 0s) infinite both; }
.device-showcase .ds-screen-logo { animation: var(--dur) cubic-bezier(.16,1,.3,1) var(--dd, 0s) infinite both; }
.device-showcase .ds-site-description { animation: var(--dur) cubic-bezier(.16,1,.3,1) var(--dd, 0s) infinite both; }
.device-showcase .ds-site-button { animation: var(--dur) cubic-bezier(.16,1,.3,1) var(--dd, 0s) infinite both; }
.device-showcase .ds-site-footer { animation: var(--dur) cubic-bezier(.16,1,.3,1) var(--dd, 0s) infinite both; }
.device-showcase .ds-code { animation: build-code var(--dur) cubic-bezier(.4,0,.2,1) var(--dd, 0s) infinite both; }
.device-showcase .ds-code .ln { font-weight: 600; }
.device-showcase .ds-code .pn { color: #b9b3a2; }
/* the step label under the devices */
.build-steps { position: relative; max-width: 360px; margin: 1.6em auto 0; padding-top: 1em; height: 2.2em; font: 600 13px/1 'Archivo', system-ui, sans-serif; color: #F7F5ED; text-align: center; }
.build-steps::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgba(247,245,237,.12); }
.build-steps i { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: #E8C547; transform-origin: left; animation: build-bar var(--dur, 20s) linear infinite both; }
.build-steps span { position: absolute; left: 0; right: 0; top: 1em; opacity: 0; }
.build-steps span b { color: #E8C547; font-weight: 600; margin-right: .5em; }
.build-steps span:nth-of-type(1) { animation: build-step1 var(--dur, 20s) ease-in-out infinite both; }
.build-steps span:nth-of-type(2) { animation: build-step2 var(--dur, 20s) ease-in-out infinite both; }
.build-steps span:nth-of-type(3) { animation: build-step3 var(--dur, 20s) ease-in-out infinite both; }
.build-steps span:nth-of-type(4) { animation: build-step4 var(--dur, 20s) ease-in-out infinite both; }
.build-steps span:nth-of-type(5) { animation: build-step5 var(--dur, 20s) ease-in-out infinite both; }
.build-steps span:nth-of-type(6) { animation: build-step6 var(--dur, 20s) ease-in-out infinite both; }
.build-steps span:nth-of-type(7) { animation: build-step7 var(--dur, 20s) ease-in-out infinite both; }
.build-steps span:nth-of-type(8) { animation: build-step8 var(--dur, 20s) ease-in-out infinite both; }
/* extras: a blinking cursor and a shine across the glass when live */
.device-showcase .ds-code .ln { animation: var(--dur) steps(28, end) var(--dd, 0s) infinite both; }
.device-showcase .ds-code > .ln:nth-of-type(1) { animation-name: build-line1; }
.device-showcase .ds-code > .ln:nth-of-type(2) { animation-name: build-line2; }
.device-showcase .ds-code > .ln:nth-of-type(3) { animation-name: build-line3; }
.device-showcase .ds-code > .ln:nth-of-type(4) { animation-name: build-line4; }
.device-showcase .ds-code > .ln:nth-of-type(5) { animation-name: build-line5; }
.device-showcase .ds-code > .ln:nth-of-type(6) { animation-name: build-line6; }
.device-showcase .ds-code > .ln:nth-of-type(7) { animation-name: build-line7; }
.device-showcase .ds-code > .ln:nth-of-type(8) { animation-name: build-line8; }
.device-showcase .ds-code > .ln:nth-of-type(9) { animation-name: build-line9; }
.device-showcase .ds-code > .ln:nth-of-type(10) { animation-name: build-line10; }
.device-showcase .ds-code > .ln:nth-of-type(11) { animation-name: build-line11; }
.device-showcase .ds-code > .ln:nth-of-type(12) { animation-name: build-line12; }
.device-showcase .ds-code > .ln:nth-of-type(13) { animation-name: build-line13; }
.device-showcase .ds-code .cur { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.15em; background: #E8C547; animation: build-blink 1s steps(2, jump-none) infinite; }
.device-showcase .ds-shine { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.17) 50%, transparent 62%); transform: translateX(-110%); animation: build-shine var(--dur) cubic-bezier(.45,0,.2,1) var(--dd, 0s) infinite both; } /* taste-skill-ignore: glass reflection on the approved device mock-up */
/* transitions: the photo paints in from the cursor, a gold scan line renders each part as it passes, the parts
   focus into place, the headline rises letter by letter, and the headline and button code become the real thing */
.device-showcase .ds-screen-desktop { --cx: 12%; --cy: 68%; }
.device-showcase .ds-screen-tablet { --cx: 14%; --cy: 66%; }
.device-showcase .ds-screen-phone { --cx: 14%; --cy: 62%; }
/* the line rides on a screen-tall layer moved by transform alone (no layout per frame); the line is its bottom edge */
.device-showcase .ds-scan { position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none; animation: build-scan var(--dur) linear var(--dd, 0s) infinite both; }
.device-showcase .ds-scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #E8C547; }
.device-showcase .ds-scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.4cqi; background: linear-gradient(to top, rgba(232,197,71,.24), rgba(232,197,71,0)); } /* taste-skill-ignore: light trail of the approved gold build line */
.device-showcase .ds-site-title { position: relative; }
.device-showcase .ds-site-title .ch { display: inline-block; white-space: pre; opacity: 0; animation: var(--dur) cubic-bezier(.16,1,.3,1) var(--dd, 0s) infinite both; }
.device-showcase .ds-site-title::before, .device-showcase .ds-site-button::before { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; font: 600 .7em/1 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace; letter-spacing: 0; color: #E8C547; opacity: 0; pointer-events: none; } /* taste-skill-ignore: literal HTML code shown inside the device mock-up */
.device-showcase .ds-site-title::before { content: "<h1>A powerful first impression.</h1>"; font-size: .5em; animation: var(--dur) ease-in-out var(--dd, 0s) infinite both; }
.device-showcase .ds-site-button { position: relative; }
.device-showcase .ds-site-button::before { content: '<a class="cta">'; color: #F7F5ED; animation: var(--dur) ease-in-out var(--dd, 0s) infinite both; }
/* the build follows the gold line exactly */
.device-showcase .ds-screen-desktop .ds-site-nav { animation-name: build-in-nav-desktop; }
.device-showcase .ds-screen-desktop .ds-screen-logo { animation-name: build-in-brand-desktop; }
.device-showcase .ds-screen-desktop .ds-site-description { animation-name: build-in-sub-desktop; }
.device-showcase .ds-screen-desktop .ds-site-button { animation-name: build-in-cta-desktop; }
.device-showcase .ds-screen-desktop .ds-site-footer { animation-name: build-in-foot-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title::before { animation-name: build-ghost-title-desktop; }
.device-showcase .ds-screen-desktop .ds-site-button::before { animation-name: build-ghost-cta-desktop; }
.device-showcase .ds-screen-tablet .ds-site-nav { animation-name: build-in-nav-tablet; }
.device-showcase .ds-screen-tablet .ds-screen-logo { animation-name: build-in-brand-tablet; }
.device-showcase .ds-screen-tablet .ds-site-description { animation-name: build-in-sub-tablet; }
.device-showcase .ds-screen-tablet .ds-site-button { animation-name: build-in-cta-tablet; }
.device-showcase .ds-screen-tablet .ds-site-footer { animation-name: build-in-foot-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title::before { animation-name: build-ghost-title-tablet; }
.device-showcase .ds-screen-tablet .ds-site-button::before { animation-name: build-ghost-cta-tablet; }
.device-showcase .ds-screen-phone .ds-site-nav { animation-name: build-in-nav-phone; }
.device-showcase .ds-screen-phone .ds-screen-logo { animation-name: build-in-brand-phone; }
.device-showcase .ds-screen-phone .ds-site-description { animation-name: build-in-sub-phone; }
.device-showcase .ds-screen-phone .ds-site-button { animation-name: build-in-cta-phone; }
.device-showcase .ds-screen-phone .ds-site-footer { animation-name: build-in-foot-phone; }
.device-showcase .ds-screen-phone .ds-site-title::before { animation-name: build-ghost-title-phone; }
.device-showcase .ds-screen-phone .ds-site-button::before { animation-name: build-ghost-cta-phone; }
.device-showcase .ds-plane-navigation, .device-showcase .ds-plane-brand, .device-showcase .ds-plane-content { animation: build-reveal var(--dur) linear var(--dd, 0s) infinite both; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(1) { animation-name: build-ch1-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(2) { animation-name: build-ch2-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(3) { animation-name: build-ch3-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(4) { animation-name: build-ch4-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(5) { animation-name: build-ch5-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(6) { animation-name: build-ch6-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(7) { animation-name: build-ch7-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(8) { animation-name: build-ch8-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(9) { animation-name: build-ch9-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(10) { animation-name: build-ch10-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(11) { animation-name: build-ch11-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(12) { animation-name: build-ch12-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(13) { animation-name: build-ch13-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(14) { animation-name: build-ch14-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(15) { animation-name: build-ch15-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(16) { animation-name: build-ch16-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(17) { animation-name: build-ch17-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(18) { animation-name: build-ch18-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(19) { animation-name: build-ch19-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(20) { animation-name: build-ch20-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(21) { animation-name: build-ch21-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(22) { animation-name: build-ch22-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(23) { animation-name: build-ch23-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(24) { animation-name: build-ch24-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(25) { animation-name: build-ch25-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(26) { animation-name: build-ch26-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(27) { animation-name: build-ch27-desktop; }
.device-showcase .ds-screen-desktop .ds-site-title .ch:nth-of-type(28) { animation-name: build-ch28-desktop; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(1) { animation-name: build-ch1-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(2) { animation-name: build-ch2-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(3) { animation-name: build-ch3-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(4) { animation-name: build-ch4-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(5) { animation-name: build-ch5-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(6) { animation-name: build-ch6-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(7) { animation-name: build-ch7-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(8) { animation-name: build-ch8-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(9) { animation-name: build-ch9-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(10) { animation-name: build-ch10-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(11) { animation-name: build-ch11-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(12) { animation-name: build-ch12-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(13) { animation-name: build-ch13-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(14) { animation-name: build-ch14-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(15) { animation-name: build-ch15-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(16) { animation-name: build-ch16-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(17) { animation-name: build-ch17-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(18) { animation-name: build-ch18-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(19) { animation-name: build-ch19-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(20) { animation-name: build-ch20-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(21) { animation-name: build-ch21-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(22) { animation-name: build-ch22-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(23) { animation-name: build-ch23-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(24) { animation-name: build-ch24-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(25) { animation-name: build-ch25-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(26) { animation-name: build-ch26-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(27) { animation-name: build-ch27-tablet; }
.device-showcase .ds-screen-tablet .ds-site-title .ch:nth-of-type(28) { animation-name: build-ch28-tablet; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(1) { animation-name: build-ch1-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(2) { animation-name: build-ch2-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(3) { animation-name: build-ch3-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(4) { animation-name: build-ch4-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(5) { animation-name: build-ch5-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(6) { animation-name: build-ch6-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(7) { animation-name: build-ch7-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(8) { animation-name: build-ch8-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(9) { animation-name: build-ch9-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(10) { animation-name: build-ch10-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(11) { animation-name: build-ch11-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(12) { animation-name: build-ch12-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(13) { animation-name: build-ch13-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(14) { animation-name: build-ch14-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(15) { animation-name: build-ch15-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(16) { animation-name: build-ch16-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(17) { animation-name: build-ch17-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(18) { animation-name: build-ch18-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(19) { animation-name: build-ch19-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(20) { animation-name: build-ch20-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(21) { animation-name: build-ch21-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(22) { animation-name: build-ch22-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(23) { animation-name: build-ch23-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(24) { animation-name: build-ch24-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(25) { animation-name: build-ch25-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(26) { animation-name: build-ch26-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(27) { animation-name: build-ch27-phone; }
.device-showcase .ds-screen-phone .ds-site-title .ch:nth-of-type(28) { animation-name: build-ch28-phone; }
/* the screens follow each other: laptop, then tablet, then phone */
.device-showcase .ds-screen-desktop { --dd: 0s; }
.device-showcase .ds-screen-tablet { --dd: 1.2s; }
.device-showcase .ds-screen-phone { --dd: 2.4s; }
/* the loop waits, black, until the scene is in view, and pauses on request (packages.js); without scripts it just plays */
@media (scripting: enabled) {
  .visual:not(.is-playing) .device-showcase *, .visual:not(.is-playing) .device-showcase *::before, .visual:not(.is-playing) .build-steps * { animation-play-state: paused; }
}
@media (scripting: none) {
  .device-showcase *, .device-showcase *::before, .build-steps * { animation: none !important; }
  :is(.ds-code, .ds-scan, .ds-shine, .build-steps) { display: none; }
  .device-showcase .ds-site-title .ch { opacity: 1; }
  .visual .motion-controls { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .visual:not(.motion-opt-in) .device-showcase *, .visual:not(.motion-opt-in) .device-showcase *::before, .visual:not(.motion-opt-in) .build-steps * { animation: none !important; }
  .visual:not(.motion-opt-in) :is(.ds-code, .ds-scan, .ds-shine, .build-steps) { display: none; }
  .visual:not(.motion-opt-in) .ds-site-title .ch { opacity: 1; }
}
@keyframes build-blink { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes build-shine { 0%, 82% { transform: translateX(-110%); } 91%, 100% { transform: translateX(110%); } }
@keyframes build-paint { 0%, 45% { opacity: 0; clip-path: circle(0% at var(--cx, 12%) var(--cy, 66%)); } 46% { opacity: 1; clip-path: circle(0% at var(--cx, 12%) var(--cy, 66%)); } 58%, 94% { opacity: 1; clip-path: circle(150% at var(--cx, 12%) var(--cy, 66%)); } 99%, 100% { opacity: 0; clip-path: circle(150% at var(--cx, 12%) var(--cy, 66%)); } }
@keyframes build-scan { 0%, 50% { transform: translateY(calc(2px - 100%)); opacity: 0; } 51% { transform: translateY(calc(2px - 100%)); opacity: 1; } 76% { transform: none; opacity: 1; } 78%, 100% { transform: none; opacity: 0; } }
@keyframes build-in-nav-desktop { 0%, 51.3% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 55.5%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-brand-desktop { 0%, 57.05% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 61.25%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-sub-desktop { 0%, 65.3% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 69.5%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-cta-desktop { 0%, 67.3% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 71.5%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-foot-desktop { 0%, 73.55% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 77.75%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-ghost-title-desktop { 0%, 50% { opacity: 0; } 53%, 63.75% { opacity: 1; } 66.25%, 100% { opacity: 0; } }
@keyframes build-ghost-cta-desktop { 0%, 50% { opacity: 0; } 53%, 67.5% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes build-in-nav-tablet { 0%, 51.3% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 55.5%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-brand-tablet { 0%, 57.8% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 62%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-sub-tablet { 0%, 68.05% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 72.25%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-cta-tablet { 0%, 70.8% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 75%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-foot-tablet { 0%, 73.55% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 77.75%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-ghost-title-tablet { 0%, 50% { opacity: 0; } 53%, 64.75% { opacity: 1; } 67.25%, 100% { opacity: 0; } }
@keyframes build-ghost-cta-tablet { 0%, 50% { opacity: 0; } 53%, 71% { opacity: 1; } 73.5%, 100% { opacity: 0; } }
@keyframes build-in-nav-phone { 0%, 52.05% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 56.25%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-brand-phone { 0%, 57.8% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 62%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-sub-phone { 0%, 66.8% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 71%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-cta-phone { 0%, 69.55% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 73.75%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-in-foot-phone { 0%, 73.3% { opacity: 0; transform: scale(1.1); filter: blur(6px); } 77.5%, 94% { opacity: 1; transform: none; filter: blur(0); } 99%, 100% { opacity: 0; transform: none; filter: blur(0); } }
@keyframes build-ghost-title-phone { 0%, 50% { opacity: 0; } 53%, 64.25% { opacity: 1; } 66.75%, 100% { opacity: 0; } }
@keyframes build-ghost-cta-phone { 0%, 50% { opacity: 0; } 53%, 69.75% { opacity: 1; } 72.25%, 100% { opacity: 0; } }
@keyframes build-reveal { 0%, 51% { clip-path: inset(0 0 100% 0); } 76%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-ch1-desktop { 0%, 64.15% { opacity: 0; transform: translateY(.45em); } 66.55%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch2-desktop { 0%, 64.31% { opacity: 0; transform: translateY(.45em); } 66.71%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch3-desktop { 0%, 64.47% { opacity: 0; transform: translateY(.45em); } 66.87%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch4-desktop { 0%, 64.63% { opacity: 0; transform: translateY(.45em); } 67.03%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch5-desktop { 0%, 64.79% { opacity: 0; transform: translateY(.45em); } 67.19%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch6-desktop { 0%, 64.95% { opacity: 0; transform: translateY(.45em); } 67.35%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch7-desktop { 0%, 65.11% { opacity: 0; transform: translateY(.45em); } 67.51%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch8-desktop { 0%, 65.27% { opacity: 0; transform: translateY(.45em); } 67.67%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch9-desktop { 0%, 65.43% { opacity: 0; transform: translateY(.45em); } 67.83%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch10-desktop { 0%, 65.59% { opacity: 0; transform: translateY(.45em); } 67.99%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch11-desktop { 0%, 65.75% { opacity: 0; transform: translateY(.45em); } 68.15%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch12-desktop { 0%, 65.91% { opacity: 0; transform: translateY(.45em); } 68.31%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch13-desktop { 0%, 66.07% { opacity: 0; transform: translateY(.45em); } 68.47%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch14-desktop { 0%, 66.23% { opacity: 0; transform: translateY(.45em); } 68.63%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch15-desktop { 0%, 66.39% { opacity: 0; transform: translateY(.45em); } 68.79%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch16-desktop { 0%, 66.55% { opacity: 0; transform: translateY(.45em); } 68.95%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch17-desktop { 0%, 66.71% { opacity: 0; transform: translateY(.45em); } 69.11%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch18-desktop { 0%, 66.87% { opacity: 0; transform: translateY(.45em); } 69.27%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch19-desktop { 0%, 67.03% { opacity: 0; transform: translateY(.45em); } 69.43%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch20-desktop { 0%, 67.19% { opacity: 0; transform: translateY(.45em); } 69.59%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch21-desktop { 0%, 67.35% { opacity: 0; transform: translateY(.45em); } 69.75%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch22-desktop { 0%, 67.51% { opacity: 0; transform: translateY(.45em); } 69.91%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch23-desktop { 0%, 67.67% { opacity: 0; transform: translateY(.45em); } 70.07%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch24-desktop { 0%, 67.83% { opacity: 0; transform: translateY(.45em); } 70.23%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch25-desktop { 0%, 67.99% { opacity: 0; transform: translateY(.45em); } 70.39%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch26-desktop { 0%, 68.15% { opacity: 0; transform: translateY(.45em); } 70.55%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch27-desktop { 0%, 68.31% { opacity: 0; transform: translateY(.45em); } 70.71%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch28-desktop { 0%, 68.47% { opacity: 0; transform: translateY(.45em); } 70.87%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch1-tablet { 0%, 65.15% { opacity: 0; transform: translateY(.45em); } 67.55%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch2-tablet { 0%, 65.31% { opacity: 0; transform: translateY(.45em); } 67.71%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch3-tablet { 0%, 65.47% { opacity: 0; transform: translateY(.45em); } 67.87%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch4-tablet { 0%, 65.63% { opacity: 0; transform: translateY(.45em); } 68.03%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch5-tablet { 0%, 65.79% { opacity: 0; transform: translateY(.45em); } 68.19%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch6-tablet { 0%, 65.95% { opacity: 0; transform: translateY(.45em); } 68.35%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch7-tablet { 0%, 66.11% { opacity: 0; transform: translateY(.45em); } 68.51%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch8-tablet { 0%, 66.27% { opacity: 0; transform: translateY(.45em); } 68.67%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch9-tablet { 0%, 66.43% { opacity: 0; transform: translateY(.45em); } 68.83%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch10-tablet { 0%, 66.59% { opacity: 0; transform: translateY(.45em); } 68.99%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch11-tablet { 0%, 66.75% { opacity: 0; transform: translateY(.45em); } 69.15%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch12-tablet { 0%, 66.91% { opacity: 0; transform: translateY(.45em); } 69.31%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch13-tablet { 0%, 67.07% { opacity: 0; transform: translateY(.45em); } 69.47%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch14-tablet { 0%, 67.23% { opacity: 0; transform: translateY(.45em); } 69.63%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch15-tablet { 0%, 67.39% { opacity: 0; transform: translateY(.45em); } 69.79%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch16-tablet { 0%, 67.55% { opacity: 0; transform: translateY(.45em); } 69.95%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch17-tablet { 0%, 67.71% { opacity: 0; transform: translateY(.45em); } 70.11%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch18-tablet { 0%, 67.87% { opacity: 0; transform: translateY(.45em); } 70.27%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch19-tablet { 0%, 68.03% { opacity: 0; transform: translateY(.45em); } 70.43%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch20-tablet { 0%, 68.19% { opacity: 0; transform: translateY(.45em); } 70.59%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch21-tablet { 0%, 68.35% { opacity: 0; transform: translateY(.45em); } 70.75%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch22-tablet { 0%, 68.51% { opacity: 0; transform: translateY(.45em); } 70.91%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch23-tablet { 0%, 68.67% { opacity: 0; transform: translateY(.45em); } 71.07%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch24-tablet { 0%, 68.83% { opacity: 0; transform: translateY(.45em); } 71.23%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch25-tablet { 0%, 68.99% { opacity: 0; transform: translateY(.45em); } 71.39%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch26-tablet { 0%, 69.15% { opacity: 0; transform: translateY(.45em); } 71.55%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch27-tablet { 0%, 69.31% { opacity: 0; transform: translateY(.45em); } 71.71%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch28-tablet { 0%, 69.47% { opacity: 0; transform: translateY(.45em); } 71.87%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch1-phone { 0%, 64.65% { opacity: 0; transform: translateY(.45em); } 67.05%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch2-phone { 0%, 64.81% { opacity: 0; transform: translateY(.45em); } 67.21%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch3-phone { 0%, 64.97% { opacity: 0; transform: translateY(.45em); } 67.37%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch4-phone { 0%, 65.13% { opacity: 0; transform: translateY(.45em); } 67.53%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch5-phone { 0%, 65.29% { opacity: 0; transform: translateY(.45em); } 67.69%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch6-phone { 0%, 65.45% { opacity: 0; transform: translateY(.45em); } 67.85%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch7-phone { 0%, 65.61% { opacity: 0; transform: translateY(.45em); } 68.01%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch8-phone { 0%, 65.77% { opacity: 0; transform: translateY(.45em); } 68.17%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch9-phone { 0%, 65.93% { opacity: 0; transform: translateY(.45em); } 68.33%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch10-phone { 0%, 66.09% { opacity: 0; transform: translateY(.45em); } 68.49%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch11-phone { 0%, 66.25% { opacity: 0; transform: translateY(.45em); } 68.65%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch12-phone { 0%, 66.41% { opacity: 0; transform: translateY(.45em); } 68.81%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch13-phone { 0%, 66.57% { opacity: 0; transform: translateY(.45em); } 68.97%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch14-phone { 0%, 66.73% { opacity: 0; transform: translateY(.45em); } 69.13%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch15-phone { 0%, 66.89% { opacity: 0; transform: translateY(.45em); } 69.29%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch16-phone { 0%, 67.05% { opacity: 0; transform: translateY(.45em); } 69.45%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch17-phone { 0%, 67.21% { opacity: 0; transform: translateY(.45em); } 69.61%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch18-phone { 0%, 67.37% { opacity: 0; transform: translateY(.45em); } 69.77%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch19-phone { 0%, 67.53% { opacity: 0; transform: translateY(.45em); } 69.93%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch20-phone { 0%, 67.69% { opacity: 0; transform: translateY(.45em); } 70.09%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch21-phone { 0%, 67.85% { opacity: 0; transform: translateY(.45em); } 70.25%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch22-phone { 0%, 68.01% { opacity: 0; transform: translateY(.45em); } 70.41%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch23-phone { 0%, 68.17% { opacity: 0; transform: translateY(.45em); } 70.57%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch24-phone { 0%, 68.33% { opacity: 0; transform: translateY(.45em); } 70.73%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch25-phone { 0%, 68.49% { opacity: 0; transform: translateY(.45em); } 70.89%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch26-phone { 0%, 68.65% { opacity: 0; transform: translateY(.45em); } 71.05%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch27-phone { 0%, 68.81% { opacity: 0; transform: translateY(.45em); } 71.21%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-ch28-phone { 0%, 68.97% { opacity: 0; transform: translateY(.45em); } 71.37%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: none; } }
@keyframes build-code { 0%, 6% { opacity: 0; } 8%, 43% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes build-line1 { 0%, 8% { clip-path: inset(0 100% 0 0); } 13%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line2 { 0%, 9.5% { clip-path: inset(0 100% 0 0); } 14.5%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line3 { 0%, 11% { clip-path: inset(0 100% 0 0); } 16%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line4 { 0%, 12.5% { clip-path: inset(0 100% 0 0); } 17.5%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line5 { 0%, 14% { clip-path: inset(0 100% 0 0); } 19%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line6 { 0%, 15.5% { clip-path: inset(0 100% 0 0); } 20.5%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line7 { 0%, 17% { clip-path: inset(0 100% 0 0); } 22%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line8 { 0%, 18.5% { clip-path: inset(0 100% 0 0); } 23.5%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line9 { 0%, 20% { clip-path: inset(0 100% 0 0); } 25%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line10 { 0%, 21.5% { clip-path: inset(0 100% 0 0); } 26.5%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line11 { 0%, 23% { clip-path: inset(0 100% 0 0); } 28%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line12 { 0%, 24.5% { clip-path: inset(0 100% 0 0); } 29.5%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-line13 { 0%, 26% { clip-path: inset(0 100% 0 0); } 31%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes build-bar { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes build-step1 { 0%, 5% { opacity: 0; transform: translateY(.4em); } 6%, 45% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes build-step2 { 0%, 46% { opacity: 0; transform: translateY(.4em); } 47%, 50% { opacity: 1; transform: none; } 51%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes build-step3 { 0%, 51% { opacity: 0; transform: translateY(.4em); } 52%, 55% { opacity: 1; transform: none; } 56%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes build-step4 { 0%, 56% { opacity: 0; transform: translateY(.4em); } 57%, 61% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes build-step5 { 0%, 62% { opacity: 0; transform: translateY(.4em); } 63%, 65% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes build-step6 { 0%, 66% { opacity: 0; transform: translateY(.4em); } 67%, 71% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes build-step7 { 0%, 72% { opacity: 0; transform: translateY(.4em); } 73%, 77% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(-.4em); } }
@keyframes build-step8 { 0%, 78% { opacity: 0; transform: translateY(.4em); } 79%, 95% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-.4em); } }