.loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #fff;
  transition: opacity 2s ease;
}

.loader.is-blue {
  background: linear-gradient(155deg, var(--green), var(--sky));
}

.loader.is-clear {
  background: transparent;
}

.loader.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.loader canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.loader .lockup {
  opacity: 0;
}

.loader.is-blue.is-show .lockup {
  opacity: 1;
  transition: opacity 0.45s ease;
}

.loader.is-play canvas {
  z-index: 3;
}

.loader.is-play .lockup {
  z-index: 1;
}

.loader.is-play .loader__skip {
  z-index: 4;
}

.loader.is-blue.is-show .lockup img {
  animation: fade-mark 0.9s 0.2s both;
}

.loader.is-blue.is-show .lockup p {
  animation: write-name 1.15s 0.05s both;
}

@keyframes fade-mark {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes write-name {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.loader__skip {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 2;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  cursor: pointer;
}

.loader.is-blue .loader__skip {
  color: var(--ink);
}

.loader__skip:hover {
  opacity: 0.6;
}