<!--
  Author: @codepeek
  License: MIT
  Tags: #microinteraction #seedtobloomtoggle #svganimation #toggleswitch
-->
<label class="grow-switch" aria-label="Toggle Growth">
  <input type="checkbox" />
  <div class="g-bg">
    <div class="g-sky">
    </div>
    <svg class="g-rays" viewBox="0 0 90 90">
      <g fill="none">
        <rect class="ray" x="44" y="8" width="2" height="14" transform="rotate(0 45 45)"/>
        <rect class="ray" x="44" y="8" width="2" height="14" transform="rotate(45 45 45)"/>
        <rect class="ray" x="44" y="8" width="2" height="14" transform="rotate(90 45 45)"/>
        <rect class="ray" x="44" y="8" width="2" height="14" transform="rotate(135 45 45)"/>
        <rect class="ray" x="44" y="8" width="2" height="14" transform="rotate(180 45 45)"/>
        <rect class="ray" x="44" y="8" width="2" height="14" transform="rotate(225 45 45)"/>
        <rect class="ray" x="44" y="8" width="2" height="14" transform="rotate(270 45 45)"/>
        <rect class="ray" x="44" y="8" width="2" height="14" transform="rotate(315 45 45)"/>
      </g>
    </svg>
    <svg class="g-butterfly" viewBox="0 0 14 12">
      <g class="g-wing">
        <ellipse cx="4" cy="4" rx="4" ry="3.2" fill="#e8874a"/>
        <ellipse cx="4" cy="8" rx="3" ry="2.4" fill="#d9702f"/>
      </g>
      <g class="g-wing" transform="scale(-1,1) translate(-14,0)">
        <ellipse cx="4" cy="4" rx="4" ry="3.2" fill="#e8874a"/>
        <ellipse cx="4" cy="8" rx="3" ry="2.4" fill="#d9702f"/>
      </g>
      <rect x="6.3" y="2" width="1.4" height="9" rx="0.7" fill="#3a2a1a"/>
    </svg>
    <div class="g-soil">
    </div>
    <div class="g-seed">
    </div>
    <svg class="g-plant" viewBox="0 0 46 62">
      <!--
        stem
      -->
      <path d="M23 60 C21 46 25 34 23 20" stroke="#3d8a4f" stroke-width="3.4" fill="none" stroke-linecap="round"/>
      <!--
        left leaf
      -->
      <g class="g-leaf g-leaf-l">
        <path d="M23 42 C14 40 8 34 9 26 C18 27 24 33 23 42 Z" fill="#4fa864"/>
      </g>
      <!--
        right leaf
      -->
      <g class="g-leaf g-leaf-r">
        <path d="M23 34 C32 31 38 24 37 17 C28 19 22 26 23 34 Z" fill="#57b56d"/>
      </g>
      <!--
        flower
      -->
      <g class="g-flower-group">
        <g class="g-petal">
          <ellipse cx="23" cy="6" rx="5.5" ry="7.5" fill="#f2a9c4"/>
        </g>
        <g class="g-petal" transform="rotate(72 23 12)">
          <ellipse cx="23" cy="6" rx="5.5" ry="7.5" fill="#f2a9c4"/>
        </g>
        <g class="g-petal" transform="rotate(144 23 12)">
          <ellipse cx="23" cy="6" rx="5.5" ry="7.5" fill="#f2a9c4"/>
        </g>
        <g class="g-petal" transform="rotate(216 23 12)">
          <ellipse cx="23" cy="6" rx="5.5" ry="7.5" fill="#f2a9c4"/>
        </g>
        <g class="g-petal" transform="rotate(288 23 12)">
          <ellipse cx="23" cy="6" rx="5.5" ry="7.5" fill="#f2a9c4"/>
        </g>
        <circle cx="23" cy="12" r="5" fill="#f4c94d"/>
      </g>
    </svg>
  </div>
</label>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #microinteraction #seedtobloomtoggle #svganimation #toggleswitch
 */

.grow-switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 90px;
  cursor: pointer;
  border-radius: 50%;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
  -webkit-tap-highlight-color: transparent;
}
.grow-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* ---- background pot/circle ---- */
.g-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #ffffff;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.28);
  background: linear-gradient(180deg, #d9c9a3 0%, #efe2c4 55%, #efe2c4 100%);
  transition: background 1s ease;
  z-index: 1;
}

/* ---- sky glow behind, appears when grown ---- */
.g-sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, #cdeeca 0%, #a9dfae 55%, #82c88e 100%);
  opacity: 0;
  transition: opacity 1s ease;
}

/* ---- sun rays, appear when grown ---- */
.g-rays {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.6) rotate(0deg);
  transition: opacity 0.8s ease 0.3s, transform 6s linear;
}
.ray {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 2px;
  height: 14px;
  background: rgba(255, 224, 130, 0.75);
  transform-origin: 50% 37px;
  border-radius: 2px;
}

/* ---- soil mound, always present ---- */
.g-soil {
  position: absolute;
  bottom: -22px;
  left: -12px;
  width: 118px;
  height: 46px;
  background: linear-gradient(180deg, #6b4a2c 0%, #4a3018 100%);
  border-radius: 50%;
  z-index: 3;
  transition: background 1s ease;
}
.g-soil::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 8px;
  right: 8px;
  height: 5px;
  background: rgba(0,0,0,0.18);
  border-radius: 50%;
  filter: blur(1px);
}

/* ---- seed, visible when off ---- */
.g-seed {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 9px;
  height: 12px;
  transform: translateX(-50%) scale(1);
  background: radial-gradient(ellipse at 35% 30%, #a9865a, #6b4d2c 80%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  z-index: 4;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ---- plant: stem + leaves + flower, grows when on ---- */
.g-plant {
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 46px;
  height: 62px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  z-index: 4;
  transition: transform 0.9s cubic-bezier(0.34, 1.3, 0.4, 1);
}
.g-petal {
  transform-origin: 23px 12px;
  transition: transform 0.6s ease 0.5s;
}
.g-flower-group {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: 23px 12px;
  transition: opacity 0.4s ease 0.55s, transform 0.5s cubic-bezier(0.34,1.6,0.4,1) 0.55s;
}
.g-leaf {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.g-leaf-l { transform-origin: 23px 42px; transition-delay: 0.35s; }
.g-leaf-r { transform-origin: 23px 34px; transition-delay: 0.45s; }

/* ---- butterfly, appears after bloom ---- */
.g-butterfly {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 14px;
  height: 12px;
  opacity: 0;
  transform: translate(6px, 4px) scale(0.7);
  transition: opacity 0.5s ease 1.1s, transform 0.5s ease 1.1s;
}
.g-wing { animation: none; transform-origin: 7px 6px; }

/* ================= CHECKED STATE ================= */
.grow-switch input:checked + .g-bg {
  background: linear-gradient(180deg, #cdeeca 0%, #a9dfae 100%);
}
.grow-switch input:checked + .g-bg .g-sky { opacity: 1; }
.grow-switch input:checked + .g-bg .g-rays {
  opacity: 1;
  transform: scale(1) rotate(45deg);
}
.grow-switch input:checked + .g-bg .g-soil {
  background: linear-gradient(180deg, #4a3320 0%, #33220f 100%);
}
.grow-switch input:checked + .g-bg .g-seed {
  opacity: 0;
  transform: translateX(-50%) scale(0.3);
}
.grow-switch input:checked + .g-bg .g-plant {
  transform: translateX(-50%) scaleY(1);
}
.grow-switch input:checked + .g-bg .g-leaf { opacity: 1; }
.grow-switch input:checked + .g-bg .g-flower-group {
  opacity: 1;
  transform: scale(1);
}
.grow-switch input:checked + .g-bg .g-butterfly {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.grow-switch input:checked + .g-bg .g-wing {
  animation: flap 0.5s ease-in-out infinite alternate 1.3s;
}
@keyframes flap {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0.55); }
}