/* ce-immersive.css — the 360 viewer's HUD.
 *
 * Linked directly by any page that can show a 360, because the badge and the "Look around"
 * button are painted before anyone taps. It is its own file rather than part of coastal.css so
 * that adding it costs one small request on those pages instead of busting the ?v= on the
 * site-wide stylesheet, which 74 references share. The viewer SCRIPT and the panorama itself
 * are still fetched only on a tap — that is where the weight is, and that is the delivery
 * argument for the feature. ce-immersive.js injects this file if a page has not linked it.
 *
 * Layout follows the house ui-foundry catalog: a stage with a HUD floating over it, a readout
 * for live numbers, a real track/fill for the byte count, small icon-weight buttons. Every
 * colour, font and radius comes from the chamber's own --ce-* tokens, so a Design Studio theme
 * change carries through here as it does everywhere else. No foundry palette is imported.
 *
 * The one deliberate departure from the site's light, warm surfaces: this HUD is dark. It sits
 * on top of a photograph, and a cream panel over a photo is unreadable in daylight on a phone.
 */

.ce-imm {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: var(--ce-deep-3, #0e2747);
  font-family: var(--ce-font-body, system-ui, sans-serif);
  /* `clip` where it exists, because `hidden` is still a SCROLL CONTAINER: content can be
     scrolled into it programmatically even though no scrollbar shows. The poster's scale(1.08)
     overhangs by 8%, so anything calling scrollIntoView() inside here could drag the whole
     viewer sideways — and something did. `clip` cannot be scrolled at all. */
  overflow: hidden;
  overflow: clip;
  touch-action: none;
  --ce-imm-glass: rgba(10, 26, 48, .74);
  --ce-imm-edge: rgba(255, 253, 248, .18);
  --ce-imm-ink: var(--ce-cream, #fffdf8);
  --ce-imm-dim: rgba(255, 253, 248, .68);
  /* Raised by the JS when the cookie banner is on screen, so the stop strip clears it. */
  --ce-imm-bottom: 0px;
}

/* The JS hides and shows these parts with the `hidden` property, and several of them carry a
   display rule of their own further down, which would otherwise win over the UA's [hidden].
   Say it once here so `hidden` means hidden everywhere inside the viewer. */
.ce-imm [hidden] { display: none !important; }

/* Hold the page still underneath — nothing is worse than scrolling the article while you
   are trying to look up at a lighthouse. */
body.ce-imm-open { overflow: hidden; }

.ce-imm__poster,
.ce-imm__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ce-imm__poster {
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(.85) brightness(.72);
  transform: scale(1.08);            /* hide the soft edge the blur leaves */
}

/* Once the panorama is up the poster has done its job, but it stays as the backdrop behind
   a letterboxed canvas rather than leaving a black bar. */
.ce-imm.is-live .ce-imm__poster { filter: blur(26px) brightness(.45); }

/* ...but when we have just told the visitor "here is the photo", it has to BE the photo:
   sharp, whole, and undimmed. Must follow .is-live to win — a stop can fail mid-tour, with
   the scene already up. */
.ce-imm.is-bare .ce-imm__poster {
  filter: none;
  transform: none;
  background-size: contain;
  background-repeat: no-repeat;
}

.ce-imm__gl { cursor: grab; outline: none; }
.ce-imm.is-grabbing .ce-imm__gl { cursor: grabbing; }
.ce-imm__gl:focus-visible { box-shadow: inset 0 0 0 3px var(--ce-focus-ring, #6fd3e0); }

/* ---- HUD: title + live compass readout ------------------------------------------- */

.ce-imm__head {
  position: absolute;
  top: 0; left: 0;
  max-width: min(58%, 34rem);
  margin: clamp(.6rem, 2vw, 1.1rem);
  padding: .55rem .9rem;
  border: 1px solid var(--ce-imm-edge);
  border-radius: var(--ce-r-card, 14px);
  background: var(--ce-imm-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ce-imm__name {
  margin: 0;
  font-family: var(--ce-font-display, Georgia, serif);
  font-size: clamp(.98rem, 2.4vw, 1.2rem);
  line-height: 1.25;
  color: var(--ce-imm-ink);
}

/* The readout carries a number that changes as you turn, so it gets tabular figures and a
   fixed width — a bearing that jitters sideways as the digits change reads as broken. */
.ce-imm__readout {
  margin: .3rem 0 0;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ce-teal-sky, #6fd3e0);
}

/* ---- HUD: controls ---------------------------------------------------------------- */

.ce-imm__tools {
  position: absolute;
  top: 0; right: 0;
  display: flex;
  gap: .4rem;
  margin: clamp(.6rem, 2vw, 1.1rem);
}

.ce-imm__btn {
  font: inherit;
  font-size: .82rem;
  line-height: 1;
  padding: .58rem .85rem;
  color: var(--ce-imm-ink);
  background: var(--ce-imm-glass);
  border: 1px solid var(--ce-imm-edge);
  border-radius: var(--ce-r-pill, 999px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.ce-imm__btn:hover { background: rgba(10, 26, 48, .9); border-color: rgba(255, 253, 248, .34); }
.ce-imm__btn:focus-visible { outline: 3px solid var(--ce-focus-ring, #6fd3e0); outline-offset: 2px; }
.ce-imm__btn--close { background: var(--ce-coral-deep, #c2410c); border-color: transparent; }
.ce-imm__btn--close:hover { background: var(--ce-coral, #e8743b); }

/* ---- loading: a real byte count, not a spinner ------------------------------------ */

.ce-imm__load {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(22rem, 76vw);
  text-align: center;
  color: var(--ce-imm-ink);
}

.ce-imm__note {
  margin: 0 0 .7rem;
  font-size: .92rem;
  color: var(--ce-imm-dim);
}

.ce-imm__track {
  height: 4px;
  border-radius: var(--ce-r-pill, 999px);
  background: rgba(255, 253, 248, .18);
  overflow: hidden;
}

.ce-imm__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--ce-coral, #e8743b);
  transition: width .12s linear;
}

/* No content-length to count: sweep instead of lying about a percentage. */
.ce-imm__track.is-indeterminate .ce-imm__fill {
  width: 38%;
  animation: ce-imm-sweep 1.1s ease-in-out infinite;
}

@keyframes ce-imm-sweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(300%); }
}

.ce-imm__pct {
  display: block;
  margin-top: .5rem;
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--ce-imm-dim);
}

.ce-imm__num { font-variant-numeric: tabular-nums; }

.ce-imm__msg {
  position: absolute;
  left: 50%; bottom: 18%;
  transform: translateX(-50%);
  margin: 0;
  max-width: min(28rem, 84vw);
  padding: .7rem 1rem;
  text-align: center;
  font-size: .9rem;
  color: var(--ce-imm-ink);
  background: var(--ce-imm-glass);
  border: 1px solid var(--ce-imm-edge);
  border-radius: var(--ce-r-card, 14px);
}

/* ---- the walk-on marker ------------------------------------------------------------ */

.ce-imm__spot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem .4rem .45rem;
  font: inherit;
  font-size: .84rem;
  color: var(--ce-imm-ink);
  background: var(--ce-imm-glass);
  border: 1px solid var(--ce-imm-edge);
  border-radius: var(--ce-r-pill, 999px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  white-space: nowrap;
}

.ce-imm__spot:hover { background: rgba(10, 26, 48, .92); }
.ce-imm__spot:focus-visible { outline: 3px solid var(--ce-focus-ring, #6fd3e0); outline-offset: 2px; }

.ce-imm__spot-ring {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--ce-coral, #e8743b);
  box-shadow: 0 0 0 0 rgba(232, 116, 59, .55);
  animation: ce-imm-pulse 2.4s ease-out infinite;
}

@keyframes ce-imm-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 116, 59, .5); }
  70% { box-shadow: 0 0 0 .8rem rgba(232, 116, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 116, 59, 0); }
}

/* ---- the stop strip ---------------------------------------------------------------- */

.ce-imm__strip {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(.6rem, 2.4vw, 1.3rem) + var(--ce-imm-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  gap: .4rem;
  max-width: min(94vw, 60rem);
  padding: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--ce-imm-glass);
  border: 1px solid var(--ce-imm-edge);
  border-radius: var(--ce-r-pill, 999px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ce-imm__strip::-webkit-scrollbar { display: none; }

.ce-imm__stop {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: none;
  font: inherit;
  font-size: .82rem;
  padding: .42rem .85rem .42rem .42rem;
  color: var(--ce-imm-dim);
  background: none;
  border: 0;
  border-radius: var(--ce-r-pill, 999px);
  cursor: pointer;
  white-space: nowrap;
}

.ce-imm__stop:hover { color: var(--ce-imm-ink); background: rgba(255, 253, 248, .09); }
.ce-imm__stop:focus-visible { outline: 3px solid var(--ce-focus-ring, #6fd3e0); outline-offset: -2px; }

.ce-imm__stop[aria-current="true"] {
  color: var(--ce-imm-ink);
  background: rgba(255, 253, 248, .14);
}

.ce-imm__stop-n {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
  color: var(--ce-deep-3, #0e2747);
  background: var(--ce-imm-dim);
}

.ce-imm__stop[aria-current="true"] .ce-imm__stop-n {
  background: var(--ce-coral, #e8743b);
  color: var(--ce-cream, #fffdf8);
}

/* ---- the one-time hint ------------------------------------------------------------- */

.ce-imm__hint {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(4.2rem, 12vw, 5.4rem) + var(--ce-imm-bottom, 0px));
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  font-size: .8rem;
  color: var(--ce-imm-dim);
  background: var(--ce-imm-glass);
  border: 1px solid var(--ce-imm-edge);
  border-radius: var(--ce-r-pill, 999px);
  animation: ce-imm-fade .4s ease both;
  pointer-events: none;
}

.ce-imm__kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  line-height: 1;
  padding: .22rem .4rem;
  color: var(--ce-imm-ink);
  border: 1px solid var(--ce-imm-edge);
  border-bottom-width: 2px;
  border-radius: var(--ce-r-sm, 6px);
  background: rgba(255, 253, 248, .08);
}

@keyframes ce-imm-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- the doorway on the page ------------------------------------------------------- */

.ce-imm-open-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: inherit;
  font-size: .88rem;
  padding: .6rem 1.05rem;
  cursor: pointer;
  color: var(--ce-cream, #fffdf8);
  background: rgba(10, 26, 48, .62);
  border: 1px solid rgba(255, 253, 248, .3);
  border-radius: var(--ce-r-pill, 999px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .15s ease, border-color .15s ease;
}

.ce-imm-open-btn:hover { background: rgba(10, 26, 48, .85); border-color: rgba(255, 253, 248, .5); }
.ce-imm-open-btn:focus-visible { outline: 3px solid var(--ce-focus-ring, #6fd3e0); outline-offset: 2px; }

/* The 360 badge — absolute on a gallery tile, inline in a route stop's title. */
.ce-imm-badge {
  position: absolute;
  left: .5rem;
  top: .5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ce-cream, #fffdf8);
  background: rgba(10, 26, 48, .78);
  border-radius: var(--ce-r-pill, 999px);
  pointer-events: none;
}

.ce-imm-badge.is-inline {
  position: static;
  vertical-align: .1em;
  margin-left: .35rem;
  background: var(--ce-teal-deep, #0e7490);
}

/* A stop you can step into should look like one. */
.route-stops li.has-360 { cursor: pointer; }
.route-stops li.has-360:hover .st b { text-decoration: underline; }
.route-stops li.has-360:focus-visible { outline: 3px solid var(--ce-focus-ring, #6fd3e0); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ce-imm__spot-ring,
  .ce-imm__track.is-indeterminate .ce-imm__fill { animation: none; }
  .ce-imm__fill { transition: none; }
  .ce-imm__hint { animation: none; }
}

/* On a phone the controls crowd the picture, so the title gives way first. */
@media (max-width: 30rem) {
  .ce-imm__head { max-width: calc(100% - 12.5rem); }
  .ce-imm__btn { padding: .5rem .7rem; font-size: .78rem; }
  .ce-imm__hint { display: none; }
}