/* ==========================================================================
   scene-nav.css — bottom bar: title (left), dots (centre), actions (right).
   Component: js/ui/SceneNav.js
   ========================================================================== */

#scene-nav {
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-end;
  padding: 60px 28px 28px;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.28) 60%,
      transparent 100%);
}

#scene-nav > * {
  pointer-events: all;
}

/* Scene title (bottom left) */
#scene-title {
  color: #fff;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  line-height: 1.1;
}

/* When the "All locations" panel is open, fade the whole bottom bar out so the
   panel reads cleanly; it fades back in on close. Driven by RoomsPanel.
   #scene-actions is faded as a group rather than per button, so any control
   added to that row is covered without touching this rule. */
#scene-title,
#scene-dots,
#scene-actions {
  transition: opacity 0.35s ease;
}
body.rooms-open #scene-title,
body.rooms-open #scene-dots,
body.rooms-open #scene-actions {
  opacity: 0;
  pointer-events: none;
}

/* Dots (bottom centre) — arrows flank a windowed track of dots. */
#scene-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding-bottom: 3px;
}

/* The track holds every dot; only a window of them is visible at a time
   (dots outside the window get .is-hidden). */
.scene-dots__track {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.scene-dot.is-hidden {
  display: none;
}

/* Persistent "back to overview" (home) button — always visible, sits left of
   the prev arrow. Slightly bigger and higher-contrast than the other round
   nav icons (arrows, website, rooms) since it's the only way back to the
   drone overview once you're inside a location — but kept as a compact round
   icon button, matching the rest of the bar, rather than a large standalone
   pill. Uses the brand gradient (same treatment as in-panorama hotspot
   markers) so it stays visually findable against any panorama background.
   Swaps to a solid white circle — matching the active dot — once you're
   already home, so it reads as "you are here" rather than "go here". */
.scene-nav-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.scene-nav-home:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.scene-nav-home.active {
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.scene-nav-home svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Prev / next arrows */
.scene-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.scene-nav-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.28);
}
.scene-nav-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.scene-nav-arrow svg { width: 15px; height: 15px; }

.scene-dot {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 10px;
  height: 10px;
  padding: 0;
  flex-shrink: 0;
}

/* Gradient halo — sits BEHIND the white dot and expands on hover.
   Declared before ::after so it paints underneath it. */
.scene-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: var(--brand-gradient);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1);
  pointer-events: none;
}

/* The visible white dot — painted on top of the gradient halo. */
.scene-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.scene-dot:hover:not(.active)::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(2);
}
.scene-dot:hover:not(.active)::after {
  background: #fff;
}

/* Active dot: plain white, just a bit bigger than the rest. */
.scene-dot.active::after {
  background: #fff;
  transform: scale(1.45);
}

/* Tooltip: the hotspot name, shown above the dot on hover. */
.scene-dot__tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 11px;
  border-radius: 7px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Little arrow under the tooltip pointing at the dot. */
.scene-dot__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-blue);
}

.scene-dot:hover .scene-dot__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Below 900px the dot strip is dropped entirely — navigation falls to swipe +
   the rooms-panel grid. `display: none` removes the dots from grid flow, which
   would let auto-placement pull the actions into the empty centre column — so
   we pin the title and actions to their columns explicitly to hold them at the
   edges. */
@media (max-width: 900px) {
  /* Drop the arrows + dot track (no room for them), but keep the home
     button — it's the only way back to the drone overview once the dots
     are gone, so it must stay reachable on mobile too. */
  #scene-dots {
    justify-content: flex-start;
  }
  .scene-nav-arrow,
  .scene-dots__track {
    display: none;
  }

  /* Room is tight on mobile — same compact round button as desktop, just
     without the right margin since the arrows/dots next to it are hidden. */
  .scene-nav-home {
    margin-right: 0;
  }

  #scene-nav {
    grid-template-columns: 1fr auto auto;
    column-gap: 12px;
  }

  #scene-title {
    grid-column: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* Just the home button remains here (arrows/track are hidden above). */
  #scene-dots {
    grid-column: 2;
    padding-bottom: 0;
  }

  #scene-actions {
    grid-column: 3;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  #scene-nav {
    padding: 40px 16px 20px;
  }

  /* The 1.5rem clamp() floor is too big for narrow phones — long scene names
     (e.g. "On Top of the Distillation Column") hit the ellipsis instead of
     shrinking further. Lower the floor so it scales down with the viewport. */
  #scene-title {
    font-size: clamp(1rem, 5.5vw, 1.5rem);
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  #scene-nav {
    padding: 50px 20px 22px;
  }
}

@media (min-width: 1600px) {
  #scene-nav {
    padding: 80px 40px 36px;
  }
}

/* Action icons (bottom right) */
#scene-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 900px) {
  #scene-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

#website-btn,
#rooms-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
#website-btn:hover,
#rooms-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

#website-btn svg,
#rooms-btn svg { width: 16px; height: 16px; }

/* ── About + Sustainability buttons ──────────────────────────────────────
   Styled to match an in-panorama hotspot dot: a brand-gradient circle with a
   white glyph (no frosted border like the website/rooms buttons). Both reset
   to a plain, unstyled button first.

   Shown on the drone overview only — SceneNav toggles `body.on-overview` and
   the fade is at the bottom of this block. */
#about-btn,
#sustainability-btn {
  position: relative;   /* anchors .scene-dot__tip */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
/* No hover state on the marker itself — no scale, no colour shift. The
   tooltip appearing on hover is the only feedback these need. */
.about-btn__marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hotspot-pill-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Dark ring behind, matching the in-panorama marker. */
.about-btn__marker::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.about-btn__icon {
  width: 55%;
  height: 55%;
  background: #fff;
  -webkit-mask: url("../../assets/icons/info.svg") no-repeat center / contain;
  mask: url("../../assets/icons/info.svg") no-repeat center / contain;
}
/* Sustainability — same marker, leaf glyph. Slightly larger than the info "i"
   because the leaf's diagonal silhouette reads smaller at the same box size. */
.about-btn__icon--leaf {
  width: 60%;
  height: 60%;
  -webkit-mask-image: url("../../assets/icons/leaf.svg");
  mask-image: url("../../assets/icons/leaf.svg");
}

/* Both reuse the dot-strip tooltip (see .scene-dot__tip above). */
#about-btn:hover .scene-dot__tip,
#sustainability-btn:hover .scene-dot__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Overview-only. Hidden (faded out) by default so there's no flash before the
   first 'change' event fires; fades rather than snapping with display:none.

   Timing matches the in-panorama hotspots exactly, in BOTH directions (see
   controller.js's #transitionTo):
     - leaving the overview: hotspots fade out over 0.3s ease-out, immediately;
     - returning: hotspots stay hidden until 70% through the crossfade
       (delay(CROSSFADE_MS * 0.7) = 0.35s), then fade in over 0.8s eased.
   Without matching both legs these buttons visibly lead the pano hotspots
   instead of arriving and leaving with them. */
#about-btn,
#sustainability-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
body.on-overview #about-btn,
body.on-overview #sustainability-btn {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.35s;
}