/*
 * Topographic Map Background Patterns
 * Creates authentic land survey aesthetic throughout the site
 */

/* Base Topographic SVG Patterns */
:root {
  /* Topo pattern as SVG data URI - Dense contour lines */
  --topo-pattern-dense: url("data:image/svg+xml,%3Csvg width='180' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='topo-dense' x='0' y='0' width='180' height='180' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 40c20-10 40-15 60-10 20 5 40 15 50 10M20 80c25-15 45-20 70-15 25 5 35 20 40 15M5 120c30-20 50-25 80-20 30 5 45 25 50 20M15 160c35-25 55-30 90-25 35 5 50 30 55 25' stroke='%237cb342' stroke-width='1' fill='none' opacity='0.3'/%3E%3Cpath d='M30 20c15-8 35-12 55-8 20 4 38 12 45 8M40 60c20-12 40-16 65-12 25 4 40 16 45 12M25 100c25-16 45-20 75-16 30 4 42 20 48 16M35 140c30-20 50-24 85-20 35 4 48 24 52 20' stroke='%237cb342' stroke-width='0.8' fill='none' opacity='0.25'/%3E%3Ccircle cx='50' cy='50' r='1.5' fill='%237cb342' opacity='0.4'/%3E%3Ccircle cx='130' cy='90' r='1.5' fill='%237cb342' opacity='0.4'/%3E%3Ccircle cx='90' cy='140' r='1.5' fill='%237cb342' opacity='0.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='180' height='180' fill='url(%23topo-dense)'/%3E%3C/svg%3E");
  
  /* Sparse contour lines */
  --topo-pattern-sparse: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='topo-sparse' x='0' y='0' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 50c30-15 60-20 90-15 30 5 50 20 60 15M15 110c35-20 65-25 100-20 35 5 55 25 65 20M20 170c40-25 70-30 110-25 40 5 60 30 70 25' stroke='%232d5016' stroke-width='1.2' fill='none' opacity='0.25'/%3E%3Cpath d='M25 30c25-12 55-16 80-12 25 4 45 16 55 12M30 90c30-16 60-20 95-16 35 4 50 20 60 16M35 150c35-20 65-24 105-20 40 4 55 24 65 20' stroke='%232d5016' stroke-width='0.9' fill='none' opacity='0.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23topo-sparse)'/%3E%3C/svg%3E");
  
  /* Medium density contour lines */
  --topo-pattern-medium: url("data:image/svg+xml,%3Csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='topo-medium' x='0' y='0' width='160' height='160' patternUnits='userSpaceOnUse'%3E%3Cpath d='M8 35c18-9 38-14 58-9 20 5 36 14 46 9M12 70c23-13 43-18 68-13 25 5 38 18 43 13M6 105c28-18 48-23 78-18 30 5 42 23 48 18M10 140c33-23 53-28 88-23 35 5 46 28 52 23' stroke='%237cb342' stroke-width='1' fill='none' opacity='0.28'/%3E%3Cpath d='M20 22c15-7 33-11 53-7 20 4 34 11 42 7M24 57c20-11 40-15 65-11 25 4 36 15 41 11M18 92c25-15 45-19 75-15 30 4 40 19 46 15M22 127c30-19 50-23 85-19 35 4 44 23 50 19' stroke='%232d5016' stroke-width='0.85' fill='none' opacity='0.22'/%3E%3Ccircle cx='45' cy='45' r='1.2' fill='%237cb342' opacity='0.35'/%3E%3Ccircle cx='115' cy='80' r='1.2' fill='%237cb342' opacity='0.35'/%3E%3Ccircle cx='75' cy='125' r='1.2' fill='%237cb342' opacity='0.35'/%3E%3Ctext x='10' y='15' font-family='monospace' font-size='8' fill='%237cb342' opacity='0.2'%3E100'%3C/text%3E%3Ctext x='10' y='75' font-family='monospace' font-size='8' fill='%232d5016' opacity='0.18'%3E85'%3C/text%3E%3C/pattern%3E%3C/defs%3E%3Crect width='160' height='160' fill='url(%23topo-medium)'/%3E%3C/svg%3E");
  
  /* Grid overlay pattern */
  --topo-grid-pattern: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' x='0' y='0' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 100 0 L 0 0 0 100' fill='none' stroke='%237cb342' stroke-width='0.5' opacity='0.15'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23grid)'/%3E%3C/svg%3E");
  
  /* Survey markers pattern */
  --survey-markers: url("data:image/svg+xml,%3Csvg width='150' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='markers' x='0' y='0' width='150' height='150' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='25' cy='25' r='2' fill='none' stroke='%23ff6f00' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M25 20 L25 30 M20 25 L30 25' stroke='%23ff6f00' stroke-width='1' opacity='0.3'/%3E%3Ccircle cx='125' cy='75' r='2' fill='none' stroke='%23ff6f00' stroke-width='1' opacity='0.25'/%3E%3Cpath d='M125 70 L125 80 M120 75 L130 75' stroke='%23ff6f00' stroke-width='1' opacity='0.25'/%3E%3Ccircle cx='75' cy='125' r='2' fill='none' stroke='%23ff6f00' stroke-width='1' opacity='0.28'/%3E%3Cpath d='M75 120 L75 130 M70 125 L80 125' stroke='%23ff6f00' stroke-width='1' opacity='0.28'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='150' height='150' fill='url(%23markers)'/%3E%3C/svg%3E");
}

/* Topographic Background Classes */

/* Light topographic background - for content areas */
.topo-bg-light {
  position: relative;
  background-color: var(--bg-dark);
}

.topo-bg-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--topo-pattern-sparse);
  background-size: 300px 300px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* Medium topographic background - for feature sections */
.topo-bg-medium {
  position: relative;
  background-color: var(--bg-dark);
}

.topo-bg-medium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--topo-pattern-medium);
  background-size: 250px 250px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  animation: topoParallax 60s linear infinite;
}

/* Dense topographic background - for hero and prominent sections */
.topo-bg-dense {
  position: relative;
  background-color: var(--bg-dark);
}

.topo-bg-dense::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--topo-pattern-dense);
  background-size: 280px 280px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  animation: topoParallax 80s linear infinite;
}

/* Grid overlay - for technical sections */
.topo-bg-grid {
  position: relative;
  background-color: var(--bg-dark);
}

.topo-bg-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--topo-grid-pattern);
  background-size: 150px 150px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.topo-bg-grid::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--topo-pattern-sparse);
  background-size: 320px 320px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* Survey markers overlay - for due diligence sections */
.topo-bg-survey {
  position: relative;
  background-color: var(--bg-dark);
}

.topo-bg-survey::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--topo-pattern-medium);
  background-size: 240px 240px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.topo-bg-survey::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--survey-markers);
  background-size: 200px 200px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* Rotated variation for visual interest */
.topo-bg-rotated {
  position: relative;
  background-color: var(--bg-dark);
}

.topo-bg-rotated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--topo-pattern-medium);
  background-size: 260px 260px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-15deg);
  transform-origin: center;
}

/* Card backgrounds with subtle topo */
.topo-card {
  position: relative;
  background: rgba(13, 18, 15, 0.7);
  backdrop-filter: blur(10px);
}

.topo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--topo-pattern-sparse);
  background-size: 200px 200px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* Elevation gradient effect */
.topo-elevation-gradient {
  position: relative;
  background: linear-gradient(
    to bottom,
    rgba(45, 80, 22, 0.1) 0%,
    rgba(13, 18, 15, 0.3) 30%,
    rgba(10, 15, 13, 0.5) 60%,
    rgba(8, 12, 10, 0.7) 100%
  );
}

/* Parallax animation for topo patterns */
@keyframes topoParallax {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1000px 1000px;
  }
}

/* Ensure content is above topo backgrounds */
.topo-bg-light > *,
.topo-bg-medium > *,
.topo-bg-dense > *,
.topo-bg-grid > *,
.topo-bg-survey > *,
.topo-bg-rotated > * {
  position: relative;
  z-index: 1;
}

/* Section dividers with topo theme */
.topo-divider {
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--primary) 20%,
    var(--accent) 50%,
    var(--primary) 80%,
    transparent 100%
  );
  position: relative;
  margin: 4rem 0;
}

.topo-divider::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 40px;
  background-image: var(--topo-pattern-sparse);
  background-size: 150px 150px;
  opacity: 0.15;
}

/* Coordinate-style decorative elements */
.topo-coordinates {
  position: relative;
}

.topo-coordinates::before {
  content: 'N 41° 15\' 42.8"';
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--primary);
  opacity: 0.3;
  z-index: 10;
}

.topo-coordinates::after {
  content: 'W 96° 0\' 12.6"';
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--accent);
  opacity: 0.3;
  z-index: 10;
}

/* Survey corner markers */
.survey-marker {
  position: relative;
}

.survey-marker::before {
  content: '⊕';
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 1.5rem;
  color: var(--secondary);
  opacity: 0.2;
  z-index: 10;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .topo-bg-light::before,
  .topo-bg-medium::before,
  .topo-bg-dense::before {
    background-size: 200px 200px;
  }
  
  .topo-coordinates::before,
  .topo-coordinates::after {
    font-size: 0.65rem;
    opacity: 0.2;
  }
}

/* Print-friendly - remove backgrounds for printing */
@media print {
  .topo-bg-light::before,
  .topo-bg-medium::before,
  .topo-bg-dense::before,
  .topo-bg-grid::before,
  .topo-bg-grid::after,
  .topo-bg-survey::before,
  .topo-bg-survey::after,
  .topo-bg-rotated::before,
  .topo-card::before {
    display: none;
  }
}

/* Accessibility - ensure sufficient contrast */
.topo-bg-light,
.topo-bg-medium,
.topo-bg-dense,
.topo-bg-grid,
.topo-bg-survey,
.topo-bg-rotated {
  color: var(--text-primary);
}

/* Enhanced readability overlays where needed */
.topo-content-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 15, 13, 0.8) 0%,
    rgba(10, 15, 13, 0.6) 50%,
    rgba(10, 15, 13, 0.8) 100%
  );
  padding: 3rem 0;
}