/* Demo version presentation styles */

#demo-version-badge {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10000;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-family: Ultramagnetic, Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

#demo-controls {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: min(420px, calc(100vw - 32px));
}

#demo-controls button,
#demo-controls .demo-lab-link {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-family: Ultramagnetic, Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

#demo-controls button:hover,
#demo-controls .demo-lab-link:hover {
  background: rgba(30, 30, 30, 0.92);
}

.demo-layer-box {
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-family: Ultramagnetic, Helvetica, Arial, sans-serif;
  font-size: clamp(12px, 1.4vw, 22px);
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.demo-layer-box span {
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.35);
}

body.demo-boxes .demo-layer-box {
  display: flex;
}

body.demo-boxes .layer-art,
body.demo-boxes #building-bg-img {
  display: none !important;
}

#bg-layer1 .layer-art {
  width: 100%;
  display: block;
}

#bg-layer2 .layer-art,
#bg-layer3 .layer-art,
#bg-layer4-a .layer-art {
  width: 100%;
  display: block;
}

#bg-layer1 .demo-layer-box {
  width: 100%;
  height: 148.15vw;
  background: #2a3a55;
}

#bg-layer2 .demo-layer-box {
  width: 100%;
  height: 79.6vw;
  background: rgba(220, 70, 70, 0.85);
}

#bg-layer3 .demo-layer-box {
  width: 100%;
  height: 75vw;
  background: rgba(60, 140, 220, 0.85);
}

#bg-layer4-a .demo-layer-box {
  width: 100%;
  height: 107.2vw;
  background: rgba(70, 180, 90, 0.85);
}

#bg-layer4-b .demo-layer-box {
  position: relative;
  width: 41vw;
  height: 91.6vw;
  background: rgba(210, 160, 50, 0.85);
}

body.demo-hide-character #title-div,
body.demo-hide-character #bg-layer5,
body.demo-hide-character #scroll_down_arrow {
  display: none !important;
}

body.demo-hide-fire #burning-building-div {
  display: none !important;
}

body.demo-hide-embers #particles-canvas1,
body.demo-hide-embers #particles-canvas2 {
  display: none !important;
  opacity: 0 !important;
}

body.demo-masthead-only section:not(#sec1),
body.demo-masthead-only #footer-sec {
  display: none !important;
}

body.demo-masthead-only {
  min-height: 220vh;
}

body.demo-masthead-only #sec1,
body.demo-masthead-only #parallax {
  min-height: 100vh;
}

#demo-ember-legend {
  position: fixed;
  bottom: 24px;
  left: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 280px;
}

.demo-ember-card {
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

.demo-ember-card strong {
  display: block;
  font-family: Ultramagnetic, Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.demo-ember-card span {
  display: block;
  opacity: 0.9;
}

.demo-ember-back {
  border-left: 4px solid #6ec1ff;
}

.demo-ember-front {
  border-left: 4px solid #ffb347;
}

body.demo-ember-labels #particles-canvas1 {
  outline: 2px dashed rgba(110, 193, 255, 0.55);
  outline-offset: -2px;
}

body.demo-ember-labels #particles-canvas2 {
  outline: 2px dashed rgba(255, 179, 71, 0.7);
  outline-offset: -2px;
}