/* The existing logo becomes a window onto the stationary hero below it. */
.opening { display: none; }
/* Safari paints the area behind its floating bars from the page canvas. Keep it
   continuous with the opening instead of exposing the plain body background. */
html[data-opening] {
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-color: #0a0b0a #0a0b0a;
  background: #0a0b0a url('images/black-texture.webp') 0 0 / 640px repeat;
}
html[data-opening] body {
  background: #0a0b0a url('images/black-texture.webp') 0 0 / 640px repeat;
}
html[data-opening] .opening {
  --opening-logo-size: clamp(180px, 15.3vw, 220px);
  --opening-vv-left: 0px;
  --opening-vv-top: 0px;
  --opening-vv-width: 100vw;
  --opening-vv-height: 100vh;
  /* Paint past Safari's reported viewport so its translucent bars cannot
     expose the page while they expand, collapse or cross a safe area. */
  --opening-overscan: 128px;
  position: fixed;
  inset: auto;
  top: calc(var(--opening-vv-top) - var(--opening-overscan));
  left: calc(var(--opening-vv-left) - var(--opening-overscan));
  width: calc(var(--opening-vv-width) + var(--opening-overscan) + var(--opening-overscan));
  height: calc(var(--opening-vv-height) + var(--opening-overscan) + var(--opening-overscan));
  max-width: none;
  z-index: 1000;
  display: block !important;
  overflow: hidden;
  background: #0a0b0a url('images/black-texture.webp') 0 0 / 640px repeat;
  contain: layout paint;
}
@supports (height: 100dvh) {
  html[data-opening] .opening { --opening-vv-height: 100dvh; }
}
html[data-opening='playing'] .opening { background: transparent; }
.opening__scene { display: block; width: 100%; height: 100%; }
.opening__window, .opening__logo { opacity: 0; }
.opening__mask { mask-type: luminance; }
.opening__intro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.opening__copy {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(20px, 2vw, 30px);
  margin: 0;
  color: #eee7d8;
  font: 500 clamp(34px, 3.2vw, 46px)/1.5 'Noto Serif JP', 'Yu Mincho', serif;
  letter-spacing: .22em;
}
.opening__line { position: relative; display: block; writing-mode: vertical-rl; white-space: nowrap; }
.opening__char { display: inline-block; opacity: 0; transform: translateY(-.18em); }
/* Read the responsive size in JS without depending on a font or image load. */
.opening__measure { position: absolute; width: var(--opening-logo-size); height: 0; visibility: hidden; }
@media (max-width: 699px) {
  html[data-opening] .opening { --opening-logo-size: clamp(120px, 35.9vw, 150px); }
  /* viewport-fit=cover is enabled on TOP only. Keep the normal header clear
     of the iPhone sensor area after the opening has finished. */
  .has-scroll-header .site-header-slot,
  .has-scroll-header .site-header { min-height: calc(64px + env(safe-area-inset-top, 0px)); }
  .has-scroll-header .site-header {
    padding: calc(7px + env(safe-area-inset-top, 0px))
      max(14px, env(safe-area-inset-right, 0px))
      7px
      max(14px, env(safe-area-inset-left, 0px));
  }
  .opening__copy { font-size: clamp(27px, 7.2vw, 32px); gap: 20px; letter-spacing: .2em; }
}
@media (max-height: 500px) and (min-width: 700px) {
  html[data-opening] .opening { --opening-logo-size: 140px; }
  .opening__copy { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-opening] .opening { display: none !important; }
}