/* オープニングの空間・扉・光はThree.jsで描画します。ここでは操作UIのみ整えます。 */
:root {
  --opening-night: #070911;
  --opening-silver: rgba(235, 243, 255, .88);
  --opening-glow: rgba(220, 235, 255, .28);
}

html.experience-active,
html.experience-checking { overflow: hidden; }
html.experience-checking body { visibility: hidden; }

.award-opening {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: #f4f6fb;
  background: var(--opening-night);
}
.award-opening[open] { display: grid; place-items: center; }
.award-opening::backdrop { background: var(--opening-night); }
.opening-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.opening-3d-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.opening-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(92vw, 42rem);
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow: 0 0 20px rgba(224,237,255,.55);
}
.opening-title {
  margin: 0;
  font: 400 clamp(2.2rem, 7vw, 5.3rem)/1.2 var(--font-display, Georgia, serif);
  letter-spacing: .13em;
}
.opening-year {
  display: block;
  margin-top: .18em;
  font-size: .34em;
  letter-spacing: .42em;
}
.opening-enter {
  margin-top: clamp(2rem, 8vh, 4rem);
  min-width: 10rem;
  padding: .8rem 1.8rem;
  border: 1px solid rgba(240,246,255,.78);
  border-radius: 999px;
  color: #f5f7fb;
  background: rgba(10,14,24,.42);
  font: 600 .73rem/1.4 var(--font-body, sans-serif);
  letter-spacing: .2em;
  cursor: pointer;
  box-shadow: 0 0 25px rgba(208,226,255,.2), inset 0 0 18px rgba(208,226,255,.06);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.opening-enter:not(:disabled):hover { transform: translateY(-2px); background: rgba(201,218,250,.14); box-shadow: 0 0 35px rgba(208,226,255,.32); }
.opening-enter:focus-visible, .opening-skip:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.opening-enter:disabled { opacity: .7; cursor: wait; }
.opening-enter small { display: block; margin-top: .2rem; font: inherit; font-size: .67rem; letter-spacing: .16em; }
.opening-skip {
  position: absolute;
  z-index: 3;
  top: max(1.25rem, env(safe-area-inset-top));
  right: max(1.25rem, env(safe-area-inset-right));
  padding: .55rem .8rem;
  border: 1px solid rgba(231,239,255,.55);
  border-radius: 999px;
  color: rgba(245,248,255,.92);
  background: rgba(6,9,16,.44);
  font: 600 .68rem var(--font-body, sans-serif);
  letter-spacing: .16em;
  cursor: pointer;
}
.is-opening .opening-copy { animation: opening-copy-out .45s ease-out both; }
.is-revealing { animation: opening-page-reveal var(--opening-page-duration) ease-in both; }
@keyframes opening-copy-out { to { opacity: 0; transform: translate(-50%, calc(-50% - .5rem)); } }
@keyframes opening-page-reveal { to { opacity: 0; visibility: hidden; } }

@media (max-width: 600px) {
  .opening-copy { width: 94vw; }
  .opening-title { font-size: clamp(2rem, 10vw, 3.3rem); }
  .opening-enter { margin-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-enter { transition: none; }
  .is-opening .opening-copy { animation-duration: .01ms; }
  .is-revealing { animation-duration: .2s; }
}