.opening-screen[hidden] { display: none; }
.opening-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e8f1ed;
  color: #24443f;
  will-change: transform;
  outline: none;
}
.opening-copy { text-align: center; padding: 24px; animation: opening-appear 900ms ease-out both; }
.opening-name { margin: 0; font-family: "Shippori Mincho B1", "Noto Serif JP", serif; font-size: clamp(54px, 9vw, 116px); font-weight: 400; letter-spacing: .045em; line-height: 1.2; }
.opening-tagline { margin: 20px 0 0; font-family: "Noto Serif JP", serif; font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .12em; line-height: 1.8; }
.opening-skip { position: absolute; right: clamp(20px, 4vw, 56px); bottom: clamp(24px, 4vw, 48px); border: 0; border-bottom: 1px solid currentColor; padding: 8px 0; background: transparent; color: inherit; font: 12px "Noto Sans JP", sans-serif; letter-spacing: .08em; cursor: pointer; }
.opening-skip:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.opening-screen.is-revealing { animation: opening-reveal 800ms cubic-bezier(.65, 0, .25, 1) both; }
@keyframes opening-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes opening-reveal { to { transform: translateY(-100%); } }