/* the pinned stage: places as place cards, caption beside or below, the dollar chip */
.motion .seat-act { height: calc(100svh + 7 * 12svh); position: relative; }
.motion .seat-stage { z-index: 0; }
.motion .seat-bg { display: block; position: absolute; inset: 0; z-index: 0; }
.motion .seat-bg img { width: 100%; height: 100%; object-fit: cover; }
/* no photograph under the seating plan: a bottle-green leather runner behind the place cards, a band of colour */
.motion .seat-bg::before {
  content: ""; position: absolute; left: calc(var(--gutter) - 8px); top: 0; bottom: 84px; width: 192px;
  background: var(--bottle) url(../img/tex/leather-512.webp) 0 0 / 512px; border: 1px solid var(--brass-deep); border-top: 0;
  box-shadow: inset 0 0 60px rgba(7, 8, 6, 0.55);
}
.motion .glow-seat {
  display: block; z-index: 1; inset: 0 auto auto 0; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; will-change: transform;
  background: radial-gradient(circle, rgba(242, 199, 122, 0.3), transparent 66%); transition: transform 480ms var(--ease-sine);
}
.gl-on .glow-seat { opacity: 0; }
.motion .skip-seat { display: block; top: calc(var(--bar-h) + 8px); }
.motion .seat-ui { position: absolute; inset: 0; z-index: 3; max-width: none; margin: 0; padding: 0; background: none; }
.motion .region { position: absolute; left: var(--gutter); top: calc(var(--bar-h) + 12px); margin: 0; }
.motion .seats { position: absolute; left: var(--gutter); top: calc(var(--bar-h) + 68px); width: 172px; display: flex; flex-direction: column; gap: 6px; }
.motion .seat { padding: 0; border: 0; }
.place {
  position: relative; display: flex; align-items: center; width: 100%; height: 48px; padding: 0 8px 0 28px; text-align: left;
  background: #4b4a42 url(../img/tex/paper-512.webp) 0 0 / 512px; background-blend-mode: multiply; color: var(--ivory-dim);
  border: 1px solid var(--brass-deep); transform: translateY(4px);
  transition: background-color 300ms var(--ease-candle), color 300ms var(--ease-candle), border-color 300ms var(--ease-candle), transform 300ms var(--ease-candle), box-shadow 300ms var(--ease-candle);
}
.place .pos { margin: 0; font-size: 0.875rem; color: inherit; letter-spacing: 0.02em; white-space: nowrap; }
.place .seat-name { display: none; }
.place::before, .place::after { content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 12px; margin-top: -6px; }
.place::before { border: 1px solid currentColor; }
.place::after { background: currentColor; transform: scale(0.55); opacity: 0; transition: opacity 200ms var(--ease-candle); }
.place:focus-visible { outline: 2px solid var(--brass-glint); outline-offset: 3px; }
.is-seated .place { background-color: #c9c2b0; color: var(--oxblood); border-color: var(--brass); transform: none; }
.is-seated .place::after { opacity: 1; }
.is-current .place { background-color: #fff; color: var(--oxblood); border-color: var(--brass); transform: none; box-shadow: 0 0 30px 3px rgba(242, 199, 122, 0.38); }
.is-current .place::after { opacity: 0; }

.motion .seat-note {
  position: absolute; left: 188px; top: 0; width: calc(100vw - 2 * var(--gutter) - 188px); max-width: 30em;
  opacity: 0; pointer-events: none; transform: translateY(8px); filter: blur(2px);
  transition: opacity 200ms ease, transform 200ms ease, filter 200ms ease;
}
.is-current .seat-note { opacity: 1; pointer-events: auto; transform: none; filter: none; transition-delay: 80ms; }
.motion .seat-note .reg { margin: 0; }
.motion .note-name { display: block; font: 500 1.375rem/1.15 var(--f-display); color: var(--ivory); margin-bottom: var(--s-3); }
.motion .note-s { display: block; font-size: 0.875rem; line-height: 1.55; color: var(--ivory-dim); }
.motion .note-l, .motion .in-uk { display: none; }

.motion .dollar {
  position: absolute; left: 0; top: 0; z-index: 4; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--brass); color: var(--night); font: 600 1.1rem/1 var(--f-display); pointer-events: none;
  transition: transform 480ms var(--ease-sine), opacity 100ms ease; box-shadow: 0 0 18px rgba(242, 199, 122, 0.45);
}
.seat-ui[data-region="us"] .d-uk, .seat-ui[data-region="uk"] .d-us { display: none; }

.motion .seat-foot { display: block; position: absolute; left: var(--gutter); right: 8.5rem; bottom: calc(14px + env(safe-area-inset-bottom)); font-size: 0.875rem; line-height: 1.45; color: var(--ivory-faint); }
.motion .seat-foot .foot-s { display: block; }
.motion .seat-skip { display: inline-flex; align-items: center; position: absolute; right: var(--gutter); bottom: calc(10px + env(safe-area-inset-bottom)); min-height: 44px; font: 700 var(--t-label) var(--f-sc); letter-spacing: 0.08em; color: var(--ivory-dim); }
.motion .foot-flow { display: block; }

@media (min-width: 768px) {
  .motion .seat-act { height: calc(100vh + 7 * 60vh); }
  .motion .seats { width: 220px; }
  .motion .seat-bg::before { width: 236px; }
  .motion .seat-foot { right: 10rem; }
  .motion .seat-note { left: 250px; width: calc(100vw - 2 * var(--gutter) - 250px); max-width: 32em; }
  .motion .note-name { font-size: 1.75rem; }
  .motion .note-s { font-size: 1rem; }
  .motion .place .pos { font-size: 0.875rem; }
}
/* desktop: seven place cards along the runner, the caption below the row */
@media (min-width: 1024px) {
  .motion .seats { left: var(--gutter); right: var(--gutter); width: auto; top: 38%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
  .place { height: auto; min-height: 124px; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 14px 14px 14px; }
  .place::before, .place::after { left: 14px; top: 14px; margin: 0; }
  .place .pos { white-space: normal; }
  .place .seat-name { display: block; margin-top: 6px; font: 500 1.125rem/1.2 var(--f-display); color: inherit; transition: color 300ms var(--ease-candle); }
  .is-seated .place .seat-name, .is-current .place .seat-name { color: var(--ink); }
  .motion .seat-note { left: 0; top: calc(100% + 56px); width: min(36em, 60%); max-width: none; }
  .motion .note-name { display: none; }
  .motion .note-l { display: block; font-size: 1.0625rem; line-height: 1.6; color: var(--ivory); }
  .motion .note-s, .motion .seat-foot .foot-s { display: none; }
  .motion .seat-foot .foot-l { display: block; max-width: 52em; }
  .motion .foot-flow { display: none; }
}
@media (min-width: 1024px) {
  .motion .seat-bg::before { left: 0; right: 0; width: auto; top: calc(38% - 56px); bottom: auto; height: 220px; border-inline: 0; border-block: 1px solid var(--brass-deep); }
}
@media (min-width: 1200px) { .motion .seats { top: 36%; } .motion .seat-bg::before { top: calc(36% - 56px); } }

@media (max-width: 1023px) and (max-height: 620px) {
  .place { height: 44px; }
  .motion .seats { gap: 4px; top: calc(var(--bar-h) + 64px); }
}