#opening { display: none; }
html.op-run #opening { display: block; }
html.op-lock, html.op-lock body { overflow: hidden; }
#opening {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--white);
}
.op-poster, #op-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.op-poster img, #op-video { width: 100%; height: 100%; object-fit: cover; display: block; }
#op-video { opacity: 0; transition: opacity 0.5s ease; }
#opening[data-state="video"] #op-video { opacity: 1; }
.op-white {
  position: absolute; inset: 0; background: #fff;
  opacity: 0; transition: opacity 0.6s ease;
}
#opening[data-state="white"] .op-white,
#opening[data-state="copy"]  .op-white,
#opening[data-state="done"]  .op-white { opacity: 1; }
.op-copy {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; text-align: center;
  opacity: 0; transform: translateY(0.8rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
}
#opening[data-state="copy"] .op-copy { opacity: 1; transform: none; }
.op-copy-text {
  font-family: var(--ff-serif); font-weight: 500;
  font-size: 3.2rem; line-height: 2.15; letter-spacing: 0.14em;
  color: var(--brown); font-feature-settings: "palt" 1;
}
.op-br-sp { display: none; }
#opening[data-state="done"] {
  opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
.op-skip {
  position: absolute; top: 2.4rem; right: 2.4rem; z-index: 5;
  appearance: none; border: 1px solid rgba(255,255,255,0.85); cursor: pointer;
  background: rgba(62,56,50,0.38); color: #fff;
  font-family: var(--ff-body); font-size: 1.35rem; letter-spacing: 0.12em;
  padding: 0.9rem 2.2rem; border-radius: 3rem;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.op-skip:hover { background: rgba(62,56,50,0.6); }
.op-skip:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 2px; }
#opening[data-state="white"] .op-skip,
#opening[data-state="copy"]  .op-skip {
  background: rgba(255,255,255,0.7); color: var(--ink-soft); border-color: var(--tan);
}
.op-replay { display: none; }
html.js .op-replay {
  display: inline-flex; align-items: center; gap: 0.5rem;
  position: absolute; right: 2.4rem; bottom: 2.4rem; z-index: 6;
  appearance: none; cursor: pointer;
  background: rgba(255,255,255,0.55); color: var(--ink);
  border: 1px solid rgba(255,255,255,0.8); border-radius: 3rem;
  font-family: var(--ff-body); font-size: 1.25rem; letter-spacing: 0.06em;
  padding: 0.7rem 1.6rem;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.op-replay::before { content: "▶"; font-size: 0.9em; color: var(--green-deep); }
.op-replay:hover { background: rgba(255,255,255,0.8); }
.op-replay:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 2px; }
#opening[data-mode="still"][data-state="copy"] .op-white,
#opening[data-mode="still"][data-state="done"] .op-white { opacity: 0.4; }
@media (max-width: 768px) {
  .op-copy-text { font-size: 2.1rem; line-height: 2.05; letter-spacing: 0.1em; padding: 0 2.4rem; }
  .op-br-sp { display: inline; }
  .op-skip { top: 1.6rem; right: 1.6rem; font-size: 1.3rem; padding: 0.8rem 1.8rem; }
  html.js .op-replay { right: 1.6rem; bottom: 1.8rem; font-size: 1.2rem; }
}