/* Smooth scrolling for navigation */
html {
  scroll-behavior: smooth;
}

/* Navbar gradient blur effect */
.navbar-gradient-blur {
  position: relative;
}

.navbar-gradient-blur::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  mask-image: linear-gradient(to top,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.3) 25%,
      rgba(0, 0, 0, 0.6) 50%,
      rgba(0, 0, 0, 0.8) 75%,
      rgba(0, 0, 0, 1) 100%);
  -webkit-mask-image: linear-gradient(to top,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.3) 25%,
      rgba(0, 0, 0, 0.6) 50%,
      rgba(0, 0, 0, 0.8) 75%,
      rgba(0, 0, 0, 1) 100%);
  pointer-events: none;
  z-index: -1;
}

.navbar-gradient-blur::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(230, 234, 213, 0) 0%,
      rgba(230, 234, 213, 0.1) 25%,
      rgba(230, 234, 213, 0.2) 50%,
      rgba(230, 234, 213, 0.25) 75%,
      rgba(230, 234, 213, 0.3) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: linear-gradient(to top,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 100%);
  -webkit-mask-image: linear-gradient(to top,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 100%);
  pointer-events: none;
  z-index: -1;
}

@font-face {
  font-family: 'Silkscreen';
  src: url('../static/fonts/Silkscreen/Silkscreen-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Silkscreen';
  src: url('../static/fonts/Silkscreen/Silkscreen-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Audiowide';
  src: url('../static/fonts/Audiowide/Audiowide-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Robot';
  src: url('../static/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.shadow-right-bottom {
  box-shadow: 4px 4px 0 #1e90ff;
}

@keyframes scalePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.animate-scale-pulse:hover {
  animation: scalePulse 0.5s ease-in-out;
}

@keyframes scrollText {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-100%);
  }
}

.scrolling-text {
  animation: scrollText 15s linear infinite;
}

/* Pause animation on hover for better readability */
.scrolling-text:hover {
  animation-play-state: paused;
}

.text-shadow-sm {
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(0, 0, 0, 0.8),
    2px 2px 4px rgba(0, 0, 0, 0.9),
    -1px -1px 3px rgba(0, 0, 0, 0.7);
}

/* Pirate Map Styles */

/* Wave Animation */
@keyframes waveMove {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-10px);
  }
}

.animate-wave-delay-1 {
  animation: waveMove 3s infinite ease-in-out alternate;
}

.animate-wave-delay-2 {
  animation: waveMove 3s infinite ease-in-out alternate 1s;
}

.animate-wave-delay-3 {
  animation: waveMove 3s infinite ease-in-out alternate 2s;
}

/* Ship Rocking Animation */
@keyframes shipRock {
  0% {
    transform: rotate(-2deg) translateY(0);
  }

  50% {
    transform: rotate(2deg) translateY(-5px);
  }

  100% {
    transform: rotate(-2deg) translateY(0);
  }
}

.animate-wave {
  animation: shipRock 4s infinite ease-in-out;
}

/* Compass Floating Animation */
@keyframes floatSlow {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.animate-float-slow {
  animation: floatSlow 6s infinite ease-in-out;
}

/* Map Markers */
.map-marker {
  width: 12px;
  height: 12px;
  background-color: #5c4033;
  border: 1.5px solid #f4d06f;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media (min-width: 640px) {
  .map-marker {
    width: 16px;
    height: 16px;
    border-width: 2px;
  }
}

@media (min-width: 768px) {
  .map-marker {
    width: 20px;
    height: 20px;
  }
}

.map-marker:hover {
  transform: scale(1.5);
  background-color: #8b4513;
}

.map-marker.active {
  background-color: #d32f2f;
  transform: scale(1.3);
}

/* Popup Transitions */
#mapPopup.show {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#mapOverlay.show {
  display: block;
}

/* Event Labels on Map */
.event-label {
  position: absolute;
  transform: translate(-50%, 8px);
  /* Center horizontally, push down below marker */
  text-align: center;
  width: 80px;
  pointer-events: none;
  /* Let clicks pass through to marker */
  z-index: 15;
}

@media (min-width: 640px) {
  .event-label {
    width: 120px;
    transform: translate(-50%, 12px);
  }
}

@media (min-width: 768px) {
  .event-label {
    width: 150px;
    transform: translate(-50%, 15px);
  }
}

.event-label-year {
  display: block;
  font-family: 'Audiowide', sans-serif;
  color: #5c4033;
  font-size: 0.65rem;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}

@media (min-width: 640px) {
  .event-label-year {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) {
  .event-label-year {
    font-size: 1.1rem;
  }
}

.event-label-title {
  display: block;
  font-family: 'Silkscreen', sans-serif;
  color: #8b4513;
  font-size: 0.5rem;
  font-weight: bold;
  line-height: 1.2;
  margin-top: 1px;
}

@media (min-width: 640px) {
  .event-label-title {
    font-size: 0.65rem;
    margin-top: 2px;
  }
}

@media (min-width: 768px) {
  .event-label-title {
    font-size: 0.8rem;
  }
}

.event-label-desc {
  display: none;
  font-family: 'Silkscreen', sans-serif;
  color: #5c4033;
  font-size: 0.45rem;
  opacity: 0.8;
  margin-top: 1px;
  /* Hide description on map by default to avoid clutter, or show on hover */
}

@media (min-width: 640px) {
  .event-label-desc {
    font-size: 0.6rem;
    margin-top: 2px;
  }
}

@media (min-width: 768px) {
  .event-label-desc {
    font-size: 0.7rem;
  }
}

.map-marker:hover+.event-label .event-label-desc {
  display: block;
  background: rgba(255, 248, 231, 0.9);
  padding: 2px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .map-marker:hover+.event-label .event-label-desc {
    padding: 4px;
    border-radius: 4px;
  }
}

/* Project Text Visibility Enhancement */
.project-title-bg {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3), transparent);
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.project-description-bg {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5));
  border-radius: 0.5rem;
}