/*
 * Drawings: every animation for the SVGs in brand/drawings/, and nothing else.
 *
 * Generated by site/tools/drawings/draw.mjs from the modules in site/tools/drawings/d/.
 * Edit those and run the script again; a hand edit here is lost on the next run.
 *
 * Each drawing is inlined in its page (an <img> cannot be reached by a stylesheet). Its root is
 * <svg class="dw dw-NAME">, every rule below is scoped to that class, every inner class is
 * NAME__part and every keyframes name is NAME--step, so drawings never collide.
 *
 * The markup of every drawing is its finished picture. Entrances run from a hidden or
 * displaced state back to that picture and loops start and end on it, so a drawing with no
 * animation at all, under prefers-reduced-motion or as a plain image, is a complete still frame.
 */

.dw {
  display: block;
  width: 100%;
  height: auto;
}

/* Lettering in the site's typewriter face when the page provides one. */
.dw text {
  font-family: var(--font-type, "Courier Prime"), "Courier New", Courier, monospace;
}

/* / : the press room, the point cloud of the WebGL opening drawn as dots; the room first, the lamps last. */

.dw-pressroom .pressroom__room { animation: pressroom--in 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both; }
.dw-pressroom .pressroom__things { animation: pressroom--in 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s both; }
.dw-pressroom .pressroom__ink { animation: pressroom--in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.38s both; }
.dw-pressroom .pressroom__glow { animation: pressroom--in 0.8s ease-out 0.55s both, pressroom--breathe 6.4s ease-in-out 1.6s infinite; }
.dw-pressroom .pressroom__dust { animation: pressroom--in 1.2s ease-out 0.6s both, pressroom--drift 15s ease-in-out 1.8s infinite alternate; }
@keyframes pressroom--in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pressroom--breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.74; }
}
@keyframes pressroom--drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(7px, -11px); }
}

/* /catalog: five sheets drop onto the stack; the top corner lifts now and then. */

.dw-sheets-stack .sheets-stack__sheet { animation: sheets-stack--drop 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
.dw-sheets-stack .sheets-stack__sheet--1 { animation-delay: 0.1s; }
.dw-sheets-stack .sheets-stack__sheet--2 { animation-delay: 0.24s; }
.dw-sheets-stack .sheets-stack__sheet--3 { animation-delay: 0.38s; }
.dw-sheets-stack .sheets-stack__sheet--4 { animation-delay: 0.52s; }
.dw-sheets-stack .sheets-stack__sheet--5 { animation-delay: 0.66s; }
@keyframes sheets-stack--drop {
  from { opacity: 0; translate: 0 -90px; }
  to   { opacity: 1; translate: 0 0; }
}

.dw-sheets-stack .sheets-stack__corner { transform-box: fill-box; transform-origin: 100% 100%; animation: sheets-stack--lift 7s ease-in-out 2s infinite; }
@keyframes sheets-stack--lift {
  0%, 70%, 100% { transform: rotate(0deg); }
  80%           { transform: rotate(-9deg); }
}

/* /read: the page rises out of the platen; its last line is typed again and again. */

.dw-platen-feed .platen-feed__sheet { animation: platen-feed--rise 1.15s cubic-bezier(0.25, 0.8, 0.25, 1) both; }
@keyframes platen-feed--rise {
  from { transform: translateY(330px); opacity: 0.2; }
  to   { transform: translateY(0); opacity: 1; }
}

.dw-platen-feed .platen-feed__ribs { animation: platen-feed--turn 1.15s cubic-bezier(0.25, 0.8, 0.25, 1) both; }
@keyframes platen-feed--turn {
  from { transform: translateX(-96px); }
  to   { transform: translateX(0); }
}

.dw-platen-feed .platen-feed__fresh { animation: platen-feed--type 6s steps(24, end) 1.6s infinite; }
@keyframes platen-feed--type {
  0%        { clip-path: inset(0 100% 0 0); }
  40%, 100% { clip-path: inset(0 0 0 0); }
}

/* /tree: the rings grow out generation by generation; a light runs out along a branch. */

.dw-copy-tree .copy-tree__g1, .dw-copy-tree .copy-tree__g2, .dw-copy-tree .copy-tree__g3, .dw-copy-tree .copy-tree__g4, .dw-copy-tree .copy-tree__ring { animation: copy-tree--grow 0.45s ease-out both; }
.dw-copy-tree .copy-tree__g1, .dw-copy-tree .copy-tree__ring--1 { animation-delay: 0.1s; }
.dw-copy-tree .copy-tree__g2, .dw-copy-tree .copy-tree__ring--2 { animation-delay: 0.34s; }
.dw-copy-tree .copy-tree__g3, .dw-copy-tree .copy-tree__ring--3 { animation-delay: 0.58s; }
.dw-copy-tree .copy-tree__g4, .dw-copy-tree .copy-tree__ring--4 { animation-delay: 0.82s; }
@keyframes copy-tree--grow {
  from { opacity: 0; }
}

.dw-copy-tree .copy-tree__spark { animation: copy-tree--spark 6s ease-in-out 1.8s infinite; }
@keyframes copy-tree--spark {
  0%, 30%, 100% { opacity: 0; transform: translate(-69.2px, 50.2px); }
  5%            { opacity: 1; transform: translate(-69.2px, 50.2px); }
  22%           { opacity: 1; transform: translate(0, 0); }
}

/* /retype: the carbons drop in back to front, the guide steps to its line, the green line types out. */

.dw-copy-holder .copy-holder__layer { animation: copy-holder--drop 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) both; }
.dw-copy-holder .copy-holder__layer--4 { animation-delay: 0s; }
.dw-copy-holder .copy-holder__layer--3 { animation-delay: 0.1s; }
.dw-copy-holder .copy-holder__layer--2 { animation-delay: 0.2s; }
.dw-copy-holder .copy-holder__layer--1 { animation-delay: 0.3s; }
.dw-copy-holder .copy-holder__layer--0 { animation-delay: 0.4s; }
@keyframes copy-holder--drop {
  from { transform: translateY(-110px); opacity: 0; }
  to   { transform: none; }
}

.dw-copy-holder .copy-holder__guide { animation: copy-holder--step 0.6s cubic-bezier(0.5, 0, 0.3, 1) 0.5s both; }
@keyframes copy-holder--step {
  from { transform: translateY(-21px); }
  to   { transform: none; }
}

.dw-copy-holder .copy-holder__now { stroke-dasharray: 1; animation: copy-holder--type 1s steps(12, end) 0.8s both; }
@keyframes copy-holder--type {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.dw-copy-holder .copy-holder__caret { animation: copy-holder--show 0.01s 1.8s both, copy-holder--blink 1.1s step-end 1.8s infinite; }
@keyframes copy-holder--show {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes copy-holder--blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.dw-copy-holder .copy-holder__carbon { animation: copy-holder--drop 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) both, copy-holder--glint 7s ease-in-out 2.5s infinite; }
.dw-copy-holder .copy-holder__carbon--4 { animation-delay: 0s, 2.5s; }
.dw-copy-holder .copy-holder__carbon--3 { animation-delay: 0.1s, 2.85s; }
.dw-copy-holder .copy-holder__carbon--2 { animation-delay: 0.2s, 3.2s; }
.dw-copy-holder .copy-holder__carbon--1 { animation-delay: 0.3s, 3.55s; }
@keyframes copy-holder--glint {
  0%, 8%, 100% { stroke: #8C93FF; }
  4%           { stroke: #F2F4F7; }
}

/* /erika: seven come out of the dark; a light passes along them without resting. */

.dw-seven-silhouettes .seven-silhouettes__person { animation: seven-silhouettes--appear 0.5s ease-out both; }
.dw-seven-silhouettes .seven-silhouettes__person--1 { animation-delay: 0.1s; }
.dw-seven-silhouettes .seven-silhouettes__person--2 { animation-delay: 0.2s; }
.dw-seven-silhouettes .seven-silhouettes__person--3 { animation-delay: 0.3s; }
.dw-seven-silhouettes .seven-silhouettes__person--4 { animation-delay: 0.4s; }
.dw-seven-silhouettes .seven-silhouettes__person--5 { animation-delay: 0.5s; }
.dw-seven-silhouettes .seven-silhouettes__person--6 { animation-delay: 0.6s; }
.dw-seven-silhouettes .seven-silhouettes__person--7 { animation-delay: 0.7s; }
@keyframes seven-silhouettes--appear {
  from { opacity: 0; transform: translateY(24px); }
}

.dw-seven-silhouettes .seven-silhouettes__person circle, .dw-seven-silhouettes .seven-silhouettes__person path { animation: seven-silhouettes--pass 9s ease-in-out 2s infinite; }
.dw-seven-silhouettes .seven-silhouettes__person--1 circle, .dw-seven-silhouettes .seven-silhouettes__person--1 path { animation-delay: 2s; }
.dw-seven-silhouettes .seven-silhouettes__person--2 circle, .dw-seven-silhouettes .seven-silhouettes__person--2 path { animation-delay: 2.18s; }
.dw-seven-silhouettes .seven-silhouettes__person--3 circle, .dw-seven-silhouettes .seven-silhouettes__person--3 path { animation-delay: 2.36s; }
.dw-seven-silhouettes .seven-silhouettes__person--4 circle, .dw-seven-silhouettes .seven-silhouettes__person--4 path { animation-delay: 2.54s; }
.dw-seven-silhouettes .seven-silhouettes__person--5 circle, .dw-seven-silhouettes .seven-silhouettes__person--5 path { animation-delay: 2.72s; }
.dw-seven-silhouettes .seven-silhouettes__person--6 circle, .dw-seven-silhouettes .seven-silhouettes__person--6 path { animation-delay: 2.9s; }
.dw-seven-silhouettes .seven-silhouettes__person--7 circle, .dw-seven-silhouettes .seven-silhouettes__person--7 path { animation-delay: 3.08s; }
@keyframes seven-silhouettes--pass {
  0%, 12%, 100% { stroke: #A4ABB5; }
  6%            { stroke: #4ADE80; }
}

/* /ledger: the ink rises; then drops run down the four streams into the well. */

.dw-ink-well .ink-well__ink { animation: ink-well--fill 1.2s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
@keyframes ink-well--fill {
  from { transform: translateY(150px); }
  to   { transform: translateY(0); }
}

.dw-ink-well .ink-well__stream { animation: ink-well--run 1.4s linear infinite; }
.dw-ink-well .ink-well__stream--1 { animation-delay: 0s; }
.dw-ink-well .ink-well__stream--2 { animation-delay: -0.35s; }
.dw-ink-well .ink-well__stream--3 { animation-delay: -0.7s; }
.dw-ink-well .ink-well__stream--4 { animation-delay: -1.05s; }
@keyframes ink-well--run {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -32; }
}

.dw-ink-well .ink-well__coin { animation: ink-well--bob 5s ease-in-out infinite; }
.dw-ink-well .ink-well__coin--1 { animation-delay: 1.2s; }
.dw-ink-well .ink-well__coin--2 { animation-delay: 1.8s; }
.dw-ink-well .ink-well__coin--3 { animation-delay: 2.4s; }
.dw-ink-well .ink-well__coin--4 { animation-delay: 3s; }
@keyframes ink-well--bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

.dw-ink-well .ink-well__ripple { animation: ink-well--ripple 2s ease-out 1.4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ink-well--ripple {
  0%        { opacity: 0.7; transform: scale(0.3); }
  70%, 100% { opacity: 0; transform: scale(1.25); }
}

/* /how: the stamp presses the foot of the page and goes back; the four ticks light in turn. */

.dw-colophon-stamp .colophon-stamp__stamp { animation: colophon-stamp--press 1.4s cubic-bezier(0.5, 0, 0.3, 1) both; }
@keyframes colophon-stamp--press {
  0%   { transform: translate(-372px, 64px); opacity: 0; }
  15%  { opacity: 1; }
  40%  { transform: translate(-372px, 154px); }
  50%  { transform: translate(-372px, 154px); }
  62%  { transform: translate(-372px, 84px); }
  100% { transform: none; opacity: 1; }
}

.dw-colophon-stamp .colophon-stamp__print { animation: colophon-stamp--ink 1.4s linear both; }
@keyframes colophon-stamp--ink {
  0%, 44% { opacity: 0; }
  45%     { opacity: 1; }
}

.dw-colophon-stamp .colophon-stamp__tick { animation: colophon-stamp--tick 6s ease-in-out 2s infinite; }
.dw-colophon-stamp .colophon-stamp__tick--1 { animation-delay: 2s; }
.dw-colophon-stamp .colophon-stamp__tick--2 { animation-delay: 2.4s; }
.dw-colophon-stamp .colophon-stamp__tick--3 { animation-delay: 2.8s; }
.dw-colophon-stamp .colophon-stamp__tick--4 { animation-delay: 3.2s; }
@keyframes colophon-stamp--tick {
  0%, 14%, 100% { stroke: #4ADE80; }
  7%            { stroke: #F2F4F7; }
}

/* /how, the colophon: ink runs from the coin through its processor into the press. */

.dw-how-colophon-route .how-colophon-route__drop { animation: how-colophon-route--run 3.6s linear infinite; opacity: 0; }
.dw-how-colophon-route .how-colophon-route__drop--1 { animation-delay: 0s; }
.dw-how-colophon-route .how-colophon-route__drop--2 { animation-delay: 1.2s; }
.dw-how-colophon-route .how-colophon-route__drop--3 { animation-delay: 2.4s; }
@keyframes how-colophon-route--run {
  0%   { opacity: 0; transform: translateX(0); }
  8%   { opacity: 1; }
  45%  { transform: translateX(190px); }
  55%  { transform: translateX(410px); }
  92%  { opacity: 1; transform: translateX(600px); }
  100% { opacity: 0; transform: translateX(600px); }
}

/* /how, every copy pays the press: ink runs down each green line into the press, never between copies. */

.dw-how-pays-the-press .how-pays-the-press__flow { animation: how-pays-the-press--ink 1.8s linear infinite; }
.dw-how-pays-the-press .how-pays-the-press__flow--1 { animation-delay: -0.6s; }
.dw-how-pays-the-press .how-pays-the-press__flow--2 { animation-delay: -1.2s; }
.dw-how-pays-the-press .how-pays-the-press__flow--3 { animation-delay: -1.8s; }
@keyframes how-pays-the-press--ink {
  from { stroke-dashoffset: 26; }
  to   { stroke-dashoffset: 0; }
}

/* /how, four carbons: each code lights in turn and its child copy appears. */

.dw-how-four-carbons .how-four-carbons__child { animation: how-four-carbons--type 8s ease-in-out infinite; }
.dw-how-four-carbons .how-four-carbons__child--1 { animation-delay: 0s; }
.dw-how-four-carbons .how-four-carbons__child--2 { animation-delay: 0.5s; }
.dw-how-four-carbons .how-four-carbons__child--3 { animation-delay: 1s; }
.dw-how-four-carbons .how-four-carbons__child--4 { animation-delay: 1.5s; }
@keyframes how-four-carbons--type {
  0%, 100% { opacity: 0.64; }
  10%      { opacity: 0.2; }
  20%      { opacity: 0.64; }
}

/* /how, generations: a light passes down the line of fading copies. */

.dw-how-generations .how-generations__sheet rect { animation: how-generations--pass 7s ease-in-out infinite; }
.dw-how-generations .how-generations__sheet--1 rect { animation-delay: 0s; }
.dw-how-generations .how-generations__sheet--2 rect { animation-delay: 0.35s; }
.dw-how-generations .how-generations__sheet--3 rect { animation-delay: 0.7s; }
.dw-how-generations .how-generations__sheet--4 rect { animation-delay: 1.05s; }
@keyframes how-generations--pass {
  0%, 12%, 100% { fill: #F2F4F7; }
  6%            { fill: #4ADE80; }
}

/* /how, per sheet: each sheet typed rings the coin; the copies stay at zero. */

.dw-how-per-sheet .how-per-sheet__coin { animation: how-per-sheet--ring 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes how-per-sheet--ring {
  0%, 30%, 100% { transform: scale(1); }
  15%           { transform: scale(1.12); }
}

.dw-how-per-sheet .how-per-sheet__sheet--3 { animation: how-per-sheet--lift 4s ease-in-out infinite; }
@keyframes how-per-sheet--lift {
  0%, 30%, 100% { transform: translateY(0); }
  12%           { transform: translateY(-14px); }
}

/* /retype: the four cards light one after another. */

.dw-carbon-codes .carbon-codes__card rect { animation: carbon-codes--glow 6s ease-in-out infinite; }
.dw-carbon-codes .carbon-codes__card--1 rect { animation-delay: 0s; }
.dw-carbon-codes .carbon-codes__card--2 rect { animation-delay: 0.4s; }
.dw-carbon-codes .carbon-codes__card--3 rect { animation-delay: 0.8s; }
.dw-carbon-codes .carbon-codes__card--4 rect { animation-delay: 1.2s; }
@keyframes carbon-codes--glow {
  0%, 14%, 100% { stroke: #8C93FF; }
  7%            { stroke: #F2F4F7; }
}

/* / : the Erika strikes "Copy this." and four carbons slide out, each fainter. */

.dw-typewriter-copy-this .typewriter-copy-this__carriage {
  animation: typewriter-copy-this--carriage 0.85s steps(10, end) 0.25s both;
}
@keyframes typewriter-copy-this--carriage {
  from { transform: translateX(216px); }
  to   { transform: translateX(0); }
}

.dw-typewriter-copy-this .typewriter-copy-this__ch { animation: typewriter-copy-this--ink 0.03s linear both; }
@keyframes typewriter-copy-this--ink { from { opacity: 0; } to { opacity: 1; } }

.dw-typewriter-copy-this .typewriter-copy-this__ch--0 { animation-delay: 0.28s; }
.dw-typewriter-copy-this .typewriter-copy-this__ch--1 { animation-delay: 0.365s; }
.dw-typewriter-copy-this .typewriter-copy-this__ch--2 { animation-delay: 0.45s; }
.dw-typewriter-copy-this .typewriter-copy-this__ch--3 { animation-delay: 0.535s; }
.dw-typewriter-copy-this .typewriter-copy-this__ch--5 { animation-delay: 0.705s; }
.dw-typewriter-copy-this .typewriter-copy-this__ch--6 { animation-delay: 0.79s; }
.dw-typewriter-copy-this .typewriter-copy-this__ch--7 { animation-delay: 0.875s; }
.dw-typewriter-copy-this .typewriter-copy-this__ch--8 { animation-delay: 0.96s; }
.dw-typewriter-copy-this .typewriter-copy-this__ch--9 { animation-delay: 1.045s; }

.dw-typewriter-copy-this .typewriter-copy-this__key { animation: typewriter-copy-this--press 0.085s ease-out both; }
.dw-typewriter-copy-this .typewriter-copy-this__hit { animation: typewriter-copy-this--hit 0.085s ease-out both; }
@keyframes typewriter-copy-this--press {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(3px); }
}
@keyframes typewriter-copy-this--hit {
  0%, 100% { opacity: 0; }
  25%      { opacity: 1; }
}

.dw-typewriter-copy-this .typewriter-copy-this__key--0, .dw-typewriter-copy-this .typewriter-copy-this__hit--0 { animation-delay: 0.25s; }
.dw-typewriter-copy-this .typewriter-copy-this__key--1, .dw-typewriter-copy-this .typewriter-copy-this__hit--1 { animation-delay: 0.335s; }
.dw-typewriter-copy-this .typewriter-copy-this__key--2, .dw-typewriter-copy-this .typewriter-copy-this__hit--2 { animation-delay: 0.42s; }
.dw-typewriter-copy-this .typewriter-copy-this__key--3, .dw-typewriter-copy-this .typewriter-copy-this__hit--3 { animation-delay: 0.505s; }
.dw-typewriter-copy-this .typewriter-copy-this__key--4, .dw-typewriter-copy-this .typewriter-copy-this__hit--4 { animation-delay: 0.59s; }
.dw-typewriter-copy-this .typewriter-copy-this__key--5, .dw-typewriter-copy-this .typewriter-copy-this__hit--5 { animation-delay: 0.675s; }
.dw-typewriter-copy-this .typewriter-copy-this__key--6, .dw-typewriter-copy-this .typewriter-copy-this__hit--6 { animation-delay: 0.76s; }
.dw-typewriter-copy-this .typewriter-copy-this__key--7, .dw-typewriter-copy-this .typewriter-copy-this__hit--7 { animation-delay: 0.845s; }
.dw-typewriter-copy-this .typewriter-copy-this__key--8, .dw-typewriter-copy-this .typewriter-copy-this__hit--8 { animation-delay: 0.93s; }
.dw-typewriter-copy-this .typewriter-copy-this__key--9, .dw-typewriter-copy-this .typewriter-copy-this__hit--9 { animation-delay: 1.015s; }

.dw-typewriter-copy-this .typewriter-copy-this__key--s, .dw-typewriter-copy-this .typewriter-copy-this__hit--s { animation-duration: 0.153s; animation-delay: 0.216s; }

.dw-typewriter-copy-this .typewriter-copy-this__bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: typewriter-copy-this--strike 0.85s linear 0.25s both;
}
@keyframes typewriter-copy-this--strike {
  0% { opacity: 0; transform: scaleY(0.4); }
  0% { opacity: 0; transform: scaleY(0.4); }
  1.5% { opacity: 1; }
  4% { opacity: 1; transform: scaleY(1); }
  9.5% { opacity: 0; transform: scaleY(0.4); }
  10% { opacity: 0; transform: scaleY(0.4); }
  11.5% { opacity: 1; }
  14% { opacity: 1; transform: scaleY(1); }
  19.5% { opacity: 0; transform: scaleY(0.4); }
  20% { opacity: 0; transform: scaleY(0.4); }
  21.5% { opacity: 1; }
  24% { opacity: 1; transform: scaleY(1); }
  29.5% { opacity: 0; transform: scaleY(0.4); }
  30% { opacity: 0; transform: scaleY(0.4); }
  31.5% { opacity: 1; }
  34% { opacity: 1; transform: scaleY(1); }
  39.5% { opacity: 0; transform: scaleY(0.4); }
  50% { opacity: 0; transform: scaleY(0.4); }
  51.5% { opacity: 1; }
  54% { opacity: 1; transform: scaleY(1); }
  59.5% { opacity: 0; transform: scaleY(0.4); }
  60% { opacity: 0; transform: scaleY(0.4); }
  61.5% { opacity: 1; }
  64% { opacity: 1; transform: scaleY(1); }
  69.5% { opacity: 0; transform: scaleY(0.4); }
  70% { opacity: 0; transform: scaleY(0.4); }
  71.5% { opacity: 1; }
  74% { opacity: 1; transform: scaleY(1); }
  79.5% { opacity: 0; transform: scaleY(0.4); }
  80% { opacity: 0; transform: scaleY(0.4); }
  81.5% { opacity: 1; }
  84% { opacity: 1; transform: scaleY(1); }
  89.5% { opacity: 0; transform: scaleY(0.4); }
  90% { opacity: 0; transform: scaleY(0.4); }
  91.5% { opacity: 1; }
  94% { opacity: 1; transform: scaleY(1); }
  99.5% { opacity: 0; transform: scaleY(0.4); }
  100% { opacity: 0; transform: scaleY(0.4); }
}

.dw-typewriter-copy-this .typewriter-copy-this__roll { animation: typewriter-copy-this--roll 0.42s cubic-bezier(0.45, 0, 0.25, 1) 1.14s both; }
.dw-typewriter-copy-this .typewriter-copy-this__grip { animation: typewriter-copy-this--grip 0.42s cubic-bezier(0.45, 0, 0.25, 1) 1.14s both; }
@keyframes typewriter-copy-this--roll { from { transform: translateY(180px); } to { transform: translateY(0); } }
@keyframes typewriter-copy-this--grip { from { transform: translateY(44px); } to { transform: translateY(0); } }

.dw-typewriter-copy-this .typewriter-copy-this__carbon { animation-duration: 0.62s; animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1); animation-fill-mode: both; }

.dw-typewriter-copy-this .typewriter-copy-this__carbon--1 { animation-name: typewriter-copy-this--slide-1; animation-delay: 1.34s; }
@keyframes typewriter-copy-this--slide-1 {
  0%   { opacity: 0; transform: translate(-619px, -16px); }
  14%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0); }
}

.dw-typewriter-copy-this .typewriter-copy-this__carbon--2 { animation-name: typewriter-copy-this--slide-2; animation-delay: 1.43s; }
@keyframes typewriter-copy-this--slide-2 {
  0%   { opacity: 0; transform: translate(-649px, -96px); }
  14%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0); }
}

.dw-typewriter-copy-this .typewriter-copy-this__carbon--3 { animation-name: typewriter-copy-this--slide-3; animation-delay: 1.52s; }
@keyframes typewriter-copy-this--slide-3 {
  0%   { opacity: 0; transform: translate(-679px, -176px); }
  14%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0); }
}

.dw-typewriter-copy-this .typewriter-copy-this__carbon--4 { animation-name: typewriter-copy-this--slide-4; animation-delay: 1.61s; }
@keyframes typewriter-copy-this--slide-4 {
  0%   { opacity: 0; transform: translate(-709px, -256px); }
  14%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0); }
}

.dw-typewriter-copy-this .typewriter-copy-this__ink { animation: typewriter-copy-this--pulse 8s ease-in-out 3s infinite; }
.dw-typewriter-copy-this .typewriter-copy-this__ink--1 { animation-delay: 3s; }
.dw-typewriter-copy-this .typewriter-copy-this__ink--2 { animation-delay: 3.32s; }
.dw-typewriter-copy-this .typewriter-copy-this__ink--3 { animation-delay: 3.64s; }
.dw-typewriter-copy-this .typewriter-copy-this__ink--4 { animation-delay: 3.96s; }
@keyframes typewriter-copy-this--pulse {
  0%, 12%, 100% { color: #8C93FF; }
  5%            { color: #F2F4F7; }
}

/* Reduced motion: no drawing moves; each shows its finished picture. */
@media (prefers-reduced-motion: reduce) {
  .dw,
  .dw * {
    animation: none !important;
    transition: none !important;
  }
}