.occasion-opener { --opener-paper: #f7f0e4; --opener-ink: #4b4930; --opener-front: #e5e5ce; position: relative; width: min(82vw, 340px); aspect-ratio: 1.28; margin: 8px auto 38px; perspective: 1200px; isolation: isolate; }
.occasion-opener > div { position: absolute; }
.opener-shadow { inset: 15% 8% -5%; border-radius: 5px; box-shadow: 0 20px 35px #2c221e16; z-index: -1; }
.opener-letter { inset: 5% 5% 3%; background: #fffcf5; border: 1px solid #cabc9e; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; color: #655136; }
.opener-letter > span { font: italic 400 3rem/1 var(--serif); }
.opener-letter > small { font: 400 .875rem/1 var(--serif); }
.opener-left, .opener-right { inset: 0; color: var(--opener-ink); background: var(--opener-front); border: 1px solid #8e784c80; transform-origin: 0 50%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; }
.opener-left::after { content: ''; position: absolute; inset: 12px; border: 1px solid currentColor; opacity: .32; pointer-events: none; }
.opener-right { display: none; }
.occasion-opener .occasion-art { position: relative; inset: auto; width: 70px; height: 70px; display: block; opacity: 1; color: inherit; }
.occasion-opener .occasion-illustration { width: 100%; height: 100%; }
.opener-words { font: 400 1.4rem/1.2 var(--serif); text-align: center; max-width: 78%; }
.opener-seal { bottom: 11%; right: 10%; padding: 11px 8px; width: 44px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid #8c7040; border-radius: 50%; background: #d5b77f; color: #4a371d; font: italic 500 1.1rem/1 var(--serif); box-shadow: 0 2px 6px #2c221e16; }
.opener-eid { --opener-front: #264d3e; --opener-ink: #f0dbad; aspect-ratio: 1.35; }
.opener-eid .opener-left { right: 50%; }
.opener-eid .opener-left .occasion-art { position: absolute; left: 28%; top: 20%; width: 45%; height: 35%; }
.opener-eid .opener-words { position: absolute; left: 12%; bottom: 16%; max-width: 76%; font-size: 1.1rem; }
.opener-eid .opener-right { display: block; left: 50%; transform-origin: 100% 50%; background: repeating-linear-gradient(45deg, #ffffff05 0, #ffffff05 1px, transparent 1px, transparent 12px), #e8e2c8; }
.opener-eid .opener-right::before { content: ''; position: absolute; inset: 12px; border: 1px solid #9d956f; border-radius: 80px 80px 0 0; }
.opener-eid .opener-seal { right: calc(50% - 22px); bottom: 14%; }
.opener-birthday { --opener-front: #efd8ca; --opener-ink: #753f48; aspect-ratio: 1; width: min(70vw, 285px); }
.opener-birthday .opener-left { border-radius: 110px 110px 3px 3px; padding-top: 25px; }
.opener-birthday .opener-letter { border-radius: 110px 110px 0 0; }
.opener-birthday .opener-left::after { border-radius: 100px 100px 0 0; border-style: dashed; }
.opener-birthday .opener-seal { width: 35px; padding: 7px 5px; bottom: 6%; right: calc(50% - 18px); }
.opener-candle { position: absolute; top: 16%; left: calc(50% - 3px); width: 6px; height: 24px; border-radius: 2px; background: #a66f42; }
.opener-candle i { position: absolute; bottom: 29px; left: -3px; width: 12px; height: 18px; border-radius: 80% 0 70% 50%; background: #d2a54e; transform: rotate(-35deg); transform-origin: 50% 100%; }
.opener-graduation { --opener-front: #233b4d; --opener-ink: #e6d19f; aspect-ratio: 1.2; }
.opener-graduation .opener-left { border: 2px solid #9b8050; }
.opener-graduation .opener-left::after { border-block: 3px solid #cbb582; inset: 9% 0; border-inline: 0; }
.opener-graduation .opener-seal { bottom: -14px; right: 12%; border-radius: 2px; height: 70px; width: 34px; clip-path: polygon(0 0,100% 0,100% 100%,50% 85%,0 100%); align-items: start; }
.opener-love { --opener-front: #773747; --opener-ink: #f8e6d9; }
.opener-love .opener-left::after { inset: 16px; border-width: 1px; }
.opener-love .opener-seal { background: #a9535b; border-color: #612536; color: #ffecdf; border-radius: 45% 50% 43% 50%; right: calc(50% - 22px); bottom: 15%; }
.opener-wedding { --opener-front: #e6e9df; --opener-ink: #556144; aspect-ratio: 1; width: min(72vw, 285px); }
.opener-wedding .opener-left { background: #eff0e5dd; border-radius: 110px 110px 0 0; border-color: #9aa085; }
.opener-wedding .opener-left::after { border-radius: 100px 100px 0 0; }
.opener-wedding .opener-letter { border-radius: 100px 100px 0 0; }
.opener-wedding .opener-seal { border-radius: 0; height: 28px; aspect-ratio: auto; width: 100%; right: 0; bottom: 18%; padding: 5px; background: #b7bca3; color: #34402b; border: 0; }
.opener-thanks { --opener-front: #ebd8b7; --opener-ink: #785337; }
.opener-thanks .opener-words { font-style: italic; }
.opener-baby { --opener-front: #dfe9e9; --opener-ink: #4e6873; }
.recipient-cover[data-palette="midnight"] .occasion-opener { --opener-front: #293a32; --opener-ink: #e5c58a; }
.recipient-cover[data-palette="midnight"] .opener-wedding .opener-left { background: #293a32; }
@media (prefers-reduced-motion: no-preference) {
  .recipient-view[data-motion="on"] .occasion-opener { animation: opener-arrive .65s var(--ease) both; }
  .recipient-view[data-motion="on"] .occasion-opener.opening .opener-left { animation: opener-unfold 1s var(--ease) .1s both; }
  .recipient-view[data-motion="on"] .occasion-opener.opening .opener-right { animation: opener-unfold-right 1s var(--ease) .1s both; }
  .recipient-view[data-motion="on"] .occasion-opener.opening .opener-seal { animation: seal-release .28s var(--ease) both; }
  .recipient-view[data-motion="on"] .opener-birthday.opening .opener-candle { animation: opener-candle-out .65s var(--ease) both; }
  .recipient-view[data-motion="on"] .opener-birthday.opening .opener-candle i { animation: opener-flame .35s ease-in-out 2; }
  .recipient-view[data-motion="on"] .opener-wedding.opening .opener-left { animation: opener-vellum 1s var(--ease) .1s both; }
}
@keyframes opener-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes opener-unfold { to { transform: rotateY(-115deg); opacity: .12; } }
@keyframes opener-unfold-right { to { transform: rotateY(115deg); opacity: .12; } }
@keyframes opener-vellum { to { transform: translateY(-22px); opacity: 0; } }
@keyframes opener-candle-out { 35% { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }
@keyframes opener-flame { 50% { transform: rotate(-22deg) scale(.85); } }
.recipient-preview-dialog { width: min(760px, calc(100% - 24px)); max-width: 760px; padding: 0; max-height: 92dvh; border-radius: 12px; overflow-y: auto; overscroll-behavior: contain; }
.recipient-preview-heading { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 18px; }
.recipient-preview-heading p { font-size: .75rem; }
.recipient-preview-heading .icon-button { flex-shrink: 0; }
.recipient-preview-dialog .recipient-view { padding: 0; min-height: 0; }
.recipient-preview-dialog .recipient-stage { min-height: 0; max-width: none; }
.recipient-preview-dialog .recipient-cover { padding: 32px 24px; }
.recipient-preview-dialog .recipient-cover h1 { font-size: clamp(2.4rem, 8vw, 3.4rem); }
.recipient-preview-dialog .recipient-letter-wrap { max-width: none; }
.recipient-preview-dialog .letter-card { min-height: 76svh; }
.recipient-preview-dialog .preview-replay { display: block; margin: 12px auto; }
@media (max-width: 480px) { .occasion-opener { margin-bottom: 30px; } .recipient-preview-heading { padding-inline: 12px; } }