/* The video page: the 3D tour's sheet, rail, caption and controls (style.css) over full-screen clips. */

.screen { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 0; background: var(--paper); overflow: hidden; }
/* On a portrait screen the 16:9 photoreal clips are cropped; --fx moves the crop onto the subject. */
.clip, .still {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: var(--fx, 50%) 50%;
}
.clip { opacity: 0; }
.clip.is-front { opacity: 1; }
.still { opacity: 0; transition: opacity var(--fade, 0.7s) ease; pointer-events: none; }
.still.is-on { opacity: 1; }
.still.is-top { z-index: 1; }
.is-instant .still { transition: none; }

/* over a photo the mark needs the same glass as the caption */
.brand {
  left: calc(var(--gutter) * 0.75 + 10px); top: calc(var(--gutter) * 0.75 + 8px); padding: 10px 14px 9px;
  background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.caption { transition: opacity 0.45s ease, transform 0.45s ease; }
.caption.is-away { opacity: 0; transform: translateY(10px); }

/* audio: muted at first; the button shows the speaker with waves once it is on */
.ctl--audio { padding: 0 16px 0 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.24em; margin-right: 6px; }
.ctl--audio .wave { display: none; }
.ctl--audio[aria-pressed="true"] .wave { display: inline; }
.ctl--audio[aria-pressed="true"] .mute { display: none; }

/* autopilot: play icon when off; on, the button stays dark with a pause icon */
.ctl--auto { padding: 0 16px 0 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.24em; }
.ctl--auto .pause { display: none; }
.ctl--auto[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ctl--auto[aria-pressed="true"] .pause { display: inline; }
.ctl--auto[aria-pressed="true"] .play { display: none; }

/* the last stop: the request for a visit, beside the rail */
.book {
  position: fixed; z-index: 4; top: 50%; right: calc(var(--gutter) * 0.75 + 72px); transform: translate(12px, -50%);
  width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 2 * (var(--gutter) * 0.75 + 76px));
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 20px 22px 18px; background: rgba(243, 239, 230, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-left: 1px solid var(--ink); box-shadow: 0 18px 50px rgba(29, 27, 24, 0.12);
  opacity: 0; visibility: hidden; transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}
.is-end .book { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.book__n { font-family: var(--mono); font-size: 11px; color: var(--bronze); letter-spacing: 0.06em; }
.book__title { margin: 4px 0 8px; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.02; }
.book__text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: rgba(29, 27, 24, 0.82); }
.book__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.book__field { display: block; margin-bottom: 12px; }
.book__field span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); }
.book__field input {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; margin: 0; padding: 6px 0 5px;
  border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: transparent; outline: none;
  font: 15px/1.3 var(--sans); color: var(--ink); transition: border-color 0.2s ease;
}
.book__field input:focus { border-bottom-color: var(--ink); }
.book__field input[aria-invalid="true"] { border-bottom-color: #9a3a26; }
.book__field:has([aria-invalid="true"]) span { color: #9a3a26; }
.book__check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.book__check input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--ink); }
.book__check input[aria-invalid="true"] { outline: 1px solid #9a3a26; outline-offset: 2px; }
.book__check a, .book__fail a, .book__done a { color: var(--ink); }
.book__send {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 46px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.24em; transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.book__send:hover { background: transparent; color: var(--ink); }
.book__send:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.is-sending .book__send { opacity: 0.55; pointer-events: none; }
.book__error, .book__fail { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: #9a3a26; }
.book__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book__done:focus { outline: none; }
.book__done .book__text { margin: 0; }

@media (max-width: 760px) {
  .brand { left: 16px; top: 20px; padding: 8px 12px 7px; }
  .ctl--audio .ctl__label { display: none; }
  .ctl--audio { padding: 0; margin-right: 0; }
  .ctl--auto .ctl__label { display: none; }
  .ctl--auto { padding: 0; }
  /* on a phone the form takes the place of the caption, above the controls */
  .book {
    top: auto; right: 16px; bottom: 84px; left: 16px; width: auto; max-height: calc(100dvh - 84px - 84px);
    padding: 16px 16px 14px; transform: translateY(12px);
  }
  .is-end .book { transform: none; }
  .is-end .caption, .is-end .rail { opacity: 0; visibility: hidden; }
  .book__title { font-size: 26px; }
  .book__text { font-size: 13px; margin-bottom: 10px; }
  .book__field input { font-size: 16px; }   /* below 16px iOS zooms into the field */
}
@media (pointer: coarse) {
  .brand { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(243, 239, 230, 0.9); }
  .book { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(243, 239, 230, 0.96); }
}
@media (prefers-reduced-motion: reduce) { .still, .caption, .book { transition: none; } }