/* Drop-in styles for BahiaArch. The parent sets its width; this file supplies the scene height. */
.bahia-arch {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse 63% 58% at 51% 49%, rgba(41, 99, 109, 0.34), rgba(11, 43, 55, 0.15) 60%, transparent 82%), #071d27;
}
.bahia-arch::before,
.bahia-arch::after {
  position: absolute;
  z-index: 0;
  inset: 10% 15%;
  border: 1px solid rgba(183, 223, 220, 0.095);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: rotate(-18deg) scaleX(1.16);
}
.bahia-arch::after {
  inset: 17% 23%;
  border-color: rgba(183, 223, 220, 0.055);
  transform: rotate(22deg) scaleX(1.32);
}
.bs-arch-canvas,
.bs-arch-fallback-wrap {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.bs-arch-canvas { z-index: 2; cursor: pointer; touch-action: pan-y; }
.bahia-arch.is-dragging .bs-arch-canvas { cursor: grabbing; }
.bahia-arch:not(.is-ready) .bs-arch-canvas { pointer-events: none; }
.bs-arch-fallback-wrap { z-index: 1; }
.bahia-arch.is-ready .bs-arch-fallback-wrap { opacity: 0; pointer-events: none; }
.bs-arch-fallback { display: block; width: 100%; height: 100%; }
.bs-arch-fallback-gum {
  fill: none;
  stroke: #a77b7f;
  stroke-width: 32;
  stroke-linecap: round;
  opacity: 0.64;
}
.bs-arch-fallback-tooth rect {
  stroke: rgba(16, 65, 72, 0.45);
  stroke-width: 1.8;
  transition: fill 180ms ease-out, stroke 180ms ease-out;
}
.bs-arch-fallback-tooth { cursor: pointer; }
.bs-arch-fallback-tooth:hover rect,
.bs-arch-fallback-tooth:focus-visible rect,
.bs-arch-fallback-tooth.is-selected rect {
  fill: #8be0d3;
  stroke: #e9fff9;
  stroke-width: 2.2;
}
.bs-arch-fallback-tooth.is-selected.has-concern rect {
  stroke: var(--bs-concern-color, #9fe4d9);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 6px var(--bs-concern-color, #9fe4d9));
}
.bs-arch-fallback-tooth:focus-visible { outline: none; }
.bs-arch-readout {
  position: absolute;
  z-index: 3;
  bottom: 22px;
  left: 50%;
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border: 1px solid rgba(202, 236, 231, 0.24);
  border-radius: 100px;
  color: #e9f7f2;
  background: rgba(6, 30, 40, 0.8);
  font-family: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}
.bs-arch-readout:empty { display: none; }
.bs-arch-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.bahia-arch[data-arch-mode="hero"] .bs-arch-canvas { cursor: default; }
.bahia-arch[data-arch-mode="hero"] .bs-arch-fallback-tooth { cursor: default; }
.bahia-arch[data-arch-mode="hero"] .bs-arch-readout { display: none; }
.bahia-arch[data-arch-mode="hero"] .bs-arch-fallback-gum { display: none; }
.bahia-arch[data-arch-mode="hero"] .bs-arch-fallback {
  transform: perspective(900px) rotateY(-15deg) rotateX(7deg) scale(1.025);
  filter: drop-shadow(0 28px 24px rgba(1, 18, 27, 0.38));
}
@media (max-width: 700px) {
  .bahia-arch { min-height: 390px; }
  .bs-arch-readout { bottom: 12px; font-size: 0.68rem; }
}
@media (max-width: 420px) {
  .bahia-arch { min-height: 320px; }
  .bs-arch-readout { max-width: calc(100% - 24px); white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-arch-fallback-tooth rect { transition: none; }
  .bs-arch-canvas { cursor: default; }
}

/* Existing site layout owns the hero and explorer stage dimensions/backgrounds. */
.hero-scene.bahia-arch,
.explorer-scene.bahia-arch {
  min-height: 0;
  background: transparent;
}
.hero-scene.bahia-arch { position: absolute; }
.explorer-scene.bahia-arch { min-height: 430px; }
.hero-scene.bahia-arch::before,
.hero-scene.bahia-arch::after,
.explorer-scene.bahia-arch::before,
.explorer-scene.bahia-arch::after { content: none; }
.hero-scene.bahia-arch > canvas.bs-arch-canvas,
.explorer-scene.bahia-arch > canvas.bs-arch-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.hero-scene.bahia-arch .hero-scene-fallback { display: none; }

.bs-arch-views {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 50%;
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgb(203 229 224 / 18%);
  border-radius: 24px;
  background: rgb(7 30 44 / 88%);
  transform: translateX(-50%);
  white-space: nowrap;
}
.bs-arch-views button {
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  border-radius: 20px;
  color: #c4d6d6;
  background: transparent;
  font: 600 .7rem/1.2 "Manrope", sans-serif;
  cursor: pointer;
}
.bs-arch-views button[aria-pressed="true"] { color: #072632; background: #c7e6df; }
.bs-arch-views button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.bahia-arch:not(.is-ready) .bs-arch-views { display: none; }
.explorer-disclaimer a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 420px) {
  .bs-arch-views { top: 7px; }
  .bs-arch-views button { padding: 7px 9px; font-size: .65rem; }
}
@media (max-width: 700px) {
  .explorer-scene.bahia-arch { min-height: 340px; }
}