/* ==============================
   Reveals au scroll
   ============================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.32, 1), transform 0.8s cubic-bezier(0.16, 1, 0.32, 1);
  transition-delay: calc(var(--i, 0) * 0.1s);
}

.reveal.fade-left {
  transform: translateX(-26px);
}

.reveal.fade-right {
  transform: translateX(26px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.hero .reveal {
  transition-delay: 0s;
}

.hero .hero-copy.reveal.is-visible {
  animation: heroScriptIn 0.8s ease 0.8s both;
}

.hero .hero-script.reveal.is-visible {
  animation: heroScriptIn 0.8s ease 0.8s both;
}

.hero .hero-title.reveal.is-visible {
  animation: heroTitleIn 1.2s ease 1.1s both;
}

.hero .hero-date-wrap.reveal.is-visible {
  animation: heroDateIn 0.6s ease 1.4s both;
}

.hero .hero-cta.reveal.is-visible {
  animation: heroDateIn 0.6s ease 1.7s both;
}

.hero .hero-scroll-indicator.reveal.is-visible {
  animation: heroDateIn 0.6s ease 2.1s both;
}

.letter-paper.reveal.is-visible {
  animation: farewellCardIn 1s cubic-bezier(0.16, 1, 0.32, 1) both;
}

.letter-paper .reveal.is-visible {
  animation: fadeInUpSoft 0.7s cubic-bezier(0.16, 1, 0.32, 1) both;
}

.letter-floral.reveal {
  opacity: 0;
}

.letter-floral.reveal.is-visible {
  opacity: 1;
}

.letter-floral--left.reveal.is-visible {
  animation: floralInLeft 1s ease both, sway 8s ease-in-out infinite 1s;
}

.letter-floral--right.reveal.is-visible {
  animation: floralInRight 1s ease both, swayMirror 8s ease-in-out infinite 5s;
}

.letter-floral-center.reveal.is-visible {
  animation: fadeInUpSoft 0.6s ease both;
}

.testimonials-title.reveal.is-visible {
  animation: fadeInDownSoft 0.8s cubic-bezier(0.16, 1, 0.32, 1) both;
}

.testimonials-ornament.reveal.is-visible,
.footer-ornament.reveal.is-visible {
  animation: drawReveal 0.6s ease both;
}

.couple-monogram.reveal.is-visible {
  animation: scaleInSoft 0.7s ease both;
}

.couple-quote-card.reveal.is-visible {
  animation: quoteCardIn 0.9s cubic-bezier(0.16, 1, 0.32, 1) both;
}

.quote-mark {
  opacity: 0;
  transform: scale(0.9);
}

.couple-quote-card.reveal.is-visible .quote-mark {
  animation: fadeIn 0.6s ease 0.2s both;
}

.polaroids.reveal.is-visible .polaroid--left {
  animation: polaroidInLeft 0.8s ease 0.2s both;
}

.polaroids.reveal.is-visible .polaroid--right {
  animation: polaroidInRight 0.8s ease 0.4s both;
}

.footer .reveal.is-visible {
  animation: fadeInUpSoft 0.9s cubic-bezier(0.16, 1, 0.32, 1) both;
}

/* ==============================
   Petales et particules
   ============================== */
.petals,
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.petal {
  position: absolute;
  top: -80px;
  border-radius: 80% 20% 80% 20%;
  opacity: 0;
  filter: blur(0.5px);
  background: rgba(255, 255, 255, 0.24);
  animation: petalFall linear infinite;
}

.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
  filter: blur(2px);
  animation: sparklePulse 4s ease-in-out infinite alternate;
}

.hero-dust .dust {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(1px);
  animation: dustRise linear infinite;
}

/* ==============================
   Keyframes
   ============================== */
@keyframes monogramDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-132%) skewX(-22deg);
    opacity: 0;
  }
  45% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(132%) skewX(-22deg);
    opacity: 0;
  }
}

@keyframes heroGlowPulse {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}

@keyframes heroScriptIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroDateIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

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

@keyframes farewellCardIn {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floralInLeft {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes floralInRight {
  from {
    opacity: 0;
    transform: translateY(-50%) scaleX(-1) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scaleX(-1) translateX(0);
  }
}

@keyframes sway {
  0%,
  100% {
    transform: translateY(-50%) rotate(-2deg);
  }
  50% {
    transform: translateY(-52%) rotate(2deg);
  }
}

@keyframes swayMirror {
  0%,
  100% {
    transform: translateY(-50%) scaleX(-1) rotate(-2deg);
  }
  50% {
    transform: translateY(-52%) scaleX(-1) rotate(2deg);
  }
}

@keyframes drawReveal {
  from {
    opacity: 0;
    transform: scaleX(0.15);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes scaleInSoft {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes quoteCardIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes polaroidInLeft {
  from {
    opacity: 0;
    transform: rotate(-10deg) translateY(24px);
  }
  to {
    opacity: 1;
    transform: rotate(-3deg) translateY(0);
  }
}

@keyframes polaroidInRight {
  from {
    opacity: 0;
    transform: rotate(10deg) translateY(24px);
  }
  to {
    opacity: 1;
    transform: rotate(2deg) translateY(0);
  }
}

@keyframes rotateBorder {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes petalFall {
  0% {
    transform: translateY(-80px) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(40vh) translateX(calc(var(--drift, 0px) * 0.5)) rotate(calc(var(--rotation, 240deg) * 0.45));
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(110vh) translateX(var(--drift, 0px)) rotate(var(--rotation, 360deg));
    opacity: 0;
  }
}

@keyframes sparklePulse {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.45);
    opacity: 1;
  }
}

@keyframes dustRise {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}

@keyframes chevronBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

@keyframes dayProgressFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ==============================
   Respect des preferences utilisateur
   ============================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}