*,
      *::after,
      *::before {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      :root {
        --dark-color: #ffb6c18c;
        --fl-speed: 0.8s;
        --speed-leaf: 2s;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;  
        min-height: 100vh;
        background-color: var(--dark-color);
        overflow: hidden;
        perspective: 1000px;
      }

      .night {
        position: fixed;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        filter: blur(0.1vmin);
        background-image:
          radial-gradient(ellipse at top, transparent 0%, var(--dark-color)),
          radial-gradient(
            ellipse at bottom,
            var(--dark-color),
            rgba(145, 233, 255, 0.2)
          ),
          repeating-linear-gradient(
            220deg,
            rgb(0, 0, 0) 0px,
            rgb(0, 0, 0) 19px,
            transparent 19px,
            transparent 22px
          ),
          repeating-linear-gradient(
            189deg,
            rgb(0, 0, 0) 0px,
            rgb(0, 0, 0) 19px,
            transparent 19px,
            transparent 22px
          ),
          repeating-linear-gradient(
            148deg,
            rgb(0, 0, 0) 0px,
            rgb(0, 0, 0) 19px,
            transparent 19px,
            transparent 22px
          ),
          linear-gradient(90deg, rgb(0, 255, 250), rgb(240, 240, 240));
      }

      .shooting-stars {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
      }

      .shooting-star {
        position: absolute;
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
        opacity: 0;
        animation: shootingStar 3s linear infinite;
      }

      .shooting-star::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 1) 100%
        );
        animation: shootingStarTail 3s linear infinite;
      }

      .shooting-star:nth-child(1) {
        top: 5%;
        left: -10%;
        animation-delay: 0s;
        animation-duration: 2.5s;
      }

      .shooting-star:nth-child(2) {
        top: 15%;
        left: -10%;
        animation-delay: 2s;
        animation-duration: 3s;
      }

      .shooting-star:nth-child(3) {
        top: 25%;
        left: -10%;
        animation-delay: 4s;
        animation-duration: 2.8s;
      }

      .shooting-star:nth-child(4) {
        top: 0%;
        left: -10%;
        animation-delay: 6s;
        animation-duration: 3.2s;
      }

      .shooting-star:nth-child(5) {
        top: 35%;
        left: -10%;
        animation-delay: 8s;
        animation-duration: 2.7s;
      }

      .shooting-star:nth-child(6) {
        top: 8%;
        left: -10%;
        animation-delay: 10s;
        animation-duration: 3.1s;
      }

      .shooting-star:nth-child(7) {
        top: 45%;
        left: -10%;
        animation-delay: 12s;
        animation-duration: 2.9s;
      }

      .shooting-star:nth-child(8) {
        top: 3%;
        left: -10%;
        animation-delay: 14s;
        animation-duration: 3.3s;
      }

      @keyframes shootingStar {
        0% {
          opacity: 0;
          transform: translateX(0) translateY(0) rotate(45deg);
        }
        10% {
          opacity: 1;
        }
        90% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translateX(120vw) translateY(50vh) rotate(10deg);
        }
      }

      @keyframes shootingStarTail {
        0% {
          width: 0;
        }
        30% {
          width: 100px;
        }
        100% {
          width: 0;
        }
      }

      .flowers {
        position: absolute;
        bottom: 45%;
        left: 50%;
        transform: translateX(-50%) scale(0.45);
        z-index: 2;
      }

      .bouquet-container {
        position: relative;
        width: min(90vw, 500px);
        aspect-ratio: 5 / 6;
        display: flex;
        justify-content: center;
        align-items: flex-end;

        /* Desktop only: ibinaba ang buong bouquet para hindi masyadong dikit sa taas. */
        transform: translateY(115px);
      }

      @media (max-width: 600px) {
        .bouquet-container {
          /* Phone: binalik sa mas natural na pwesto para hindi pumangit/bumaba sobra. */
          width: min(94vw, 500px);
          transform: translateY(0);
        }

        .flowers {
          bottom: 45%;
          transform: translateX(-50%) scale(0.45);
        }
      }

      .bouquet-img {
        position: absolute;
        bottom: 15%;
        width: 100%;
        z-index: 1;
        pointer-events: none;

        opacity: 0;
        transition: opacity 1s ease;
      }

      .flower {
        position: absolute;
        bottom: 10vmin;
        transform-origin: bottom center;
        z-index: 50;
      }

      .flower--1 {
        animation: moving-flower-1 4s linear infinite;
      }

      .flower--1 .flower__line {
        height: 70vmin;
        animation-delay: 0.3s;
      }

      .flower--1 .flower__line__leaf--1 {
        animation: blooming-leaf-right var(--fl-speed) 1.6s backwards;
      }

      .flower--1 .flower__line__leaf--2 {
        animation: blooming-leaf-right var(--fl-speed) 1.4s backwards;
      }

      .flower--1 .flower__line__leaf--3 {
        animation: blooming-leaf-left var(--fl-speed) 1.2s backwards;
      }

      .flower--1 .flower__line__leaf--4 {
        animation: blooming-leaf-left var(--fl-speed) 1s backwards;
      }

      .flower--2 {
        left: 50%;
        transform: rotate(20deg);
        animation: moving-flower-2 4s linear infinite;
      }

      .flower--2 .flower__line {
        height: 60vmin;
        animation-delay: 0.6s;
      }

      .flower--2 .flower__line__leaf--1 {
        animation: blooming-leaf-right var(--fl-speed) 1.9s backwards;
      }

      .flower--2 .flower__line__leaf--2 {
        animation: blooming-leaf-right var(--fl-speed) 1.7s backwards;
      }

      .flower--2 .flower__line__leaf--3 {
        animation: blooming-leaf-left var(--fl-speed) 1.5s backwards;
      }

      .flower--2 .flower__line__leaf--4 {
        animation: blooming-leaf-left var(--fl-speed) 1.3s backwards;
      }

      .flower--3 {
        left: 50%;
        transform: rotate(-15deg);
        animation: moving-flower-3 4s linear infinite;
      }

      .flower--3 .flower__line {
        animation-delay: 0.9s;
      }

      .flower--3 .flower__line__leaf--1 {
        animation: blooming-leaf-right var(--fl-speed) 2.5s backwards;
      }

      .flower--3 .flower__line__leaf--2 {
        animation: blooming-leaf-right var(--fl-speed) 2.3s backwards;
      }

      .flower--3 .flower__line__leaf--3 {
        animation: blooming-leaf-left var(--fl-speed) 2.1s backwards;
      }

      .flower--3 .flower__line__leaf--4 {
        animation: blooming-leaf-left var(--fl-speed) 1.9s backwards;
      }

      .flower--4 {
        left: -25%;
        z-index: -6;
        transform: rotate(10deg);
        animation: moving-flower-4 3.5s linear infinite;
      }

      .flower--4 .flower__line {
        height: 90vmin;
        animation-delay: 1.2s;
      }

      .flower--4 .flower__line__leaf--1 {
        animation: blooming-leaf-right var(--fl-speed) 2.8s backwards;
      }

      .flower--4 .flower__line__leaf--2 {
        animation: blooming-leaf-right var(--fl-speed) 2.6s backwards;
      }

      .flower--4 .flower__line__leaf--3 {
        animation: blooming-leaf-left var(--fl-speed) 2.4s backwards;
      }

      .flower--4 .flower__line__leaf--4 {
        animation: blooming-leaf-left var(--fl-speed) 2.2s backwards;
      }

      .flower--5 {
        left: 75%;
        z-index: -7;
        transform: rotate(-25deg);
        animation: moving-flower-5 4.5s linear infinite;
      }

      .flower--5 .flower__line {
        height: 85vmin;
        animation-delay: 1.9s;
      }

      .flower--5 .flower__line__leaf--1 {
        animation: blooming-leaf-right var(--fl-speed) 2.7s backwards;
      }

      .flower--5 .flower__line__leaf--2 {
        animation: blooming-leaf-right var(--fl-speed) 2.5s backwards;
      }

      .flower--5 .flower__line__leaf--3 {
        animation: blooming-leaf-left var(--fl-speed) 2.3s backwards;
      }

      .flower--5 .flower__line__leaf--4 {
        animation: blooming-leaf-left var(--fl-speed) 2.1s backwards;
      }

      .flower__leafs {
        position: relative;
        animation: blooming-flower 2s backwards;
      }

      .flower__leafs--1 {
        animation-delay: 1.1s;
      }

      .flower__leafs--2 {
        animation-delay: 1.4s;
      }

      .flower__leafs--3 {
        animation-delay: 1.7s;
      }

      .flower__leafs--4 {
        animation-delay: 2s;
      }

      .flower__leafs--5 {
        animation-delay: 2s;
      }

      .flower__leafs::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -100%);
        width: 8vmin;
        height: 8vmin;
        background-color: #6bf0ff;
        filter: blur(10vmin);
      }

      .flower__leaf {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 23vmin;
        height: 6vmin;
        border-radius: 60% 40% 60% 40%;
        background-color: #ffd700;
        background-image: linear-gradient(to top, #ff8c00, #ffd700, #ffff00);
        transform-origin: bottom center;
        opacity: 0.95;
        box-shadow:
          inset 0 0 1vmin rgba(255, 255, 255, 0.7),
          0 0 3vmin rgba(255, 215, 0, 0.4);
        z-index: 2;
      }

      .flower__leaf--1 {
        transform: translate(-50%, -10%) rotate(-45deg);
      }

      .flower__leaf--2 {
        transform: translate(-50%, -10%) rotate(-15deg);
      }

      .flower__leaf--3 {
        transform: translate(-50%, -10%) rotate(15deg);
      }

      .flower__leaf--4 {
        transform: translate(-50%, -10%) rotate(45deg);
      }

      .flower__white-circle {
        position: absolute;
        left: -4vmin;
        top: -4vmin;
        width: 10vmin;
        height: 10vmin;
        border-radius: 50%;
        background-color: #8b4513;
        background-image: radial-gradient(
          circle at 30% 30%,
          #654321,
          #8b4513,
          #2f1b14
        );
        box-shadow:
          inset 0 0 2vmin rgba(0, 0, 0, 0.8),
          0 0 1vmin rgba(139, 69, 19, 0.6);
      }

      .flower__white-circle::after {
        content: "";
        position: absolute;
        left: 46%;
        top: 31%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: 80%;
        z-index: 3;
        border-radius: inherit;
        background-image:
          repeating-conic-gradient(
            from 0deg,
            #2f1b14 0deg 15deg,
            #654321 15deg 30deg
          ),
          radial-gradient(circle at center, #8b4513, #654321);
      }

      .flower__line {
        height: 55vmin;
        width: 2vmin;
        background-image:
          linear-gradient(
            to left,
            rgb(0, 0, 0, 0.3),
            transparent,
            rgba(255, 255, 255, 0.2)
          ),
          linear-gradient(to top, transparent 10%, #2d5016, #4a7c23, #6b8e23);
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.7);
        animation: grow-flower-tree 4s backwards;
      }

      .flower__line__leaf {
        --w: 8vmin;
        --h: calc(var(--w) + 3vmin);
        position: absolute;
        top: 20%;
        left: 90%;
        width: var(--w);
        height: var(--h);
        border-top-right-radius: var(--h);
        border-bottom-left-radius: var(--h);
        background-image: linear-gradient(
          to top,
          rgba(45, 80, 22, 0.6),
          #4a7c23,
          #6b8e23
        );
        box-shadow: inset 0 0 1vmin rgba(0, 0, 0, 0.3);
      }

      .flower__line__leaf--1 {
        transform: rotate(70deg) rotateY(30deg);
      }

      .flower__line__leaf--2 {
        top: 45%;
        transform: rotate(70deg) rotateY(30deg);
      }

      .flower__line__leaf--3,
      .flower__line__leaf--4 {
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: var(--h);
        border-bottom-right-radius: var(--h);
        left: -460%;
        top: 12%;
        transform: rotate(-70deg) rotateY(30deg);
      }

      .flower__line__leaf--4 {
        top: 40%;
      }

      .flower__light {
        position: absolute;
        bottom: 0vmin;
        width: 0.8vmin;
        height: 0.8vmin;
        background-color: #8b4513;
        border-radius: 50%;
        filter: blur(0.1vmin);
        animation: sunflower-seeds 6s linear infinite backwards;
        box-shadow: 0 0 1vmin rgba(139, 69, 19, 0.8);
      }

      .flower__light:nth-child(odd) {
        background-color: #654321;
      }

      .flower__light--1 {
        left: -2vmin;
        animation-delay: 1s;
      }
      .flower__light--2 {
        left: 3vmin;
        animation-delay: 0.5s;
      }
      .flower__light--3 {
        left: -6vmin;
        animation-delay: 0.3s;
      }
      .flower__light--4 {
        left: 6vmin;
        animation-delay: 0.9s;
      }
      .flower__light--5 {
        left: -1vmin;
        animation-delay: 1.5s;
      }
      .flower__light--6 {
        left: -4vmin;
        animation-delay: 3s;
      }
      .flower__light--7 {
        left: 3vmin;
        animation-delay: 2s;
      }
      .flower__light--8 {
        left: -6vmin;
        animation-delay: 3.5s;
      }

      .flower__grass {
        --c: #4a7c23;
        --line-w: 2vmin;
        position: absolute;
        bottom: 12vmin;
        left: -7vmin;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        z-index: 20;
        transform-origin: bottom center;
        transform: rotate(-48deg) rotateY(40deg);
      }

      .flower__grass--1 {
        animation: moving-grass 2s linear infinite;
      }

      .flower__grass--2 {
        left: 2vmin;
        bottom: 10vmin;
        transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
        opacity: 0.8;
        z-index: 0;
        animation: moving-grass--2 1.5s linear infinite;
      }

      .flower__grass--3 {
        left: -25vmin;
        bottom: 8vmin;
        transform: scale(0.7) rotate(-30deg) rotateY(45deg);
        opacity: 0.9;
        z-index: 15;
        animation: moving-grass--3 2.2s linear infinite;
      }

      .flower__grass--4 {
        left: -35vmin;
        bottom: 15vmin;
        transform: scale(0.4) rotate(60deg) rotateX(15deg) rotateY(-180deg);
        opacity: 0.7;
        z-index: 5;
        animation: moving-grass--4 1.8s linear infinite;
      }

      .flower__grass--5 {
        left: -18vmin;
        bottom: 6vmin;
        transform: scale(0.6) rotate(-60deg) rotateY(60deg);
        opacity: 0.85;
        z-index: 12;
        animation: moving-grass--5 2.5s linear infinite;
      }

      .flower__grass--6 {
        left: 25vmin;
        bottom: 9vmin;
        transform: scale(0.65) rotate(35deg) rotateY(-45deg);
        opacity: 0.9;
        z-index: 15;
        animation: moving-grass--6 2.3s linear infinite;
      }

      .flower__grass--7 {
        left: 35vmin;
        bottom: 14vmin;
        transform: scale(0.45) rotate(-70deg) rotateX(20deg) rotateY(170deg);
        opacity: 0.75;
        z-index: 8;
        animation: moving-grass--7 1.9s linear infinite;
      }

      .flower__grass--8 {
        left: 18vmin;
        bottom: 5vmin;
        transform: scale(0.55) rotate(50deg) rotateY(-70deg);
        opacity: 0.8;
        z-index: 10;
        animation: moving-grass--8 2.1s linear infinite;
      }

      .flower__grass--9 {
        left: -45vmin;
        bottom: 20vmin;
        transform: scale(0.3) rotate(20deg) rotateY(90deg);
        opacity: 0.6;
        z-index: 2;
        animation: moving-grass--9 1.6s linear infinite;
      }

      .flower__grass--10 {
        left: 42vmin;
        bottom: 18vmin;
        transform: scale(0.35) rotate(-45deg) rotateY(-120deg);
        opacity: 0.65;
        z-index: 3;
        animation: moving-grass--10 2s linear infinite;
      }

      .flower__grass--top {
        width: 7vmin;
        height: 10vmin;
        border-top-right-radius: 100%;
        border-right: var(--line-w) solid var(--c);
        transform-origin: bottom center;
        transform: rotate(-2deg);
      }

      .flower__grass--bottom {
        margin-top: -2px;
        width: var(--line-w);
        height: 25vmin;
        background-image: linear-gradient(to top, transparent, var(--c));
      }

      .flower__grass__leaf {
        --size: 10vmin;
        position: absolute;
        width: calc(var(--size) * 2.1);
        height: var(--size);
        border-top-left-radius: var(--size);
        border-top-right-radius: var(--size);
        background-image: linear-gradient(
          to top,
          transparent,
          transparent 30%,
          var(--c)
        );
        z-index: 100;
      }

      .flower__grass__leaf--1 {
        top: -6%;
        left: 30%;
        --size: 6vmin;
        transform: rotate(-20deg);
        animation: growing-grass-ans--1 var(--speed-leaf) 2.6s backwards;
      }

      .flower__grass__leaf--2 {
        top: -5%;
        left: -110%;
        --size: 6vmin;
        transform: rotate(10deg);
        animation: growing-grass-ans--2 var(--speed-leaf) 2.4s linear backwards;
      }

      .flower__grass__leaf--3 {
        top: 5%;
        left: 60%;
        --size: 8vmin;
        transform: rotate(-18deg) rotateX(-20deg);
        animation: growing-grass-ans--3 var(--speed-leaf) 2.2s linear backwards;
      }

      .flower__grass__leaf--4 {
        top: 6%;
        left: -135%;
        --size: 8vmin;
        transform: rotate(2deg);
        animation: growing-grass-ans--4 var(--speed-leaf) 2s linear backwards;
      }

      .flower__grass__leaf--5 {
        top: 20%;
        left: 60%;
        --size: 10vmin;
        transform: rotate(-24deg) rotateX(-20deg);
        animation: growing-grass-ans--5 var(--speed-leaf) 1.8s linear backwards;
      }

      .flower__grass__leaf--6 {
        top: 22%;
        left: -180%;
        --size: 10vmin;
        transform: rotate(10deg);
        animation: growing-grass-ans--6 var(--speed-leaf) 1.6s linear backwards;
      }

      .flower__grass__leaf--7 {
        top: 39%;
        left: 70%;
        --size: 10vmin;
        transform: rotate(-10deg);
        animation: growing-grass-ans--7 var(--speed-leaf) 1.4s linear backwards;
      }

      .flower__grass__leaf--8 {
        top: 40%;
        left: -215%;
        --size: 11vmin;
        transform: rotate(10deg);
        animation: growing-grass-ans--8 var(--speed-leaf) 1.2s linear backwards;
      }

      .flower__grass__overlay {
        position: absolute;
        top: -10%;
        right: 0%;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        filter: blur(1.5vmin);
        z-index: 100;
      }

      /* Resto de elementos simplificados */
      .grow-ans {
        animation: grow-ans 2s var(--d) backwards;
      }

      .growing-grass {
        animation: growing-grass-ans 1s 2s backwards;
      }

      .not-loaded * {
        animation-play-state: paused !important;
      }

      /* KEYFRAMES */
      @keyframes grow-ans {
        0% {
          transform: scale(0);
          opacity: 0;
        }
      }

      @keyframes growing-grass-ans {
        0% {
          transform: scale(0);
        }
      }

      @keyframes growing-grass-ans--1 {
        0% {
          transform-origin: bottom left;
          transform: rotate(-20deg) scale(0);
        }
      }

      @keyframes growing-grass-ans--2 {
        0% {
          transform-origin: bottom right;
          transform: rotate(10deg) scale(0);
        }
      }

      @keyframes growing-grass-ans--3 {
        0% {
          transform-origin: bottom left;
          transform: rotate(-18deg) rotateX(-20deg) scale(0);
        }
      }

      @keyframes growing-grass-ans--4 {
        0% {
          transform-origin: bottom right;
          transform: rotate(2deg) scale(0);
        }
      }

      @keyframes growing-grass-ans--5 {
        0% {
          transform-origin: bottom left;
          transform: rotate(-24deg) rotateX(-20deg) scale(0);
        }
      }

      @keyframes growing-grass-ans--6 {
        0% {
          transform-origin: bottom right;
          transform: rotate(10deg) scale(0);
        }
      }

      @keyframes growing-grass-ans--7 {
        0% {
          transform-origin: bottom left;
          transform: rotate(-10deg) scale(0);
        }
      }

      @keyframes growing-grass-ans--8 {
        0% {
          transform-origin: bottom right;
          transform: rotate(10deg) scale(0);
        }
      }

      @keyframes sunflower-seeds {
        0% {
          opacity: 0;
          transform: translateY(0vmin) rotate(0deg);
        }
        20% {
          opacity: 1;
          transform: translateY(-3vmin) translateX(-1vmin) rotate(45deg);
        }
        40% {
          opacity: 1;
          transform: translateY(-8vmin) translateX(1vmin) rotate(90deg);
        }
        60% {
          transform: translateY(-12vmin) translateX(-1vmin) rotate(135deg);
        }
        80% {
          transform: translateY(-16vmin) translateX(2vmin) rotate(180deg);
          opacity: 0.5;
        }
        100% {
          transform: translateY(-25vmin) rotate(225deg);
          opacity: 0;
        }
      }

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

      @keyframes moving-flower-2 {
        0%,
        100% {
          transform: rotate(18deg);
        }
        50% {
          transform: rotate(14deg);
        }
      }

      @keyframes moving-flower-3 {
        0%,
        100% {
          transform: rotate(-18deg);
        }
        50% {
          transform: rotate(-20deg) rotateY(-10deg);
        }
      }

      @keyframes moving-flower-4 {
        0%,
        100% {
          transform: rotate(9deg);
        }
        50% {
          transform: rotate(12deg) rotateY(9deg);
        }
      }

      @keyframes moving-flower-5 {
        0%,
        100% {
          transform: rotate(-5deg);
        }
        50% {
          transform: rotate(-11deg) rotateY(5deg);
        }
      }

      @keyframes blooming-leaf-right {
        0% {
          transform-origin: left;
          transform: rotate(70deg) rotateY(30deg) scale(0);
        }
      }

      @keyframes blooming-leaf-left {
        0% {
          transform-origin: right;
          transform: rotate(-70deg) rotateY(30deg) scale(0);
        }
      }

      @keyframes grow-flower-tree {
        0% {
          height: 0;
          border-radius: 1vmin;
        }
      }

      @keyframes blooming-flower {
        0% {
          transform: scale(0);
        }
      }

      @keyframes moving-grass {
        0%,
        100% {
          transform: rotate(-48deg) rotateY(40deg);
        }
        50% {
          transform: rotate(-50deg) rotateY(40deg);
        }
      }

      @keyframes moving-grass--2 {
        0%,
        100% {
          transform: scale(0.5) rotate(75deg) rotateX(10deg) rotateY(-200deg);
        }
        50% {
          transform: scale(0.5) rotate(79deg) rotateX(10deg) rotateY(-200deg);
        }
      }
 
      @keyframes moving-grass--3 {
        0%,
        100% {
          transform: scale(0.7) rotate(-30deg) rotateY(45deg);
        }
        50% {
          transform: scale(0.7) rotate(-33deg) rotateY(50deg);
        }
      }

      @keyframes moving-grass--4 {
        0%,
        100% {
          transform: scale(0.4) rotate(60deg) rotateX(15deg) rotateY(-180deg);
        }
        50% {
          transform: scale(0.4) rotate(63deg) rotateX(18deg) rotateY(-175deg);
        }
      }

      @keyframes moving-grass--5 {
        0%,
        100% {
          transform: scale(0.6) rotate(-60deg) rotateY(60deg);
        }
        50% {
          transform: scale(0.6) rotate(-57deg) rotateY(65deg);
        }
      }

      @keyframes moving-grass--6 {
        0%,
        100% {
          transform: scale(0.65) rotate(35deg) rotateY(-45deg);
        }
        50% {
          transform: scale(0.65) rotate(38deg) rotateY(-40deg);
        }
      }

      @keyframes moving-grass--7 {
        0%,
        100% {
          transform: scale(0.45) rotate(-70deg) rotateX(20deg) rotateY(170deg);
        }
        50% {
          transform: scale(0.45) rotate(-67deg) rotateX(23deg) rotateY(175deg);
        }
      }

      @keyframes moving-grass--8 {
        0%,
        100% {
          transform: scale(0.55) rotate(50deg) rotateY(-70deg);
        }
        50% {
          transform: scale(0.55) rotate(53deg) rotateY(-65deg);
        }
      }

      @keyframes moving-grass--9 {
        0%,
        100% {
          transform: scale(0.3) rotate(20deg) rotateY(90deg);
        }
        50% {
          transform: scale(0.3) rotate(23deg) rotateY(95deg);
        }
      }

      @keyframes moving-grass--10 {
        0%,
        100% {
          transform: scale(0.35) rotate(-45deg) rotateY(-120deg);
        }
        50% {
          transform: scale(0.35) rotate(-42deg) rotateY(-115deg);
        }
      }

      .typing-message {
        position: absolute;
        bottom: -80px; 
        width: 100%;
        text-align: center;
        font-size: 0.7rem;
        color: #fff;
        font-family: monospace;
        letter-spacing: 1px;
      }

      #typing-text::after {
        content: "|";
        animation: blink 1s infinite;
      }

      @keyframes blink {
        0%,
        50%,
        100% {
          opacity: 1;
        }
        25%,
        75% {
          opacity: 0;
        }
      }

      .mini-mark {
        position: fixed;
        bottom: 8px;
        right: 12px;
        font-size: 0.6rem;
        font-family: monospace;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, 0.291);
        z-index: 5;
        pointer-events: none;
        transition: 0.3s ease;
      }

      .mini-mark:hover {
        color: rgba(255, 255, 255, 0.8);
      }
 
.petal-0 { transform: translate(-50%, -10%) rotate(0deg); }
.petal-30 { transform: translate(-50%, -10%) rotate(30deg); }
.petal-60 { transform: translate(-50%, -10%) rotate(60deg); }
.petal-90 { transform: translate(-50%, -10%) rotate(90deg); }
.petal-120 { transform: translate(-50%, -10%) rotate(120deg); }
.petal-150 { transform: translate(-50%, -10%) rotate(150deg); }
.petal-180 { transform: translate(-50%, -10%) rotate(180deg); }
.petal-210 { transform: translate(-50%, -10%) rotate(210deg); }
.petal-240 { transform: translate(-50%, -10%) rotate(240deg); }
.petal-270 { transform: translate(-50%, -10%) rotate(270deg); }
.petal-300 { transform: translate(-50%, -10%) rotate(300deg); }
.petal-330 { transform: translate(-50%, -10%) rotate(330deg); }

.grow-delay-12 { --d: 1.2s; }

@media (min-width: 601px) {
  .flower--1 .flower__line {
    height: 58vmin;
  }

  .flower--2 .flower__line {
    height: 50vmin;
  }

  .flower--3 .flower__line {
    height: 47vmin;
  }

  .flower--4 .flower__line {
    height: 72vmin;
  }

  .flower--5 .flower__line {
    height: 68vmin;
  }
}
 
@media (min-width: 601px) {
  .flowers {
    bottom: 35%;
  }
}