/* Separate from the generated stylesheet so Sass recompilation preserves motion. */
html.arakawa-opening { overflow: hidden; scrollbar-gutter: stable; }
html.arakawa-opening body.arakawa-light-up-page::after {
  content: ''; position: fixed; inset: 0; background: #000; z-index: 2147483000;
}
html.arakawa-opening.arakawa-opening-revealing body.arakawa-light-up-page::after { opacity: 0; pointer-events: none; }
.arakawa-opening-stage {
  position: fixed; inset: 0; z-index: 2147483001; overflow: hidden;
  pointer-events: none;
}
.arakawa-opening-item {
  position: absolute;
  transform-origin: top left;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.arakawa-opening-stage .arakawa-opening-item > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  image-rendering: auto;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.arakawa-opening-skip {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483002;
  border: 1px solid #666; border-radius: 2px; padding: 8px 14px;
  background: #000; color: #fff; font: inherit; font-size: 12px; cursor: pointer;
	font-family: "Shippori Mincho", serif;
}
.arakawa-motion-source { visibility: hidden !important; }
.arakawa-reveal {
  opacity: 0; filter: blur(8px); translate: 0 18px;
  transition: opacity 1.2s ease, filter 1.2s ease, translate 1.2s cubic-bezier(.22,1,.36,1);
}
.arakawa-reveal.is-visible { opacity: 1; filter: blur(0); translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .arakawa-reveal { opacity: 1; filter: none; translate: none; transition: none; }
}

/* Keep the background behind the content and fade it in with the image handoff. */
@media (min-width: 601px) {
  body.arakawa-light-up-page { isolation: isolate; }
  body.arakawa-light-up-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url('../images/pc_bg.webp') center center / cover no-repeat;
    opacity: 1;
    transition: opacity .4s ease-in-out;
  }
  html.arakawa-opening:not(.arakawa-background-revealing) body.arakawa-light-up-page::before {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.arakawa-light-up-page::before { transition: none; }
}