/* ==========================================================================
   For Weronika — keyframes & animation-only styles
   ========================================================================== */

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes point-pulse {
  0%   { opacity: 0; transform: scale(0.6); }
  40%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0.7; transform: scale(1); }
}
.loader-point.is-lit { animation: point-pulse 1.6s var(--ease-cinematic) forwards; }

/* rose bloom: one-shot open (base styles + trigger live in style.css,
   gated behind .rose-svg.is-bloomed) then a slow continuous breathe */
@keyframes bloom-in {
  0%   { opacity: 0; transform: scale(0.74) rotate(-10deg); }
  65%  { opacity: 1; transform: scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes soft-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.03) rotate(0.6deg); }
}

/* individual petal drift when rose is "activated" (tap) */
.petal-interactive { transition: transform 1.4s var(--ease-cinematic); }
.rose-button.is-activated .petal-1 { transform: translate(-5px, 3px) rotate(-10deg); }
.rose-button.is-activated .petal-2 { transform: translate(5px, 3px) rotate(10deg); }
.rose-button.is-activated .petal-3 { transform: translate(0, -4px) rotate(6deg); }

/* floating loose petal (spawned by JS for rose burst / hero ambient / finale) */
.loose-petal {
  position: absolute;
  width: 10px;
  height: 13px;
  border-radius: 60% 10% 60% 10%;
  background: linear-gradient(160deg, var(--c-red-bright), var(--c-wine));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes petal-rise {
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg) scale(0.6); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, -120px)) rotate(var(--rot, 180deg)) scale(1); }
}
.loose-petal.is-animating { animation: petal-rise 2.4s var(--ease-cinematic) forwards; }

@keyframes petal-fall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(38vh) translateX(14px) rotate(140deg); opacity: 0; }
}
.falling-petal.is-falling { animation: petal-fall 3.4s var(--ease-cinematic) forwards; }

/* ambient petals gently shedding from the hero rose, purely atmospheric */
.loose-petal.is-drifting { animation: petal-drift-down 5.5s var(--ease-cinematic) forwards; }
@keyframes petal-drift-down {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%  { opacity: 0.8; }
  80%  { opacity: 0.5; }
  100% { opacity: 0; transform: translate(var(--dx, -20px), var(--dy, 160px)) rotate(var(--rot, 120deg)); }
}

/* waveform bars idle shimmer + active bounce, heights randomized inline by JS via --h */
.waveform span { height: calc(var(--h, 30) * 1%); }
@keyframes wave-bounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.player.is-playing .waveform span {
  animation: wave-bounce 1.1s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* memory cards idle float */
@keyframes card-float {
  0%, 100% { transform: translate(var(--fx,0px), var(--fy,0px)) rotate(var(--fr,0deg)); }
  50% { transform: translate(calc(var(--fx,0px) + 6px), calc(var(--fy,0px) - 10px)) rotate(calc(var(--fr,0deg) + 1deg)); }
}
.memory-card.is-floating { animation: card-float 7s ease-in-out infinite; }

/* envelope rising particles */
@keyframes rise-fade {
  0%   { opacity: 0; transform: translateY(0) scale(0.7); }
  20%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-90px) scale(1); }
}
.envelope-spark {
  position: absolute;
  bottom: 40%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-gold);
  animation: rise-fade 1.8s ease-out forwards;
}

/* letter word reveal */
.letter-word.is-visible { animation: reveal-up 0.7s var(--ease-cinematic) forwards; }

@media (prefers-reduced-motion: reduce) {
  .rose-bloom,
  .rose-bloom-open,
  .memory-card.is-floating,
  .loose-petal.is-animating,
  .loose-petal.is-drifting,
  .falling-petal.is-falling,
  .waveform span,
  .loader-point.is-lit {
    animation: none !important;
  }
  .rose-svg.is-bloomed .rose-bloom-open,
  .rose-svg.is-bloomed .rose-bloom { opacity: 1; transform: none; }
}