html{scroll-padding-top: 80vh;}
#garden{
  display: flex;
  min-height:100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column-reverse;
  width:100%;
  flex-wrap:wrap;
  gap:300px;
  padding-block:600px;
  background:url(../img/stem.svg) repeat-y center top;
  background-size: 3%;
  .plot{
    width:20vw;
    position:relative;
    &:nth-child(even) .branches{rotate:40deg;}
    &:nth-child(odd) .branches{rotate:-40deg;}
    &:not(.parasitized) .treat{display:none;}
    &.parasitized{
      .parasite{
        content:"";
        height:10em;
        width: 30px;
        left:47%;
        top:-9rem;
        filter:blur(3px);
        border-radius: 100%;
        border-left:15px dotted white;
        position: absolute;
        z-index: -0;
      }
      .branch:after{
        content:"";
        width:100%;
        height:100%;
        border:20px dotted rgba(255, 255, 255, calc(var(--parasitval) * .25));
        filter:blur(5px);
        position:absolute;
        border-radius: 100%;
        top:100%;
        left:100%;
      }
      .petal:nth-child(7n - 1):after{
        content:"";
        border-radius: 100%;
        display: block;
        width:calc(.2rem + var(--j) * .1rem);
        height:calc(.2rem + var(--j) * .1rem);
        background:radial-gradient(white 30%, transparent);
        margin-left:calc(var(--i) * 1%);
        margin-top:calc(var(--i) * 2%);
      }
    }
    .branches{
      --plotHeight:30vh;
      position:relative;
      .branch{
        box-sizing: content-box;
        left:calc(50% - 3rem);
        position: absolute;
        height:2rem;
        width:2rem;
        bottom: calc((var(--i) * 2px));
        rotate:calc(var(--i) * (var(--angle)) * 1deg);
        scale:.05;
        opacity: 0;
        transition:
          box-shadow 1s linear,
          scale calc(.2s * var(--i)) ease-in;
        translate:
          calc(sin(var(--i) / var(--curve) / 2) * 2rem)
          calc(var(--i) * (var(--transy) / 2 + 7) * -.08rem);
        background-color:
          color-mix(in hsl,
          var(--seedbg),
          var(--targbg) calc(var(--i) * 3%))!important;
        border-top-color:
          color-mix(in hsl, var(--seedbordc0),
          var(--targbordc0) calc(var(--i) * 3%))!important;
        border-right-color:
          color-mix(in hsl, var(--seedbordc1),
          var(--targbordc1) calc(var(--i) * 3%))!important;
        border-bottom-color:
          color-mix(in hsl, var(--seedbordc2),
          var(--targbordc2) calc(var(--i) * 3%))!imp  ortant;
        border-left-color:
          color-mix(in hsl, var(--seedbordc3),
          var(--targbordc3) calc(var(--i) * 3%))!important;
        /* this ensure no horizontal offet caused by borders */
        border-inline-width:2rem!important;
        &.ended{
          scale:
            calc((var(--i) + 20) * (var(--scaley) / 50000 ) * pow(var(--i) + 50, 1.2))
            calc((var(--i) + 20) * (var(--scaley) / 50000 ) * pow(var(--i) + 50, 1.2));
          opacity: 1
        }
        &.focus{
          box-shadow: 0 0 30px white, 0 0 100px yellow;
        }
      }
      .petals{
        display:none;
        translate:
          calc(sin(var(--i) / var(--curve) / 2) * 2rem) calc(var(--i) * (var(--transy) / 2 + 10) * -0.08rem);
        scale:1 .7;
        &.bloomed{
          display:block;
        }
        .petal {
          position:absolute;
          left:50%;
          top: 0;
          border-width: calc(var(--petalborwidth) * 3px) calc(var(--petalborwidth) * 2px) 0 0;
          border-style: var(--petalstyle);
          border-radius: var(--petalradius);
          border-color: var(--petalcolor);
          background-image: linear-gradient(20deg, transparent 40%,  var(--petalcolor) 50%, transparent 70%);
          rotate: calc((var(--j) / (var(--petalnbr) - 1) * 360deg));
          height:calc((var(--petalsize) + 1) * 10px);
          width:50%;
          transform-origin: left center;
          opacity:0;
          transition:all 1s ease-out calc(.8s * 1/ var(--j));
          scale:.2;
        }
        &.ended .petal{
          scale: 1;
          opacity: 1;
        }
      }
    }
    &[data-type="0"]{
      .branches{
        .branch.ended:nth-child(2n){
          scale:
            calc((var(--i) + 20) * (var(--scaley) / 20000 ) * pow(var(--i) + 50, 1.2))
            calc((var(--i) + 20) * (var(--scaley) / 200000 ) * pow(var(--i) + 50, 1.2));
        }
        .petal{
          width:90%;
          background-image: linear-gradient(90deg, black 10%, transparent 40%, var(--petalcolor));
        }
      }
    }
    &[data-type="1"]{
      .branches{
        .petal:nth-child(odd){
          scale:1.2;
        }
      }
    }
    &[data-type="2"], &[data-type="3"]{
      &.parasitized{
        .petal:nth-child(7n-1)::after {
          display:none;
        }
        .petal:nth-child(even):after{
          content:"";
          border-radius: 100%;
          display: block;
          width:calc(2.4rem);
          height:calc(2.2rem);
          background:linear-gradient(to right,white 0%, transparent 60%);
          translate:-1rem 3rem;
        }
      }
      &[data-type="3"]{
        .branches .petals .petal{
          border-width:
            calc(var(--petalborwidth) * 5px)
            calc(var(--petalborwidth) * 10px)
            calc(var(--petalborwidth) * 3px)
            calc(var(--petalborwidth) * 2px);
          width:calc(var(--arc) * 90%);
          background:linear-gradient(to right,color-mix(in srgb, var(--petalcolor), yellow) 0%, transparent 60%);
        }
      }
      .branches{
        .petals{
          scale:1;
          translate: calc(sin(var(--i) / var(--curve) / 2) * 2rem) calc(var(--i) * (var(--transy) / 2 + 10) * -0.075rem);
          .petal{
            background-image: radial-gradient(farthest-corner at 40px 40px, var(--petalcolor) 0%, transparent 60%);
            rotate: calc((var(--j) / (var(--petalnbr) - 1 ) * -170deg));
            border-width:
              calc(var(--petalborwidth) * 3px) 0
              calc(var(--petalborwidth) * 1px)
              calc(var(--petalborwidth) * 3px);
            transform-origin: center left;
          }
        }

      }
    }
    &.dead{
      .branch, .petal{
        background:transparent!important;
        border:2px solid #333!important;
        scale:1!important;
        border-radius: 0!important;
        transition:all .8s calc(var(--i) * .1s) ease-out;
        &:hover{
          border-color:#999!important;
        }
        &:active{
          border-color:#fff!important;
        }
      }
      &.composted{
        height:0;
        transition:height 3s 3s linear;
        .branch, .petal{
          scale:2!important;
          rotate:-30deg!important;
          opacity: 0!important;
        }
      }
      .branch{
        rotate:0deg !important;
      }
      .petal{
        width:50%!important;
      }
      &.parasitized{
        .branch::after{
          display: none;
        }
        .parasite{display: none;}
      }
    }

    &.breeze{
      .branches .branch{
        animation: breeze 4s ease calc(var(--i) * .2s);
      }
      .petal{
        animation: breeze 4s ease calc((var(--i) + var(--j)) * .2s);
      }
    }
    &.yours{
      .data:after{
        content: "You planted that seed!";
        text-align: center;
        display: block;
        padding: var(--p);
        margin-top: var(--p);
        line-height: 1.2em;
        color: lime;
      }
    }
  }
}

@keyframes breeze {
  0% { margin-left: 0; }
  50% { margin-left: -20px; }
  100% { margin-left: 0px; }
}