/* Decorative eucalyptus layer (no filters/overlays). */
:root {
  /* Global sizing knobs (adjust as needed) - smaller for desktop */
  --leaf-sm: clamp(80px, 8vw, 120px);
  --leaf-md: clamp(100px, 10vw, 150px);
  --leaf-lg: clamp(120px, 12vw, 180px);
  --leaf-xs: clamp(60px, 6vw, 90px);
}

/* Ensure page content sits above the decorative layer */
body {
  position: relative;
  z-index: 1;
}

/* The fixed background layer */
#leaf-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -10; /* far behind everything; ensures leaves stay behind hero and footer */
}

/* Base style for all sprigs */
.leaf, .sprig {
  position: absolute;
  display: block;
  width: var(--leaf-lg);
  height: auto;
  opacity: 0;            /* start hidden for smooth loading */
  filter: none;          /* no overlays/filters */
  image-rendering: auto; /* keep quality */
  transition: opacity 0.3s ease;
  will-change: opacity;  /* optimize for animations */
}

/* ---- Desktop Sprig Positions (corner placement) ---- */

/* Top left sprig - starts from corner */
.sprig--tl {
  top: 0;
  left: 0;
  width: var(--leaf-lg);
  transform: rotate(-15deg);
  opacity: 0.6;
  transform-origin: top left;
}

/* Top right sprig - starts from corner */
.sprig--tr {
  top: 0;
  right: 0;
  width: var(--leaf-lg);
  transform: rotate(15deg);
  opacity: 0.6;
  transform-origin: top right;
}

/* Bottom left sprig - starts from corner */
.sprig--bl {
  bottom: 0;
  left: 0;
  width: var(--leaf-lg);
  transform: rotate(-10deg);
  opacity: 0.6;
  transform-origin: bottom left;
}

/* Bottom right sprig - starts from corner */
.sprig--br {
  bottom: 0;
  right: 0;
  width: var(--leaf-lg);
  transform: rotate(10deg);
  opacity: 0.6;
  transform-origin: bottom right;
}

/* ---- Background Leaves (subtle atmospheric elements) ---- */

/* Background leaf 1 - top center */
.leaf--bg1 {
  top: 15%;
  left: 50%;
  width: var(--leaf-sm);
  transform: translateX(-50%) rotate(25deg);
  opacity: 0.20;
  filter: brightness(1.2) saturate(0.3) contrast(0.8);
  z-index: -2;
  mix-blend-mode: overlay;
}

/* Background leaf 2 - left center */
.leaf--bg2 {
  top: 40%;
  left: 5%;
  width: var(--leaf-sm);
  transform: rotate(-35deg);
  opacity: 0.18;
  filter: brightness(1.2) saturate(0.3) contrast(0.8);
  z-index: -2;
  mix-blend-mode: overlay;
}

/* Background leaf 3 - right center */
.leaf--bg3 {
  top: 60%;
  right: 8%;
  width: var(--leaf-sm);
  transform: rotate(45deg);
  opacity: 0.19;
  filter: brightness(1.2) saturate(0.3) contrast(0.8);
  z-index: -2;
  mix-blend-mode: overlay;
}

/* Background leaf 4 - center left */
.leaf--bg4 {
  top: 70%;
  left: 15%;
  width: var(--leaf-xs);
  transform: rotate(-20deg);
  opacity: 0.16;
  filter: brightness(1.2) saturate(0.3) contrast(0.8);
  z-index: -2;
  mix-blend-mode: overlay;
}

/* Background leaf 5 - center right */
.leaf--bg5 {
  top: 25%;
  right: 12%;
  width: var(--leaf-xs);
  transform: rotate(30deg);
  opacity: 0.17;
  filter: brightness(1.2) saturate(0.3) contrast(0.8);
  z-index: -2;
  mix-blend-mode: overlay;
}

/* Background leaf 6 - bottom center */
.leaf--bg6 {
  bottom: 20%;
  left: 45%;
  width: var(--leaf-sm);
  transform: translateX(-50%) rotate(-15deg);
  opacity: 0.15;
  filter: brightness(1.2) saturate(0.3) contrast(0.8);
  z-index: -2;
  mix-blend-mode: overlay;
}

/* ---- No movement effects - static decorative leaves ---- */

/* ---- Responsive tuning ---- */
@media (max-width: 992px) {
  .sprig { width: var(--leaf-md); }
  
  /* Keep sprigs starting from corners on mobile */
  .sprig--tl { top: 0; left: 0; opacity: 0.4; transform-origin: top left; }
  .sprig--tr { top: 0; right: 0; opacity: 0.4; transform-origin: top right; }
  .sprig--bl { bottom: 0; left: 0; opacity: 0.4; transform-origin: bottom left; }
  .sprig--br { bottom: 0; right: 0; opacity: 0.4; transform-origin: bottom right; }
  
  /* Background leaves - overlay blend on mobile */
  .leaf--bg1, .leaf--bg2, .leaf--bg3, .leaf--bg4, .leaf--bg5, .leaf--bg6 {
    width: var(--leaf-xs);
    opacity: 0.12;
    filter: brightness(1.2) saturate(0.3) contrast(0.8);
    mix-blend-mode: overlay;
  }
  
  /* Adjust positions for mobile */
  .leaf--bg1 { top: 20%; }
  .leaf--bg2 { left: 2%; }
  .leaf--bg3 { right: 3%; }
  .leaf--bg4 { left: 8%; }
  .leaf--bg5 { right: 5%; }
  .leaf--bg6 { bottom: 25%; }
}

@media (min-width: 1400px) {
  .sprig { width: var(--leaf-lg); }
  .sprig--tl, .sprig--tr, .sprig--bl, .sprig--br { 
    width: var(--leaf-lg); 
    opacity: 0.7;
  }
}