:root {
  color-scheme: dark;
  --paper: #20222c;
  --ink: #f4f5f9;
  --red: #ef4147;
  --green: #15935e;
  --cycle: 7.2s;
  --prompt-ease: cubic-bezier(.18, .74, .2, 1);
  --return-ease: cubic-bezier(.48, .04, .16, 1);
}

* { 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, 249, .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;
  width: min(84vw, 727px);
  aspect-ratio: 727 / 126;
  opacity: 0;
  animation: scene-cycle var(--cycle) ease-in-out infinite;
}

.logo-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.monochrome-strokes,
.return-arrow {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.logo-t,
.brand-letter,
.w-hook { stroke-width: 7; }

.logo-t {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: show-t var(--cycle) cubic-bezier(.2, .8, .3, 1) infinite;
}

.prompt-letter {
  fill: var(--ink);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 58px;
  font-weight: 300;
  opacity: 1;
}

.prompt-reveal-curtain {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  will-change: transform;
  animation: reveal-prompt var(--cycle) var(--prompt-ease) infinite;
}

.w-hook,
.arrow-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.brand-letter {
  opacity: 1;
}

.brand-reveal-curtain {
  transform: translateX(0);
  transform-box: fill-box;
  will-change: transform;
  animation: uncover-brand var(--cycle) var(--return-ease) infinite;
}

.prompt-conceal-curtain {
  transform: translateX(0);
  transform-box: fill-box;
  will-change: transform;
  animation: conceal-prompt var(--cycle) var(--return-ease) infinite;
}

.w-hook {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: 0;
  will-change: opacity, stroke-dashoffset, filter;
}

.w-red {
  stroke: var(--red);
  animation: draw-red-hook var(--cycle) cubic-bezier(.45, .02, .28, 1) infinite;
}

.w-green {
  stroke: var(--green);
  animation: draw-green-hook var(--cycle) cubic-bezier(.42, .02, .25, 1) infinite;
}

.return-arrow { stroke-width: 2; }

.arrow-line {
  opacity: 0;
  will-change: opacity, stroke-dashoffset;
  animation: draw-return-line var(--cycle) var(--return-ease) infinite;
}

.arrow-head {
  opacity: 0;
  transform: translateX(584px);
  will-change: opacity, transform;
  animation: run-arrow-head var(--cycle) var(--return-ease) infinite;
}

@keyframes scene-cycle {
  0%, 1% { opacity: 0; }
  4%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

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

@keyframes reveal-prompt {
  0%, 5.2% { transform: scaleX(0); }
  16.2%, 100% { transform: scaleX(1); }
}

@keyframes draw-red-hook {
  0%, 22% { opacity: 0; stroke-dashoffset: 1; }
  23% { opacity: 1; stroke-dashoffset: 1; }
  37%, 100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes draw-green-hook {
  0%, 37% { opacity: 0; stroke-dashoffset: 1; filter: drop-shadow(0 0 0 rgba(244,245,249,0)); }
  38% { opacity: 1; stroke-dashoffset: 1; }
  54% { opacity: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px rgba(244,245,249,.12)); }
  58%, 100% { opacity: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 0 rgba(244,245,249,0)); }
}

@keyframes draw-return-line {
  0%, 54.8% { opacity: 0; stroke-dashoffset: 1; }
  55% { opacity: 1; stroke-dashoffset: 1; }
  69%, 100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes run-arrow-head {
  0%, 54.8% { opacity: 0; transform: translateX(584px); }
  55% { opacity: 1; transform: translateX(584px); }
  69%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes uncover-brand {
  0%, 55% { transform: translateX(0); }
  69%, 100% { transform: translateX(-584px); }
}

@keyframes conceal-prompt {
  0%, 55% { transform: translateX(0); }
  69%, 100% { transform: translateX(-584px); }
}

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

@media (prefers-reduced-motion: reduce) {
  .logo-scene,
  .logo-t,
  .prompt-reveal-curtain,
  .prompt-conceal-curtain,
  .brand-reveal-curtain,
  .w-hook,
  .arrow-line,
  .arrow-head {
    animation: none;
  }

  .logo-scene,
  .logo-t,
  .w-hook {
    opacity: 1;
    filter: none;
    transform: none;
    stroke-dashoffset: 0;
  }

  .prompt-reveal-curtain { transform: scaleX(1); }
  .brand-reveal-curtain,
  .prompt-conceal-curtain { transform: translateX(-584px); }

  .arrow-line,
  .arrow-head { opacity: 0; }
}