/* ==========================================================================
   AWOOGA — AwooView 360 ("The Observation Deck")
   --------------------------------------------------------------------------
   The page used to live in the web portal dressed as a museum: cream, coral,
   teal, an emoji marquee and a hero the panorama sat three screens below.
   Here the panorama IS the page. Everything above it is a nameplate and
   everything below it is a caption.

   The visual idea is a wheelhouse window: a brushed bezel with brass screws,
   an engraved plate underneath telling you which station you're looking at,
   and hardware you press to move between them. All colour comes from
   tokens.css, so this page can never drift away from the rest of the site.
   ========================================================================== */

[data-awooview] { --av-bezel: #1a2f45; --av-bezel-lt: #27435f; --av-screw: #9fb0c0; }

/* The script hides the placeholder stage and the rail with the `hidden`
   attribute, but both carry a `display` of their own further down and a class
   selector beats the UA sheet's [hidden] rule — so the placeholder painted on
   top of a perfectly good panorama. Say it once, here, for the whole page. */
[data-awooview] [hidden] { display: none !important; }

/* ---------- The deck (navy hero, flush under the sticky header) ---------- */
.av-deck {
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(201, 162, 39, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 70% at 90% 100%, rgba(29, 77, 120, 0.45), transparent 65%),
    var(--navy-900);
  color: var(--cream);
  padding: clamp(1.6rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.av-deck h1, .av-deck h2, .av-deck h3 { color: var(--cream); }
.av-deck .eyebrow { color: var(--brass-lt); }

/* Bubbles. She has a bubble smokestack; the page is allowed one indulgence. */
.av-bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.av-bubbles span {
  position: absolute; bottom: -30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(247, 241, 227, 0.5), rgba(247, 241, 227, 0.06) 60%, transparent 70%);
  border: 1px solid rgba(247, 241, 227, 0.16);
  animation: av-rise linear infinite;
}
@keyframes av-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: 0.75; }
  100% { transform: translateY(-118vh) translateX(24px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .av-bubbles { display: none; } }

.av-deck__head {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 0.4rem clamp(1.5rem, 4vw, 3rem);
}
.av-deck__head > * { flex: 1 1 340px; min-width: 0; }
.av-deck__head .eyebrow { flex-basis: 100%; }
.av-deck__head h1 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); margin-bottom: 0; max-width: 20ch; }
.av-deck__head h1 em { font-style: normal; color: var(--brass-lt); }
.av-deck__head .lead { color: rgba(247, 241, 227, 0.82); margin: 0 0 0.35rem; font-size: 1.02rem; }

/* Return chip — only rendered for visitors who arrived from the web portal. */
.av-portal-back {
  position: relative; z-index: 1;
  display: none; align-items: center; gap: 0.5rem;
  margin-bottom: 1rem; padding: 0.42rem 0.95rem;
  border: 1px solid rgba(247, 241, 227, 0.28); border-radius: 999px;
  font-size: 0.84rem; font-weight: 600; color: rgba(247, 241, 227, 0.85);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.av-portal-back:hover { background: var(--cream); color: var(--navy-900); }
[data-from-portal] .av-portal-back { display: inline-flex; }

/* ---------- The window ---------------------------------------------------
   A bezel with four screws. The screws are ::before/::after on two spans
   rather than eight elements, and they are decoration only. */
.av-window {
  position: relative; z-index: 1;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(10px, 1.4vw, 18px);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(160deg, var(--av-bezel-lt), var(--av-bezel) 45%, #142639);
  border: 1px solid rgba(247, 241, 227, 0.14);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(247, 241, 227, 0.14);
}
.av-window__screws { position: absolute; inset: 0; pointer-events: none; }
.av-window__screws i {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--av-screw), #5d6f7f);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.av-window__screws i::after {
  content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 3.5px;
  height: 1.5px; background: rgba(12, 32, 52, 0.6); border-radius: 1px;
}
.av-window__screws i:nth-child(1) { top: 9px; left: 9px; }
.av-window__screws i:nth-child(2) { top: 9px; right: 9px; }
.av-window__screws i:nth-child(3) { bottom: 9px; left: 9px; }
.av-window__screws i:nth-child(4) { bottom: 9px; right: 9px; }

.av-stage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #081726;
  /* Height is set against the viewport, not the width. An aspect-ratio here
     shrinks the box on BOTH axes once max-height bites, which pulled the
     window in from the sides of its own bezel; and a 360 view crops rather
     than letterboxes, so the window's shape need not match the photo's. */
  height: clamp(300px, 56vh, 560px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 18px 44px rgba(0, 0, 0, 0.45);
}
@media (max-width: 640px) { .av-stage { height: clamp(260px, 46vh, 420px); } }

#av-pano { position: absolute; inset: 0; }
#av-pano .pnlm-container { background: #081726; }

/* Scene-change wash — the window fogs for a beat instead of hard-cutting. */
.av-wash {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: rgba(8, 23, 38, 0.92);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}
.av-wash.is-on { opacity: 1; visibility: visible; }
.av-wash__label {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--cream);
  letter-spacing: 0.04em;
}
.av-wash__label::after {
  content: ""; display: block; width: 46px; height: 2px; margin: 0.7rem auto 0;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

/* Placeholder state — no scenes yet, or this station has no photo. */
.av-empty {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; padding: 2rem; text-align: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(29, 77, 120, 0.5), transparent 70%),
    repeating-linear-gradient(115deg, rgba(247,241,227,0.03) 0 2px, transparent 2px 9px),
    #0a1e31;
}
.av-empty__badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-lt);
}
.av-empty__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brass);
  animation: av-pulse 2s ease-in-out infinite;
}
@keyframes av-pulse { 50% { opacity: 0.25; } }
.av-empty__title { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.6rem); color: var(--cream); }
.av-empty__sub { max-width: 46ch; font-size: 0.94rem; color: rgba(247, 241, 227, 0.7); margin: 0; }

/* ---------- Engraved plate: which station you are standing in ------------ */
.av-plate {
  display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.4rem);
  margin-top: 12px; padding: 0.85rem clamp(0.9rem, 2vw, 1.3rem);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(247, 241, 227, 0.09), rgba(247, 241, 227, 0.04));
  border: 1px solid rgba(247, 241, 227, 0.14);
}
.av-plate__count {
  flex: none; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-900);
  background: var(--brass); border-radius: 6px; padding: 0.3rem 0.6rem;
  white-space: nowrap;
}
.av-plate__text { min-width: 0; }
.av-plate__name {
  display: block; font-family: var(--font-display); font-size: 1.08rem;
  font-weight: 600; color: var(--cream); line-height: 1.25;
}
.av-plate__desc {
  display: block; margin-top: 0.15rem; font-size: 0.88rem; line-height: 1.5;
  color: rgba(247, 241, 227, 0.68);
}
.av-hardware { flex: none; margin-left: auto; display: flex; gap: 0.5rem; }
.av-hardware button {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #f0e0a8, var(--brass) 45%, #9c7d1c);
  color: var(--navy-900); border: 1px solid rgba(12, 32, 52, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.av-hardware button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.av-hardware button:disabled { opacity: 0.32; cursor: not-allowed; }
.av-hardware svg { width: 18px; height: 18px; }
@media (max-width: 620px) {
  .av-plate { flex-wrap: wrap; }
  .av-hardware { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ---------- Station rail ------------------------------------------------- */
.av-rail {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1rem; position: relative; z-index: 1;
}
.av-rail__btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.95rem; border-radius: 999px;
  font-size: 0.88rem; font-weight: 600; color: rgba(247, 241, 227, 0.82);
  background: rgba(247, 241, 227, 0.06);
  border: 1px solid rgba(247, 241, 227, 0.16);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.av-rail__btn:hover { background: rgba(247, 241, 227, 0.13); color: var(--cream); }
.av-rail__btn.is-active {
  background: var(--brass); border-color: var(--brass-lt); color: var(--navy-900);
}
/* A station whose panorama hasn't been shot yet still gets a chip, so the
   route reads complete — it just looks unlit. */
.av-rail__btn.is-empty { opacity: 0.55; border-style: dashed; }
/* Selected still reads as selected, even when the station is unlit. */
.av-rail__btn.is-empty.is-active { opacity: 1; }
.av-rail__icon { font-size: 1rem; line-height: 1; }

.av-hints {
  margin: 1rem 0 0; position: relative; z-index: 1;
  font-size: 0.82rem; color: rgba(247, 241, 227, 0.55);
}
.av-hints kbd {
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
  color: rgba(247, 241, 227, 0.8); background: rgba(247, 241, 227, 0.1);
  border: 1px solid rgba(247, 241, 227, 0.18); border-radius: 5px;
  padding: 0.1rem 0.38rem;
}

/* ---------- Pannellum skin ----------------------------------------------
   The library ships a grey Bootstrap-ish chrome. These rules put it in brass
   and navy so the controls belong to the bezel around them. */
#av-pano .pnlm-controls {
  background: rgba(12, 32, 52, 0.85);
  border: 1px solid rgba(201, 162, 39, 0.4);
  color: var(--cream);
  border-radius: 8px;
  overflow: hidden;
}
#av-pano .pnlm-control:hover { background: rgba(201, 162, 39, 0.28); }
#av-pano .pnlm-control div { border-color: var(--cream) !important; }
#av-pano .pnlm-zoom-in, #av-pano .pnlm-zoom-out { border-bottom-color: rgba(201, 162, 39, 0.3); }
#av-pano .pnlm-load-box {
  background: rgba(8, 23, 38, 0.9); color: var(--cream);
  border: 1px solid rgba(201, 162, 39, 0.4); border-radius: var(--radius-sm);
  font-family: var(--font-sans);
}
#av-pano .pnlm-load-box p { color: var(--cream); }
#av-pano .pnlm-lbar-fill { background: var(--brass); }
#av-pano .pnlm-title-box, #av-pano .pnlm-author-box { display: none; }

/* Scene-to-scene arrows floating in the panorama. */
#av-pano .av-hop {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.25rem; font-weight: 700; color: var(--navy-900);
  background: rgba(201, 162, 39, 0.92);
  border: 2px solid rgba(247, 241, 227, 0.75);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
#av-pano .av-hop:hover { transform: scale(1.12); background: var(--brass-lt); }

/* Points of interest: a pulsing dot; its caption opens on click. */
#av-pano .av-poi { cursor: pointer; }
.av-poi__dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--cream);
  box-shadow: 0 0 0 0 rgba(184, 71, 63, 0.6);
  animation: av-ping 2.4s ease-out infinite;
}
@keyframes av-ping {
  70%  { box-shadow: 0 0 0 16px rgba(184, 71, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 71, 63, 0); }
}
@media (prefers-reduced-motion: reduce) { .av-poi__dot { animation: none; } }
.av-poi__label {
  position: absolute; left: 26px; top: -6px; width: max-content; max-width: 250px;
  padding: 0.6rem 0.75rem; border-radius: var(--radius-sm);
  background: rgba(12, 32, 52, 0.95); border: 1px solid rgba(201, 162, 39, 0.45);
  color: var(--cream); font-size: 0.84rem; line-height: 1.45;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity 0.2s var(--ease), visibility 0.2s var(--ease), transform 0.2s var(--ease);
}
.av-poi__label.is-visible { opacity: 1; visibility: visible; transform: none; }
.av-poi__label strong {
  display: block; font-family: var(--font-display); color: var(--brass-lt);
  font-size: 0.9rem; margin-bottom: 0.15rem;
}
.av-patch img { display: block; pointer-events: none; }

/* ---------- Deck fittings (the old object registry, drier) --------------- */
.av-fittings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; }
.av-fitting { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; }
.av-fitting__tag {
  align-self: flex-start;
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wood-dk); background: rgba(201, 162, 39, 0.16);
  border: 1px solid rgba(201, 162, 39, 0.4); border-radius: 5px;
  padding: 0.22rem 0.5rem;
}
.av-fitting h3 { font-size: 1.18rem; margin: 0.75rem 0 0.35rem; }
.av-fitting p { margin: 0; color: var(--text-soft); font-size: 0.94rem; }
.av-fitting__spec {
  margin-top: auto; padding-top: 0.9rem; display: grid; gap: 0.3rem;
  border-top: 1px solid var(--line);
}
.av-fitting__spec div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.84rem; }
.av-fitting__spec dt { color: var(--text-soft); }
.av-fitting__spec dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Curator's note ----------------------------------------------- */
.av-note { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
@media (min-width: 900px) { .av-note { grid-template-columns: 1.35fr 1fr; gap: 2.6rem; } }
.av-note p { color: rgba(247, 241, 227, 0.82); }
.av-quote {
  margin: 0; padding: 1.5rem 1.6rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(201, 162, 39, 0.16), rgba(201, 162, 39, 0.05));
  border: 1px solid rgba(201, 162, 39, 0.42);
}
.av-quote blockquote {
  margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3; color: var(--cream);
}
.av-quote figcaption {
  margin-top: 0.9rem; font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brass-lt);
}

/* Deadpan spec plate — the joke that survived the move from the museum. */
.av-note__aside { display: grid; gap: 1.4rem; align-content: start; }
.av-admissions { margin: 0; display: grid; gap: 0; }
.av-admissions div {
  display: flex; justify-content: space-between; gap: 1.2rem;
  padding: 0.6rem 0; border-bottom: 1px dashed rgba(247, 241, 227, 0.18);
  font-size: 0.9rem;
}
.av-admissions dt { color: var(--brass-lt); font-weight: 600; }
.av-admissions dd { margin: 0; color: rgba(247, 241, 227, 0.78); text-align: right; }
.av-admissions a { color: var(--brass-lt); text-decoration: underline; text-underline-offset: 3px; }
.av-admissions a:hover { color: var(--cream); }

/* ---------- Still to come ------------------------------------------------ */
.av-soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.av-soon li {
  list-style: none; padding: 1.1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.av-soon h3 { font-size: 1.02rem; margin: 0 0 0.3rem; }
.av-soon p { margin: 0; font-size: 0.9rem; color: var(--text-soft); }
.av-soon ul { margin: 0; padding: 0; }

/* ---------- Where to next ------------------------------------------------ */
.next-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.next-link { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.next-link h3 { font-size: 1.15rem; margin: 0; }
.next-link p { margin: 0; color: var(--text-soft); font-size: 0.92rem; }
.next-link .xcard__arrow { color: var(--red); font-weight: 700; font-size: 0.9rem; margin-top: 0.6rem; }