/* Custom Styles for The Reserve 135 */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Subtle radial vignette matching the dusk resort ambiance */
.bg-radial-vignette {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(14, 18, 30, 0) 30%,
    rgba(10, 13, 22, 0.45) 70%,
    rgba(5, 7, 12, 0.85) 100%
  );
}

/* Typography Enhancements */
h1 {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}

/* Gold Text Shimmer Effect */
@keyframes goldShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Pillar Link Underlines */
.pillar-link {
  position: relative;
  transition: all 0.3s ease;
}

.pillar-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #e2be88;
  transition: width 0.3s ease;
}

.pillar-link:hover::after {
  width: 100%;
}

/* Modal Open Transitions */
.modal-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.modal-active > div {
  transform: scale(1) !important;
}

/* Responsive adjustments */
@media (max-height: 700px) {
  header {
    padding-top: 1rem !important;
  }
  footer {
    padding-bottom: 1.25rem !important;
  }
}

/* Smooth Scrollbar for Modals */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(10, 13, 22, 0.8);
}
::-webkit-scrollbar-thumb {
  background: rgba(226, 190, 136, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(226, 190, 136, 0.6);
}