Quintas03/forest-fire-dynamics

1@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');2 3:root {4  --forest-green: #14532d;5  --forest-green-light: #f0fdf4;6  --alert-red: #b91c1c;7  --sage: #f0fdf4;8  --mint: #dcfce7;9}10 11* {12  margin: 0;13  padding: 0;14  box-sizing: border-box;15}16 17body {18  font-family: 'Inter', sans-serif;19  background-color: var(--sage);20  scroll-behavior: smooth;21}22 23.bg-mint {24  background-color: var(--mint);25}26 27.text-green-primary {28  color: var(--forest-green);29}30 31.bg-green-primary {32  background-color: var(--forest-green);33}34 35.border-green-primary {36  border-color: var(--forest-green);37}38 39.text-alert {40  color: var(--alert-red);41}42 43.method-card:hover {44  background-color: #dcfce7;45}46 47/* Comparison Slider */48.comparison-slider {49  position: relative;50  width: 100%;51  height: 100%;52  overflow: hidden;53}54 55.before-image,56.after-image {57  position: absolute;58  top: 0;59  left: 0;60  width: 100%;61  height: 100%;62  background-size: cover;63  background-position: center;64}65 66.after-image {67  width: 50%;68  border-right: 2px solid white;69}70 71.slider-handle {72  left: 50%;73  z-index: 10;74}75 76.handle-label {77  writing-mode: vertical-lr;78  transform: translateX(-50%) rotate(180deg);79  white-space: nowrap;80}81 82/* Active Step Indicator */83.step-indicator {84  position: relative;85}86 87.step-indicator::before {88  content: '';89  position: absolute;90  left: -20px;91  top: 0;92  bottom: 0;93  width: 4px;94  background-color: var(--forest-green);95  border-radius: 2px;96}97 98/* Scroll Indicator */99#scroll-btn {100  animation: bounce 2s infinite;101}102 103@keyframes bounce {104  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}105  40% {transform: translateY(-20px);}106  60% {transform: translateY(-10px);}107}108 109/* Responsive Adjustments */110@media (max-width: 1024px) {111  #results .sticky {112    position: relative;113    height: auto;114  }115  116  #map-container {117    height: 50vh !important;118  }119  120  .step-indicator::before {121    left: -16px;122  }123}124 125@media (max-width: 768px) {126  #hero {127    height: 80vh;128  }129  130  .comparison-slider {131    height: 250px;132  }133  134  #methodology .method-card {135    width: 100%;136  }137}