/* Keep the room hidden before the film script loads and until assembly begins. */
.cinematic-opening #kitchen-stage { opacity: calc(var(--assembly-visibility, 0) * var(--scene-opacity, 1)); }
.cinematic-opening #kitchen-stage[data-media="poster"] { opacity: var(--scene-opacity, 1); }
.cinematic-opening.opening-active #kitchen-stage { opacity: 0; }
.opening-film {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: #080909;
  opacity: 0;
  contain: layout paint;
}
.opening-poster, .opening-video {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
}
.opening-film[data-media="video"] .opening-video,
.opening-film[data-media="poster"] .opening-poster { opacity: 1; }
.opening-film::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0006, #0004 32%, #0005 63%, #000d);
}
.opening-film.opening-dismissed { opacity: 0 !important; transition: opacity .45s ease; }
.opening-active .film-intro { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.opening-active .site-header { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.opening-active .film-location, .opening-active .film-progress { opacity: 0; }
.opening-active .film-chapters { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.cinematic-opening .film-intro { --brand-caption-gap: 20px; grid-template-rows: minmax(0, .94fr) auto minmax(0, 1.06fr); }
.cinematic-opening .hero-brand { width: 540px; height: 216px; }
.cinematic-opening .film-intro .eyebrow {
  font-size: 12px;
  line-height: 1.6;
  color: #f1f1ed;
  margin-bottom: var(--brand-caption-gap);
}
.cinematic-opening .film-intro-footer { position: static; width: 100%; margin-top: var(--brand-caption-gap); }
.cinematic-opening .film-intro-footer > p { margin: 0; font-size: 16px; line-height: 1.6; color: #f1f1ed; }
.cinematic-opening .round-link { position: absolute; left: calc(50% - 25px); bottom: max(14svh, 82px); width: 50px; height: 50px; margin: 0; border-color: #ffffff75; background: #0003; }
/* Start at first paint, without restarting when the film controller loads. */
.cinematic-opening .film-intro .eyebrow,
.cinematic-opening .hero-brand,
.cinematic-opening .film-intro-footer > p,
.cinematic-opening .round-link {
  animation: opening-brand-in 1.4s cubic-bezier(.45, 0, .55, 1) both;
  animation-play-state: var(--opening-play-state, running);
}
.cinematic-opening .film-intro .eyebrow { animation-delay: 0s; }
.cinematic-opening .hero-brand { animation-name: opening-signature-in; animation-duration: 2.2s; animation-delay: .18s; }
.cinematic-opening .film-intro-footer > p { animation-delay: .7s; }
.cinematic-opening .round-link { animation-delay: 1.1s; }
@keyframes opening-signature-in {
  from { opacity: 0; transform: translateY(7px) scale(.975); filter: blur(3px); }
  55% { opacity: .85; filter: blur(0); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes opening-brand-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  .cinematic-opening .hero-brand { width: 320px; height: 128px; }
  .cinematic-opening .film-intro { --brand-caption-gap: 18px; }
  .cinematic-opening .film-intro .eyebrow { font-size: 12px; }
  .cinematic-opening .round-link { bottom: max(15svh, 100px); }
  .cinematic-opening .film-intro-footer > p { font-size: 15px; }
  .opening-poster { object-position: 43% 50%; }
}
@media (max-width: 360px) {
  .cinematic-opening .hero-brand { width: 272px; height: 109px; }
}
@media (max-height: 570px) {
  .cinematic-opening .hero-brand { width: 270px; height: 108px; }
  .cinematic-opening .film-intro { --brand-caption-gap: 12px; grid-template-rows: minmax(0, .7fr) auto minmax(0, 1.3fr); }
  .cinematic-opening .film-intro-footer > p { font-size: 14px; }
  .cinematic-opening .round-link { left: calc(50% - 21px); bottom: 64px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-opening #kitchen-stage { opacity: 1; }
  .opening-film { display: none; }
  .cinematic-opening .film-intro .eyebrow,
  .cinematic-opening .hero-brand,
  .cinematic-opening .film-intro-footer > p,
  .cinematic-opening .round-link { animation: none; }
}