.envelope-scene{--env-width:min(84vw, 340px);width:var(--env-width);--env-gold:#d4af37;--env-paper:var(--theme-surface)}@supports (color:color-mix(in lab, red, red)){.envelope-scene{--env-paper:color-mix(in srgb, var(--theme-surface) 90%, var(--theme-accent))}}.envelope-scene{--env-paper-deep:var(--theme-surface)}@supports (color:color-mix(in lab, red, red)){.envelope-scene{--env-paper-deep:color-mix(in srgb, var(--theme-surface) 84%, var(--theme-text))}}.envelope-scene{--env-pocket:var(--theme-surface)}@supports (color:color-mix(in lab, red, red)){.envelope-scene{--env-pocket:color-mix(in srgb, var(--theme-surface) 95%, var(--theme-accent))}}.envelope-scene{--env-line:var(--theme-accent)}@supports (color:color-mix(in lab, red, red)){.envelope-scene{--env-line:color-mix(in srgb, var(--theme-accent) 55%, transparent)}}.envelope-scene{--env-shadow:var(--theme-text)}@supports (color:color-mix(in lab, red, red)){.envelope-scene{--env-shadow:color-mix(in srgb, var(--theme-text) 20%, transparent)}}.envelope-scene{--env-ink:var(--theme-text);--env-liner:var(--theme-primary);--env-liner-dot:var(--theme-accent)}@supports (color:color-mix(in lab, red, red)){.envelope-scene{--env-liner-dot:color-mix(in srgb, var(--theme-accent) 55%, transparent)}}.envelope-scene[data-paper=primary]{--env-paper:var(--theme-primary)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=primary]{--env-paper:color-mix(in srgb, var(--theme-primary) 94%, var(--theme-text))}}.envelope-scene[data-paper=primary]{--env-paper-deep:var(--theme-primary)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=primary]{--env-paper-deep:color-mix(in srgb, var(--theme-primary) 78%, black)}}.envelope-scene[data-paper=primary]{--env-pocket:var(--theme-primary)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=primary]{--env-pocket:color-mix(in srgb, var(--theme-primary) 86%, black)}}.envelope-scene[data-paper=primary]{--env-line:var(--env-gold)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=primary]{--env-line:color-mix(in srgb, var(--env-gold) 70%, transparent)}}.envelope-scene[data-paper=primary]{--env-ink:var(--theme-on-primary);--env-liner:var(--theme-primary)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=primary]{--env-liner:color-mix(in srgb, var(--theme-primary) 70%, black)}}.envelope-scene[data-paper=primary]{--env-liner-dot:var(--env-gold)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=primary]{--env-liner-dot:color-mix(in srgb, var(--env-gold) 80%, transparent)}}.envelope-scene[data-seal=gold]{--seal-hi:#f3de8a;--seal-mid:var(--env-gold);--seal-lo:#8f6f12;--seal-inner-hi:#e8cd6a;--seal-inner-lo:#a6841c;--seal-ink:#4a3a08}.envelope-scene[data-seal=wax][data-rim=gold]{--seal-hi:#d9534f;--seal-mid:#a61e22;--seal-lo:#5c0f12;--seal-inner-hi:#c0392b;--seal-inner-lo:#7d1519;--seal-ink:#fbeee0;--seal-rim:var(--env-gold)}.envelope-scene[data-paper=ice]{--env-paper:var(--theme-bg)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=ice]{--env-paper:color-mix(in srgb, var(--theme-bg) 62%, #9cc6e4)}}.envelope-scene[data-paper=ice]{--env-paper-deep:var(--theme-bg)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=ice]{--env-paper-deep:color-mix(in srgb, var(--theme-bg) 45%, #7fb2d6)}}.envelope-scene[data-paper=ice]{--env-pocket:var(--theme-bg)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=ice]{--env-pocket:color-mix(in srgb, var(--theme-bg) 50%, #8fbcdc)}}.envelope-scene[data-paper=ice]{--env-line:#7fb2d6b3;--env-ink:var(--theme-text);--env-liner:var(--theme-text)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=ice]{--env-liner:color-mix(in srgb, var(--theme-text) 80%, var(--theme-bg))}}.envelope-scene[data-paper=ice]{--env-liner-dot:var(--theme-bg)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-paper=ice]{--env-liner-dot:color-mix(in srgb, var(--theme-bg) 90%, white)}}.envelope{width:var(--env-width);aspect-ratio:10/7;perspective:1100px;filter:drop-shadow(0 22px 28px var(--env-shadow));position:relative}.envelope__back{z-index:1;background:var(--env-paper-deep);border-radius:6px;position:absolute;inset:0}.envelope__card{z-index:2;background:var(--theme-bg);height:88%;box-shadow:inset 0 0 0 1px var(--env-line), inset 0 0 0 5px var(--theme-bg), inset 0 0 0 6px var(--env-line);border-radius:4px;justify-content:center;align-items:flex-start;padding-top:9%;display:flex;position:absolute;top:6%;left:7%;right:7%}.envelope__pocket{z-index:3;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.envelope__pocket-side{fill:var(--env-pocket)}.envelope__pocket-bottom{fill:var(--env-paper)}.envelope__pocket-line{fill:none;stroke:var(--env-line);stroke-width:1px}.envelope__address{z-index:3;color:var(--env-ink);padding:0 1rem;position:absolute;bottom:5.5%;left:0;right:0}.envelope__flap{z-index:4;transform-origin:50% 0;height:61%;transform-style:preserve-3d;position:absolute;top:0;left:0;right:0}.flap-face{clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;position:absolute;inset:0}.envelope__back{background:repeating-linear-gradient(45deg, #00000009 0 1px, transparent 1px 3px), linear-gradient(160deg, var(--env-paper-deep), var(--env-paper-deep))}@supports (color:color-mix(in lab, red, red)){.envelope__back{background:repeating-linear-gradient(45deg, #00000009 0 1px, transparent 1px 3px), linear-gradient(160deg, color-mix(in srgb, var(--env-paper-deep) 92%, white), var(--env-paper-deep))}}.flap-face--outer{background:linear-gradient(115deg, transparent 34%, #ffffff47 47%, transparent 60%), linear-gradient(180deg, transparent 55%, #00000029), repeating-linear-gradient(45deg, #00000008 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--env-paper), var(--env-paper))}@supports (color:color-mix(in lab, red, red)){.flap-face--outer{background:linear-gradient(115deg, transparent 34%, #ffffff47 47%, transparent 60%), linear-gradient(180deg, transparent 55%, #00000029), repeating-linear-gradient(45deg, #00000008 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--env-paper), color-mix(in srgb, var(--env-paper) 92%, var(--theme-text)))}}.envelope__pocket-sheen,.envelope__flap-shadow{pointer-events:none}[data-state=opening] .envelope__flap-shadow{opacity:0}[data-state=opening] .envelope__aside{opacity:0;visibility:hidden}.flap-face--inner{background:radial-gradient(circle at 50% 50%, var(--env-liner-dot) 1.5px, transparent 2px) 0 0 / 14px 14px, var(--env-liner);transform:rotateX(180deg)}.envelope-scene[data-liner=stars] .flap-face--inner{background:radial-gradient(circle at 50% 50%, var(--env-liner-dot) 1px, transparent 1.6px) 0 0 / 17px 17px, radial-gradient(circle at 50% 50%, var(--env-liner-dot) .8px, transparent 1.3px) 8px 9px / 11px 11px, var(--env-liner)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-liner=stars] .flap-face--inner{background:radial-gradient(circle at 50% 50%, var(--env-liner-dot) 1px, transparent 1.6px) 0 0 / 17px 17px, radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--env-liner-dot) 55%, transparent) .8px, transparent 1.3px) 8px 9px / 11px 11px, var(--env-liner)}}.envelope-scene[data-liner=snowflake] .flap-face--inner{background:radial-gradient(circle at 50% 50%, var(--env-liner-dot) 1.6px, transparent 2.2px) 0 0 / 22px 22px, linear-gradient(90deg, transparent 46%, var(--env-liner-dot) 47% 53%, transparent 54%) 0 0 / 22px 22px, linear-gradient(0deg, transparent 46%, var(--env-liner-dot) 47% 53%, transparent 54%) 0 0 / 22px 22px, linear-gradient(45deg, transparent 46%, var(--env-liner-dot) 47% 53%, transparent 54%) 0 0 / 22px 22px, linear-gradient(-45deg, transparent 46%, var(--env-liner-dot) 47% 53%, transparent 54%) 0 0 / 22px 22px, var(--env-liner)}@supports (color:color-mix(in lab, red, red)){.envelope-scene[data-liner=snowflake] .flap-face--inner{background:radial-gradient(circle at 50% 50%, var(--env-liner-dot) 1.6px, transparent 2.2px) 0 0 / 22px 22px, linear-gradient(90deg, transparent 46%, color-mix(in srgb, var(--env-liner-dot) 60%, transparent) 47% 53%, transparent 54%) 0 0 / 22px 22px, linear-gradient(0deg, transparent 46%, color-mix(in srgb, var(--env-liner-dot) 60%, transparent) 47% 53%, transparent 54%) 0 0 / 22px 22px, linear-gradient(45deg, transparent 46%, color-mix(in srgb, var(--env-liner-dot) 60%, transparent) 47% 53%, transparent 54%) 0 0 / 22px 22px, linear-gradient(-45deg, transparent 46%, color-mix(in srgb, var(--env-liner-dot) 60%, transparent) 47% 53%, transparent 54%) 0 0 / 22px 22px, var(--env-liner)}}.envelope-scene[data-liner=damask] .flap-face--inner{background:radial-gradient(circle at 50% 50%, var(--env-liner-dot) 2px, transparent 2.6px) 0 0 / 18px 18px, linear-gradient(45deg, transparent 46%, var(--env-liner-dot) 47% 53%, transparent 54%) 0 0 / 18px 18px, linear-gradient(-45deg, transparent 46%, var(--env-liner-dot) 47% 53%, transparent 54%) 0 0 / 18px 18px, var(--env-liner)}.seal{z-index:5;aspect-ratio:1;cursor:pointer;width:clamp(76px,22vw,92px);filter:drop-shadow(0 4px 5px var(--env-shadow));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:50%;padding:0;position:absolute;top:61%;left:50%;transform:translate(-50%,-50%)}.seal svg{width:100%;height:100%;display:block;overflow:visible}.wax-glint{opacity:0;transform:translate(-40px)}.seal:active{transform:translate(-50%,-50%)scale(.94)}.seal:focus-visible{outline:2px solid var(--theme-primary);outline-offset:4px}.seal:after{content:"";border:2px solid var(--theme-primary);border-radius:50%;position:absolute;inset:-10px}@supports (color:color-mix(in lab, red, red)){.seal:after{border:2px solid color-mix(in srgb, var(--theme-primary) 35%, transparent)}}.seal:after,[data-state=opening] .seal{pointer-events:none}[data-state=opening] .seal:after{display:none}@media (prefers-reduced-motion:no-preference){.seal{transition:transform .2s}.envelope__aside{transition:opacity var(--env-crack) ease-out, visibility 0s linear var(--env-crack)}.envelope__flap-shadow{transition:opacity var(--env-crack) ease-out}.seal:after{animation:env-seal-ring var(--env-ring) ease-out infinite}.seal:hover{transform:translate(-50%,-50%)scale(1.05)}[data-state=opening] .seal{animation:env-seal-press var(--env-crack) ease-out forwards}[data-state=opening] .wax-half{transform-box:view-box;transform-origin:50px 100px;animation-duration:var(--env-seal-break);animation-delay:var(--env-crack);animation-timing-function:ease-in;animation-fill-mode:forwards}[data-state=opening] .wax-half--left{animation-name:env-half-left}[data-state=opening] .wax-half--right{animation-name:env-half-right}[data-state=opening] .wax-glint{animation:env-wax-glint var(--env-glint) ease-in-out var(--env-glint-delay) both}[data-state=opening] .envelope{animation:env-settle var(--env-settle) cubic-bezier(.3, 0, .2, 1) forwards}[data-state=opening] .envelope__flap{animation:env-flap-open var(--env-flap) cubic-bezier(.45, 0, .2, 1) var(--env-flap-delay) forwards, env-flap-layer var(--env-flap) step-end var(--env-flap-delay) forwards}[data-state=opening] .envelope__card{animation:env-card-rise var(--env-card) cubic-bezier(.2, .8, .2, 1) var(--env-card-delay) forwards}}@keyframes env-seal-press{0%{transform:translate(-50%,-50%)scale(1)}to{transform:translate(-50%,-50%)scale(.94)}}@keyframes env-half-left{to{opacity:0;transform:translate(-16px,10px)rotate(-22deg)}}@keyframes env-half-right{to{opacity:0;transform:translate(16px,10px)rotate(22deg)}}@keyframes env-flap-open{to{transform:rotateX(180deg)}}@keyframes env-flap-layer{0%{z-index:4}50%,to{z-index:1}}@keyframes env-settle{to{transform:translateY(22%)}}@keyframes env-card-rise{to{transform:translateY(-58%)}}@keyframes env-seal-ring{0%{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.25)}}@keyframes env-wax-glint{0%{opacity:1;transform:translate(-40px)}to{opacity:0;transform:translate(140px)}}@media (prefers-reduced-motion:no-preference){[data-envelope][data-hydrated][data-state=opening]{animation:opening-scene-out var(--env-out) ease-in var(--env-out-delay) forwards;pointer-events:none}}@media (prefers-reduced-motion:reduce){[data-envelope][data-hydrated][data-state=opening]{animation:opening-fade-out var(--env-out) linear forwards;pointer-events:none}}@keyframes opening-scene-out{to{opacity:0;transform:translateY(-16px)scale(.97)}}@keyframes opening-fade-out{to{opacity:0}}@media (prefers-reduced-motion:no-preference){[data-envelope][data-opening=pinataBurst][data-hydrated][data-state=opening]{animation-delay:calc(var(--pinata-open) - var(--env-out))}.pinata-opening__swing{transform-origin:top;animation:pinata-opening-sway var(--pinata-sway) ease-in-out infinite}[data-state=opening] .pinata-opening__swing{animation:none}[data-state=opening] .pinata-opening__body{animation:pinata-opening-break var(--pinata-break) ease-in var(--pinata-burst-delay) forwards}}.pinata-opening__rope{background:var(--color-muted);width:2px;height:3.5rem;display:block}.pinata-opening__button{cursor:pointer;background:0 0;border:0;width:9rem;min-width:44px;min-height:44px;padding:0;display:block;overflow:visible}@media (prefers-reduced-motion:reduce){[data-state=opening] .pinata-opening__body{opacity:0}}@keyframes pinata-opening-sway{0%,to{transform:rotate(var(--pinata-sway-deg-neg))}50%{transform:rotate(var(--pinata-sway-deg))}}@keyframes pinata-opening-break{to{opacity:0;transform:scale(1.35)}}@media (prefers-reduced-motion:no-preference){[data-envelope][data-opening=picadoCurtain][data-hydrated][data-state=opening]{animation:none}}[data-state=opening] .picado-curtain__content{visibility:hidden}@media (prefers-reduced-motion:no-preference){[data-envelope][data-opening=giftBox][data-hydrated][data-state=opening]{animation:none}[data-state=opening] .gift-box__bow{animation:gift-box-untie var(--gift-ribbon) ease-in forwards}[data-state=opening] .gift-box__lid{animation:gift-box-lid var(--gift-lid) ease-out var(--gift-ribbon) forwards}[data-state=opening] .gift-box__button{animation:gift-box-fade calc(var(--gift-open) - var(--gift-ribbon) - var(--gift-lid)) linear calc(var(--gift-ribbon) + var(--gift-lid)) forwards}}@media (prefers-reduced-motion:reduce){[data-state=opening] .gift-box__button{opacity:0}}[data-state=opening] .gift-box__hint{visibility:hidden}[data-state=opening] .gift-box__button{pointer-events:none}.gift-box__button{aspect-ratio:1;cursor:pointer;background:0 0;border:0;width:9rem;min-width:44px;max-width:60vw;min-height:44px;padding:0;display:block}.gift-box__button:focus-visible{outline:3px solid var(--theme-text);outline-offset:4px}.gift-box__lid,.gift-box__bow{transform-box:fill-box;transform-origin:50%}.gift-box__body,.gift-box__lid-face{fill:var(--theme-primary)}.gift-box__ribbon{fill:var(--theme-accent)}@keyframes gift-box-untie{to{opacity:0;transform:translateY(-60%)scale(.5)}}@keyframes gift-box-lid{to{opacity:0;transform:translateY(-250%)}}@keyframes gift-box-fade{to{opacity:0}}
