/* Custom Scroll Animations & Dynamic Map Styling */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

.tilt-card {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

/* Map Container Lazy Load Skeleton & Card Styles */
.map-wrapper {
    position: relative;
    width: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);
}

.map-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #181818 25%, #222222 50%, #181818 75%);
    background-size: 200% 100%;
    animation: mapShimmer 2s infinite;
    z-index: 1;
}

@keyframes mapShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.map-container {
    width: 100%;
    height: 420px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.map-container iframe.loaded {
    opacity: 1;
}

/* Glow border card effect */
.glow-card {
    position: relative;
}
.glow-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 1.5rem;
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 175, 55, 0.35), transparent 40%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}
.glow-card:hover::before {
    opacity: 1;
}