.personalized-welcome{background:var(--primary);width:100%;height:100svh;position:relative;overflow:hidden}.envelope-screen-background{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.personalized-open{background:0 0;border:0;border-radius:0;justify-content:center;align-items:flex-start;width:100%;height:100%;padding:0;display:flex;position:relative;overflow:visible}.personalized-open:hover{background:0 0}.envelope-stage{--env-w:min(72vw, calc(26svh * 1.829));--env-h:calc(var(--env-w) / 1.829);--paper:color-mix(in oklab, var(--primary-foreground) 93%, var(--gold));--paper-front:color-mix(in oklab, var(--primary-foreground) 96%, var(--gold));--paper-side:color-mix(in oklab, var(--primary-foreground) 88%, var(--gold));--paper-inside:color-mix(in oklab, var(--primary-foreground) 78%, var(--gold));width:var(--env-w);height:var(--env-h);perspective:1300px;transform-style:preserve-3d;margin-top:38svh;position:relative}.envelope-body{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='0.22'/%3E%3C/svg%3E"), conic-gradient(at 50% 50%, var(--paper-inside) 0 61.3deg, var(--paper-side) 61.3deg 118.7deg, var(--paper-front) 118.7deg 241.3deg, var(--paper-side) 241.3deg 298.7deg, var(--paper-inside) 298.7deg 360deg), radial-gradient(130% 100% at 50% 0%, #0000001f, transparent 55%);border-radius:3px;position:absolute;inset:0;transform:translateZ(2px);box-shadow:0 26px 46px -20px #000000a6,inset 0 -1px #00000012}.envelope-card{left:50%;bottom:calc(var(--env-h) * .02);width:calc(var(--env-w) * .82);height:calc(var(--env-w) * .46);background:color-mix(in oklab, var(--primary-foreground) 88%, var(--gold));border:1px solid color-mix(in oklab, var(--gold) 60%, transparent);transition:transform 1.3s cubic-bezier(.22,.75,.2,1) .5s;position:absolute;transform:translate3d(-50%,0,1px);box-shadow:0 16px 28px -18px #0000008c}.envelope-card-inner{border:1px solid color-mix(in oklab, var(--gold) 45%, transparent);justify-content:center;align-items:center;padding:.4rem .7rem;display:flex;position:absolute;inset:5px}.envelope-recipient{text-align:center;color:var(--primary);font-family:var(--font-display);font-weight:400;font-size:calc(var(--env-w) * .085);overflow-wrap:anywhere;opacity:0;line-height:1.5;transition:opacity .9s .9s;display:block}.envelope-flap{background-image:var(--flap);transform-origin:top;filter:drop-shadow(0 8px 12px #00000047);background-repeat:no-repeat;background-size:100% 100%;transition:transform 1.2s cubic-bezier(.6,.02,.24,1);position:absolute;inset:0;transform:rotateX(.001deg)translateZ(3px)}.is-opened .envelope-flap{transform:rotateX(-158deg)translateZ(3px)}.is-opened .envelope-card{transform:translate3d(-50%, calc(var(--env-h) * -.85), 1px)}.is-opened .envelope-recipient{opacity:1}@media (width>=700px){.envelope-stage{--env-w:min(48vw, calc(26svh * 1.829));margin-top:36svh}}@media (height<=560px){.envelope-stage{margin-top:26svh}}@media (prefers-reduced-motion:reduce){.envelope-card,.envelope-flap,.envelope-recipient{transition:none}}
