/* Faire-P Digital — mouvement : enveloppe 3D, carte qui s'ouvre, particules (pétales, feuilles, paillettes…),
   parallaxe et révélations en cascade au défilement. */

/* ---------- Enveloppe 3D ---------- */
.fpd-envelope { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; background: var(--fpd-envelope); cursor: pointer; transition: opacity .8s ease; -webkit-tap-highlight-color: transparent; overflow: hidden; }
.fpd-envelope::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.35), transparent 60%); pointer-events: none; }
.fpd-envelope.is-gone { opacity: 0; pointer-events: none; }
.fpd-envelope__scene { perspective: 1400px; }
.fpd-envelope__tilt { transform-style: preserve-3d; transition: transform .35s ease-out; will-change: transform; }
.fpd-envelope__paper { position: relative; width: min(86vw, 380px); aspect-ratio: 3 / 2; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.22,.61,.36,1), opacity .9s ease; }
.fpd-envelope__back { position: absolute; inset: 0; background: color-mix(in srgb, var(--fpd-envelope) 76%, black); border-radius: 7px; box-shadow: 0 34px 60px rgba(0,0,0,.28); }
.fpd-envelope__card { position: absolute; left: 6%; right: 6%; top: 6%; bottom: 6%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px; background: var(--fpd-paper); color: var(--fpd-ink); border-radius: 3px; box-shadow: 0 6px 20px rgba(0,0,0,.12); text-align: center; transform: translateZ(1px); transition: transform 1.3s cubic-bezier(.2,.75,.2,1), box-shadow 1.2s ease, opacity .6s ease .35s; backface-visibility: hidden; }
.fpd-envelope__card::before { content: ''; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--fpd-accent) 45%, transparent); pointer-events: none; }
.fpd-envelope__eyebrow { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--fpd-accent); }
.fpd-envelope__names { font-family: var(--fpd-display); font-size: clamp(20px, 6vw, 30px); line-height: 1.1; }
.fpd-envelope__ornament { color: var(--fpd-accent); font-size: 10px; }
.fpd-envelope__date { font-size: 13px; color: var(--fpd-muted); }
.fpd-envelope__front { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--fpd-envelope) 90%, black), color-mix(in srgb, var(--fpd-envelope) 84%, black)); clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); border-radius: 0 0 7px 7px; transform: translateZ(2px); }
.fpd-envelope__flap { position: absolute; inset: 0; transform-origin: top center; transform: translateZ(3px) rotateX(0deg); transform-style: preserve-3d; transition: transform 1.05s cubic-bezier(.5,.05,.25,1); }
.fpd-envelope__flap-face { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 58%); backface-visibility: hidden; }
.fpd-envelope__flap-face--front { background: linear-gradient(180deg, color-mix(in srgb, var(--fpd-envelope) 86%, black), color-mix(in srgb, var(--fpd-envelope) 80%, black)); }
.fpd-envelope__flap-face--back { background: color-mix(in srgb, var(--fpd-envelope) 95%, white); transform: rotateX(180deg); }
.fpd-seal { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; transform: translateZ(5px); transform-style: preserve-3d; animation: fpd-seal-breathe 3.4s ease-in-out infinite; }
.fpd-seal__half { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fpd-seal) 65%, white), var(--fpd-seal) 58%, color-mix(in srgb, var(--fpd-seal) 68%, black)); box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 0 0 4px color-mix(in srgb, var(--fpd-seal) 85%, black); transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .5s ease .1s; }
.fpd-seal__half--l { clip-path: polygon(0 0, 53% 0, 47% 100%, 0 100%); }
.fpd-seal__half--r { clip-path: polygon(47% 0, 100% 0, 100% 100%, 53% 100%); }
.fpd-seal__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--fpd-script); font-size: 27px; text-shadow: 0 1px 2px rgba(0,0,0,.3); transition: opacity .3s; }
.fpd-envelope__hint { margin: 0; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: color-mix(in srgb, var(--fpd-envelope) 45%, black); animation: fpd-pulse 2.2s ease-in-out infinite; transition: opacity .4s; }
@keyframes fpd-seal-breathe { 0%, 100% { transform: translateZ(5px) scale(1); } 50% { transform: translateZ(5px) scale(1.045); } }
/* Étapes d'ouverture (ajoutées par le script) : le sceau se brise, le rabat se soulève, la carte sort, puis s'approche. */
.fpd-envelope.is-open .fpd-seal { animation: none; }
.fpd-envelope.is-sealbreak .fpd-seal__half--l { transform: translate(-26px, 8px) rotate(-18deg); opacity: 0; }
.fpd-envelope.is-sealbreak .fpd-seal__half--r { transform: translate(26px, -8px) rotate(18deg); opacity: 0; }
.fpd-envelope.is-sealbreak .fpd-seal__text { opacity: 0; }
.fpd-envelope.is-flap .fpd-envelope__flap { transform: translateZ(3px) rotateX(-178deg); }
.fpd-envelope.is-out .fpd-envelope__card { transform: translateZ(60px) translateY(-82%) scale(1.1); box-shadow: 0 46px 90px rgba(0,0,0,.3); }
.fpd-envelope.is-out .fpd-envelope__paper { transform: translateY(14%) rotateX(10deg); }
.fpd-envelope.is-zoom .fpd-envelope__card { transform: translateZ(420px) translateY(-30%) scale(2.8); opacity: 0; transition: transform 1.05s cubic-bezier(.4,0,.2,1), opacity .55s ease .4s; }
.fpd-envelope.is-zoom .fpd-envelope__paper { opacity: 0; }
.fpd-envelope.is-open .fpd-envelope__hint { opacity: 0; }

/* ---------- Carte Save the Date qui s'ouvre comme un livre ---------- */
.fpd-std__card { perspective: 1600px; }
.fpd-std__fold { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: transparent; cursor: pointer; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(.55,.05,.2,1); }
.fpd-std__fold-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--fpd-paper); backface-visibility: hidden; }
.fpd-std__fold-face--front { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fpd-accent) 45%, transparent), inset 0 0 0 10px var(--fpd-paper), inset 0 0 0 11px color-mix(in srgb, var(--fpd-accent) 25%, transparent); }
.fpd-std__fold-face--back { transform: rotateY(180deg); background: color-mix(in srgb, var(--fpd-paper) 92%, var(--fpd-accent)); }
.fpd-std__card.is-folded .fpd-std__inner { visibility: hidden; }
.fpd-std__card.is-unfolded .fpd-std__fold { transform: rotateY(-176deg); pointer-events: none; }
.fpd-std__card.is-unfolded .fpd-std__inner > * { opacity: 0; animation: fpd-in .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.45s + var(--i, 0) * .09s); }

/* ---------- Particules par thème ---------- */
.fpd-particles { position: fixed; inset: 0; z-index: 15; overflow: hidden; pointer-events: none; }
.fpd-p { position: absolute; top: -8vh; left: var(--x, 50%); width: var(--w, 14px); height: var(--w, 14px); opacity: 0; animation: fpd-p-fall var(--d, 14s) linear var(--delay, 0s) infinite; will-change: transform; }
.fpd-p::before { content: ''; display: block; width: 100%; height: 100%; animation: fpd-p-sway var(--sd, 4s) ease-in-out var(--delay, 0s) infinite alternate; }
.fpd-p--petal::before { background: linear-gradient(135deg, color-mix(in srgb, var(--fpd-accent) 70%, white), var(--fpd-accent)); border-radius: 100% 0 100% 0; opacity: .85; }
.fpd-p--leaf::before { background: linear-gradient(135deg, color-mix(in srgb, var(--fpd-accent) 80%, white), color-mix(in srgb, var(--fpd-accent) 80%, black)); border-radius: 0 100% 0 100%; opacity: .8; }
.fpd-p--sparkle::before { background: color-mix(in srgb, var(--fpd-accent2) 55%, white); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--fpd-accent2) 70%, white)); animation: fpd-p-sway var(--sd, 4s) ease-in-out var(--delay, 0s) infinite alternate, fpd-p-twinkle 1.6s ease-in-out var(--delay, 0s) infinite; }
.fpd-p--star::before { background: var(--fpd-accent); clip-path: polygon(50% 0, 63% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 37% 36%); filter: drop-shadow(0 0 5px var(--fpd-accent)); animation: fpd-p-sway var(--sd, 4s) ease-in-out var(--delay, 0s) infinite alternate, fpd-p-twinkle 2.4s ease-in-out var(--delay, 0s) infinite; }
.fpd-p--pearl::before { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--fpd-accent) 40%, white) 60%, color-mix(in srgb, var(--fpd-accent) 70%, white)); box-shadow: 0 0 6px rgba(255,255,255,.8); }
.fpd-p--pollen::before { border-radius: 50%; background: var(--fpd-accent2); opacity: .7; box-shadow: 0 0 6px color-mix(in srgb, var(--fpd-accent2) 60%, transparent); }
.fpd-p--lemon::before { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fpd-accent2) 60%, white), var(--fpd-accent2)); }
.fpd-p--bubble { top: auto; bottom: -8vh; animation-name: fpd-p-rise; }
.fpd-p--bubble::before { border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.25) 55%, transparent 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 8px rgba(255,255,255,.4); }
.fpd-p--heart::before { background: var(--fpd-accent); clip-path: path('M12 21s-7-4.5-9.5-9C.5 8 3 4 6.5 4c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3C21 4 23.5 8 21.5 12 19 16.5 12 21 12 21z'); opacity: .75; }
@keyframes fpd-p-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 6% { opacity: var(--o, .85); } 92% { opacity: var(--o, .85); } 100% { transform: translateY(118vh) rotate(var(--rot, 360deg)); opacity: 0; } }
@keyframes fpd-p-rise { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 8% { opacity: var(--o, .85); } 90% { opacity: var(--o, .85); } 100% { transform: translateY(-118vh) rotate(var(--rot, 120deg)); opacity: 0; } }
@keyframes fpd-p-sway { from { transform: translateX(calc(var(--sway, 24px) * -1)) rotate(-18deg); } to { transform: translateX(var(--sway, 24px)) rotate(22deg); } }
@keyframes fpd-p-twinkle { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

/* Fleurs qui flottent sur les thèmes fleuris et feuillus */
.fpd-bloom { position: absolute; left: var(--x, 10%); top: var(--y, 20%); width: var(--w, 46px); height: var(--w, 46px); border-radius: 50%; opacity: .6; mix-blend-mode: multiply; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fpd-accent2) 70%, white) 0 16%, color-mix(in srgb, var(--fpd-accent) 85%, white) 18% 30%, transparent 32%); box-shadow: 0 calc(var(--w, 46px) * -.36) 0 calc(var(--w, 46px) * -.14) color-mix(in srgb, var(--fpd-accent) 75%, white), calc(var(--w, 46px) * .34) calc(var(--w, 46px) * -.11) 0 calc(var(--w, 46px) * -.14) color-mix(in srgb, var(--fpd-accent) 75%, white), calc(var(--w, 46px) * .21) calc(var(--w, 46px) * .29) 0 calc(var(--w, 46px) * -.14) color-mix(in srgb, var(--fpd-accent) 75%, white), calc(var(--w, 46px) * -.21) calc(var(--w, 46px) * .29) 0 calc(var(--w, 46px) * -.14) color-mix(in srgb, var(--fpd-accent) 75%, white), calc(var(--w, 46px) * -.34) calc(var(--w, 46px) * -.11) 0 calc(var(--w, 46px) * -.14) color-mix(in srgb, var(--fpd-accent) 75%, white); animation: fpd-bloom-float var(--d, 9s) ease-in-out var(--delay, 0s) infinite alternate; will-change: transform; }
.fpd--dark .fpd-bloom { mix-blend-mode: screen; opacity: .45; }
@media (max-width: 600px) { .fpd-bloom { opacity: .4; } }
@keyframes fpd-bloom-float { from { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.96); } to { transform: translate3d(var(--dx, 18px), var(--dy, -26px), 0) rotate(14deg) scale(1.06); } }

/* ---------- Parallaxe et révélations au défilement ---------- */
body.has-motion .fpd-section { opacity: 1; transform: none; position: relative; overflow: hidden; }
body.has-motion .fpd-section::before { content: ''; position: absolute; left: -12vmin; top: 8%; width: 42vmin; height: 42vmin; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--fpd-accent) 16%, transparent), transparent 70%); filter: blur(12px); pointer-events: none; transform: translate3d(0, calc(var(--fpd-scroll, 0) * -.06px), 0); }
body.has-motion .fpd-section:nth-of-type(even)::before { left: auto; right: -12vmin; top: auto; bottom: 6%; background: radial-gradient(circle, color-mix(in srgb, var(--fpd-accent2) 22%, transparent), transparent 70%); transform: translate3d(0, calc(var(--fpd-scroll, 0) * .05px), 0); }
body.has-motion .fpd-cover__art { transform: translate3d(0, calc(var(--fpd-scroll, 0) * .28px), 0) scale(1.06); }
body.has-motion .fpd-cover__content { transform: translate3d(0, calc(var(--fpd-scroll, 0) * .12px), 0); }
.fpd-rv { opacity: 0; transform: translateY(24px); transition: opacity .85s cubic-bezier(.2,.7,.2,1) var(--rv, 0s), transform .85s cubic-bezier(.2,.7,.2,1) var(--rv, 0s), letter-spacing 1s ease var(--rv, 0s); }
.fpd-eyebrow.fpd-rv { letter-spacing: .6em; }
.fpd-title.fpd-rv { transform: translateY(18px) scale(.97); }
.fpd-card.fpd-rv { transform: translateY(30px) rotate(-1.2deg); }
.fpd-timeline__item.fpd-rv { transform: translateX(-28px); }
.fpd-countdown__grid div.fpd-rv { transform: translateY(20px) scale(.88); }
.fpd-faq__item.fpd-rv, .fpd-account.fpd-rv { transform: translateY(16px); }
.fpd-timeline::before { transform: scaleY(0); transform-origin: top; transition: transform 1.8s cubic-bezier(.2,.7,.2,1) .2s; }
.fpd-timeline__dot { transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--rv, 0s) + .25s); }
.is-visible .fpd-rv { opacity: 1; transform: none; letter-spacing: .3em; }
.is-visible .fpd-title.fpd-rv, .is-visible .fpd-card.fpd-rv, .is-visible .fpd-timeline__item.fpd-rv, .is-visible .fpd-countdown__grid div.fpd-rv, .is-visible .fpd-faq__item.fpd-rv, .is-visible .fpd-account.fpd-rv { letter-spacing: normal; }
.is-visible .fpd-timeline::before { transform: scaleY(1); }
.is-visible .fpd-timeline__dot { transform: scale(1); }
.fpd-countdown__grid strong.is-tick { animation: fpd-tick .45s cubic-bezier(.2,.7,.2,1); }
@keyframes fpd-tick { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.fpd-btn { transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s, color .25s, box-shadow .25s; }
.fpd-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 24px rgba(0,0,0,.12); }

@media (prefers-reduced-motion: reduce) {
  .fpd-particles, .fpd-bloom { display: none; }
  .fpd-rv, .fpd-timeline::before, .fpd-timeline__dot { opacity: 1; transform: none; transition: none; }
  body.has-motion .fpd-cover__art, body.has-motion .fpd-cover__content, body.has-motion .fpd-section::before { transform: none; }
  .fpd-envelope__paper, .fpd-envelope__card, .fpd-envelope__flap, .fpd-seal__half, .fpd-std__fold { transition-duration: .2s; }
  .fpd-seal { animation: none; }
}