@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Playfair+Display:wght@400;500;700&display=swap');

:root {
  --gallery-white: #F8F8F8;
  --charcoal-text: #222222;
  --synthetist-blue: #2B3A67;
  --earthy-ochre: #C87E4F;
  --bohemian-vermilion: #E63946;
}

@tailwind base {
  body {
    @apply bg-gallery-white text-charcoal-text font-sans;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif;
  }
}

.font-sans {
    font-family: 'Montserrat', sans-serif;
}

.font-serif {
    font-family: 'Playfair Display', serif;
}

.nav-link {
    @apply text-charcoal-text font-medium relative py-1 transition-colors duration-300;
}

.nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--earthy-ochre);
    transition: width 0.3s ease-in-out;
}

.nav-link:hover:after,
.nav-link.active:after {
    width: 100%;
}

.nav-link:hover,
.nav-link.active {
    color: var(--synthetist-blue);
}

.nav-link-mobile {
    @apply text-xl font-serif text-charcoal-text hover:text-earthy-ochre transition-colors;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.prose h2, .prose h3 {
    @apply text-synthetist-blue;
}

.prose blockquote {
    @apply border-l-4 border-earthy-ochre text-charcoal-text/80 italic;
}

.prose a {
    @apply text-earthy-ochre hover:text-synthetist-blue transition-colors;
}

.prose strong {
    @apply text-charcoal-text;
}

.prose table {
    @apply w-full text-left;
}

.prose th {
    @apply bg-synthetist-blue/10 p-3 font-semibold text-synthetist-blue;
}

.prose td {
    @apply p-3 border-b border-gray-200;
}

/* Leaflet Map Customization */
.leaflet-popup-content-wrapper {
    background: var(--gallery-white);
    color: var(--charcoal-text);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px !important;
    padding: 0 !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
}

.leaflet-popup-close-button {
    color: var(--charcoal-text) !important;
    background: transparent !important;
    border: none !important;
    font-size: 24px !important;
    line-height: 1 !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    top: 0 !important;
    right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease-in-out;
}

.leaflet-popup-close-button:hover {
    color: var(--bohemian-vermilion) !important;
}

.leaflet-popup-tip {
    background: var(--gallery-white);
}

/* Live Ambiance Module */
.steam-container {
    position: absolute;
    left: 45%;
    bottom: 38%;
    width: 3%;
    height: 10%;
    pointer-events: none;
    transform: translateX(-50%);
}

.steam-element {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    filter: blur(4px);
    transform-origin: bottom center;
    opacity: 0;
    animation: steam-rise 4s infinite linear;
}

.steam-element:nth-child(2) {
    animation-delay: 1.5s;
    animation-duration: 4.5s;
}
.steam-element:nth-child(3) {
    animation-delay: 2.5s;
    animation-duration: 3.5s;
}

@keyframes steam-rise {
    0% {
        transform: translateY(0) scaleX(1);
        opacity: 0;
        height: 0;
    }
    15% {
        opacity: 0.8;
        height: 40%;
    }
    80% {
        transform: translateY(-80px) scaleX(1.5);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-100px) scaleX(1.8);
        opacity: 0;
        height: 100%;
    }
}