/* Contenedor escena flores (estilo ramo Disney / CSS original mejorado) */
#scene-flowers {
  position: fixed;
  inset: 0;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.1s ease, visibility 1.1s ease;
}

#scene-flowers.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.night,
.shooting-stars {
  position: absolute !important;
}
*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

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

#scene-flowers {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100svh;
  height: 100dvh;
  min-height: 100svh;
  min-height: 100dvh;
  background-color: #000;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  /* sin perspective aquí: borra/suaviza el fondo en móvil */
}

.night {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: #000;
  filter: none !important;
  transform: none !important;
  opacity: 1;
}

.night picture,
.night-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.night-bg {
  object-fit: cover;
  object-position: center center;
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
  /* evita suavizado extra por capas GPU */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.shooting-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Origen = cabeza. Orientación = --angle; desplazamiento en coordenadas de pantalla = (--move-x, --move-y) */
.shooting-star {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* rotate primero (derecha), luego translate en ejes de la pantalla (izquierda) */
  transform: translate3d(0, 0, 0) rotate(var(--angle, 0deg));
  animation:
    comet-fly var(--fly-dur, 3s) linear forwards,
    comet-glow var(--fly-dur, 3s) ease-in-out forwards;
}

.shooting-star.is-bursting {
  animation: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.comet-head {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--head, 7px);
  height: var(--head, 7px);
  margin: calc(var(--head, 7px) / -2) 0 0 calc(var(--head, 7px) / -2);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #ffffff 0%,
    #fff8dc 45%,
    #ffe082 100%
  );
  box-shadow:
    0 0 4px 1px rgba(255, 255, 255, 0.95),
    0 0 10px 3px rgba(255, 245, 190, 0.55),
    0 0 18px 6px rgba(255, 230, 150, 0.25);
  pointer-events: none;
}

.comet-tail {
  position: absolute;
  left: calc(var(--tail-len, 80px) * -1);
  top: 0;
  width: var(--tail-len, 80px);
  height: var(--tail-h, 2.5px);
  margin-top: calc(var(--tail-h, 2.5px) / -2);
  border-radius: 999px;
  pointer-events: none;
  transform-origin: right center;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 15%,
    rgba(255, 245, 190, 0.35) 65%,
    rgba(255, 255, 255, 0.95) 100%
  );
  filter: blur(0.35px);
  opacity: var(--tail-op, 0.92);
}

/* Zona clic ampliada; no cubre flores (están en z-index mayor) */
.comet-hit {
  position: absolute;
  left: calc(var(--tail-len, 80px) * -0.72);
  top: -26px;
  width: calc(var(--tail-len, 80px) * 0.9);
  height: 52px;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: transparent;
}

@keyframes comet-fly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--angle, 0deg));
  }
  6% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    /* Mismo vector (move-x, move-y) que define --angle: avanza de frente, no de lado */
    transform: translate3d(var(--move-x, 0px), var(--move-y, 0px), 0)
      rotate(var(--angle, 0deg));
  }
}

@keyframes comet-glow {
  0%,
  100% {
    filter: brightness(0.92);
  }
  40% {
    filter: brightness(1.12);
  }
  70% {
    filter: brightness(1.02);
  }
}

.comet-burst {
  position: fixed;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 94;
  background: radial-gradient(circle, #fff 0%, #ffe082 40%, transparent 70%);
  box-shadow: 0 0 18px 8px rgba(255, 230, 150, 0.55);
  animation: comet-burst-flash 0.55s ease-out forwards;
}

@keyframes comet-burst-flash {
  0% {
    opacity: 1;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

.comet-heart {
  position: fixed;
  pointer-events: none;
  z-index: 95;
  font-size: clamp(0.75rem, 2.8vw, 1.1rem);
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255, 180, 120, 0.5));
  animation: comet-heart-fly 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  user-select: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@keyframes comet-heart-fly {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.35) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translate3d(calc(var(--hx) * 0.4), calc(var(--hy) * 0.4), 0)
      scale(1.12) rotate(var(--hrot));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--hx), var(--hy), 0) scale(0.6)
      rotate(calc(var(--hrot) * 1.5));
  }
}

.comet-love {
  position: fixed;
  z-index: 96;
  pointer-events: none;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.15rem 0.55rem;
  font-family: "love-font", "Segoe UI", sans-serif;
  font-size: clamp(1.05rem, 4.2vw, 1.55rem);
  font-weight: bolder;
  letter-spacing: 0.02em;
  color: #fff8dc;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 0 8px rgba(255, 230, 150, 0.85),
    0 0 18px rgba(255, 200, 80, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.45);
  animation: comet-love-msg 2.5s ease forwards;
  user-select: none;
}

@keyframes comet-love-msg {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.85);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
  22% {
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -70%) scale(0.96);
  }
}

@media (max-width: 768px) {
  .comet-hit {
    top: -30px;
    height: 60px;
    width: calc(var(--tail-len, 80px) * 1);
    left: calc(var(--tail-len, 80px) * -0.78);
  }
}

.flowers {
  position: relative;
  z-index: 10;
  pointer-events: none;
}

.flower {
  position: absolute;
  left: 50%;
  bottom: 8vmin;
  width: 36vmin;
  margin-left: -18vmin;
  transform-origin: bottom center;
  z-index: 40;
}


.flower--1 .flower__line { animation-delay: 0.3s; }
.flower--2 .flower__line { animation-delay: 0.6s; }
.flower--3 .flower__line { animation-delay: 0.9s; }
.flower--4 .flower__line { animation-delay: 1.2s; }
.flower--5 .flower__line { animation-delay: 1.5s; }






.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 .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 .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 .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;
  width: 36vmin;
  height: 36vmin;
  margin: 0 auto -3vmin;
  left: auto;
  bottom: auto;
  animation: blooming-flower 2s backwards;
  z-index: 20; /* delante del tallo */
}


.flower__leafs::after {
  display: none !important;
  content: none !important;
}

.sunflower-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0.2vmin 0.6vmin rgba(0, 0, 0, 0.35));
}

.sunflower-svg--mini {
  width: 14vmin;
  height: 14vmin;
  margin: 0 auto;
  filter: drop-shadow(0 0.15vmin 0.4vmin rgba(0, 0, 0, 0.3));
}

/* Ocultar estilos viejos de pétalos CSS (ya no se usan) */
.flower__leaf,
.flower__white-circle,
.flower__light {
  display: none !important;
}


.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__leaf {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 23vmin;
  height: 6vmin;
  border-radius: 60% 40% 60% 40%;
  background-color: #ffe566;
  background-image: linear-gradient(
    to top,
    #f0b429 0%,
    #ffd54a 45%,
    #ffe566 75%,
    #fff3a0 100%
  );
  transform-origin: bottom center;
  opacity: 1;
  box-shadow:
    0 0 2.2vmin rgba(255, 210, 60, 0.55),
    inset 0 -0.4vmin 1.2vmin rgba(255, 255, 220, 0.35);
  border: none;
  z-index: 2;
}

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

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

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

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

/* Centro perfectamente alineado con el eje de los pétalos */
.flower__white-circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 9.2vmin;
  height: 9.2vmin;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: #6b3a14;
  background-image: radial-gradient(
    circle at 35% 30%,
    #8b5a2b,
    #5c3310 55%,
    #2a1508 100%
  );
  box-shadow:
    inset 0 0 1.4vmin rgba(0, 0, 0, 0.55),
    0 0 1.6vmin rgba(255, 200, 80, 0.35);
  z-index: 6;
}

.flower__white-circle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  height: 72%;
  z-index: 3;
  border-radius: inherit;
  background-image: repeating-conic-gradient(
      from 0deg,
      #2f1b14 0deg 12deg,
      #6b4226 12deg 24deg
    ),
    radial-gradient(circle at center, #8b4513, #3d220e);
}

.flower__line {
  position: relative;
  left: auto;
  bottom: auto;
  height: 52vmin;
  width: 2.4vmin;
  margin: 0 auto;
  margin-left: auto;
  background: none;
  box-shadow: none;
  animation: grow-flower-tree 3.2s backwards;
  overflow: visible;
  z-index: 2; /* detrás de la cabeza del girasol */
}


.stem-svg {
  display: block;
  position: relative;
  z-index: 5;
  width: 2.4vmin;
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  filter: drop-shadow(0 0 0.4vmin rgba(27, 94, 32, 0.35));
}

.leaf-svg {
  position: absolute;
  width: 11vmin;
  height: 6.6vmin;
  overflow: visible;
  filter: drop-shadow(0 0.2vmin 0.4vmin rgba(27, 94, 32, 0.35));
  pointer-events: none;
  z-index: 1; /* detrás del tallo */
}

/*
  Hojas detrás del tallo, apenas tocando el borde (sin atravesarlo).
  Tallo visual ~ centrado en 2.4vmin.
*/
.leaf-svg--r1,
.leaf-svg--r2,
.leaf-svg--r3 {
  left: 0.95vmin; /* un poco más cerca del tallo */
  right: auto;
  transform-origin: 0% 50%;
}

.leaf-svg--l1,
.leaf-svg--l2,
.leaf-svg--l3 {
  right: auto;
  transform-origin: 100% 50%;
}

.leaf-svg--r1 {
  top: 14%;
  animation: leaf-sway-r-a 3.6s ease-in-out 2.1s infinite;
}
.leaf-svg--l1 {
  top: 18%;
  left: -9.85vmin; /* ~1vmin más cerca */
  animation: leaf-sway-l-a 3.6s ease-in-out 2.15s infinite;
}

.leaf-svg--r2 {
  top: 34%;
  width: 10vmin;
  height: 6vmin;
  animation: leaf-sway-r-b 4s ease-in-out 2.3s infinite;
}
.leaf-svg--l2 {
  top: 38%;
  left: -8.85vmin;
  width: 10vmin;
  height: 6vmin;
  animation: leaf-sway-l-b 4s ease-in-out 2.35s infinite;
}

.leaf-svg--r3 {
  top: 54%;
  width: 9vmin;
  height: 5.4vmin;
  animation: leaf-sway-r-c 3.8s ease-in-out 2.5s infinite;
}
.leaf-svg--l3 {
  top: 58%;
  left: -7.85vmin;
  width: 9vmin;
  height: 5.4vmin;
  animation: leaf-sway-l-c 3.8s ease-in-out 2.55s infinite;
}

@keyframes leaf-sway-r-a {
  0%, 100% { transform: rotate(6deg); }
  50% { transform: rotate(14deg); }
}
@keyframes leaf-sway-l-a {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(-14deg); }
}
@keyframes leaf-sway-r-b {
  0%, 100% { transform: rotate(3deg); }
  50% { transform: rotate(11deg); }
}
@keyframes leaf-sway-l-b {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(-11deg); }
}
@keyframes leaf-sway-r-c {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(16deg); }
}
@keyframes leaf-sway-l-c {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(-16deg); }
}

/* Variación por flor (misma unión al borde del tallo) */
.flower--2 .leaf-svg--r1 { top: 16%; }
.flower--2 .leaf-svg--l1 { top: 22%; left: -9.85vmin; }
.flower--2 .leaf-svg--r2 { top: 36%; }
.flower--2 .leaf-svg--l2 { top: 42%; left: -8.85vmin; }
.flower--2 .leaf-svg--r3 { top: 56%; }
.flower--2 .leaf-svg--l3 { top: 62%; left: -7.85vmin; }

.flower--3 .leaf-svg--r1 { top: 12%; width: 10vmin; height: 6vmin; }
.flower--3 .leaf-svg--l1 { top: 17%; left: -8.85vmin; width: 10vmin; height: 6vmin; }
.flower--3 .leaf-svg--r2 { top: 30%; }
.flower--3 .leaf-svg--l2 { top: 35%; left: -8.85vmin; }
.flower--3 .leaf-svg--r3 { top: 48%; width: 8.5vmin; height: 5.1vmin; }
.flower--3 .leaf-svg--l3 { top: 53%; left: -7.35vmin; width: 8.5vmin; height: 5.1vmin; }

.flower--4 .leaf-svg--r1 { top: 18%; }
.flower--4 .leaf-svg--l1 { top: 24%; left: -9.85vmin; }
.flower--4 .leaf-svg--r2 { top: 38%; width: 9.5vmin; height: 5.7vmin; }
.flower--4 .leaf-svg--l2 { top: 44%; left: -8.35vmin; width: 9.5vmin; height: 5.7vmin; }
.flower--4 .leaf-svg--r3 { top: 58%; }
.flower--4 .leaf-svg--l3 { top: 64%; left: -7.85vmin; }

.flower--5 .leaf-svg--r1 { top: 14%; width: 10.5vmin; height: 6.3vmin; }
.flower--5 .leaf-svg--l1 { top: 20%; left: -9.35vmin; width: 10.5vmin; height: 6.3vmin; }
.flower--5 .leaf-svg--r2 { top: 34%; }
.flower--5 .leaf-svg--l2 { top: 40%; left: -8.85vmin; }
.flower--5 .leaf-svg--r3 { top: 52%; width: 8vmin; height: 4.8vmin; }
.flower--5 .leaf-svg--l3 { top: 58%; left: -6.85vmin; width: 8vmin; height: 4.8vmin; }

/* ocultar hojas CSS viejas */
.flower__line__leaf {
  display: none !important;
}


.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(
    145deg,
    #7cb342 0%,
    #4a7c23 45%,
    #2d5016 100%
  );
  box-shadow:
    inset 0 0 1vmin rgba(255, 255, 255, 0.18),
    inset 0 -0.3vmin 0.8vmin rgba(0, 0, 0, 0.25);
  /* Contorno Disney suave */
  outline: 0.18vmin solid rgba(30, 70, 20, 0.55);
  outline-offset: -0.1vmin;
}

.flower__line__leaf::before {
  content: "";
  position: absolute;
  left: 42%;
  top: 12%;
  width: 0.22vmin;
  height: 70%;
  border-radius: 1vmin;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 200, 0.35),
    rgba(20, 60, 15, 0.35)
  );
  transform: rotate(8deg);
  opacity: 0.85;
  pointer-events: none;
}

.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;
}

#scene-flowers.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(1deg);
  }

  50% {
    transform: rotate(-2deg);
  }
}

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

  50% {
    transform: rotate(22deg);
  }
}

@keyframes moving-flower-3 {
  0%,
  100% {
    transform: rotate(-28deg);
  }

  50% {
    transform: rotate(-32deg);
  }
}

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

  50% {
    transform: rotate(-14deg);
  }
}

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

  50% {
    transform: rotate(24deg);
  }
}

@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);
  }
}

/* Animaciones para hierba adicional */
@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);
  }
}

/* ---- Layout ramo: centrado en el moño ---- */
.flower__leafs::after {
  display: none !important;
  content: none !important;
}

.flowers {
  position: relative;
  width: 100%;
  height: 100%;
  transform: scale(0.78);
  transform-origin: bottom center;
  z-index: 10;
  perspective: 1000px;
  pointer-events: none;
}

/* Desktop / tablet más bajos */
@media (max-height: 740px) and (min-width: 769px) {
  .flowers { transform: scale(0.65); }
}

@media (max-height: 600px) and (min-width: 769px) {
  .flowers { transform: scale(0.55); }
}

/* Móvil: mismo grupo, solo más grande (escala uniforme) */
@media (max-width: 768px) {
  .flowers {
    transform: scale(0.95);
    transform-origin: bottom center;
  }

  #scene-flowers {
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    overflow: hidden;
  }
}

@media (max-width: 768px) and (max-height: 700px) {
  .flowers { transform: scale(0.85); }
}

@media (max-width: 768px) and (max-height: 620px) {
  .flowers { transform: scale(0.75); }
}

#scene-flowers {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Ramo tipo referencia: 2 arriba (izq/der), 1 centro, 2 abajo — todos desde el moño */
.flower--1,
.flower--2,
.flower--3,
.flower--4,
.flower--5 {
  left: 50%;
  width: 36vmin;
  margin-left: -18vmin;
}

/* Centro (altura media) */
.flower--1 {
  z-index: 46;
  transform: rotate(0deg);
  animation: moving-flower-1 4s linear infinite;
}

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

/* Abajo-derecha (más bajo) */
.flower--2 {
  z-index: 48;
  transform: rotate(26deg);
  animation: moving-flower-2 4s linear infinite;
}

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

/* Abajo-izquierda (el más bajo) */
.flower--3 {
  z-index: 48;
  transform: rotate(-28deg);
  animation: moving-flower-3 4s linear infinite;
}

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

/* Arriba-izquierda (alto) */
.flower--4 {
  z-index: 42;
  transform: rotate(-18deg);
  animation: moving-flower-4 3.5s linear infinite;
}

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

/* Arriba-derecha (el más alto) */
.flower--5 {
  z-index: 42;
  transform: rotate(20deg);
  animation: moving-flower-5 4.5s linear infinite;
}

.flower--5 .flower__line {
  height: 74vmin;
  animation-delay: 1.5s;
}

/* Ocultar hierba semicircular vieja si quedara algo */
.growing-grass,
.flower__grass,
.grow-ans,
.flower__g-long {
  display: none !important;
}

/* Mini girasoles: cabeza unida al tallo, base en el nudo del moño */
.rose {
  position: absolute;
  left: 50%;
  bottom: 5vmin;
  width: 12vmin;
  margin-left: -6vmin;
  z-index: 55;
  transform-origin: bottom center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rose--1 {
  bottom: 7vmin; /* un poco más arriba */
  transform: translateX(-1.4vmin) scale(0.54) rotate(-10deg);
  animation: rose-sway-1 5.5s ease-in-out infinite;
}

.rose--2 {
  bottom: 4vmin; /* un poco más abajo */
  transform: translateX(1.7vmin) scale(0.5) rotate(9deg);
  animation: rose-sway-2 6s ease-in-out infinite;
}

.rose__head {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 12vmin;
  height: 12vmin;
  margin: 0 auto;
  /* Solapa el tallo para que no quede hueco */
  margin-bottom: -5.2vmin;
  animation: blooming-flower 1.8s 1.6s backwards;
}

.rose__head .sunflower-svg--mini {
  width: 12vmin;
  height: 12vmin;
  display: block;
}

.rose__body {
  position: relative;
  z-index: 1;
  width: 2.2vmin;
  height: 26vmin;
  margin: 0 auto;
}

.rose-stem-svg {
  display: block;
  position: relative;
  z-index: 5;
  width: 1.7vmin;
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  filter: drop-shadow(0 0 0.3vmin rgba(27, 94, 32, 0.35));
}

.rose .leaf-svg--rose-l,
.rose .leaf-svg--rose-r {
  position: absolute;
  width: 8vmin;
  height: 4.8vmin;
  z-index: 1;
}

.rose .leaf-svg--rose-l {
  top: 38%;
  left: -6.95vmin;
  right: auto;
  transform-origin: 100% 50%;
  animation: rose-leaf-sway-l 3.8s ease-in-out 2s infinite;
}

.rose .leaf-svg--rose-r {
  top: 52%;
  left: 0.95vmin;
  right: auto;
  transform-origin: 0% 50%;
  animation: rose-leaf-sway-r 4s ease-in-out 2.2s infinite;
}

@keyframes rose-leaf-sway-l {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(-12deg); }
}

@keyframes rose-leaf-sway-r {
  0%, 100% { transform: rotate(4deg); }
  50% { transform: rotate(12deg); }
}

@keyframes rose-sway-1 {
  0%, 100% { transform: translateX(-1.4vmin) scale(0.54) rotate(-10deg); }
  50% { transform: translateX(-1.4vmin) scale(0.54) rotate(-6deg); }
}

@keyframes rose-sway-2 {
  0%, 100% { transform: translateX(1.7vmin) scale(0.5) rotate(9deg); }
  50% { transform: translateX(1.7vmin) scale(0.5) rotate(5deg); }
}

/* Moño exactamente al centro, delante de los tallos */
.bouquet-bow {
  position: absolute;
  left: 50%;
  bottom: -1vmin;
  transform: translateX(-50%);
  width: 28vmin;
  height: 20vmin;
  z-index: 80;
  pointer-events: none;
  animation: bow-pop 0.75s 2.2s both;
  filter: drop-shadow(0 0.6vmin 1vmin rgba(120, 20, 60, 0.45));
}

/* Hojas: abren y luego se mecen con brisa (animación realista) */
.flower--1 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 1.6s backwards,
    leaf-sway-right 3.5s ease-in-out 2.4s infinite;
}
.flower--1 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 1.4s backwards,
    leaf-sway-right 3.9s ease-in-out 2.2s infinite;
}
.flower--1 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 1.2s backwards,
    leaf-sway-left 3.6s ease-in-out 2s infinite;
}
.flower--1 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 1s backwards,
    leaf-sway-left 4s ease-in-out 1.8s infinite;
}

.flower--2 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 1.9s backwards,
    leaf-sway-right 3.4s ease-in-out 2.7s infinite;
}
.flower--2 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 1.7s backwards,
    leaf-sway-right 3.8s ease-in-out 2.5s infinite;
}
.flower--2 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 1.5s backwards,
    leaf-sway-left 3.7s ease-in-out 2.3s infinite;
}
.flower--2 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 1.3s backwards,
    leaf-sway-left 4.1s ease-in-out 2.1s infinite;
}

.flower--3 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 2.5s backwards,
    leaf-sway-right 3.6s ease-in-out 3.3s infinite;
}
.flower--3 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 2.3s backwards,
    leaf-sway-right 3.9s ease-in-out 3.1s infinite;
}
.flower--3 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 2.1s backwards,
    leaf-sway-left 3.5s ease-in-out 2.9s infinite;
}
.flower--3 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 1.9s backwards,
    leaf-sway-left 4s ease-in-out 2.7s infinite;
}

.flower--4 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 2.8s backwards,
    leaf-sway-right 3.7s ease-in-out 3.6s infinite;
}
.flower--4 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 2.6s backwards,
    leaf-sway-right 4s ease-in-out 3.4s infinite;
}
.flower--4 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 2.4s backwards,
    leaf-sway-left 3.6s ease-in-out 3.2s infinite;
}
.flower--4 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 2.2s backwards,
    leaf-sway-left 4.2s ease-in-out 3s infinite;
}

.flower--5 .flower__line__leaf--1 {
  animation: blooming-leaf-right var(--fl-speed) 2.7s backwards,
    leaf-sway-right 3.5s ease-in-out 3.5s infinite;
}
.flower--5 .flower__line__leaf--2 {
  animation: blooming-leaf-right var(--fl-speed) 2.5s backwards,
    leaf-sway-right 3.8s ease-in-out 3.3s infinite;
}
.flower--5 .flower__line__leaf--3 {
  animation: blooming-leaf-left var(--fl-speed) 2.3s backwards,
    leaf-sway-left 3.7s ease-in-out 3.1s infinite;
}
.flower--5 .flower__line__leaf--4 {
  animation: blooming-leaf-left var(--fl-speed) 2.1s backwards,
    leaf-sway-left 4.1s ease-in-out 2.9s infinite;
}

@keyframes leaf-sway-right {
  0%, 100% { transform: rotate(68deg) rotateY(22deg); }
  50% { transform: rotate(80deg) rotateY(38deg); }
}

@keyframes leaf-sway-left {
  0%, 100% { transform: rotate(-68deg) rotateY(22deg); }
  50% { transform: rotate(-80deg) rotateY(38deg); }
}

.flower__grass {
  animation-timing-function: ease-in-out !important;
}

/* ========== Moño rosa (ya centrado arriba) ========== */
.bow-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes bow-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.55);
  }
  70% {
    transform: translateX(-50%) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* Estilos viejos de rosa CSS (no se usan) */
.rose__stem,
.rose__leaf,
.rose__leaf--l,
.rose__leaf--r {
  display: none !important;
}

/* Destellos suaves */
.sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 70;
}

.sparkles span {
  position: absolute;
  width: 0.7vmin;
  height: 0.7vmin;
  background: #fff8dc;
  border-radius: 50%;
  box-shadow: 0 0 1.2vmin #ffe082;
  animation: twinkle 3s ease-in-out infinite;
  opacity: 0;
}

.sparkles span:nth-child(1) { left: 20%; top: 18%; animation-delay: 0s; }
.sparkles span:nth-child(2) { left: 70%; top: 12%; animation-delay: 0.6s; }
.sparkles span:nth-child(3) { left: 45%; top: 8%; animation-delay: 1.1s; }
.sparkles span:nth-child(4) { left: 30%; top: 28%; animation-delay: 1.7s; }
.sparkles span:nth-child(5) { left: 78%; top: 30%; animation-delay: 2.2s; }
.sparkles span:nth-child(6) { left: 55%; top: 22%; animation-delay: 2.8s; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  40%, 60% { opacity: 0.95; transform: scale(1); }
}

/* ---------- Interacción con las flores ---------- */
.flowers {
  --lean-x: 0;
  --lean-y: 0;
  touch-action: manipulation;
}

.flower,
.rose {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
}

.flower:focus-visible,
.rose:focus-visible {
  outline: 2px solid rgba(255, 248, 220, 0.28);
  outline-offset: 0.35vmin;
}

/* Tras crecer: no reiniciar animaciones de aparición */
#scene-flowers.is-ready .flower__leafs,
#scene-flowers.is-ready .flower__line,
#scene-flowers.is-ready .rose__head,
#scene-flowers.is-ready .bouquet-bow {
  animation: none !important;
}

#scene-flowers.is-ready .bouquet-bow {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Solo las cabezas reciben clic/toque */
.flower,
.rose {
  pointer-events: none;
}

.flower__leafs,
.rose__head {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bouquet-bow {
  pointer-events: none !important;
  cursor: default;
}

.sunflower-svg,
.sunflower-svg--mini {
  transform-origin: 50% 78%;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform:
    rotate(calc(var(--lean-x) * 3.2deg))
    translate(
      calc(var(--lean-x) * 0.4vmin),
      calc(var(--lean-y) * 0.22vmin)
    );
}

.flower.is-buzz .sunflower-svg,
.rose.is-buzz .sunflower-svg--mini {
  animation: flower-sway 1.25s cubic-bezier(0.33, 0.1, 0.2, 1);
  transition: none;
}

@keyframes flower-sway {
  0% {
    transform:
      rotate(calc(var(--lean-x) * 3.2deg))
      translate(calc(var(--lean-x) * 0.4vmin), calc(var(--lean-y) * 0.22vmin));
  }
  18% {
    transform:
      rotate(calc(var(--lean-x) * 3.2deg - 4.2deg))
      translate(calc(var(--lean-x) * 0.4vmin - 0.35vmin), calc(var(--lean-y) * 0.22vmin - 0.12vmin));
  }
  42% {
    transform:
      rotate(calc(var(--lean-x) * 3.2deg + 3.1deg))
      translate(calc(var(--lean-x) * 0.4vmin + 0.28vmin), calc(var(--lean-y) * 0.22vmin));
  }
  68% {
    transform:
      rotate(calc(var(--lean-x) * 3.2deg - 1.6deg))
      translate(calc(var(--lean-x) * 0.4vmin - 0.12vmin), calc(var(--lean-y) * 0.22vmin));
  }
  100% {
    transform:
      rotate(calc(var(--lean-x) * 3.2deg))
      translate(calc(var(--lean-x) * 0.4vmin), calc(var(--lean-y) * 0.22vmin));
  }
}

.petal-spark {
  position: fixed;
  width: 0.4vmin;
  height: 0.65vmin;
  margin: 0;
  border-radius: 60% 60% 40% 40%;
  background: linear-gradient(180deg, #fff8c4, #ffca28 60%, #f0a000);
  pointer-events: none;
  z-index: 90;
  opacity: 0.75;
  animation: petal-fly 1.05s ease-out forwards;
}

@keyframes petal-fly {
  0% {
    opacity: 0.8;
    transform: translate(0, 0) rotate(0deg) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.4);
  }
}

@media (hover: hover) and (pointer: fine) {
  .flower:hover .sunflower-svg,
  .rose:hover .sunflower-svg--mini {
    transform:
      rotate(calc(var(--lean-x) * 3.2deg))
      translate(
        calc(var(--lean-x) * 0.4vmin),
        calc(var(--lean-y) * 0.22vmin - 0.2vmin)
      );
  }
}