/* Text animation */
    .herotextanimation {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.8); /* Start larger */
      color: transparent;
      font-size: 10vw;
      font-weight: bold;
      letter-spacing: 0.1em;
      -webkit-text-stroke: 2px white; /* White outline effect */
      filter: blur(20px); /* Start blurred */
      opacity: 0;
      transition: 
        transform 3.5s ease-out,
        color 3.5s ease-out,
        filter 3.5s ease-out,
        opacity 3s ease-out,
        -webkit-text-stroke 3.5s ease-out;
      white-space: nowrap;
    }
    .herotextanimation.in {
      transform: translate(-50%, -50%) scale(1); /* Zooms in to normal size */
      color: white;                              /* Fills the color */
      filter: blur(0);                           /* Clears the blur */
      opacity: 1;                                /* Fades in */
      -webkit-text-stroke: 0px transparent; 
         }     /* Removes stroke */
    /* 3D scene stays only in hero section */
    #container3D {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    
    /* Hero section contains 3D + text */
    .hero {
      height: 100vh;
      position: relative;
      overflow: hidden;
      margin-bottom: 2rem;
    }
    .mars-logo {
      max-width: 40rem;
      width: 40vw;
      height: auto;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: fadeIn 2s ease-in-out;
      z-index: 0;

    }
    .superscript {
        font-size: 0.4em;
        vertical-align: super;
        margin-left: 0.1em;
      }
      .subscript {
        font-size: 0.5em;
        vertical-align: sub;
        margin-left: 0.05em;
      }
    .green{
      color: #28be46;
      font-family: 'Orbitron', sans-serif;
    }
    /* 1) Scene as a stacking context */
.scene-pin {
  position: relative;
  height: 150vh;       /* one screen tall */
  isolation: isolate;  /* keep z-index local */
  background:#023e53;
  overflow:clip;
  will-change: transform;
}
.scene-pin.is-loading {
  opacity: 0.2;         
  transition: opacity 220ms ease-out;
}
.scene-pin:not(.is-loading) { opacity: 1; }

  .map-container { position: relative; }
img[usemap] { display:block; max-width:100%; height:auto; }


img.fullscreen {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -6;
  pointer-events: none;
    will-change: transform;
}
img.planets {
  position: absolute;
  top:0%;
  width: 80%;
  z-index: -5;
  pointer-events: none;
    will-change: transform;

}
img.title{
  position: absolute;
  top:10%;
  transform: translateX(-50%);
  left: 50%;
  width: 80%;
  z-index: -4;
  pointer-events: none;
    will-change: transform;

}

img.mountain {
  position: absolute;
  left: 0; bottom:20%;
  width: 100%;
  object-fit: cover;
  z-index: -3;
  pointer-events: none;
    will-change: transform;
}
.ground-wrap {
  position: absolute;
  left: 0; bottom: 0%;
  width: 100%;
  z-index: -2; 
  will-change: transform;
    will-change: transform;
}

.ground-wrap img { display: block; width: 100%; height: auto; }

.section {
  width: 100%;
  min-height: 100vh;       
  display: flex; align-items: center; justify-content: center;
}
.row.mt-4 { margin-top: 0 !important; }

/* Make the map areas feel clickable */
area { cursor: pointer; }
  body.dark-mode{
  background:black;
    color: var(--text);

  }
  body.dark-mode .header-background {
background: linear-gradient(176deg,rgba(183, 133, 68, 1) 0%, rgba(176, 87, 45, 1) 9%, rgba(140, 31, 31, 1) 42%, rgba(0, 0, 0, 1) 86%);
width:"100%";
}

.modal-header {
  color: var(--modal);
  background: var(--bg); 
}
.modal-overlay{
    background: rgba(255, 255, 255, 0.5);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  backdrop-filter: blur(4px);  
  color:rgb(1, 4, 44);
}

.herotextanimation { font-size: 10vw; }
@media (max-width: 600px) {
  .herotextanimation { font-size: 12vw; }
  img.planets { width: 90%; top: 35%; }
  img.mountain { bottom: 50%; }
}/* After Bootstrap CSS */
#spotModal .modal-dialog {
  max-width: min(90vw, 80vw) !important; /* ensure override */
  margin: 1.75rem auto;
}

#spotModal .modal-content {
  height: 70vh !important;
  display: flex;
  flex-direction: column;
}

#spotModal .modal-header,
#spotModal .modal-footer { flex: 0 0 auto; }

#spotModal .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: 1.25rem !important;
  line-height: 1.6 !important  ;
}

/* Your background-cover body also sets min-height; keep it, but it won't fight the container height */
.modal-body.bg-cover{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 60vh;         /* OK: inner min height, but flex layout still constrains it */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 !important;
}

/* Safety for very short screens */
@media (max-height: 700px) {
  #spotModal .modal-content { height: 60vh !important; }
}