/* Living Garden Visualization */
.living-garden { position: relative; overflow: hidden; padding: 2.5rem 0 6rem; margin-top: 0; }
.hero + .living-garden { margin-top: 0; }
.living-garden::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none; background: linear-gradient(to bottom, rgba(10,10,11,0.6), rgba(10,10,11,0)); z-index: 1; }
.living-garden .container { position: relative; z-index: 2; }

/* Background parallax layers */
.garden-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-layer { position: absolute; inset: 0; opacity: 0.18; animation: parallaxFloat 30s linear infinite; }
.bg-layer.mountains { background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.4) 100%), url('assets/lebanon-mountains.jpg'); background-size: cover; background-position: center bottom; opacity: 0.28; animation-duration: 50s; }
.bg-layer.network { background-image: radial-gradient(circle at 20% 30%, rgba(0,217,255,0.10) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(61,220,151,0.10) 0 1px, transparent 1px); background-size: 180px 180px, 220px 220px; animation-duration: 70s; }
.bg-layer.stars { background-image: radial-gradient(circle at 10% 10%, rgba(255,255,255,0.15) 0 1px, transparent 1px), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12) 0 1px, transparent 1px), radial-gradient(circle at 40% 80%, rgba(255,255,255,0.10) 0 1px, transparent 1px); background-size: 140px 140px, 160px 160px, 200px 200px; opacity: 0.22; animation-duration: 90s; }
@keyframes parallaxFloat { from { transform: translateY(0px); } 50% { transform: translateY(-20px);} to { transform: translateY(0px);} }

.garden-header { text-align: center; margin-bottom: 1rem; }
.garden-header h2 { font-size: clamp(1.8rem, 3.3vw, 2.4rem); }
.garden-header .garden-sub { opacity: .85; margin-top: .5rem; }

.garden-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; justify-items: center; margin: 1.25rem auto 1rem; max-width: 900px; }
.garden-metrics .metric { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: .75rem 1rem; width: 100%; text-align: center; 
  /* Make links match site aesthetic */
  color: var(--text); text-decoration: none; display: block; transition: border-color .2s var(--transition-smooth), box-shadow .2s var(--transition-smooth), transform .2s var(--transition-smooth);
}
.garden-metrics .metric:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 18px rgba(255,215,0,0.18); transform: translateY(-2px); }
.garden-metrics .metric:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,217,255,0.15); }
.garden-metrics .value { font-size: 1.6rem; font-weight: 700; color: var(--accent); display: block; }
.garden-metrics .label { opacity: .8; font-size: .95rem; }

.garden-viewport { position: relative; margin: 0.5rem auto 0; max-width: 1200px; height: clamp(420px, 60vh, 760px); }
#garden-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Canvas-based visuals: class-specific rules removed (handled in JS) */

/* Tooltip */
.leaf-tooltip { position: absolute; z-index: 5; background: rgba(26,11,46,0.95); border: 1px solid rgba(255,215,0,0.4); color: var(--text); padding: .5rem .65rem; border-radius: 8px; font-size: .85rem; pointer-events: none; transform: translate(-50%, -120%); white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.leaf-tooltip .minor { opacity: .75; font-size: .8rem; }

/* CTA */
.garden-cta { display: grid; place-items: center; margin-top: 1rem; }
.garden-cta .magnetic-button { border-color: var(--accent); color: var(--accent); }

/* Floating seeds */
.seed { opacity: 0.8; animation: rise linear forwards; }
@keyframes rise { from { transform: translateY(0) scale(1); opacity: 0.8;} to { transform: translateY(-160px) scale(0.9); opacity: 0; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .draw-once path, .leaf, .leaf.sway, .seed, .bg-layer { animation: none !important; }
}

@media (max-width: 768px) {
  .branch-label, .tick, .root-text { font-size: 11px; }
  .garden-metrics { gap: .75rem; }
}

/* Modal */
.garden-modal { position: fixed; inset: 0; z-index: 9999; }
.garden-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.garden-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, 92vw); background: rgba(26,11,46,0.96); border: 1px solid rgba(0,217,255,0.35); border-radius: 12px; padding: 1.25rem 1rem 1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.4); color: var(--text); }
.garden-modal-close { position: absolute; top: .5rem; right: .5rem; border: none; background: transparent; color: var(--text); font-size: 1.1rem; cursor: pointer; }
.garden-modal-body p { margin: .4rem 0; }