/* =====================================================
   RaicadGroup - Blueprint Theme & Cadastral Maps
   Realistic surveying and cadastral visualizations
   ===================================================== */

/* Blueprint Background Pattern */
.blueprint-bg {
    background: 
        linear-gradient(rgba(74, 158, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 158, 255, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(74, 158, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 158, 255, 0.02) 1px, transparent 1px),
        linear-gradient(135deg, #0a1628 0%, #0d1f35 100%);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 100% 100%;
}

/* =====================================================
   Realistic Cadastral Map SVG Components
   ===================================================== */

.cadastral-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

/* Parcel styling */
.parcel {
    fill: rgba(74, 158, 255, 0.05);
    stroke: rgba(74, 158, 255, 0.4);
    stroke-width: 1.5;
    transition: all 0.4s ease;
}

.parcel:hover {
    fill: rgba(74, 158, 255, 0.12);
    stroke: rgba(74, 158, 255, 0.7);
}

.parcel-selected {
    fill: rgba(0, 212, 170, 0.1);
    stroke: #00d4aa;
    stroke-width: 2;
}

/* Road styling */
.road {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 8;
    stroke-linecap: round;
}

.road-center {
    fill: none;
    stroke: rgba(74, 158, 255, 0.2);
    stroke-width: 1;
    stroke-dasharray: 10 5;
}

/* Building footprints */
.building {
    fill: rgba(74, 158, 255, 0.15);
    stroke: rgba(74, 158, 255, 0.5);
    stroke-width: 1;
}

.building-residential {
    fill: rgba(0, 212, 170, 0.1);
    stroke: rgba(0, 212, 170, 0.4);
}

.building-commercial {
    fill: rgba(255, 170, 74, 0.1);
    stroke: rgba(255, 170, 74, 0.4);
}

/* Boundary points */
.boundary-point {
    fill: #4a9eff;
    stroke: #ffffff;
    stroke-width: 2;
}

.boundary-point-animated {
    animation: pointPulse 2s ease-in-out infinite;
}

@keyframes pointPulse {
    0%, 100% { 
        r: 4;
        opacity: 1;
    }
    50% { 
        r: 6;
        opacity: 0.7;
    }
}

/* Dimension lines */
.dimension-line {
    stroke: rgba(74, 158, 255, 0.6);
    stroke-width: 1;
    marker-start: url(#arrowStart);
    marker-end: url(#arrowEnd);
}

.dimension-text {
    fill: rgba(74, 158, 255, 0.8);
    font-size: 10px;
    font-family: 'Inter', monospace;
}

/* Contour lines */
.contour-line {
    fill: none;
    stroke: rgba(74, 158, 255, 0.2);
    stroke-width: 0.5;
}

.contour-line-major {
    stroke: rgba(74, 158, 255, 0.35);
    stroke-width: 1;
}

/* Survey markers */
.survey-marker {
    fill: none;
    stroke: #00d4aa;
    stroke-width: 2;
}

.survey-crosshair {
    stroke: rgba(74, 158, 255, 0.7);
    stroke-width: 1.5;
}

/* North arrow */
.north-arrow {
    fill: rgba(74, 158, 255, 0.8);
}

.north-arrow-outline {
    fill: none;
    stroke: rgba(74, 158, 255, 0.5);
    stroke-width: 1;
}

/* Scale bar */
.scale-bar {
    fill: rgba(74, 158, 255, 0.8);
}

.scale-bar-outline {
    fill: none;
    stroke: rgba(74, 158, 255, 0.5);
    stroke-width: 1;
}

/* =====================================================
   Realistic Animations
   ===================================================== */

/* Drawing animation for paths */
.draw-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 3s ease-out forwards;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

/* Surveying beam animation */
.surveying-beam {
    stroke: rgba(0, 212, 170, 0.6);
    stroke-width: 2;
    stroke-dasharray: 5 5;
    animation: beamScan 4s linear infinite;
}

@keyframes beamScan {
    0% {
        stroke-dashoffset: 0;
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -100;
        opacity: 0.3;
    }
}

/* Measurement pulse */
.measure-pulse {
    animation: measurePulse 2s ease-out infinite;
}

@keyframes measurePulse {
    0% {
        r: 3;
        opacity: 1;
    }
    100% {
        r: 20;
        opacity: 0;
    }
}

/* GPS tracking animation */
.gps-tracker {
    animation: gpsTrack 3s ease-in-out infinite;
}

@keyframes gpsTrack {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(5px, -3px);
    }
    50% {
        transform: translate(10px, 2px);
    }
    75% {
        transform: translate(3px, 5px);
    }
}

/* Scanning line effect */
.scan-line {
    animation: scanLine 4s linear infinite;
}

@keyframes scanLine {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Coordinate readout animation */
.coord-display {
    animation: coordUpdate 0.5s steps(10) infinite;
}

@keyframes coordUpdate {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Terrain morphing */
.terrain-morph {
    animation: terrainMorph 8s ease-in-out infinite;
}

@keyframes terrainMorph {
    0%, 100% {
        d: path("M0,100 Q50,80 100,100 T200,100 T300,100");
    }
    50% {
        d: path("M0,100 Q50,70 100,90 T200,110 T300,100");
    }
}

/* Parcel highlight sweep */
.parcel-sweep {
    animation: parcelSweep 6s ease-in-out infinite;
}

@keyframes parcelSweep {
    0%, 100% {
        fill: rgba(74, 158, 255, 0.05);
    }
    50% {
        fill: rgba(74, 158, 255, 0.15);
    }
}

/* Total station rotation */
.total-station {
    animation: stationRotate 8s linear infinite;
    transform-origin: center center;
}

@keyframes stationRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Drone path animation */
.drone-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: droneFly 10s linear infinite;
}

@keyframes droneFly {
    0% {
        stroke-dashoffset: 500;
    }
    100% {
        stroke-dashoffset: -500;
    }
}

/* Level bubble animation */
.level-bubble {
    animation: levelBubble 3s ease-in-out infinite;
}

@keyframes levelBubble {
    0%, 100% {
        cx: 48%;
    }
    25% {
        cx: 52%;
    }
    50% {
        cx: 50%;
    }
    75% {
        cx: 49%;
    }
}

/* =====================================================
   3D Transform Effects
   ===================================================== */

.map-3d-tilt {
    transform: perspective(1000px) rotateX(45deg);
    transform-origin: center bottom;
}

.isometric-view {
    transform: rotateX(60deg) rotateZ(-45deg);
    transform-style: preserve-3d;
}

/* Floating effect for elements */
.float-gentle {
    animation: floatGentle 6s ease-in-out infinite;
}

@keyframes floatGentle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-8px) rotate(0.5deg);
    }
    66% {
        transform: translateY(-4px) rotate(-0.5deg);
    }
}

/* Parallax layers */
.parallax-slow {
    animation: parallaxSlow 20s linear infinite;
}

@keyframes parallaxSlow {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50px);
    }
}

.parallax-medium {
    animation: parallaxMedium 15s linear infinite;
}

@keyframes parallaxMedium {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100px);
    }
}

/* =====================================================
   Interactive States
   ===================================================== */

.cadastral-interactive .parcel {
    cursor: pointer;
    transition: all 0.3s ease;
}

.cadastral-interactive .parcel:hover {
    fill: rgba(0, 212, 170, 0.15);
    stroke: #00d4aa;
    filter: drop-shadow(0 0 10px rgba(0, 212, 170, 0.3));
}

.cadastral-interactive .building:hover {
    fill: rgba(74, 158, 255, 0.25);
    filter: drop-shadow(0 0 8px rgba(74, 158, 255, 0.4));
}

/* Tooltip styles */
.map-tooltip {
    position: absolute;
    padding: 8px 12px;
    background: rgba(10, 22, 40, 0.95);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 6px;
    font-size: 12px;
    color: #b8d4f0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.map-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   Grid Overlays
   ===================================================== */

.grid-cadastral {
    background-image: 
        linear-gradient(rgba(74, 158, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 158, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}

.grid-survey {
    background-image: 
        linear-gradient(rgba(74, 158, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 158, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(74, 158, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 158, 255, 0.1) 1px, transparent 1px);
    background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
}

.grid-topo {
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(74, 158, 255, 0.05) 20px,
            rgba(74, 158, 255, 0.05) 21px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 20px,
            rgba(74, 158, 255, 0.05) 20px,
            rgba(74, 158, 255, 0.05) 21px
        );
}

/* =====================================================
   Legend Styles
   ===================================================== */

.map-legend {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(10, 22, 40, 0.9);
    border: 1px solid rgba(74, 158, 255, 0.2);
    border-radius: 8px;
    padding: 15px;
    font-size: 11px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: #b8d4f0;
}

.legend-color {
    width: 20px;
    height: 12px;
    border-radius: 2px;
}

.legend-color.parcel {
    background: rgba(74, 158, 255, 0.3);
    border: 1px solid rgba(74, 158, 255, 0.6);
}

.legend-color.building {
    background: rgba(0, 212, 170, 0.3);
    border: 1px solid rgba(0, 212, 170, 0.6);
}

.legend-color.road {
    background: rgba(255, 255, 255, 0.2);
}

/* =====================================================
   Coordinate Display
   ===================================================== */

.coordinates-display {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(10, 22, 40, 0.9);
    border: 1px solid rgba(74, 158, 255, 0.2);
    border-radius: 6px;
    padding: 10px 15px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #00d4aa;
}

.coordinates-display span {
    display: block;
    margin-bottom: 3px;
}

.coordinates-display .label {
    color: #7a9cc4;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =====================================================
   Scale Indicator
   ===================================================== */

.scale-indicator {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.scale-bar-visual {
    display: flex;
    height: 8px;
}

.scale-segment {
    width: 30px;
    height: 100%;
}

.scale-segment:nth-child(odd) {
    background: rgba(74, 158, 255, 0.6);
}

.scale-segment:nth-child(even) {
    background: transparent;
    border: 1px solid rgba(74, 158, 255, 0.6);
    border-left: none;
    border-right: none;
}

.scale-text {
    font-size: 10px;
    color: #7a9cc4;
}

/* =====================================================
   Cadastral Map Container - Hero Section
   ===================================================== */

.cadastral-map-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: linear-gradient(135deg, rgba(10, 22, 40, 0.9) 0%, rgba(13, 31, 53, 0.95) 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 0 60px rgba(74, 158, 255, 0.15),
        inset 0 0 100px rgba(74, 158, 255, 0.05);
}

.cadastral-map-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(rgba(74, 158, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 158, 255, 0.03) 1px, transparent 1px);
    background-size: 25px 25px;
    pointer-events: none;
    z-index: 1;
}

.cadastral-map {
    position: relative;
    z-index: 2;
}

/* Coordinates Overlay */
.coordinates-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(10, 22, 40, 0.85);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.coord-text {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 11px;
    color: #4a9eff;
    letter-spacing: 0.5px;
}

/* Parcel Animations */
.parcel-1 { animation: parcelFadeIn 0.8s ease-out 0.2s both; }
.parcel-2 { animation: parcelFadeIn 0.8s ease-out 0.4s both; }
.parcel-3 { animation: parcelFadeIn 0.8s ease-out 0.6s both; }
.parcel-4 { animation: parcelFadeIn 0.8s ease-out 0.8s both; }
.parcel-5 { animation: parcelFadeIn 0.8s ease-out 1s both; }

@keyframes parcelFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse animation for boundary points */
.pulse-point {
    animation: boundaryPulse 2s ease-in-out infinite;
}

@keyframes boundaryPulse {
    0%, 100% {
        r: 4;
        opacity: 1;
        filter: drop-shadow(0 0 3px rgba(74, 158, 255, 0.5));
    }
    50% {
        r: 6;
        opacity: 0.8;
        filter: drop-shadow(0 0 8px rgba(74, 158, 255, 0.8));
    }
}

/* Building hover effect */
.building {
    transition: all 0.3s ease;
}

.building:hover {
    fill: rgba(74, 158, 255, 0.35);
    filter: drop-shadow(0 0 10px rgba(74, 158, 255, 0.5));
}

/* Scan line effect */
.scan-line {
    filter: blur(1px);
}

/* Draw path animation */
.draw-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: drawPath 3s ease-out forwards;
}

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

/* Compass rotation */
.compass {
    animation: compassSettle 2s ease-out 1.5s both;
}

@keyframes compassSettle {
    0% {
        transform: translate(450px, 450px) rotate(-30deg);
        opacity: 0;
    }
    60% {
        transform: translate(450px, 450px) rotate(5deg);
        opacity: 1;
    }
    100% {
        transform: translate(450px, 450px) rotate(0deg);
        opacity: 1;
    }
}

/* Scale bar fade in */
.scale-bar {
    animation: fadeInUp 0.8s ease-out 2s both;
}

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

/* Road drawing animation */
.road {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: drawRoad 2.5s ease-out 0.5s forwards;
}

@keyframes drawRoad {
    to {
        stroke-dashoffset: 0;
    }
}

/* Dimension lines appear */
.dimensions {
    opacity: 0;
    animation: dimensionsAppear 1s ease-out 2.5s forwards;
}

@keyframes dimensionsAppear {
    to {
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cadastral-map-container {
        min-height: 300px;
    }
    
    .coordinates-overlay {
        top: 10px;
        right: 10px;
        padding: 6px 10px;
    }
    
    .coord-text {
        font-size: 9px;
    }
}