body, html { margin: 0; padding: 0; height: 100%; font-family: -apple-system, sans-serif; }
#map { height: 100vh; width: 100%; }

/* Marker Animation & Look */
@keyframes markerEntrance {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.micro-marker {
    width: 60px; height: 60px;
    border: 2px solid white; border-radius: 8px;
    overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer; background: #eee;
    animation: markerEntrance 0.5s ease-out; /* Pop-in effect */
    transition: transform 0.2s ease;
}
.micro-marker:hover { transform: scale(1.1); z-index: 10; border-color: #007AFF; }
.micro-marker img { width: 100%; height: 100%; object-fit: cover; }

/* Modal Styling */
.modal {
    position: fixed; bottom: -100%; left: 0; width: 100%; height: 85%;
    background: white; border-radius: 20px 20px 0 0; z-index: 1000;
    transition: bottom 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2); display: flex; flex-direction: column;
}
.modal.active { bottom: 0; }
.modal-handle { width: 40px; height: 5px; background: #ccc; border-radius: 10px; margin: 12px auto; }
.close-btn { position: absolute; top: 15px; right: 20px; background: #f0f0f0; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; }
.modal-content { padding: 20px; text-align: center; overflow-y: auto; }
.modal-content img { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 12px; }
.cta-button { display: inline-block; margin-top: 20px; padding: 15px 30px; background: #007AFF; color: white; text-decoration: none; border-radius: 12px; font-weight: bold; }