:root {
  --blade-glow: #2be066;
  --blade-main: #1aaa50;
  --blade-deep: #0d5a34;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #040912;
}

.scene {
  width: 100vw;
  height: 100svh;
}

#gardenSvg {
  width: 100%;
  height: 100%;
  display: block;
}

#noiseLayer {
  opacity: 0.72;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.mist-band {
  fill: rgba(132, 225, 191, 0.08);
  filter: blur(9px);
  animation: mistDrift var(--dur, 18s) linear infinite;
}

.bokeh-dot {
  fill: rgba(126, 219, 255, 0.18);
  filter: blur(1.2px);
}

.cluster-halo {
  fill: rgba(86, 215, 173, 0.16);
  filter: blur(9px);
}

.bush {
  fill: url(#bushGrad);
  filter: drop-shadow(0 0 8px rgba(29, 155, 102, 0.3));
  transform-origin: center bottom;
  animation: popIn 0.9s ease forwards;
  animation-delay: 0.9s;
  opacity: 0;
}

.bundle-knot {
  fill: #1e8a56;
  opacity: 0.92;
  filter: drop-shadow(0 0 5px rgba(25, 147, 88, 0.42));
}

.bundle-ribbon {
  fill: rgba(250, 214, 156, 0.78);
  stroke: rgba(236, 183, 103, 0.7);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 4px rgba(255, 218, 165, 0.45));
}

.bundle-ribbon-tail {
  fill: none;
  stroke: rgba(240, 196, 122, 0.82);
  stroke-linecap: round;
  stroke-width: 3.1;
}

.plant {
  transform-origin: var(--ox) var(--oy);
  animation: plantSway var(--sway, 4s) infinite ease-in-out;
  animation-delay: var(--delay);
}

.stem {
  fill: none;
  stroke: url(#stemGrad);
  stroke-width: 7.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(66, 142, 96, 0.45));
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: drawStem 1.2s cubic-bezier(0.2, 1, 0.22, 1) forwards;
  animation-delay: var(--delay);
}

.stem-mid {
  stroke-width: 8.2;
  filter: drop-shadow(0 0 8px rgba(72, 156, 104, 0.5));
}

.leaf {
  fill: url(#leafGrad);
  opacity: 0;
  transform-origin: center;
  animation: leafPop 0.7s ease forwards;
  animation-delay: calc(var(--delay) + 0.6s);
}

.flower-head {
  filter: url(#flowerGlow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: bloom 0.75s cubic-bezier(0.18, 1.3, 0.45, 1) forwards, flowerPulse 5s ease-in-out infinite;
  animation-delay: calc(var(--delay) + 0.95s);
}

.flower-head.tone-0 .petal { fill: url(#petalGradRose); }
.flower-head.tone-1 .petal { fill: url(#petalGradPeach); }
.flower-head.tone-2 .petal { fill: url(#petalGradBerry); }

.petal {
  fill: url(#petalGrad);
  filter: drop-shadow(0 0 1px rgba(255, 174, 214, 0.34));
}

.p1 {
  opacity: 1;
}

.p2,
.p5 {
  opacity: 0.95;
}

.p3,
.p4 {
  opacity: 0.9;
}

.calyx {
  fill: url(#calyxGrad);
  opacity: 0.85;
}

.core {
  fill: url(#coreGrad);
  filter: drop-shadow(0 0 3px rgba(255, 205, 116, 0.68));
}

.core-highlight {
  fill: rgba(255, 248, 222, 0.95);
}

.grass-layer.back {
  opacity: 0.55;
  filter: blur(1.2px);
}

.grass-layer.front {
  opacity: 0.95;
  filter: blur(0.55px);
}

.blade-curve,
.grass-blade {
  fill: none;
  stroke: var(--blade-main);
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(45, 227, 93, 0.55));
}

.blade-curve {
  stroke-width: 8;
  stroke: url(#leafGrad);
}

.blade-curve.thin {
  stroke-width: 6;
}

.grass-blade {
  stroke-width: var(--w, 7);
  stroke: url(#leafGrad);
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transform-origin: var(--ox) var(--oy);
  animation: drawGrass 1s cubic-bezier(0.2, 1, 0.22, 1) forwards, grassWind var(--wind, 3.3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + 1s);
}

.star {
  fill: #ddf6ff;
  opacity: 0.24;
  filter: drop-shadow(0 0 4px rgba(216, 243, 255, 0.9));
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.firefly {
  fill: #ebee78;
  opacity: 0.54;
  filter: drop-shadow(0 0 6px rgba(239, 236, 134, 1));
  animation: firePulse 2.4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

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

@keyframes leafPop {
  0% { opacity: 0; transform: scale(0.2); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bloom {
  0% { opacity: 0; transform: scale(0.1); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes plantSway {
  0% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}

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

@keyframes grassWind {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.95; }
}

@keyframes firePulse {
  0%, 100% { opacity: 0.24; }
  50% { opacity: 1; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes flowerPulse {
  0%, 100% { filter: url(#flowerGlow) drop-shadow(0 0 3px rgba(255, 150, 210, 0.3)); }
  50% { filter: url(#flowerGlow) drop-shadow(0 0 6px rgba(255, 150, 210, 0.5)); }
}

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