/* Today's effects in the garden (part 2): butterflies, glowing pots, a candle by the jar, petals, a perfumed shimmer. */
.efeitos { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }

/* butterflies */
.efeito-borboleta { position: absolute; left: -22px; top: -16px; width: 44px; will-change: transform; }
.efeito-borboleta .asa { transform-box: fill-box; animation: bate var(--bate, 340ms) ease-in-out infinite alternate; }
.efeito-borboleta .asa.e { transform-origin: 100% 80%; } .efeito-borboleta .asa.d { transform-origin: 0% 80%; }
@media (min-width: 900px) { .efeito-borboleta { width: 56px; } }

/* the three pots glow, slowly */
.vaso.brilhando::after { content: ''; position: absolute; z-index: -1; left: -14%; right: -14%; top: 2%; bottom: 6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 214 120 / .85), rgb(255 206 110 / .35) 55%, rgb(255 206 110 / 0)); animation: respira-brilho 3s ease-in-out infinite; }
.vaso.brilhando img.planta { filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 10px rgb(255 214 120 / .8)); }
@keyframes respira-brilho { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* a candle by the firefly jar */
.luz-vela { z-index: 1; aspect-ratio: 1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 214 140 / .55), rgb(255 200 120 / .18) 60%, rgb(255 200 120 / 0)); }
.luz-vela.ancorado { transform: translate(-50%, -60%); }
.vela-pote { z-index: 3; pointer-events: none; }
.vela-pote.ancorado { transform: translate(-50%, -100%); }
.vela-pote img { display: block; width: 100%; height: auto !important; filter: drop-shadow(0 1px 1px rgb(92 60 38 / .3)); }
.vela-pote .chama { position: absolute; left: 50%; top: 4%; width: 14%; aspect-ratio: 1 / 1.7; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 70%, #fff6d2 0 30%, #ffc960 55%, rgb(255 160 60 / 0) 75%); filter: blur(.4px);
  box-shadow: 0 0 14px 6px rgb(255 214 140 / .55); animation: tremula 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes tremula { 0%, 100% { transform: translateX(-50%) scale(1, 1); } 30% { transform: translateX(-52%) scale(.94, 1.06); } 60% { transform: translateX(-48%) scale(1.04, .96); } }
.pote.com-vela .pote-caixa img { filter: drop-shadow(0 0 18px rgb(255 214 140 / .45)); }

/* petals on the fountain's water */
.efeito-agua { z-index: 2; aspect-ratio: 6.2; pointer-events: none; overflow: visible; }   /* the water's flat ellipse */
.efeito-agua.ancorado { transform: translate(-50%, -50%); }
.efeito-petala { position: absolute; width: clamp(22px, 6%, 48px); height: auto !important; object-fit: contain; translate: -50% -50%; rotate: var(--giro); opacity: .88;
  animation: boia calc(7s + var(--i) * .6s) ease-in-out calc(var(--i) * -1.3s) infinite alternate; }
.efeito-petala.lavanda { width: clamp(26px, 7%, 40px); filter: saturate(1.35) hue-rotate(-6deg); }
@keyframes boia { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(14px, 4px) rotate(28deg); } }

/* the perfumed shimmer when he arrives at the fountain */
.aroma { position: absolute; left: 50%; bottom: calc(var(--caminho-h) + 30px); width: 160px; height: 260px; transform: translateX(-50%); }
.aroma i { position: absolute; bottom: 0; left: calc(10% + (var(--i) * 7%)); width: 6px; height: 6px; border-radius: 50%; background: #fff6d2;
  box-shadow: 0 0 8px 3px rgb(232 169 184 / .7); opacity: 0; animation: aroma-sobe 2.4s ease-out calc(var(--i) * 90ms) both; }
@keyframes aroma-sobe { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc((var(--i) - 6) * 4px), -230px); } }

/* the three thank him for the biscuit: their sparkles light up for a moment */
.ninfa-fonte .figura { transition: filter 500ms; }
.ninfa-fonte.agradece .figura { filter: drop-shadow(0 0 14px rgb(255 236 170 / .95)); }

@media (prefers-reduced-motion: reduce) {
  .efeito-borboleta .asa, .efeito-petala, .vela-pote .chama { animation: none; }
  .vaso.brilhando::after { animation: none; opacity: .75; }
  .aroma i { animation: aroma-fade 2.4s ease-out both !important; }
  @keyframes aroma-fade { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
}