.occasion-mail-active { overflow:hidden; }
.occasion-mail { --mail-envelope:#cc8e97; --mail-flap:#e4acac; --mail-ink:#68454e; --mail-accent:#a54e65; --mail-paper:#fff5e6; width:min(660px,calc(100% - 28px)); max-height:calc(100dvh - 28px); margin:auto; padding:44px 38px 28px; overflow-y:auto; overflow-x:hidden; border:1px solid #e0bda54d; border-radius:20px 4px 20px 4px; color:#f8e8d8; background:radial-gradient(ellipse at 50% 5%,#6c435456,transparent 60%),#252431; box-shadow:0 30px 120px #0009; text-align:center; animation:occasion-arrive .7s cubic-bezier(.2,.8,.2,1) both; }
.occasion-mail::backdrop { background:#0b0c16d6; backdrop-filter:blur(9px); }.occasion-mail.theme-cream { --mail-envelope:#c9ab79; --mail-flap:#e4cba3; --mail-ink:#665141; --mail-accent:#92713f; --mail-paper:#fff9ea; }.occasion-mail.theme-lavender { --mail-envelope:#9d87b9; --mail-flap:#c6b3d8; --mail-ink:#5e4b6e; --mail-accent:#87619d; --mail-paper:#faf4ff; }.occasion-mail [hidden] { display:none!important; }
.occasion-eyebrow { margin:0 0 20px; color:#d1b48f; font:500 8px/1.7 'Be Vietnam Pro',sans-serif; letter-spacing:2px; text-transform:uppercase; }.occasion-invitation h2 { margin:0; color:#f2dfd1; font:400 38px/1.25 'Lora',serif; }.occasion-delivery-date { margin:15px 0 0; color:#bca0a7; font:10px 'Be Vietnam Pro',sans-serif; letter-spacing:1.2px; }
.occasion-stage { position:relative; width:min(350px,90%); margin:65px auto 26px; }.occasion-envelope { position:relative; width:100%; aspect-ratio:1.6; padding:0; border:0; background:none; perspective:1000px; cursor:pointer; filter:drop-shadow(0 20px 20px #0b071549); transform:rotate(-3deg); transition:transform .6s; }.occasion-envelope:focus-visible { outline:2px solid #f5cc9c; outline-offset:12px; }.occasion-envelope:hover { transform:rotate(-1deg) translateY(-5px); }.occasion-envelope:disabled { cursor:default; }
.occasion-envelope-back { position:absolute; inset:0; border-radius:4px; background:var(--mail-envelope); }.occasion-envelope-note { position:absolute; left:9%; right:9%; top:5%; height:90%; padding-top:35px; color:var(--mail-accent); background:var(--mail-paper); font:23px 'Dancing Script',cursive; transition:transform .75s .25s,opacity .7s .3s; }.occasion-envelope-front { position:absolute; z-index:3; inset:0; border-radius:4px; clip-path:polygon(0 0,50% 51%,100% 0,100% 100%,0 100%); background:linear-gradient(135deg,var(--mail-flap),var(--mail-envelope)); }.occasion-envelope-flap { position:absolute; z-index:4; inset:0; clip-path:polygon(0 0,100% 0,50% 55%); background:var(--mail-flap); transform-origin:50% 0; transition:transform .65s,z-index 0s .3s; }.occasion-seal { position:absolute; z-index:5; left:calc(50% - 25px); top:42%; display:grid; place-items:center; width:50px; height:50px; border:4px double #efc7b46b; border-radius:50%; color:#f8dfc8; background:var(--mail-accent); box-shadow:0 3px 7px #59283b4d; font:22px 'Lora',serif; transition:opacity .25s,transform .4s; }.occasion-open-hint { margin:30px 0 0; color:#d6b6a4; font:9px 'Be Vietnam Pro',sans-serif; letter-spacing:1.3px; }
.occasion-mail.is-opening .occasion-envelope-flap { z-index:1; transform:rotateX(180deg); }.occasion-mail.is-opening .occasion-envelope-note { transform:translateY(-70px); opacity:0; }.occasion-mail.is-opening .occasion-seal { opacity:0; transform:scale(.6); }.occasion-mail.is-opening .occasion-open-hint { opacity:0; }
.occasion-letter { position:relative; width:100%; padding:34px 34px 40px; border-radius:4px; color:var(--mail-ink); background:var(--mail-paper); text-align:left; box-shadow:0 12px 32px #0002; animation:occasion-unfold .8s cubic-bezier(.15,.7,.2,1) both; }.occasion-letter::before { content:''; position:absolute; inset:10px; border:1px solid color-mix(in srgb,var(--mail-accent) 24%,transparent); pointer-events:none; }.occasion-letter-ornament { color:var(--mail-accent); text-align:center; font:30px 'Lora',serif; }.occasion-letter-date { display:block; margin-top:13px; color:var(--mail-accent); text-align:center; font:9px 'Be Vietnam Pro',sans-serif; letter-spacing:1.3px; }.occasion-letter-title { margin:18px 0 28px; color:var(--mail-ink); font:400 29px/1.4 'Lora',serif; text-align:center; overflow-wrap:anywhere; outline:0; }.occasion-greeting { margin:0 0 18px; color:var(--mail-accent); font:27px/1.5 'Dancing Script',cursive; overflow-wrap:anywhere; }.occasion-body { color:var(--mail-ink); font:14px/2.05 'Lora',serif; white-space:pre-wrap; overflow-wrap:anywhere; }.occasion-signature { margin:26px 0 0; color:var(--mail-accent); font:25px/1.5 'Dancing Script',cursive; text-align:right; overflow-wrap:anywhere; }.occasion-letter-flower { display:block; margin-top:15px; color:var(--mail-accent); text-align:center; font-size:30px; opacity:.6; }
.occasion-actions { padding-top:22px; }.occasion-countdown { margin:0; color:#c8aeb5; font:10px/1.7 'Be Vietnam Pro',sans-serif; }.occasion-error { margin:8px 0 0; color:#f3b3bc; font:11px/1.8 'Be Vietnam Pro',sans-serif; }.occasion-error:empty { display:none; }.occasion-continue { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:46px; padding:12px 22px; border:1px solid #d6b38a70; border-radius:6px; color:#f0d6b9; background:#d9ad7f13; font:500 10px 'Be Vietnam Pro',sans-serif; cursor:pointer; animation:occasion-arrive .4s ease both; }.occasion-continue:hover { background:#d9ad7f25; }.occasion-continue:focus-visible { outline:2px solid #f3cc98; outline-offset:5px; }.occasion-continue:disabled { opacity:.5; cursor:wait; }.occasion-preview-close { position:absolute; z-index:8; top:12px; right:14px; padding:3px 8px; border:0; background:none; color:#dcb7c1; cursor:pointer; font:26px 'Lora',serif; }
.occasion-mail.is-leaving { overflow:visible; border-color:transparent; background:transparent; box-shadow:none; }.occasion-mail.is-leaving .occasion-letter { animation:occasion-fly 1s cubic-bezier(.45,.05,.55,.95) both; transform-origin:80% 20%; }.occasion-mail.is-leaving .occasion-actions,.occasion-mail.is-leaving .occasion-preview-close { visibility:hidden; }
@keyframes occasion-arrive { from { opacity:0; transform:translateY(24px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes occasion-unfold { from { opacity:0; transform:perspective(1000px) rotateX(-12deg) translateY(25px); } to { opacity:1; transform:perspective(1000px) rotateX(0) translateY(0); } }
@keyframes occasion-fly { 0% { opacity:1; transform:translate(0,0) rotate(0) scale(1); } 28% { transform:translate(-15px,10px) rotate(-5deg) scale(.9); } 100% { opacity:0; transform:translate(65vw,-75vh) rotate(-35deg) scale(.05); } }
@media(max-width:540px) { .occasion-mail { padding:35px 17px 22px; border-radius:15px 3px 15px 3px; }.occasion-invitation h2 { font-size:33px; }.occasion-stage { margin-top:50px; width:85%; }.occasion-letter { padding:26px 24px 28px; }.occasion-letter-title { margin-bottom:24px; font-size:25px; }.occasion-body { font-size:13px; line-height:2; }.occasion-greeting { font-size:25px; }.occasion-signature { font-size:23px; }.occasion-continue { width:100%; gap:12px; font-size:9px; }.occasion-eyebrow { font-size:7px; letter-spacing:1.4px; }.occasion-letter::before { inset:8px; } }
@media(prefers-reduced-motion:reduce) { .occasion-mail,.occasion-letter,.occasion-continue { animation-duration:.01ms!important; }.occasion-envelope,.occasion-envelope-flap,.occasion-envelope-note,.occasion-seal { transition-duration:.01ms!important; }.occasion-mail.is-leaving .occasion-letter { animation-duration:.01ms!important; } }