/* The cold open. open.js adds .opening to <html> before the first paint, so without the
   script none of this shows. The page under the plate renders from the first frame. The
   plate and the page behind it share one colour so nothing flashes at launch. */
#open {
  display: none;
}
html.opening {
  background: #002e60;
}
html.opening #open {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #002e60;
  transition: translate 0.2s cubic-bezier(0.5, 0, 0.9, 0.4);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
html.opening #open.lift {
  translate: 0 -100%;
  pointer-events: none;
}
.open__disc {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  animation: open-disc 0.2s ease-out both;
}
.open__mark {
  width: 48px;
  height: 48px;
  overflow: visible;
}
.open__d {
  opacity: 0;
  animation: open-in 0.3s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
.open__d--t {
  --from: 0 -34px;
  animation-delay: 0.04s;
}
.open__d--r {
  --from: 34px 0;
  animation-delay: 0.08s;
}
.open__d--b {
  --from: 0 34px;
  animation-delay: 0.12s;
}
.open__d--l {
  --from: -34px 0;
  animation-delay: 0.16s;
}
.open__word {
  font-family: 'Zen Maru Gothic', 'Noto Sans JP', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  animation: open-word 0.22s ease-out 0.28s both;
}
@keyframes open-disc {
  from {
    opacity: 0;
    scale: 0.85;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes open-in {
  from {
    opacity: 0;
    translate: var(--from);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes open-word {
  from {
    opacity: 0;
    translate: -10px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.opening #open {
    display: none;
  }
}