/* Industry Applications: Makeline's tokens and type, on ink.
   The apps carry the colour; the family never does. See DESIGN.md. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #141414;
  --ink-rule: #2c2c2a;
  --concrete: #ededea;
  --white: #ffffff;
  --ink-soft: #c4c4be;
  --makeline: #8ee3b8;
  --take-care: #ff7088;
  --rewind: #c4b5f7;
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1rem, 4.5vw, 3.5rem);
  /* side padding that caps every band's content at 1200px */
  --side: max(var(--gutter), (100% - 1200px) / 2);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--concrete);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.head a:focus-visible,
.footer a:focus-visible {
  outline-color: var(--white);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
}

/* Ink head: the lockup and Privacy over a hairline, then the line */

.head {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 0 var(--side) 3.5rem;
  background: var(--ink);
  color: var(--white);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--ink-rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  text-decoration: none;
}

.brand svg {
  /* the mark is drawn on a 12-unit grid: 36 and 24 px keep its edges on whole pixels */
  display: block;
  width: 36px;
  height: 36px;
  fill: currentColor;
  transition: transform 0.6s var(--ease);
}

/* the nut turns half a turn, which lands it back on its edges */
.brand:hover svg {
  transform: rotate(180deg);
}

/* nav and footer links: an underline that draws in from the left */
.link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

.link::after {
  content: "";
  position: absolute;
  inset: auto 0 -0.25rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}

.link:hover::after,
.link[aria-current]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.display {
  max-width: 16em;
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

/* Home: one line, as loud as the page gets */

.shout {
  margin: clamp(0.5rem, 5vw, 4rem) 0 0;
  font-size: clamp(3rem, 9vw, 7.5rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-wrap: balance;
  animation: rise 0.8s var(--ease) backwards;
}

/* The apps: a card each in its own colour, side by side on ink.
   Subgrid lines up the marks, lines, descriptions and prices across cards. */

.apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0 var(--side) clamp(3rem, 7vw, 6rem);
  list-style: none;
}

.makeline {
  --accent: var(--makeline);
}

.take-care {
  --accent: var(--take-care);
}

.rewind {
  --accent: var(--rewind);
}

.app {
  position: relative; /* its link covers the whole card */
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0.875rem;
  padding: 1.75rem;
  border-radius: 14px;
  background: var(--accent);
  color: var(--ink);
  transition: transform 0.35s var(--ease);
  animation: rise 0.8s var(--ease) backwards;
}

.app:nth-child(1) {
  animation-delay: 0.1s;
}

.app:nth-child(2) {
  animation-delay: 0.18s;
}

.app:nth-child(3) {
  animation-delay: 0.26s;
}

.app > * {
  min-width: 0;
}

.app h2,
.app p {
  margin: 0;
}

.mark {
  display: block;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  fill: var(--ink);
  transition: transform 0.35s var(--ease);
}

.app h2 {
  max-width: 9em;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.app .desc {
  max-width: 32em;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(20 20 20 / 0.2);
  font-size: 0.9375rem;
}

.price {
  font-weight: 700;
}

.more {
  font-weight: 800;
  text-decoration: none;
}

.more::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

.more:focus-visible {
  outline: none;
}

.more:focus-visible::after {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* hover: the card lifts, the domain underlines, and each mark moves its own way */
@media (hover: hover) {
  .app:hover {
    transform: translateY(-6px);
  }

  .app:hover .more {
    text-decoration: underline;
  }

  .makeline:hover .mark {
    transform: translateY(-3px);
  }

  .take-care:hover .mark {
    transform: scale(1.1);
  }

  .rewind:hover .mark {
    transform: translateX(-5px);
  }
}

/* Concrete band: the privacy page's document */

.band {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3rem var(--side) 4rem;
}

.document {
  max-width: 68ch;
}

.document h2 {
  margin: 2.5rem 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.document p,
.document ul {
  margin: 0 0 1rem;
}

.updated {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

/* Footer */

.footer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem var(--side);
  background: var(--ink);
  color: var(--white);
  font-size: 0.9375rem;
}

/* on the all-ink home page, a hairline sets the footer off from the cards */
.home .footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--side);
  left: var(--side);
  height: 1px;
  background: var(--ink-rule);
}

.footer .brand {
  font-size: 1.125rem;
}

.footer .brand svg {
  width: 24px;
  height: 24px;
}

/* Home background: hyperspace. Stars stream out from a point right of the
   headline, over faint light-speed streaks that slowly twist. CSS only.
   The headline stays clear: only tiny stars and faint lines pass behind it. */

.home {
  position: relative;
  background: none;
}

.home .head,
.home .footer {
  background: none;
}

.bg {
  --vp: 74% 250px; /* where the stars come from */
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.streaks {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from var(--turn) at var(--vp), rgb(255 255 255 / 0.09) 0 0.3deg, transparent 0.3deg 3deg);
  -webkit-mask-image: radial-gradient(circle at var(--vp), transparent 90px, #000 560px);
  mask-image: radial-gradient(circle at var(--vp), transparent 90px, #000 560px);
  animation: turn 8s linear infinite;
}

@property --turn {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes turn {
  to {
    --turn: 3deg;
  }
}

.warp {
  position: absolute;
  top: 250px;
  left: 74%;
}

/* each layer is one dot with a box-shadow per star; it grows from the
   point outward, so the stars fly at you. Three layers, a third apart. */
.wl {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  opacity: 0;
  animation: warp 6s linear infinite;
}

.w1 {
  box-shadow:
    643px -400px var(--take-care),
    867px 414px var(--white),
    -716px -169px var(--white),
    234px 38px var(--white),
    585px 464px var(--makeline),
    -368px 193px var(--white),
    1256px -653px var(--ink-soft),
    205px -618px var(--white),
    -439px -830px var(--makeline),
    -483px -798px var(--ink-soft),
    80px 445px var(--ink-soft),
    -943px -912px var(--white),
    784px -493px var(--white),
    435px -42px var(--white),
    433px -674px var(--ink-soft),
    -20px 856px var(--makeline),
    986px -616px var(--rewind),
    -1090px 186px var(--white),
    777px 720px var(--white),
    340px 294px var(--ink-soft),
    1141px 11px var(--ink-soft),
    1195px -163px var(--ink-soft),
    -1176px 362px var(--rewind),
    -962px -558px var(--take-care),
    -229px -221px var(--white),
    279px 429px var(--white),
    -834px -434px var(--white),
    73px -206px var(--white),
    794px 223px var(--ink-soft),
    -566px -893px var(--ink-soft),
    461px -884px var(--ink-soft),
    -1195px -496px var(--take-care),
    449px -861px var(--ink-soft),
    -463px 630px var(--makeline),
    -880px 592px var(--ink-soft),
    -397px -586px var(--white),
    -179px -875px var(--ink-soft),
    -168px 70px var(--white),
    1166px 354px var(--rewind),
    -1087px 102px var(--ink-soft),
    208px -523px var(--white),
    -146px -17px var(--ink-soft),
    670px -459px var(--white),
    603px 942px var(--ink-soft),
    191px -578px var(--white),
    -400px 917px var(--makeline),
    -1273px -401px var(--white),
    -565px -456px var(--white),
    753px -869px var(--white),
    1235px -713px var(--white),
    938px 81px var(--white),
    -1203px 949px var(--white),
    -156px 359px var(--white),
    -360px 655px var(--ink-soft),
    757px 27px var(--ink-soft),
    1268px -226px var(--white),
    522px 881px var(--rewind),
    -636px -31px var(--white),
    1226px 838px var(--white),
    -161px -275px var(--ink-soft),
    523px 493px var(--white),
    -133px 116px var(--white),
    -1184px 449px var(--white),
    -1189px -681px var(--ink-soft),
    -212px -90px var(--white),
    -312px -540px var(--ink-soft),
    632px -830px var(--ink-soft),
    1035px 329px var(--rewind),
    -244px 607px var(--white),
    410px -67px var(--makeline),
    -920px 895px var(--ink-soft),
    -485px 238px var(--ink-soft),
    123px -196px var(--take-care),
    277px 203px var(--white),
    -1230px 460px var(--rewind),
    -664px 900px var(--white),
    -1145px 888px var(--white),
    401px 145px var(--white),
    254px 672px var(--white),
    146px -564px var(--white),
    -192px 674px var(--rewind),
    918px 57px var(--makeline),
    1203px -695px var(--white),
    888px 276px var(--rewind),
    314px 239px var(--white),
    -1007px -117px var(--white),
    25px -782px var(--take-care),
    61px -660px var(--take-care),
    -930px 526px var(--white),
    -28px 474px var(--white),
    485px -202px var(--white),
    -1179px -522px var(--ink-soft),
    1251px -42px var(--ink-soft),
    -566px -834px var(--take-care),
    1133px -252px var(--ink-soft),
    -324px 861px var(--white),
    -904px -491px var(--white),
    175px -200px var(--white),
    -476px 459px var(--ink-soft),
    -88px -499px var(--ink-soft),
    -700px 76px var(--rewind),
    61px -618px var(--ink-soft),
    603px -154px var(--makeline),
    751px 776px var(--rewind),
    -277px -8px var(--ink-soft),
    -1099px 753px var(--white),
    369px 151px var(--rewind),
    319px 117px var(--take-care),
    501px 408px var(--white),
    -865px 184px var(--makeline),
    -22px -233px var(--rewind),
    -1231px -291px var(--ink-soft),
    178px 345px var(--white),
    -603px -672px var(--ink-soft),
    -376px 690px var(--ink-soft),
    -750px -435px var(--ink-soft),
    -1112px -72px var(--white),
    -131px -114px var(--take-care),
    1152px -371px var(--ink-soft),
    1187px -293px var(--white),
    -785px -419px var(--take-care),
    -1167px 775px var(--take-care),
    1192px 680px var(--ink-soft),
    389px -82px var(--makeline),
    -222px -255px var(--ink-soft),
    255px 58px var(--ink-soft),
    336px 718px var(--white),
    -605px 665px var(--white),
    -257px -726px var(--white),
    841px 867px var(--white),
    169px 554px var(--white),
    -738px 809px var(--white),
    -435px 583px var(--white),
    975px -319px var(--white),
    -1247px 709px var(--white),
    -500px -616px var(--white),
    -86px 948px var(--white),
    -547px 634px var(--white),
    937px 815px var(--white),
    1185px 915px var(--white),
    193px 452px var(--ink-soft),
    896px -540px var(--ink-soft),
    -899px 130px var(--white),
    -782px 689px var(--ink-soft),
    769px 46px var(--take-care),
    -99px 7px var(--white),
    1297px 771px var(--ink-soft),
    399px 878px var(--ink-soft),
    -1185px 514px var(--white),
    -1216px 944px var(--white),
    713px 600px var(--white),
    -878px 777px var(--take-care),
    448px 173px var(--ink-soft),
    1189px -183px var(--white),
    -771px -237px var(--white),
    -351px -729px var(--ink-soft),
    -955px 700px var(--white),
    -1266px -439px var(--white),
    -837px 456px var(--take-care),
    1013px 311px var(--rewind),
    -1186px 264px var(--white),
    1104px 946px var(--ink-soft),
    1277px -527px var(--ink-soft),
    79px -83px var(--take-care),
    924px 750px var(--white),
    -310px -150px var(--white),
    1185px -260px var(--white),
    183px -659px var(--white),
    -799px 941px var(--ink-soft),
    1158px -671px var(--take-care),
    -163px -925px var(--white),
    -364px -698px var(--ink-soft),
    485px 547px var(--white),
    360px 600px var(--white),
    91px 266px var(--ink-soft),
    686px -249px var(--white),
    1257px 351px var(--ink-soft),
    1237px -210px var(--white),
    -356px -251px var(--ink-soft),
    -209px 304px var(--makeline),
    -781px 767px var(--ink-soft),
    503px 575px var(--white),
    -268px -247px var(--ink-soft),
    -881px -706px var(--rewind),
    1103px 344px var(--ink-soft),
    -593px -208px var(--ink-soft),
    -661px 270px var(--makeline),
    1064px -385px var(--ink-soft),
    75px -316px var(--white),
    153px 907px var(--white),
    758px 275px var(--ink-soft),
    -1009px -596px var(--makeline),
    337px 871px var(--white),
    20px 320px var(--white),
    1223px -234px var(--white),
    -85px -262px var(--white),
    327px -863px var(--ink-soft),
    45px 376px var(--ink-soft),
    -999px 759px var(--take-care),
    852px -743px var(--white),
    -630px 708px var(--ink-soft),
    -929px 429px var(--white),
    -598px 674px var(--ink-soft),
    -364px -372px var(--white),
    -345px -566px var(--white),
    -178px 356px var(--white),
    -432px 257px var(--white),
    661px 572px var(--white),
    577px -679px var(--ink-soft),
    304px -47px var(--ink-soft),
    292px -214px var(--white),
    -496px -461px var(--makeline),
    854px 656px var(--rewind),
    686px 77px var(--take-care),
    1223px 789px var(--rewind),
    91px -223px var(--ink-soft),
    -45px -671px var(--white),
    -996px 873px var(--take-care),
    -104px -151px var(--take-care),
    -113px 898px var(--ink-soft),
    -680px 463px var(--ink-soft),
    423px 232px var(--white),
    -566px -420px var(--ink-soft),
    394px 751px var(--white),
    -718px -847px var(--ink-soft),
    -822px 137px var(--white),
    -294px -626px var(--white),
    -801px 645px var(--ink-soft),
    255px 98px var(--ink-soft),
    -41px 281px var(--white),
    -512px -651px var(--white),
    256px 812px var(--ink-soft),
    -250px 132px var(--white),
    -528px -693px var(--white),
    959px -729px var(--white),
    -233px -880px var(--ink-soft),
    937px 906px var(--ink-soft),
    -856px 52px var(--makeline),
    829px -571px var(--makeline),
    -1064px -58px var(--white),
    -1212px 61px var(--ink-soft),
    171px 773px var(--ink-soft),
    -952px -791px var(--ink-soft),
    838px -19px var(--ink-soft),
    951px -132px var(--ink-soft),
    -1267px 784px var(--ink-soft),
    225px -101px var(--white),
    -1201px -264px var(--white),
    861px 438px var(--makeline),
    -166px -312px var(--white),
    -73px -116px var(--white),
    810px 579px var(--ink-soft),
    847px -785px var(--take-care),
    -1116px 830px var(--white),
    188px 468px var(--white),
    119px -782px var(--take-care),
    -795px 739px var(--white),
    -830px 704px var(--white),
    -1038px 284px var(--white),
    -751px 660px var(--ink-soft);
}

.w2 {
  box-shadow:
    882px -607px var(--white),
    945px 742px var(--white),
    -386px 754px var(--ink-soft),
    -1221px 403px var(--white),
    -143px -12px var(--makeline),
    566px 485px var(--white),
    -613px 737px var(--white),
    -1258px -366px var(--ink-soft),
    476px -528px var(--white),
    -1216px 324px var(--white),
    166px -351px var(--white),
    1210px 53px var(--white),
    399px -222px var(--white),
    -1136px 209px var(--white),
    906px 835px var(--ink-soft),
    1247px 186px var(--white),
    -77px 327px var(--ink-soft),
    -10px -665px var(--white),
    2px -461px var(--ink-soft),
    -463px 861px var(--white),
    -943px -815px var(--makeline),
    -582px 571px var(--ink-soft),
    94px -402px var(--white),
    491px -502px var(--white),
    -4px -260px var(--white),
    1286px 854px var(--white),
    666px 896px var(--white),
    -402px 321px var(--white),
    -916px 419px var(--ink-soft),
    721px 885px var(--white),
    806px -536px var(--take-care),
    616px 143px var(--ink-soft),
    77px -559px var(--take-care),
    -748px 259px var(--take-care),
    -610px 135px var(--ink-soft),
    533px -634px var(--white),
    -474px 381px var(--ink-soft),
    -427px -590px var(--white),
    1256px -806px var(--white),
    623px 940px var(--take-care),
    546px 108px var(--white),
    477px 391px var(--ink-soft),
    -480px -605px var(--makeline),
    -567px 381px var(--makeline),
    -710px -778px var(--ink-soft),
    -617px 531px var(--white),
    1264px 252px var(--take-care),
    -603px -862px var(--white),
    632px 545px var(--ink-soft),
    -728px -624px var(--white),
    585px 296px var(--rewind),
    1001px 189px var(--white),
    -692px 64px var(--white),
    -173px 107px var(--ink-soft),
    1135px -443px var(--ink-soft),
    1283px -417px var(--white),
    -977px -146px var(--white),
    946px -394px var(--ink-soft),
    1051px 421px var(--white),
    446px 279px var(--white),
    545px 752px var(--ink-soft),
    -785px -541px var(--take-care),
    482px 623px var(--ink-soft),
    -551px 426px var(--white),
    -1225px -933px var(--white),
    883px -662px var(--ink-soft),
    -76px 193px var(--white),
    -936px -52px var(--take-care),
    895px 720px var(--white),
    791px -591px var(--white),
    -1018px 676px var(--white),
    357px -898px var(--white),
    -1257px -641px var(--white),
    -973px -930px var(--white),
    219px -412px var(--white),
    166px -707px var(--take-care),
    1095px -604px var(--ink-soft),
    1137px 682px var(--rewind),
    -905px 849px var(--rewind),
    486px 736px var(--ink-soft),
    222px -377px var(--white),
    -855px -734px var(--white),
    -180px -479px var(--rewind),
    34px 863px var(--white),
    662px 26px var(--white),
    -1284px -706px var(--white),
    339px -936px var(--white),
    -364px -53px var(--ink-soft),
    900px 817px var(--ink-soft),
    283px 467px var(--white),
    -921px 873px var(--white),
    1189px -38px var(--white),
    539px -311px var(--ink-soft),
    -80px 540px var(--white),
    -1108px -946px var(--white),
    -9px 60px var(--ink-soft),
    996px -310px var(--rewind),
    -588px 937px var(--white),
    -1029px -103px var(--white),
    -977px 326px var(--white),
    261px -938px var(--white),
    593px -386px var(--white),
    -990px -316px var(--white),
    107px -908px var(--white),
    78px -83px var(--white),
    -210px -551px var(--white),
    396px -674px var(--white),
    1230px 716px var(--white),
    -372px -357px var(--white),
    -1090px 679px var(--take-care),
    -713px -906px var(--white),
    892px 803px var(--white),
    206px -520px var(--white),
    479px 325px var(--white),
    -928px 781px var(--white),
    992px -229px var(--ink-soft),
    -543px -670px var(--take-care),
    -571px 524px var(--ink-soft),
    81px -75px var(--white),
    -539px 562px var(--white),
    -51px -40px var(--white),
    -1047px -893px var(--ink-soft),
    -1065px -846px var(--ink-soft),
    -315px 622px var(--white),
    -1248px -313px var(--white),
    937px -87px var(--take-care),
    399px 818px var(--white),
    44px 810px var(--white),
    -1134px 46px var(--take-care),
    -891px 869px var(--white),
    633px 879px var(--take-care),
    429px 643px var(--makeline),
    -32px 377px var(--ink-soft),
    673px 69px var(--ink-soft),
    1068px -452px var(--ink-soft),
    650px -121px var(--white),
    1273px -548px var(--makeline),
    -1270px 3px var(--white),
    -599px 524px var(--white),
    672px -375px var(--ink-soft),
    1135px 538px var(--white),
    -452px -650px var(--white),
    1238px -905px var(--white),
    719px 196px var(--take-care),
    451px 835px var(--white),
    1145px 476px var(--ink-soft),
    489px -615px var(--white),
    113px 903px var(--ink-soft),
    733px -298px var(--take-care),
    -596px 943px var(--ink-soft),
    -581px -907px var(--ink-soft),
    -877px 841px var(--white),
    1189px -425px var(--rewind),
    383px 202px var(--white),
    552px -262px var(--take-care),
    570px -62px var(--take-care),
    -1029px 473px var(--makeline),
    -1278px -701px var(--take-care),
    841px 824px var(--white),
    895px 74px var(--ink-soft),
    -1172px -654px var(--white),
    881px 883px var(--white),
    -1192px 894px var(--white),
    470px -164px var(--ink-soft),
    1249px -889px var(--makeline),
    530px 780px var(--ink-soft),
    -1124px -590px var(--white),
    -1056px -542px var(--ink-soft),
    -873px -399px var(--take-care),
    955px -377px var(--ink-soft),
    984px -566px var(--take-care),
    305px -525px var(--white),
    -298px -728px var(--white),
    -450px 536px var(--ink-soft),
    1168px -19px var(--white),
    -649px 332px var(--white),
    914px -829px var(--white),
    1051px -650px var(--ink-soft),
    240px -191px var(--white),
    767px -165px var(--makeline),
    953px 66px var(--makeline),
    475px -835px var(--take-care),
    -393px -654px var(--white),
    683px -34px var(--white),
    56px -365px var(--white),
    -461px -459px var(--rewind),
    754px -90px var(--makeline),
    1217px 718px var(--white),
    -946px -874px var(--ink-soft),
    -1188px 103px var(--take-care),
    -180px -322px var(--white),
    -691px -861px var(--white),
    1232px 758px var(--rewind),
    527px 599px var(--makeline),
    1201px 26px var(--white),
    117px -747px var(--take-care),
    -1258px -592px var(--white),
    1121px 690px var(--makeline),
    1217px 54px var(--white),
    -749px 719px var(--ink-soft),
    232px 203px var(--makeline),
    -1155px -737px var(--ink-soft),
    183px -307px var(--ink-soft),
    -388px 914px var(--makeline),
    416px 812px var(--rewind),
    -13px -711px var(--white),
    -85px 17px var(--white),
    320px 738px var(--white),
    1271px 518px var(--white),
    -1035px 466px var(--white),
    -1028px 670px var(--white),
    -716px 623px var(--makeline),
    415px -699px var(--white),
    -848px 473px var(--makeline),
    -905px -401px var(--ink-soft),
    668px 181px var(--take-care),
    -721px 373px var(--white),
    25px -98px var(--white),
    477px -595px var(--take-care),
    -537px 794px var(--ink-soft),
    1163px 559px var(--white),
    -215px -322px var(--white),
    581px -425px var(--ink-soft),
    -782px -398px var(--white),
    856px -545px var(--ink-soft),
    -357px -546px var(--makeline),
    1245px -286px var(--white),
    -1255px 231px var(--makeline),
    768px 706px var(--take-care),
    -818px -9px var(--ink-soft),
    -587px -186px var(--ink-soft),
    1214px 276px var(--take-care),
    -812px -326px var(--ink-soft),
    -734px 722px var(--ink-soft),
    449px 529px var(--rewind),
    357px -102px var(--ink-soft),
    1059px -197px var(--white),
    202px -5px var(--rewind),
    -38px 391px var(--rewind),
    1211px -238px var(--makeline),
    841px -924px var(--ink-soft),
    -586px 227px var(--take-care),
    -150px -37px var(--white),
    108px 142px var(--ink-soft),
    -765px -96px var(--take-care),
    922px 653px var(--white),
    -639px -655px var(--take-care),
    1238px 561px var(--white),
    -931px 89px var(--makeline),
    468px -502px var(--white),
    -61px 517px var(--makeline),
    -167px 90px var(--ink-soft),
    -1270px -773px var(--white),
    986px 822px var(--ink-soft),
    739px -426px var(--rewind),
    -877px -515px var(--rewind),
    246px 30px var(--white),
    519px -224px var(--makeline),
    -400px 110px var(--white),
    1113px 273px var(--take-care);
  animation-delay: -2s;
}

.w3 {
  box-shadow:
    27px 197px var(--white),
    -646px -37px var(--white),
    460px 27px var(--ink-soft),
    -1168px 863px var(--ink-soft),
    -753px 11px var(--ink-soft),
    435px 218px var(--take-care),
    272px -489px var(--white),
    -371px 542px var(--ink-soft),
    605px -335px var(--rewind),
    1189px 539px var(--take-care),
    365px 545px var(--white),
    1051px 430px var(--makeline),
    802px -702px var(--rewind),
    359px -153px var(--white),
    1263px -886px var(--rewind),
    -453px -787px var(--white),
    -239px -768px var(--white),
    810px 903px var(--take-care),
    -366px 904px var(--ink-soft),
    -884px -870px var(--ink-soft),
    1219px 703px var(--white),
    960px 761px var(--white),
    950px -904px var(--white),
    -1283px 730px var(--ink-soft),
    178px 216px var(--white),
    790px -928px var(--white),
    781px 887px var(--white),
    -1116px 405px var(--white),
    111px 645px var(--take-care),
    403px -15px var(--ink-soft),
    -1219px 275px var(--ink-soft),
    476px 119px var(--rewind),
    -270px -166px var(--white),
    -1175px 125px var(--ink-soft),
    930px 332px var(--white),
    307px 84px var(--ink-soft),
    -765px 908px var(--white),
    942px -257px var(--makeline),
    796px 260px var(--white),
    992px 288px var(--white),
    217px 195px var(--white),
    -1061px -416px var(--ink-soft),
    -73px -493px var(--white),
    1188px -376px var(--white),
    -1243px -280px var(--white),
    853px 236px var(--white),
    -755px -435px var(--ink-soft),
    -1212px -791px var(--ink-soft),
    198px 511px var(--take-care),
    1080px 258px var(--take-care),
    -275px 899px var(--white),
    781px -500px var(--white),
    1155px 130px var(--ink-soft),
    1277px 104px var(--white),
    755px 316px var(--ink-soft),
    188px 189px var(--makeline),
    -612px 919px var(--white),
    297px -845px var(--ink-soft),
    -1146px 138px var(--take-care),
    460px 143px var(--white),
    1242px -722px var(--white),
    161px 203px var(--white),
    169px -315px var(--white),
    -1089px -352px var(--take-care),
    -371px 199px var(--rewind),
    96px 178px var(--white),
    417px -770px var(--ink-soft),
    -171px 380px var(--white),
    -887px -429px var(--white),
    980px 123px var(--ink-soft),
    -857px 824px var(--rewind),
    -975px -935px var(--white),
    619px 760px var(--take-care),
    -1147px -820px var(--ink-soft),
    528px 611px var(--white),
    957px -299px var(--take-care),
    -508px -273px var(--makeline),
    -1036px 816px var(--white),
    643px -625px var(--ink-soft),
    107px 25px var(--ink-soft),
    54px -597px var(--ink-soft),
    -1202px 215px var(--white),
    1183px 519px var(--white),
    -345px -800px var(--white),
    264px 466px var(--white),
    -921px -321px var(--ink-soft),
    1282px -49px var(--white),
    -841px -417px var(--ink-soft),
    193px -417px var(--ink-soft),
    -1104px -580px var(--white),
    -913px 516px var(--white),
    975px 234px var(--white),
    808px 552px var(--take-care),
    -21px 456px var(--white),
    1178px -554px var(--take-care),
    142px -501px var(--makeline),
    -305px -212px var(--white),
    406px 510px var(--ink-soft),
    -884px -874px var(--take-care),
    -831px -636px var(--ink-soft),
    805px 28px var(--white),
    1008px -287px var(--ink-soft),
    759px 654px var(--white),
    -348px 108px var(--white),
    -325px -739px var(--white),
    -423px 942px var(--ink-soft),
    -535px 838px var(--ink-soft),
    15px -242px var(--white),
    430px -942px var(--ink-soft),
    -770px 257px var(--makeline),
    -1163px 67px var(--white),
    -475px -38px var(--white),
    311px -670px var(--white),
    1037px 33px var(--rewind),
    586px -573px var(--take-care),
    1091px 472px var(--white),
    1px -318px var(--take-care),
    -864px -725px var(--white),
    934px 706px var(--rewind),
    -97px 328px var(--ink-soft),
    999px -723px var(--white),
    -877px 104px var(--white),
    -533px 554px var(--white),
    133px -347px var(--makeline),
    -125px 776px var(--makeline),
    1246px -527px var(--white),
    -641px 750px var(--ink-soft),
    -40px -725px var(--white),
    1069px 867px var(--ink-soft),
    -564px 97px var(--makeline),
    -595px 90px var(--ink-soft),
    561px -144px var(--white),
    660px -655px var(--white),
    -14px -891px var(--ink-soft),
    -739px -848px var(--take-care),
    232px -534px var(--white),
    345px 569px var(--ink-soft),
    -622px -418px var(--white),
    787px -791px var(--take-care),
    1024px 607px var(--white),
    -854px -948px var(--white),
    -651px -747px var(--white),
    938px 229px var(--ink-soft),
    -832px 638px var(--ink-soft),
    295px -315px var(--white),
    -190px 820px var(--white),
    769px -324px var(--white),
    800px -577px var(--ink-soft),
    -593px -933px var(--white),
    -899px 410px var(--white),
    -503px 647px var(--ink-soft),
    -756px -208px var(--white),
    -1094px 373px var(--ink-soft),
    854px 295px var(--white),
    1155px 553px var(--white),
    -373px -163px var(--white),
    -811px -845px var(--ink-soft),
    -634px -453px var(--ink-soft),
    -782px 450px var(--white),
    -945px -6px var(--white),
    556px 160px var(--white),
    252px 509px var(--white),
    -540px 456px var(--white),
    139px -269px var(--white),
    -1208px 374px var(--white),
    890px -591px var(--white),
    220px -113px var(--white),
    -641px 619px var(--white),
    1299px 443px var(--white),
    -395px -483px var(--ink-soft),
    -664px 374px var(--white),
    -939px -233px var(--makeline),
    -1079px 166px var(--take-care),
    815px 472px var(--ink-soft),
    -1251px -286px var(--rewind),
    761px 562px var(--ink-soft),
    -1025px 148px var(--rewind),
    238px -685px var(--white),
    -231px -407px var(--white),
    607px -715px var(--white),
    -628px -721px var(--rewind),
    -108px 738px var(--makeline),
    -46px 580px var(--ink-soft),
    -677px -887px var(--white),
    -861px 751px var(--white),
    848px -814px var(--rewind),
    454px -5px var(--ink-soft),
    -566px -883px var(--makeline),
    -1299px 903px var(--white),
    -415px -415px var(--take-care),
    358px 442px var(--white),
    855px -179px var(--white),
    1202px 191px var(--white),
    -580px -904px var(--makeline),
    -1124px 167px var(--white),
    1066px 852px var(--ink-soft),
    -956px -649px var(--ink-soft),
    -770px 616px var(--white),
    792px -267px var(--white),
    -246px -271px var(--makeline),
    1220px -380px var(--ink-soft),
    295px -717px var(--white),
    -431px -75px var(--take-care),
    -106px -261px var(--makeline),
    1277px -464px var(--white),
    850px 27px var(--white),
    303px -844px var(--white),
    -1011px 412px var(--white),
    1200px -664px var(--white),
    1075px 119px var(--white),
    -1170px 632px var(--makeline),
    -1270px -105px var(--white),
    -1022px -232px var(--white),
    -459px -315px var(--take-care),
    -121px -635px var(--white),
    61px 939px var(--white),
    1233px -330px var(--white),
    -271px -539px var(--white),
    -1167px -51px var(--ink-soft),
    627px -522px var(--ink-soft),
    1030px 23px var(--makeline),
    -126px -930px var(--white),
    -711px -336px var(--take-care),
    -670px -865px var(--makeline),
    -302px -278px var(--white),
    -1132px -547px var(--ink-soft),
    136px 712px var(--white),
    701px 921px var(--white),
    -288px -388px var(--white),
    444px -426px var(--take-care),
    -73px 529px var(--white),
    -186px 97px var(--white),
    485px -434px var(--white),
    -276px 542px var(--white),
    855px -850px var(--ink-soft),
    93px 613px var(--white),
    -170px -139px var(--take-care),
    973px -536px var(--makeline),
    -270px -848px var(--ink-soft),
    173px 204px var(--ink-soft),
    -253px 126px var(--ink-soft),
    -531px -78px var(--white),
    254px 374px var(--ink-soft),
    -1152px 160px var(--white),
    425px -729px var(--makeline),
    789px -810px var(--take-care),
    726px -789px var(--white),
    -456px -892px var(--ink-soft),
    -40px -408px var(--white),
    987px 430px var(--rewind),
    -935px -922px var(--white),
    1152px 736px var(--white),
    -1071px 46px var(--white),
    22px -254px var(--ink-soft),
    180px -401px var(--take-care),
    538px 349px var(--white),
    60px -687px var(--white),
    352px -820px var(--rewind),
    -1023px 282px var(--makeline),
    557px -194px var(--white);
  animation-delay: -4s;
}

@keyframes warp {
  0% {
    opacity: 0;
    transform: scale(0.15);
  }

  20% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

/* one card per row; the stars come from just under the nav */
@media (max-width: 900px) {
  .apps {
    grid-template-columns: 1fr;
  }

  .app {
    padding: 1.5rem;
  }

  .app h2 {
    max-width: none;
  }

  .bg {
    --vp: 50% 190px;
  }

  .warp {
    top: 190px;
    left: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}