.inv--letter{--inv-bg: radial-gradient(100% 70% at 50% 30%,#f2ddd6,#e3c3ba);--inv-ink: #4a1420;--inv-accent: #9b3446;--inv-surface: #fbf1ec;--lt-paper: #fbf1ec;font-family: "Aref Ruqaa",var(--font-display)}.lt-scene{display: grid;justify-items: center;animation: lt-in 1.3s var(--ease-out) both 0.2s}.lt-letter{position: relative;width: min(78vw,19rem);height: 8.5rem;perspective: 1200px;transform-style: preserve-3d}.lt-panel{position: absolute;inset-inline: 0;height: 100%;transform-style: preserve-3d}.lt-panel--mid{top: 0}.lt-panel--top{bottom: 100%;transform-origin: 50% 100%;transform: translateZ(2px) rotateX(180deg);transition: transform 0.8s var(--ease-in-out)}.lt-panel--bot{top: 100%;transform-origin: 50% 0;transform: translateZ(-2px) rotateX(-180deg);transition: transform 0.8s var(--ease-in-out)}.lt-face{position: absolute;inset: 0;backface-visibility: hidden;-webkit-backface-visibility: hidden;background: var(--lt-paper);box-shadow: 0 1px 0 rgb(74 20 32 / 0.06)}.lt-face--in{background: repeating-linear-gradient(180deg,var(--lt-paper) 0 1.7rem,#ecd2ca 1.7rem calc(1.7rem + 1px))}.lt-face--out{transform: rotateX(180deg);display: grid;place-items: center;background: linear-gradient(170deg,#fcf4f0,#f3e1da);box-shadow: 0 24px 40px -24px rgb(74 20 32 / 0.5)}.lt-to{font-size: 1.6rem;color: #4a1420}.lt-wax{position: absolute;bottom: -0.9rem;width: 1.9rem;height: 1.9rem;border-radius: 50%;background: radial-gradient(circle at 35% 30%,#b8485b,#7a2236);box-shadow: 0 4px 10px -4px rgb(74 20 32 / 0.6)}.lt-stamp{position: absolute;top: 0.7rem;left: 0.7rem;width: 2.6rem;height: 3rem;display: grid;place-items: center;color: #9b3446;background: #fff8f4;outline: 2px dashed #c98b96;outline-offset: -4px;transform: rotate(4deg)}.lt-stamp svg{width: 60%}.inv--letter[data-state="opening"] .lt-panel--top{transform: translateZ(0) rotateX(0deg);transition-delay: 0.15s}.inv--letter[data-state="opening"] .lt-panel--bot{transform: translateZ(0) rotateX(0deg);transition-delay: 0.7s}.inv--letter[data-state="opening"] .lt-scene{animation: lt-away 0.6s var(--ease-in-out) both 1.5s}.lt-paper{position: relative;max-width: 30rem;margin-inline: auto;display: grid;gap: 0.35rem;padding: 4rem 1.6rem 2.5rem;background: repeating-linear-gradient(180deg,transparent 0 2.6rem,rgb(201 139 150 / 0.22) 2.6rem calc(2.6rem + 1px)),var(--lt-paper);background-position: 0 3.4rem;box-shadow: 0 30px 60px -30px rgb(74 20 32 / 0.55);color: #4a1420}.lt-paper>.lt-stamp{top: 1rem;left: 1rem}.lt-line{font-size: 1.3rem;line-height: 2.6rem;min-height: 2.6rem;clip-path: inset(0 0 0 100%)}.lt-names{font-family: "Aref Ruqaa",var(--font-display);font-weight: 400;font-size: 2.6rem;line-height: 1.6;padding-block: 0.6rem;color: #9b3446;text-align: center;outline: none}.lt-strong{color: #2e0c14}.lt-sign{text-align: end;font-size: 1.6rem;color: #9b3446}.lt-after{display: grid;justify-items: center;gap: 1rem;margin-top: 1.5rem;font-family: var(--font-body)}.inv--letter .inv-map{color: #9b3446}.inv--letter:is([data-state="opening"],[data-state="open"]) .lt-paper{animation: lt-in 0.8s var(--ease-out) both 1.8s}.inv--letter:is([data-state="opening"],[data-state="open"]) .lt-line{animation: lt-write 0.9s cubic-bezier(0.5,0,0.3,1) both calc(2.3s + var(--i) * 0.55s)}.inv--letter:is([data-state="opening"],[data-state="open"]) .lt-after{animation: lt-fade 0.8s both 6.8s}.inv--letter[data-state="open"] .lt-line{clip-path: inset(0)}@keyframes lt-in{from{opacity: 0;transform: translateY(24px) rotate(-1.5deg)}to{opacity: 1;transform: none}}@keyframes lt-away{to{opacity: 0;transform: translateY(-20px) scale(0.95)}}@keyframes lt-write{from{clip-path: inset(0 0 0 100%)}to{clip-path: inset(0 0 0 0)}}@keyframes lt-fade{from{opacity: 0}to{opacity: 1}}