/* ==========================================================================
   Pikett · division demo "div-spatial" (divisions/spatial.html hero stage)
   The UI over the live room (js/scenes/div-spatial.js builds it inside the
   scene element):
     .dspatial__xr    top left: "Enter VR" (only with a headset) or the note
     .dspatial__bar   the dock: Lights (with the cue pips) · Reset view · zoom
   The overlay is a size container, so the dock finds its place from the
   stage's own width: beside the hint when there is room, above it when not.
   ========================================================================== */

/* the scene element: grab to orbit; touch keeps vertical page scroll, a
   horizontal drag orbits and two fingers zoom */
.dhero__stage > [data-scene="div-spatial"] {
  cursor: grab; touch-action: pan-y; border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
.dhero__stage > [data-scene="div-spatial"].is-dragging { cursor: grabbing; }
.dhero__stage > [data-scene="div-spatial"]:focus { outline: none; }
/* keyboard focus (arrows orbit, +/- zoom): the ring is drawn by the overlay, since the canvas covers an inset outline */
.dhero__stage > [data-scene="div-spatial"]:focus-visible .dspatial { box-shadow: inset 0 0 0 2px var(--accent); }

/* overlay ----------------------------------------------------------------- */
.dspatial {
  --ds-glass: rgba(13, 13, 17, .56);
  --ds-rim: rgba(243, 242, 238, .13);
  --ds-h: 34px;                       /* control height inside the dock */
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  container: dspatial / size;
  font-family: var(--mono); color: var(--fg);
  -webkit-user-select: none; user-select: none;
}
.dspatial button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* shared liquid-glass surface: blur + a lit top rim + a soft drop */
.dspatial__bar, .dspatial__note {
  background: var(--ds-glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px var(--ds-rim),
    inset 0 1px 0 rgba(243, 242, 238, .10),
    0 18px 40px -18px rgba(0, 0, 0, .75);
}

/* XR slot: the note, or the Enter VR button ---------------------------------- */
.dspatial__xr {
  position: absolute; left: 16px; top: 16px; max-width: calc(100% - 32px);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.dspatial__xr.is-shown { opacity: 1; transform: none; }
.dspatial__note {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 8px 15px 8px 11px; border-radius: 19px;
  font-size: 11.5px; line-height: 1.35; letter-spacing: .01em; color: var(--fg-2);
  text-wrap: balance;                   /* if it ever wraps, never a lone last word */
  pointer-events: none;                 /* a label: drags start right through it */
}
.dspatial__note svg { width: 19px; height: 19px; flex: none; color: var(--fg-3); }
.dspatial__vr {
  position: relative; isolation: isolate; overflow: hidden; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 22px 0 16px; border-radius: 999px;
  background: var(--c); color: #0A0A0C;
  font-family: var(--sans); font-size: 15px; font-weight: 650; font-stretch: 112%; letter-spacing: -.005em; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent), 0 16px 38px -12px var(--c);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .35s;
}
.dspatial__vr svg { width: 22px; height: 22px; flex: none; }
.dspatial__vr::before { /* hover wipe, as on the site buttons */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #F3F2EE;
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.dspatial__vr:hover::before, .dspatial__vr.is-on::before { transform: none; }
.dspatial__vr:active { transform: scale(.97); }
.dspatial__vr.is-busy { pointer-events: none; }
.dspatial__vr.is-busy svg { animation: dspatial-busy 1.1s var(--ease-io) infinite; }
.dspatial__vr:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@keyframes dspatial-busy { 50% { opacity: .35; } }

/* the dock --------------------------------------------------------------- */
.dspatial__bar {
  position: absolute; right: 16px; bottom: 14px;
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
  pointer-events: auto;
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.dspatial__btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ds-h); padding: 0 13px 0 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg); white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), opacity .35s, transform .45s var(--ease);
}
.dspatial__btn svg { width: 17px; height: 17px; flex: none; transition: transform .8s var(--ease); }
.dspatial__btn:hover { background: rgba(243, 242, 238, .1); }
.dspatial__btn:active { transform: scale(.94); }
.dspatial__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dspatial__btn--icon { width: var(--ds-h); padding: 0; }
.dspatial__btn--icon svg { width: 18px; height: 18px; }
.dspatial__btn.is-limit { opacity: .32; }
.dspatial__btn.is-limit:hover { background: transparent; }
.dspatial__btn[data-reset]:hover svg { transform: rotate(-200deg); }

/* Lights: the sun turns with each cue, the pips show which one is up
   (studio · night · colour, in the colour each cue leans on) */
.dspatial__pips { display: inline-flex; gap: 4px; margin-left: 2px; }
.dspatial__pips i { --p: #F3F2EE; width: 5px; height: 5px; border-radius: 50%; background: rgba(243, 242, 238, .22); transition: background-color .45s var(--ease), box-shadow .45s var(--ease), transform .6s var(--ease); }
.dspatial__pips i:nth-child(2) { --p: var(--c-spatial); }
.dspatial__pips i:nth-child(3) { --p: var(--c-motion); }
.dspatial__pips i.is-on { background: var(--p); box-shadow: 0 0 8px var(--p); transform: scale(1.25); }
.dspatial[data-mood="1"] [data-lights] svg { transform: rotate(120deg); }
.dspatial[data-mood="2"] [data-lights] svg { transform: rotate(240deg); }

/* zoom pair, set apart by a hairline; lit while the wheel zooms the room */
.dspatial__zoom {
  position: relative; display: inline-flex; gap: 2px; margin-left: 5px; border-radius: 999px;
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.dspatial__zoom::before { content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 1px; background: var(--ds-rim); transition: opacity .3s; }
.dspatial.is-engaged .dspatial__zoom {
  background: color-mix(in srgb, var(--c) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 18px -4px color-mix(in srgb, var(--c) 60%, transparent);
}
.dspatial.is-engaged .dspatial__zoom::before { opacity: 0; }

/* before the house lights come up --------------------------------------------- */
.dspatial.is-pre .dspatial__bar { opacity: 0; transform: translateY(10px); }
.dspatial.is-pre .dspatial__xr { opacity: 0; transform: translateY(-8px); }
.dspatial:not(.is-pre) .dspatial__bar { transition-delay: .12s; }

/* layout from the stage's own width ------------------------------------------- */
/* not enough room beside the hint: the dock sits on top of it, left aligned */
@container dspatial (max-width: 759px) {
  .dspatial__bar { right: auto; left: 12px; bottom: 46px; }
  .dspatial__xr { left: 12px; top: 12px; max-width: calc(100% - 24px); }
}
/* phones: the hint wraps to two lines */
@container dspatial (max-width: 400px) {
  .dspatial__bar { --ds-h: 38px; bottom: 62px; padding: 3px; }
  .dspatial__btn { font-size: 10.5px; letter-spacing: .06em; gap: 7px; padding: 0 11px 0 9px; }
  .dspatial__btn--icon { padding: 0; }
  .dspatial__note { font-size: 10.5px; letter-spacing: 0; gap: 8px; padding: 7px 12px 7px 10px; }
  .dspatial__note svg { width: 16px; height: 16px; }
  .dspatial__vr { height: 44px; font-size: 14.5px; padding: 0 20px 0 14px; }
}
@media (pointer: coarse) {
  .dspatial .dspatial__bar { --ds-h: 40px; }
  .dspatial__btn:hover { background: transparent; }
  .dspatial__btn:active { background: rgba(243, 242, 238, .12); }
}

@media (prefers-reduced-motion: reduce) {
  .dspatial__xr, .dspatial__bar { transition: none; }
}