.surprise-page,.surprise-state-page{color:#302d29;background:#faf7ef;min-height:100svh;overflow-x:clip}.surprise-page{grid-template-rows:auto 1fr auto;place-items:center;padding:55px 24px 30px;display:grid}.surprise-page>header{text-align:center}.surprise-kicker{letter-spacing:1.7px;font-size:8px;font-weight:700}.surprise-page h1,.surprise-state-page h1{font-family:var(--font-editorial);letter-spacing:-.05em;margin-top:10px;font-size:clamp(48px,7vw,86px);font-weight:400;line-height:1}.surprise-page>header>p:last-child,.surprise-state-page>p:not(.surprise-kicker){color:#70685f;margin-top:14px;font-size:12px}.surprise-envelope-stage{justify-items:center;gap:44px;width:min(100%,720px);padding-block:80px 55px;display:grid}.surprise-envelope{aspect-ratio:1.55;perspective:1200px;width:min(88vw,600px);transition:transform .3s cubic-bezier(.22,1,.36,1);position:relative}.surprise-envelope-stage.is-closed .surprise-envelope:hover{transform:translateY(-5px)rotate(-.6deg)}.surprise-envelope-back,.surprise-envelope-front,.surprise-envelope-flap{position:absolute;inset:0}.surprise-envelope-back{background:#d9bdd7;border:1px solid #bea5bd;box-shadow:0 28px 70px #302d2921}.surprise-envelope-front{z-index:3;pointer-events:none;background:linear-gradient(145deg,#0000 49.7%,#ecd6c7 50%) 0/50.2% 100% no-repeat,linear-gradient(215deg,#0000 49.7%,#e4c7b6 50%) 100%/50.2% 100% no-repeat}.surprise-envelope-flap{z-index:4;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;backface-visibility:hidden;background:#ceb0cc;height:57%;transition:transform .7s cubic-bezier(.22,.75,.2,1)}.surprise-letter{z-index:2;background:#fffaf2;border:1px solid #ddd4c7;flex-direction:column;justify-content:center;padding:clamp(25px,5vw,52px);transition:transform .8s cubic-bezier(.2,.75,.2,1) .18s;display:flex;position:absolute;inset:9% 7% 6%;overflow-y:auto;transform:translateY(8%);box-shadow:0 12px 35px #302d2912}.surprise-letter>svg{color:#ae432f;width:24px;margin-bottom:18px}.surprise-letter p{overflow-wrap:anywhere;white-space:pre-wrap;font-family:var(--font-editorial);font-size:clamp(20px,3.4vw,31px);font-style:italic;line-height:1.38}.surprise-letter cite{color:#70685f;margin-top:20px;font-size:11px;font-style:normal}.surprise-envelope-seal{z-index:5;color:#fff;background:#ae432f;border-radius:50%;place-items:center;width:52px;height:52px;display:grid;position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 20px #5f251c33}.surprise-envelope-seal svg{width:20px}.surprise-envelope-stage.is-open .surprise-envelope-flap{transform:rotateX(180deg)}.surprise-envelope-stage.is-open .surprise-letter{z-index:5;transform:translateY(-36%)}.surprise-envelope-stage.is-open .surprise-letter>*{animation:.36s cubic-bezier(.22,1,.36,1) both surprise-letter-reveal}.surprise-envelope-stage.is-open .surprise-letter>:nth-child(2){animation-delay:60ms}.surprise-envelope-stage.is-open .surprise-letter>:nth-child(3){animation-delay:.11s}@keyframes surprise-letter-reveal{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.surprise-envelope-stage.is-closed .surprise-letter{visibility:hidden}.surprise-envelope-stage.reduce-motion *{transition:none!important}.surprise-page footer{color:#8f3d2f;align-items:center;gap:8px;font-size:11px;display:flex}.surprise-page footer svg{width:14px}.surprise-state-page{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:40px 24px;display:flex}.surprise-state-page>svg{color:#806987;width:52px;height:52px;margin-bottom:25px}.surprise-state-page h1{max-width:760px;font-size:clamp(42px,6vw,68px)}.surprise-state-page>a{color:#8f3d2f;border-bottom:1px solid #bc8d7e;margin-top:28px;padding-bottom:4px;font-size:11px}@media (max-width:640px){.surprise-page{padding-top:40px}.surprise-envelope-stage{gap:28px;padding-block:75px 35px}.surprise-letter{padding:22px;inset-inline:5%}.surprise-letter cite{margin-top:12px}}@media (prefers-reduced-motion:reduce){.surprise-envelope-stage *{transition:none!important;animation:none!important}}