/* All animation is toggleable from content-config.js (animations.*) and is
   automatically reduced when the visitor prefers reduced motion. */

@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(195,155,74,.32); }
  50% { box-shadow: 0 0 0 16px rgba(195,155,74,0); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes driftX {
  from { transform: translateX(-12vw); }
  to { transform: translateX(112vw); }
}
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.7); }
  50% { opacity: .95; transform: scale(1.1); }
}
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes confettiFall {
  to { transform: translateY(105vh) rotate(720deg); opacity: .1; }
}
@keyframes particleOut {
  from { opacity: 1; transform: translate(0,0) scale(1); }
  to { opacity: 0; transform: translate(var(--px), var(--py)) scale(.2); }
}
@keyframes bloom {
  0% { opacity: 0; scale: .2; }
  35% { opacity: .95; }
  100% { opacity: 0; scale: 1.6; }
}
@keyframes barFill { from { width: 0; } to { width: 100%; } }

/* ---- envelope idle ---- */
.anim-seal .env-seal { animation: breathe calc(2.9s * var(--speed)) ease-in-out infinite, glowPulse calc(2.9s * var(--speed)) ease-in-out infinite; }
.anim-seal .env-still-glow { animation: glowPulse calc(2.9s * var(--speed)) ease-in-out infinite; }
.env-tap { animation: floatY calc(3.4s * var(--speed)) ease-in-out infinite; }

/* ---- envelope opening ---- */
.envelope.is-open .env-flap {
  animation: flapOpen calc(1.15s * var(--speed)) cubic-bezier(.4,.05,.2,1) forwards;
}
@keyframes flapOpen {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-172deg); }
}
.envelope.is-open .env-letter {
  animation: letterOut calc(1.3s * var(--speed)) cubic-bezier(.2,.8,.2,1) calc(.5s * var(--speed)) forwards;
}
@keyframes letterOut {
  from { opacity: 0; transform: translateY(14%) scale(.96); }
  to { opacity: 1; transform: translateY(-16%) scale(1); }
}
.env-seal.is-broken { opacity: 0; transition: opacity .18s linear; }
.env-seal-half.is-broken.l { animation: sealL calc(1s * var(--speed)) ease-out forwards; }
.env-seal-half.is-broken.r { animation: sealR calc(1s * var(--speed)) ease-out forwards; }
@keyframes sealL {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translate(-140%, 60%) rotate(-38deg); }
}
@keyframes sealR {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translate(40%, 70%) rotate(38deg); }
}
.cloud-bloom.is-on { animation: bloom calc(1.5s * var(--speed)) ease-out forwards; }
.particle.is-on { animation: particleOut calc(1.2s * var(--speed)) ease-out forwards; }

/* ---- intro ---- */
.intro-character.is-wave { animation: floatY calc(3s * var(--speed)) ease-in-out infinite, wave calc(1.6s * var(--speed)) ease-in-out infinite; transform-origin: 50% 90%; }
.intro-inner > * { animation: riseIn calc(.9s * var(--speed)) ease-out both; }
.intro-inner > *:nth-child(2) { animation-delay: .35s; }
.intro-inner > *:nth-child(3) { animation-delay: .6s; }
.intro-bar.is-on { animation: barFill linear forwards; }

/* ---- hero ---- */
.anim-hero .hero-media { animation: floatY calc(6.5s * var(--speed)) ease-in-out infinite; }

/* ---- invitation entrance ---- */
.invite > * { animation: riseIn calc(1s * var(--speed)) ease-out both; }
.invite > *:nth-child(2) { animation-delay: .18s; }
.invite > *:nth-child(3) { animation-delay: .3s; }
.invite > *:nth-child(4) { animation-delay: .42s; }
.invite > *:nth-child(5) { animation-delay: .54s; }
.invite > *:nth-child(6) { animation-delay: .66s; }
.invite > *:nth-child(7) { animation-delay: .78s; }
.invite > *:nth-child(8) { animation-delay: .9s; }

/* ---- floating decorations ---- */
.decor-cloud { animation: driftX linear infinite; }
.decor-star, .decor-sparkle { animation: twinkle ease-in-out infinite; }
.decor-moon, .decor-heart { animation: floatY ease-in-out infinite; }
.decor-char.is-wave img { animation: wave calc(2.4s * var(--speed)) ease-in-out infinite; transform-origin: 50% 95%; }
.confetti-piece { animation: confettiFall linear forwards; }

@media (prefers-reduced-motion: reduce) {
  .anim-seal .env-seal, .env-tap, .anim-hero .hero-media,
  .anim-seal .env-still-glow,
  .decor-cloud, .decor-star, .decor-sparkle, .decor-moon, .decor-heart,
  .intro-character.is-wave, .decor-char.is-wave img { animation: none !important; }
  .envelope.is-open .env-flap { animation: none !important; opacity: 0; transition: opacity .5s ease; }
  .envelope.is-open .env-letter { animation: none !important; opacity: 1; }
  .invite > *, .intro-inner > * { animation: none !important; }
  .confetti-piece { display: none; }
}