/* Dandelion background wrapper */
.dandelion-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(to bottom, #c9f6ff 0%, #e6f9d9 70%);
  pointer-events: none;
}
body > *:not(.dandelion-bg) {
  position: relative;
  z-index: 1;
}

.dandelion-bg .dandelion {
  position: relative;
  height: 65vh;
  max-height: 65vw;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' viewBox='0 0 1 1'><g fill='none' stroke='%23ffffff' stroke-width='3'><path d='M 0.5 0 C 0.4475 0.277 0.532 0.7205 0.5 1' vector-effect='non-scaling-stroke'/></g></svg>");
  background-size: cover;
  background-position: center center;
}
.dandelion-bg .head {
  height: 30vh;
  max-height: 30vw;
  aspect-ratio: 1/1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
}
.dandelion-bg .seed-wrapper.outter {
  width: 20vh;
  max-width: 20vw;
  aspect-ratio: 1/1;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
}
/* Outter seed wrapper width variants for visual randomness */
.dandelion-bg .seed-wrapper.outter:nth-child(4n) .seed:before {
  transform: translateX(-50%) rotate(4deg);
}
.dandelion-bg .seed-wrapper.outter:nth-child(4n) .seed:after {
  transform: rotateY(180deg);
}
.dandelion-bg .seed-wrapper.outter:nth-child(2n-1) {
  width: 18vh;
  max-width: 18vw;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3n-2) {
  width: 12vh;
  max-width: 12vw;
}
.dandelion-bg .seed-wrapper.outter:nth-child(5n-3) {
  width: 14vh;
  max-width: 14vw;
}
.dandelion-bg .seed-wrapper.outter:nth-child(8n-4) {
  width: 8vh;
  max-width: 8vw;
}
.dandelion-bg .seed-wrapper.outter:nth-child(9n-5) {
  width: 9vh;
  max-width: 9vw;
}

.dandelion-bg .seed-wrapper.inner {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.dandelion-bg .seed {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transform-origin: center bottom;
}
.dandelion-bg .seed:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 3vh;
  max-height: 3vw;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background-color: white;
  border-radius: 57% 43% 44% 56% / 67% 74% 26% 33%;
  transform-origin: center bottom;
}
.dandelion-bg .seed:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' viewBox='0 0 1 1'><g fill='none' stroke='%23ffffff' stroke-width='1'><path d='M 0.5 0 C 0.579 0.374 0.532 0.7205 0.5 1' vector-effect='non-scaling-stroke'/></g></svg>");
  background-size: cover;
}

/* 40 seeds: distribute evenly in a circle */
.dandelion-bg .seed-wrapper:nth-child(1) .seed { transform: rotate(9deg); }
.dandelion-bg .seed-wrapper:nth-child(2) .seed { transform: rotate(18deg); }
.dandelion-bg .seed-wrapper:nth-child(3) .seed { transform: rotate(27deg); }
.dandelion-bg .seed-wrapper:nth-child(4) .seed { transform: rotate(36deg); }
.dandelion-bg .seed-wrapper:nth-child(5) .seed { transform: rotate(45deg); }
.dandelion-bg .seed-wrapper:nth-child(6) .seed { transform: rotate(54deg); }
.dandelion-bg .seed-wrapper:nth-child(7) .seed { transform: rotate(63deg); }
.dandelion-bg .seed-wrapper:nth-child(8) .seed { transform: rotate(72deg); }
.dandelion-bg .seed-wrapper:nth-child(9) .seed { transform: rotate(81deg); }
.dandelion-bg .seed-wrapper:nth-child(10) .seed { transform: rotate(90deg); }
.dandelion-bg .seed-wrapper:nth-child(11) .seed { transform: rotate(99deg); }
.dandelion-bg .seed-wrapper:nth-child(12) .seed { transform: rotate(108deg); }
.dandelion-bg .seed-wrapper:nth-child(13) .seed { transform: rotate(117deg); }
.dandelion-bg .seed-wrapper:nth-child(14) .seed { transform: rotate(126deg); }
.dandelion-bg .seed-wrapper:nth-child(15) .seed { transform: rotate(135deg); }
.dandelion-bg .seed-wrapper:nth-child(16) .seed { transform: rotate(144deg); }
.dandelion-bg .seed-wrapper:nth-child(17) .seed { transform: rotate(153deg); }
.dandelion-bg .seed-wrapper:nth-child(18) .seed { transform: rotate(162deg); }
.dandelion-bg .seed-wrapper:nth-child(19) .seed { transform: rotate(171deg); }
.dandelion-bg .seed-wrapper:nth-child(20) .seed { transform: rotate(180deg); }
.dandelion-bg .seed-wrapper:nth-child(21) .seed { transform: rotate(189deg); }
.dandelion-bg .seed-wrapper:nth-child(22) .seed { transform: rotate(198deg); }
.dandelion-bg .seed-wrapper:nth-child(23) .seed { transform: rotate(207deg); }
.dandelion-bg .seed-wrapper:nth-child(24) .seed { transform: rotate(216deg); }
.dandelion-bg .seed-wrapper:nth-child(25) .seed { transform: rotate(225deg); }
.dandelion-bg .seed-wrapper:nth-child(26) .seed { transform: rotate(234deg); }
.dandelion-bg .seed-wrapper:nth-child(27) .seed { transform: rotate(243deg); }
.dandelion-bg .seed-wrapper:nth-child(28) .seed { transform: rotate(252deg); }
.dandelion-bg .seed-wrapper:nth-child(29) .seed { transform: rotate(261deg); }
.dandelion-bg .seed-wrapper:nth-child(30) .seed { transform: rotate(270deg); }
.dandelion-bg .seed-wrapper:nth-child(31) .seed { transform: rotate(279deg); }
.dandelion-bg .seed-wrapper:nth-child(32) .seed { transform: rotate(288deg); }
.dandelion-bg .seed-wrapper:nth-child(33) .seed { transform: rotate(297deg); }
.dandelion-bg .seed-wrapper:nth-child(34) .seed { transform: rotate(306deg); }
.dandelion-bg .seed-wrapper:nth-child(35) .seed { transform: rotate(315deg); }
.dandelion-bg .seed-wrapper:nth-child(36) .seed { transform: rotate(324deg); }
.dandelion-bg .seed-wrapper:nth-child(37) .seed { transform: rotate(333deg); }
.dandelion-bg .seed-wrapper:nth-child(38) .seed { transform: rotate(342deg); }
.dandelion-bg .seed-wrapper:nth-child(39) .seed { transform: rotate(351deg); }
.dandelion-bg .seed-wrapper:nth-child(40) .seed { transform: rotate(360deg); }

/* Feather styles (12 feathers, 6 up, 6 down) */
.dandelion-bg .feather {
  width: 35%;
  aspect-ratio: 1/1;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1' viewBox='0 0 1 1'><g fill='none' stroke='%23ffffff' stroke-width='1'><path d='M 0.5 0 C 0.324 0.293 0.422 0.793 0.5 1' vector-effect='non-scaling-stroke'/></g></svg>");
  background-size: cover;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform-origin: center bottom;
}
.dandelion-bg .feather:nth-child(1)  { transform: translateX(-50%) rotate(-87deg); }
.dandelion-bg .feather:nth-child(2)  { transform: translateX(-50%) rotate(-69deg); }
.dandelion-bg .feather:nth-child(3)  { transform: translateX(-50%) rotate(-51deg); }
.dandelion-bg .feather:nth-child(4)  { transform: translateX(-50%) rotate(-33deg); }
.dandelion-bg .feather:nth-child(5)  { transform: translateX(-50%) rotate(-15deg); }
.dandelion-bg .feather:nth-child(6)  { transform: translateX(-50%) rotate(3deg); }
.dandelion-bg .feather:nth-child(7)  { transform: translateX(-50%) rotateX(180deg) rotateZ(76deg); }
.dandelion-bg .feather:nth-child(8)  { transform: translateX(-50%) rotateX(180deg) rotateZ(94deg); }
.dandelion-bg .feather:nth-child(9)  { transform: translateX(-50%) rotateX(180deg) rotateZ(112deg); }
.dandelion-bg .feather:nth-child(10) { transform: translateX(-50%) rotateX(180deg) rotateZ(130deg); }
.dandelion-bg .feather:nth-child(11) { transform: translateX(-50%) rotateX(180deg) rotateZ(148deg); }
.dandelion-bg .feather:nth-child(12) { transform: translateX(-50%) rotateX(180deg) rotateZ(166deg); }

/* Dandelion seed fly and rotate animations for 20 outter seeds (half of 40) */
/* Outter seeds fly-away animation, delays and durations staggered for realism */
.dandelion-bg .seed-wrapper.outter:nth-child(1) {
  animation: fly-away 7s -0.1s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 0.3s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(1) .inner {
  animation: fly-up 3.2s ease-in-out forwards;
  animation-delay: 0.3s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(1) .seed {
  animation: rotate 1.6s ease-out forwards;
  animation-delay: 0.3s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(2) {
  animation: fly-away 6.8s -0.2s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 0.6s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(2) .inner {
  animation: fly-up 3.4s ease-in-out forwards;
  animation-delay: 0.6s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(2) .seed {
  animation: rotate 1.7s ease-out forwards;
  animation-delay: 0.6s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3) {
  animation: fly-away 6.7s -0.3s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 0.9s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3) .inner {
  animation: fly-up 3.6s ease-in-out forwards;
  animation-delay: 0.9s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3) .seed {
  animation: rotate 1.8s ease-out forwards;
  animation-delay: 0.9s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(4) {
  animation: fly-away 6.6s -0.4s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 1.2s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(4) .inner {
  animation: fly-up 3.8s ease-in-out forwards;
  animation-delay: 1.2s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(4) .seed {
  animation: rotate 1.9s ease-out forwards;
  animation-delay: 1.2s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(5) {
  animation: fly-away 6.5s -0.5s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 1.5s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(5) .inner {
  animation: fly-up 4s ease-in-out forwards;
  animation-delay: 1.5s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(5) .seed {
  animation: rotate 2s ease-out forwards;
  animation-delay: 1.5s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(6) {
  animation: fly-away 6.4s -0.6s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 1.8s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(6) .inner {
  animation: fly-up 4.2s ease-in-out forwards;
  animation-delay: 1.8s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(6) .seed {
  animation: rotate 2.1s ease-out forwards;
  animation-delay: 1.8s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(7) {
  animation: fly-away 6.3s -0.7s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 2.1s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(7) .inner {
  animation: fly-up 4.4s ease-in-out forwards;
  animation-delay: 2.1s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(7) .seed {
  animation: rotate 2.2s ease-out forwards;
  animation-delay: 2.1s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(8) {
  animation: fly-away 6.2s -0.8s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 2.4s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(8) .inner {
  animation: fly-up 4.6s ease-in-out forwards;
  animation-delay: 2.4s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(8) .seed {
  animation: rotate 2.3s ease-out forwards;
  animation-delay: 2.4s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(9) {
  animation: fly-away 6.1s -0.9s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 2.7s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(9) .inner {
  animation: fly-up 4.8s ease-in-out forwards;
  animation-delay: 2.7s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(9) .seed {
  animation: rotate 2.4s ease-out forwards;
  animation-delay: 2.7s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(10) {
  animation: fly-away 6s -1s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 3s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(10) .inner {
  animation: fly-up 5s ease-in-out forwards;
  animation-delay: 3s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(10) .seed {
  animation: rotate 2.5s ease-out forwards;
  animation-delay: 3s;
}
/* Outter seeds fly-away animation for the last 10 (nth-last-child) */
.dandelion-bg .seed-wrapper.outter:nth-last-child(1) {
  animation: fly-away 7.2s -0.2s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 0.5s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(1) .inner {
  animation: fly-up 3.65s ease-in-out forwards;
  animation-delay: 0.5s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(1) .seed {
  animation: rotate-rev 1.1s ease-out forwards;
  animation-delay: 0.5s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(2) {
  animation: fly-away 7s -0.4s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 0.8s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(2) .inner {
  animation: fly-up 3.8s ease-in-out forwards;
  animation-delay: 0.8s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(2) .seed {
  animation: rotate-rev 1.2s ease-out forwards;
  animation-delay: 0.8s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(3) {
  animation: fly-away 6.8s -0.6s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 1.1s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(3) .inner {
  animation: fly-up 3.95s ease-in-out forwards;
  animation-delay: 1.1s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(3) .seed {
  animation: rotate-rev 1.3s ease-out forwards;
  animation-delay: 1.1s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(4) {
  animation: fly-away 6.6s -0.8s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 1.4s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(4) .inner {
  animation: fly-up 4.1s ease-in-out forwards;
  animation-delay: 1.4s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(4) .seed {
  animation: rotate-rev 1.4s ease-out forwards;
  animation-delay: 1.4s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(5) {
  animation: fly-away 6.4s -1.0s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 1.7s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(5) .inner {
  animation: fly-up 4.25s ease-in-out forwards;
  animation-delay: 1.7s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(5) .seed {
  animation: rotate-rev 1.5s ease-out forwards;
  animation-delay: 1.7s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(6) {
  animation: fly-away 6.2s -1.2s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 2.0s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(6) .inner {
  animation: fly-up 4.4s ease-in-out forwards;
  animation-delay: 2.0s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(6) .seed {
  animation: rotate-rev 1.6s ease-out forwards;
  animation-delay: 2.0s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(7) {
  animation: fly-away 6s -1.4s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 2.3s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(7) .inner {
  animation: fly-up 4.55s ease-in-out forwards;
  animation-delay: 2.3s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(7) .seed {
  animation: rotate-rev 1.7s ease-out forwards;
  animation-delay: 2.3s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(8) {
  animation: fly-away 5.8s -1.6s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 2.6s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(8) .inner {
  animation: fly-up 4.7s ease-in-out forwards;
  animation-delay: 2.6s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(8) .seed {
  animation: rotate-rev 1.8s ease-out forwards;
  animation-delay: 2.6s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(9) {
  animation: fly-away 5.6s -1.8s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 2.9s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(9) .inner {
  animation: fly-up 4.85s ease-in-out forwards;
  animation-delay: 2.9s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(9) .seed {
  animation: rotate-rev 1.9s ease-out forwards;
  animation-delay: 2.9s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(10) {
  animation: fly-away 5.4s -2.0s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 3.2s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(10) .inner {
  animation: fly-up 5s ease-in-out forwards;
  animation-delay: 3.2s;
}
.dandelion-bg .seed-wrapper.outter:nth-last-child(10) .seed {
  animation: rotate-rev 2s ease-out forwards;
  animation-delay: 3.2s;
}

/* Fly-away for outter seeds that are also 3n from the end, with longer times and delays */
.dandelion-bg .seed-wrapper.outter:nth-child(3n):nth-last-child(1) {
  animation: fly-away 7.4s -0.1s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 0.6s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3n):nth-last-child(1) .inner {
  animation: fly-up 3.15s ease-in-out forwards;
  animation-delay: 0.6s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3n):nth-last-child(1) .seed {
  animation: rotate-rev 1.1s ease-out forwards;
  animation-delay: 0.6s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3n):nth-last-child(2) {
  animation: fly-away 7.3s -0.2s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 1.0s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3n):nth-last-child(2) .inner {
  animation: fly-up 3.3s ease-in-out forwards;
  animation-delay: 1.0s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3n):nth-last-child(2) .seed {
  animation: rotate-rev 1.2s ease-out forwards;
  animation-delay: 1.0s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3n):nth-last-child(3) {
  animation: fly-away 7.2s -0.3s cubic-bezier(0.265, 0.025, 0.495, 1.39) forwards;
  animation-delay: 1.4s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3n):nth-last-child(3) .inner {
  animation: fly-up 3.45s ease-in-out forwards;
  animation-delay: 1.4s;
}
.dandelion-bg .seed-wrapper.outter:nth-child(3n):nth-last-child(3) .seed {
  animation: rotate-rev 1.3s ease-out forwards;
  animation-delay: 1.4s;
}

@keyframes fly-away {
  from {
  }
  to {
    transform: translateX(calc(70vw)) scale(0);
  }
}
@keyframes fly-up {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-30vh);
  }
  50% {
    transform: translateY(-25vh);
  }
  100% {
    transform: translateY(-200vh);
  }
}
@keyframes rotate {
  to {
    transform: rotate(0);
  }
}
@keyframes rotate-rev {
  to {
    transform: rotate(360deg);
  }
}