.card-effect-layer { position: absolute; inset: 0; overflow: clip; pointer-events: none; z-index: 7; contain: paint; }
.card-effect-layer > i { position: absolute; top: -12px; left: var(--piece-x); opacity: 0; background: var(--card-accent, #a38247); }
.effect-confetti > i { width: 5px; height: 11px; border-radius: 1px; animation: card-confetti 2.8s cubic-bezier(.2,.65,.3,1) var(--piece-delay) both; }
.effect-confetti > i:nth-child(3n) { background: var(--card-ink, #687b64); width: 7px; height: 7px; }
.effect-confetti > i:nth-child(3n + 1) { background: #c5a059; }
.effect-particles > i { top: min(65svh, 520px); width: 4px; height: 4px; border-radius: 50%; animation: card-particles 3.4s ease-out var(--piece-delay) both; }
.effect-particles > i:nth-child(2n) { width: 2px; height: 2px; }
.effect-petals > i { width: 9px; height: 15px; border-radius: 75% 0 75% 0; animation: card-petals 3.6s ease-in-out var(--piece-delay) both; }
.effect-petals > i:nth-child(3n) { width: 7px; height: 12px; background: var(--card-ink, #687b64); }
.effect-bubbles > i { top: min(65svh, 520px); width: 15px; height: 15px; border: 1px solid var(--card-accent, #a38247); border-radius: 50%; background: transparent; animation: card-bubbles 3.8s ease-out var(--piece-delay) both; }
.effect-bubbles > i:nth-child(3n) { width: 23px; height: 23px; }
.effect-reveal { position: relative; }
.effect-reveal[data-reveal-effect="motion"], .recipient-letter-wrap.reveal-once[data-reveal-effect="motion"] > .letter-card { animation: card-gentle-arrival .95s cubic-bezier(.16,1,.3,1) both; }
.effect-reveal[data-reveal-effect="unfold"], .recipient-letter-wrap.reveal-once[data-reveal-effect="unfold"] > .letter-card { transform-origin: left center; animation: card-unfold 1.35s cubic-bezier(.16,1,.3,1) both; }
@keyframes card-confetti { 0% { opacity: 0; transform: translate(0,-10px) rotate(0); } 12% { opacity: .85; } 78% { opacity: .6; } 100% { opacity: 0; transform: translate(var(--piece-drift),min(78svh,620px)) rotate(var(--piece-turn)); } }
@keyframes card-particles { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 24% { opacity: .6; } 100% { opacity: 0; transform: translate(var(--piece-drift),-380px) scale(1); } }
@keyframes card-gentle-arrival { from { opacity: 0; transform: translateY(18px) rotateX(3deg); } to { opacity: 1; transform: none; } }
@keyframes card-petals { 0% { opacity: 0; transform: translate(-15px,-10px) rotate(-25deg); } 18% { opacity: .7; } 45% { transform: translate(25px,min(32svh,250px)) rotate(55deg); } 100% { opacity: 0; transform: translate(var(--piece-drift),min(78svh,620px)) rotate(var(--piece-turn)); } }
@keyframes card-bubbles { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 22% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--piece-drift),-440px) scale(1.15); } }
@keyframes card-unfold { from { opacity: .3; transform: perspective(1200px) rotateY(-32deg); } to { opacity: 1; transform: perspective(1200px) rotateY(0); } }
.recipient-view[data-motion="off"] .card-effect-layer { display: none; }
@media (prefers-reduced-motion: reduce) { .card-effect-layer { display: none; } .effect-reveal, .recipient-letter-wrap.reveal-once[data-reveal-effect] > .letter-card { animation: none; } }