/* Adapted from "CSS Blossoming Flowers at Magical Night" by Md Usman Ansari.
   Original: https://codepen.io/mdusmanansari/pen/BamepLe (MIT).
   Retains its stem growth, hinged leaf unfold, asymmetrical 3D petals and sway;
   scoped to a quiet, transparent garden along the photographic page's ground. */
.music-bottom-garden {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: min(24vh, 220px);
  overflow: visible;
  pointer-events: none;
  user-select: none;
  perspective: 900px;
  opacity: 0;
  transition: opacity var(--garden-stop-fade-duration, 600ms) ease;
}
.music-bottom-garden[hidden] { display: none; }
.music-bottom-garden.is-visible { opacity: 1; }
.music-bottom-garden.is-auto-fading { opacity: 0; transition-duration: var(--garden-auto-fade-duration, 2800ms); }
.music-bottom-garden.is-stopping { transition-duration: var(--garden-stop-fade-duration, 600ms); }
.music-bottom-garden.is-reduced { transition: none; }
.music-bottom-garden *, .music-bottom-garden *::before, .music-bottom-garden *::after { box-sizing: border-box; pointer-events: none; }
.garden-plant {
  --garden-bloom: var(--garden-desktop-bloom);
  --garden-petal-base: #c98094;
  --garden-petal-tip: #f4d3d7;
  --garden-petal-shadow: #a95876;
  --garden-stem: #7e9467;
  position: absolute;
  bottom: -3px;
  left: var(--garden-x);
  width: 3px;
  height: var(--garden-height);
  transform: rotate(var(--garden-lean));
  transform-origin: bottom center;
}
.garden-plant[data-layer='0'] { z-index: 3; }
.garden-plant[data-layer='1'] { z-index: 1; opacity: .78; --garden-stem: #8c9f77; }
.garden-plant[data-layer='2'] { z-index: 2; opacity: .93; }
.garden-plant[data-tone='peach'] { --garden-petal-base: #d9957d; --garden-petal-tip: #f6d5bd; --garden-petal-shadow: #b97264; }
.garden-plant[data-tone='cream'] { --garden-petal-base: #d8ab82; --garden-petal-tip: #fae6ce; --garden-petal-shadow: #b88f6b; }
.garden-growth { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.garden-stem {
  position: absolute;
  inset: 0;
  border-radius: 70% 70% 1px 1px;
  background: linear-gradient(90deg, #60764f, var(--garden-stem) 42%, #a6b48a 76%, #71855b);
}
.garden-head {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: bottom center;
  perspective: 300px;
}
.garden-petal {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(var(--garden-bloom) * .52);
  height: calc(var(--garden-bloom) * .73);
  border-radius: 51% 49% 47% 53% / 44% 45% 55% 69%;
  background: linear-gradient(to top, var(--garden-petal-base), var(--garden-petal-tip) 88%);
  box-shadow: inset 2px 1px 5px #fff8ec55, inset -2px -2px 5px #9e5e6b1a;
  transform-origin: bottom center;
  opacity: .97;
}
.garden-petal--1 { transform: translate(-10%, 1%) rotateY(40deg) rotateX(-50deg); }
.garden-petal--2 { transform: translate(-50%, -4%) rotateX(40deg); }
.garden-petal--3 { transform: translate(-90%, 0) rotateY(45deg) rotateX(50deg); }
.garden-petal--4 {
  width: calc(var(--garden-bloom) * .52);
  height: calc(var(--garden-bloom) * .52);
  border-radius: 40% 100% 40% 40%;
  transform-origin: bottom left;
  transform: translate(0, 18%) rotateX(70deg) rotate(-43deg);
  background: linear-gradient(to top, var(--garden-petal-shadow), var(--garden-petal-tip));
  z-index: 2;
}
.garden-center {
  position: absolute;
  left: calc(var(--garden-bloom) * -.28);
  bottom: calc(var(--garden-bloom) * -.08);
  width: calc(var(--garden-bloom) * .58);
  height: calc(var(--garden-bloom) * .2);
  border-radius: 50%;
  background: #eed6a5;
  box-shadow: inset 0 -2px 2px #ae8d4e66;
  z-index: 3;
}
.garden-center::after {
  content: '';
  position: absolute;
  inset: 22% 18%;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, #aa884777 0 1px, transparent 1px 4px), linear-gradient(#e2bc6c, #d1ac60);
}
.garden-calyx { position: absolute; left: -5px; bottom: -8px; width: 10px; height: 9px; border-radius: 0 0 60% 60%; background: #73895d; z-index: -1; }
.garden-leaf {
  position: absolute;
  left: 1px;
  width: calc(var(--garden-bloom) * .5);
  height: calc(var(--garden-bloom) * .2);
  border-radius: 100% 0 100% 0;
  transform-origin: left center;
  transform: rotate(-32deg);
  background: linear-gradient(165deg, #b1be93, var(--garden-stem) 57%, #687e53);
  box-shadow: inset 0 -1px 0 #5f774933;
}
.garden-leaf::after { content: ''; position: absolute; left: 8%; right: 8%; top: 52%; height: 1px; background: #d6ddbe66; transform: rotate(-13deg); }
.garden-leaf--1 { bottom: 28%; }
.garden-leaf--2 { bottom: 47%; transform: rotateY(180deg) rotate(-30deg); }
.garden-leaf--3 { bottom: 65%; width: calc(var(--garden-bloom) * .39); height: calc(var(--garden-bloom) * .16); }

.is-growing .garden-growth { animation: garden-grow-tree 1.55s cubic-bezier(.22,.65,.3,1) var(--garden-delay) backwards; }
.is-growing .garden-head { animation: garden-bloom-flower 1.4s cubic-bezier(.18,.6,.25,1) calc(var(--garden-delay) + 1.18s) backwards; }
.is-growing .garden-leaf--1 { animation: garden-bloom-leaf-right .8s ease calc(var(--garden-delay) + .65s) backwards; }
.is-growing .garden-leaf--2 { animation: garden-bloom-leaf-left .9s ease calc(var(--garden-delay) + .95s) backwards; }
.is-growing .garden-leaf--3 { animation: garden-bloom-leaf-right .8s ease calc(var(--garden-delay) + 1.2s) backwards; }
.music-bottom-garden:is(.is-growing, .is-settled).is-visible .garden-plant {
  animation: garden-moving-flower var(--garden-sway) ease-in-out calc(var(--garden-delay) + 2.8s) infinite;
}
.music-bottom-garden.is-paused *, .music-bottom-garden.is-paused *::after { animation-play-state: paused !important; }
.music-bottom-garden.is-reduced *, .music-bottom-garden.is-reduced *::after { animation: none !important; }
@keyframes garden-grow-tree { 0% { height: 0; border-radius: 8px; } }
@keyframes garden-bloom-flower { 0% { transform: scale(0) rotate(-8deg); } 70% { transform: scale(.94) rotate(1deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes garden-bloom-leaf-right { 0% { transform-origin: left; transform: rotate(70deg) rotateY(30deg) scale(0); } }
@keyframes garden-bloom-leaf-left { 0% { transform-origin: left; transform: rotate(-70deg) rotateY(30deg) scale(0); } }
@keyframes garden-moving-flower {
  0%, 100% { transform: rotate(calc(var(--garden-lean) - 1deg)); }
  50% { transform: rotate(calc(var(--garden-lean) + 1.3deg)); }
}
@media (max-width: 760px) {
  .music-bottom-garden { height: min(22vh, 170px); }
  .garden-plant { left: var(--garden-mobile-x); --garden-bloom: var(--garden-mobile-bloom); }
  .garden-plant[data-mobile='no'] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .music-bottom-garden { transition: none; }
  .music-bottom-garden *, .music-bottom-garden *::after { animation: none !important; }
}
@media (forced-colors: active) { .music-bottom-garden { display: none; } }