/* ============================================================
   Anime Logo — anime.js 的 logo 描边 + 烟花
   先按笔画顺序把字母画出来，填充色再淡入，
   最后那个点滚过去炸成一片烟花；之后点哪炸哪。
   ============================================================ */

:root {
  font-size: 14px;
}

@media (min-width: 350px) {
  :root {
    font-size: 16px;
  }
}

@media (min-width: 640px) {
  :root {
    font-size: 28px;
  }
}

@media (min-width: 1440px) {
  :root {
    font-size: 1.25vw;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 原稿片段的背景色没贴全，这里按 lighten 混合模式推的深蓝底 */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  background: #0d1023;
}

section {
  position: relative;
  z-index: 1;
  max-width: 19rem;
}

/* Logo */

.logo {
  opacity: 0;
  position: relative;
  margin-left: -3.5rem;
  margin-top: -8rem;
  margin-bottom: 0.75rem;
  font-size: 8px;
}

body.ready .logo {
  opacity: 1;
}

body:not(.iOS) #lines * {
  mix-blend-mode: lighten;
}

#fills * {
  opacity: 0;
  mix-blend-mode: lighten;
}

#line-i-1 {
  transform-origin: 30em 8em;
}

/* Fireworks */

.fireworks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}