:root {
  color-scheme: dark;
  --paper: #20222c;
  --ink: #f4f5fb;
}

* { box-sizing: border-box; }

html, body { min-width: 100%; min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 47%, rgba(244, 245, 251, .055), transparent 31rem),
    var(--paper);
}

.canvas {
  display: grid;
  width: 100vw;
  min-height: 100svh;
  place-items: center;
  padding: clamp(28px, 7vw, 110px);
}

.logo-scene {
  position: relative;
  isolation: isolate;
  width: min(82vw, 727px);
  aspect-ratio: 727 / 126;
  opacity: 0;
  animation: scene-cycle 11.2s ease-in-out infinite;
}

.logo-part, .arrow-runner, .task-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.logo-part {
  object-fit: contain;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
  will-change: opacity, transform, clip-path, filter;
}

.part-t {
  z-index: 2;
  transform-origin: 9% 48%;
  animation: show-t 11.2s cubic-bezier(.22, .75, .28, 1) infinite;
}

.part-w {
  z-index: 2;
  transform-origin: 90% 54%;
  animation: show-w 11.2s cubic-bezier(.22, .75, .28, 1) infinite;
}

.part-letters {
  z-index: 1;
  clip-path: inset(0 20% 0 80%);
  animation: reveal-letters 11.2s cubic-bezier(.2, .72, .25, 1) infinite;
}

.part-arrow {
  z-index: 3;
  clip-path: inset(0 0 0 98%);
  animation: draw-arrow 11.2s cubic-bezier(.2, .72, .25, 1) infinite;
}

.task-stage {
  z-index: 5;
  overflow: visible;
  fill: var(--ink);
}

.task-letter {
  fill: var(--ink);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 89px;
  font-weight: 300;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  will-change: opacity, transform, filter;
}

.task-a { animation: task-a 11.2s ease-in-out infinite; }
.task-s { animation: task-s 11.2s ease-in-out infinite; }
.task-k { animation: task-k 11.2s ease-in-out infinite; }

.task-dot {
  fill: var(--ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  will-change: opacity, transform;
}

.dot-1 { animation: dot-1 11.2s ease-in-out infinite; }
.dot-2 { animation: dot-2 11.2s ease-in-out infinite; }
.dot-3 { animation: dot-3 11.2s ease-in-out infinite; }
.dot-4 { animation: dot-4 11.2s ease-in-out infinite; }
.dot-5 { animation: dot-5 11.2s ease-in-out infinite; }

.arrow-runner {
  z-index: 4;
  overflow: visible;
  opacity: 1;
}

.arrow-runner path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform: translateX(574px);
  animation: move-arrowhead 11.2s cubic-bezier(.2, .72, .25, 1) infinite;
}

@keyframes scene-cycle {
  0%, 2% { opacity: 0; }
  5%, 92% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

@keyframes show-t {
  0%, 4% { opacity: 0; filter: blur(3px); transform: scale(.97); }
  10%, 100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes show-w {
  0%, 28% { opacity: 0; clip-path: inset(0 12% 0 0); filter: blur(4px); transform: scale(.94); }
  32% { opacity: 1; clip-path: inset(0 12% 0 0); filter: blur(0); transform: scale(1); }
  36% { opacity: 1; clip-path: inset(0); filter: blur(0) drop-shadow(0 0 10px rgba(244,245,251,.13)); transform: scale(1.015); }
  41%, 100% { opacity: 1; clip-path: inset(0); filter: blur(0) drop-shadow(0 0 0 rgba(244,245,251,0)); transform: scale(1); }
}

@keyframes reveal-letters {
  0%, 52% { opacity: 0; clip-path: inset(0 20% 0 80%); }
  53% { opacity: 1; clip-path: inset(0 20% 0 80%); }
  79%, 100% { opacity: 1; clip-path: inset(0 20% 0 13%); }
}

@keyframes draw-arrow {
  0%, 45% { opacity: 0; clip-path: inset(0 0 0 98%); }
  46% { opacity: 1; clip-path: inset(0 0 0 98%); }
  79%, 100% { opacity: 1; clip-path: inset(0 0 0 17%); }
}

@keyframes move-arrowhead {
  0%, 45% { opacity: 0; transform: translateX(574px); }
  46% { opacity: 1; transform: translateX(574px); }
  79% { opacity: 1; transform: translateX(0); }
  81%, 100% { opacity: 0; transform: translateX(0); }
}

@keyframes task-a {
  0%, 9% { opacity: 0; filter: blur(2px); transform: translateX(-7px); }
  14%, 45% { opacity: 1; filter: blur(0); transform: translateX(0); }
  46%, 100% { opacity: 0; filter: blur(0); transform: translateX(0); }
}

@keyframes task-s {
  0%, 11% { opacity: 0; filter: blur(2px); transform: translateX(-7px); }
  16%, 45% { opacity: 1; filter: blur(0); transform: translateX(0); }
  46%, 100% { opacity: 0; filter: blur(0); transform: translateX(0); }
}

@keyframes task-k {
  0%, 13% { opacity: 0; filter: blur(2px); transform: translateX(-7px); }
  18%, 45% { opacity: 1; filter: blur(0); transform: translateX(0); }
  46%, 100% { opacity: 0; filter: blur(0); transform: translateX(0); }
}

@keyframes dot-1 {
  0%, 18% { opacity: 0; transform: scale(.4); }
  21%, 63% { opacity: .9; transform: scale(1); }
  66%, 100% { opacity: 0; transform: scale(.4); }
}

@keyframes dot-2 {
  0%, 20% { opacity: 0; transform: scale(.4); }
  23%, 60% { opacity: .9; transform: scale(1); }
  63%, 100% { opacity: 0; transform: scale(.4); }
}

@keyframes dot-3 {
  0%, 22% { opacity: 0; transform: scale(.4); }
  25%, 57% { opacity: .9; transform: scale(1); }
  60%, 100% { opacity: 0; transform: scale(.4); }
}

@keyframes dot-4 {
  0%, 24% { opacity: 0; transform: scale(.4); }
  27%, 54% { opacity: .9; transform: scale(1); }
  57%, 100% { opacity: 0; transform: scale(.4); }
}

@keyframes dot-5 {
  0%, 26% { opacity: 0; transform: scale(.4); }
  29%, 51% { opacity: .9; transform: scale(1); }
  54%, 100% { opacity: 0; transform: scale(.4); }
}

@media (max-width: 520px) {
  .canvas { padding: 24px; }
  .logo-scene { width: min(91vw, 727px); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-scene, .logo-part, .arrow-runner path, .task-letter, .task-dot { animation: none; }
  .logo-scene, .logo-part { opacity: 1; clip-path: none; filter: none; transform: none; }
  .arrow-runner, .task-stage { display: none; }
}