/* Base reset */
body, html {
  height: 100%;
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  padding-bottom: 90px; /* makes room for sticky footer */
}

/* Background */
.main-background {
  position: relative;
  background: url('../assets/backgrounds/atlas_park.jpg') no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  z-index: 0;
}

.main-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* Darkens background */
  z-index: -1;
}

/* Logo */
.header-logo {
  max-width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
}

/* Screenshot thumbnails */
img.img-thumbnail {
  max-width: 100%;
  border: 2px solid #17a2b8;
  background-color: #1e1e2f;
}

.screenshot-thumb img:hover {
  transform: scale(1.03);
  transition: transform 0.2s ease-in-out;
  cursor: zoom-in;
}

/* General link styling */
a {
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* Golden animated hover */
a:hover {
  color: #FFD700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.75);
}

/* Underline grow animation */
a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #FFD700;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}

/* Optional: pulsing golden glow */
@keyframes pulse-gold {
  0% {
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
  }
  50% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 1);
  }
  100% {
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
  }
}

a.hover-pulse:hover {
  animation: pulse-gold 1.2s infinite;
}

/* Flex links (sidebar, footer) animation */
a.d-flex.align-items-center {
  transition: transform 0.2s ease, color 0.3s ease;
}

a.d-flex.align-items-center:hover {
  transform: translateY(-2px) scale(1.03);
}

/* Icon spacing */
footer img,
.connect-with-us img,
.support-us img {
  margin-right: 6px;
  vertical-align: middle;
}

/* Sticky footer */
.sticky-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1050;
  background-color: rgba(0, 0, 0, 0.75);
}

/* Make sidebar behave normally on small screens */
@media (max-width: 991px) {
  .position-sticky {
    position: static !important;
  }
}

/* Optional high-contrast green */
.highlight-green {
  color: #90EE90;
  font-weight: bold;
}

.tagline-subtext {
  font-size: 0.9rem;
  font-weight: 400;
  color: #ccc;
}

#tagline {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  color: #f8f9fa;
  text-align: center;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.6), 0 0 12px rgba(255, 215, 0, 0.3);
  animation: taglineGlow 3s ease-in-out infinite alternate;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  position: relative;
  transition: transform 0.2s ease;
}

@media (max-width: 767px) {
  #tagline {
    font-size: 1.1rem;
  }
}

@keyframes taglineGlow {
  0% {
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.3), 0 0 8px rgba(255, 215, 0, 0.2);
  }
  100% {
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5);
  }
}

@keyframes sparkleFade {
  0% {
    opacity: 1;
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.7) rotate(180deg);
  }
}