/* The lodge in 3D (explore/viewer.js), the section after the gallery. Its own file, and nothing in it leans on
   the gallery's rules: the poster, the canvas and the two squares stack in one 5:3 frame whatever else is loaded.
   Colours are written out, not var()s, so a site.css of any age cannot move them. */

.view-section {
  padding: 56px 0;
  background: #04060a;
  border-bottom: 2px solid #1a1816;
}
.view-section .lead { color: #b1b1a8; }
.view {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  margin: 0;
  overflow: hidden;
  background: #141722;
  border: 2px solid #1a1816;
  box-shadow: 6px 6px 0 #1a1816;
}
.view > .poster, .view > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  image-rendering: pixelated;
}
/* one finger up and down still scrolls the page; across turns the view, two fingers zoom and pan */
.view > canvas { opacity: 0; touch-action: pan-y; cursor: grab; }
.view > canvas:active { cursor: grabbing; }
.view.live > canvas { opacity: 1; }
.view.live > .poster { visibility: hidden; }
.view > .clock, .view > .whole {
  position: absolute;
  bottom: 12px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #a9b0a6;
  background: #141722;
  box-shadow: 4px 4px 0 #1a1816;
  color: #a9b0a6;
  cursor: pointer;
}
.view > .clock { right: 12px; }
.view > .whole { right: 68px; }
.view > .clock[hidden] { display: none; }
.view svg { width: 28px; height: 28px; fill: currentColor; }
.view > .clock svg { display: none; }
.view > .clock[data-when="dusk"] .dusk, .view > .clock[data-when="night"] .night,
.view > .clock[data-when="day"] .day { display: block; }
.view > .clock:focus-visible, .view > .whole:focus-visible { outline: 2px solid #d6a04c; outline-offset: 2px; }

@media (max-width: 600px) {
  .view-section { padding: 40px 0; }
  .view { box-shadow: 4px 4px 0 #1a1816; }
  .view > .clock, .view > .whole { width: 36px; height: 36px; bottom: 8px; }
  .view > .clock { right: 8px; }
  .view > .whole { right: 52px; }
  .view svg { width: 22px; height: 22px; }
}