.trade-inquiry-container {
  display: none; /* hidden by default */
  position: absolute;
  width: 40%;
  height: 65%;
  left: 30%;
  top: 5%;
  background-image: linear-gradient(to bottom right, rgb(0, 52, 51), black);
  z-index: 250000;
  border-radius: 12px;
  color: white;
  font-size: 2.5vh;
  overflow: auto;
  padding: 25px;
  font-family: 'Roboto', sans-serif;
  line-height: 2em;
  box-shadow: 0 0 20px rgba(0, 255, 200, 0.3);
}
.trade-inquiry-exit{
  position: absolute;
  font-size: 4vh;
  font-family: 'Passero One', cursive;
  color: white;
  z-index: 15000;
  padding: 15px;
  border-radius: 15px;
  opacity: 0.6;
  right: 0%;
}
.trade-inquiry-exit:hover{
  cursor: url(imgs/cursorButton.png) 20 20, auto;
  color: aqua;
  opacity: 1;
}

/* Title / Headings */
.title {
  font-family: 'Passero One', cursive;
  font-size: 3vh;
  text-align: center;
  margin-bottom: 15px;
  animation: glowText 3s infinite alternate;
}

.subtitle {
  font-family: 'Passero One', cursive;
  font-size: 2.5vh;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #00ffcc;
}

/* Highlight */
.highlight {
  font-family: 'Passero One', cursive;
  color: #00ffaa;
  text-shadow: 0px 0px 5px #00ffaa;
}

/* Line fading animation — hidden by default */
.fade-line {
  opacity: 0;
  transform: translateY(10px);
  margin: 0;
  padding: 0;
}

/* Only animate when .reveal class is present on the container */
.trade-inquiry-container.reveal {
  animation: fadeContainer 1.5s ease-in-out;
  display: block; /* show on reveal */
}

.trade-inquiry-container.reveal .fade-line {
  animation: fadeDown 1s forwards;
}

.trade-inquiry-container.reveal .fade-line:nth-child(2) { animation-delay: 0.8s; }
.trade-inquiry-container.reveal .fade-line:nth-child(3) { animation-delay: 1.6s; }
.trade-inquiry-container.reveal .fade-line:nth-child(4) { animation-delay: 2.4s; }
.trade-inquiry-container.reveal .fade-line:nth-child(5) { animation-delay: 3.2s; }
.trade-inquiry-container.reveal .fade-line:nth-child(6) { animation-delay: 4s; }
.trade-inquiry-container.reveal .fade-line:nth-child(n+7) {
  animation-delay: calc(0.8s * (n - 1));
}

/* Animations */
@keyframes fadeDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glowText {
  from { text-shadow: 0 0 5px #00ffaa, 0 0 10px #0099ff; }
  to { text-shadow: 0 0 20px #00ffaa, 0 0 30px #00ccff; }
}

@keyframes fadeContainer {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}