/* Loaded after experience-refinements. The film frame/hotspots share one
   unchanged contained rectangle; header/logo/cue are overlays only. */
body[data-city-v2="true"]:is([data-page="home"], [data-page="service"]):has(.city-film[data-city-film]) #page-shell > .header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  z-index: 40;
}
body[data-city-v2="true"][data-film-chrome="true"] #page-shell > .header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  z-index: 40;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .16s ease, transform .18s ease;
}
body[data-city-v2="true"][data-film-chrome="true"][data-film-header="hidden"] #page-shell > .header:not(:focus-within) {
  opacity: 0;
  transform: translateY(-105%);
  pointer-events: none;
}
/* Keep the links in the keyboard order: focus reveals navigation immediately. */
body[data-city-v2="true"][data-film-chrome="true"] #page-shell > .header:focus-within {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: none;
}
body[data-city-v2="true"]:is([data-page="home"], [data-page="service"]) .city-film[data-city-film] {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: 0;
  grid-template-columns: none;
  grid-template-rows: none;
}
body[data-city-v2="true"]:is([data-page="home"], [data-page="service"]) .city-film[data-city-film] .city-film-stage {
  position: relative;
  top: calc(var(--city-film-head, 64px) + 16px);
  width: 100%;
  height: calc(100% - var(--city-film-head, 64px) - 16px);
  min-height: 0;
}
body[data-city-v2="true"]:is([data-page="home"], [data-page="service"]) .city-film[data-city-film] video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}
body[data-city-v2="true"] .city-film[data-city-film="service"] .service-film-logo {
  position: absolute;
  inset: auto;
  left: var(--film-logo-x, 0px);
  top: var(--film-logo-y, 0px);
  width: var(--film-logo-width, 0px);
  height: var(--film-logo-height, 0px);
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  background: transparent;
  opacity: var(--film-logo-opacity, 0);
  transform: perspective(800px) translateZ(var(--film-logo-depth, 0px));
  transform-origin: 50% 50%;
  /* Intentionally no CSS animation or transition: reversing the scroll must
     immediately reproduce the corresponding video-time pose. */
  isolation: isolate;
}
body[data-city-v2="true"] .city-film[data-city-film="service"] .service-film-logo::after {
  content: "";
  position: absolute;
  inset: -55%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, #fff5df 0%, #b8fff4 10%, #65dce8a8 25%, #4a9ce329 46%, transparent 67%);
  opacity: var(--film-logo-flash, 0);
  border-radius: 50%;
}
body[data-city-v2="true"] .service-film-logo svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
}
body[data-city-v2="true"] .city-film[data-scene-index="0"] .service-film-logo {
  display: none;
}
body[data-city-v2="true"] .city-film[data-city-film] .film-scroll-cue {
  top: max(8px, env(safe-area-inset-top, 0px));
  right: auto;
  bottom: auto;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  max-width: calc(100% - 36px);
  opacity: 0;
  visibility: hidden;
}
body[data-city-v2="true"] .city-film[data-film-chrome-cue="visible"] .film-scroll-cue {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  body[data-city-v2="true"][data-film-chrome="true"] #page-shell > .header { transition: none; }
  body[data-city-v2="true"] .city-film .service-film-logo { display: none; }
  body[data-city-v2="true"] .city-film .service-film-logo::after { display: none; }
}