/* The envelope is vector/CSS artwork, using the original supplied SVG mark. */
.surprise-panel{grid-column:1/-1;background:radial-gradient(ellipse at 50% 34%,#23445265,transparent 65%),#182022;padding:38px 48px 28px;overflow:hidden}
.surprise-experience{text-align:center;max-width:800px;margin:auto}
.surprise-intro h2{font-size:clamp(30px,3.5vw,44px);line-height:1.15;letter-spacing:-1.2px}
.surprise-intro .muted{font-size:13px;margin-bottom:0}
.surprise-intro .eyebrow{margin-bottom:16px}
.envelope-scene{position:relative;padding:140px 0 26px;isolation:isolate}
.envelope-scene::before{content:'';position:absolute;width:75%;height:80%;left:12.5%;top:10%;background:radial-gradient(ellipse,#d8bd8420,transparent 70%);pointer-events:none}
.envelope-button{display:block;position:relative;width:min(100%,380px);aspect-ratio:1.65;margin:auto;border:0;background:transparent;border-radius:8px;padding:0;perspective:1000px;transition:transform .25s;isolation:isolate}
.envelope-button:not(:disabled):hover{transform:translateY(-5px) rotate(-1deg)}
.envelope-button:disabled{cursor:default}
.envelope{position:absolute;inset:0;display:block;filter:drop-shadow(0 20px 20px #0005)}
.envelope-back{position:absolute;inset:0;background:linear-gradient(140deg,#baa783,#988564);border:1px solid #d9c9aa;border-radius:7px}
.envelope-front{position:absolute;inset:0;z-index:3;background:linear-gradient(25deg,#cdbb98,#e5d7bc);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);border-radius:6px}
.envelope-front::after{content:'';position:absolute;inset:0;background:linear-gradient(150deg,#ecdfc7,#c6b18c);clip-path:polygon(0 100%,50% 47%,100% 100%);border-bottom:1px solid #f1e6d2}
.envelope-flap{position:absolute;inset:0;z-index:4;background:linear-gradient(175deg,#f0e4cd,#cebb97);clip-path:polygon(0 0,100% 0,50% 57%);transform-origin:top center;backface-visibility:visible}
.wax-seal{display:grid;place-items:center;position:absolute;z-index:5;left:calc(50% - 30px);top:40%;width:60px;height:60px;background:transparent;border:0;border-radius:50%;filter:drop-shadow(0 4px 5px #5a492f55)}
.wax-seal img{width:100%;height:100%;border-radius:50%}
.envelope-sprig{position:absolute;z-index:4;bottom:34px;left:12px;width:90px;height:65px;transform:rotate(-10deg);pointer-events:none}
.letter-masthead .letter-evergreen{width:65px;height:46px;margin-left:5px}
@media(max-width:570px){.envelope-sprig{width:63px;height:45px;bottom:28px;left:6px}.letter-masthead .letter-evergreen{width:40px;height:32px;margin-left:auto}}
.envelope-address{position:absolute;z-index:4;bottom:24px;width:100%;left:0;letter-spacing:2.1px;font-size:8px;color:#4c493f}
.letter-peek{position:absolute;z-index:2;left:7%;top:5%;width:86%;height:89%;background:linear-gradient(130deg,#fffefa,#f5f3ec);color:#414741;border-radius:4px;padding:20px;display:flex;align-items:center;flex-direction:column;box-shadow:0 0 20px #0002}
.letter-peek img{width:36px;height:36px;margin-bottom:12px}
.letter-peek span{font-size:15px;font-weight:600}
.letter-peek i{display:block;width:70%;height:2px;background:#bdc1b4;margin-top:12px}
.letter-peek i:last-child{width:45%}
.envelope-prompt p{font-size:12px;color:#bfccd0;margin-bottom:14px}
.envelope-prompt .primary{background:var(--blue);min-width:210px}
.envelope-prompt .primary:hover{background:#087cbd}
.reveal-status{font-size:11px;color:#d9c3a0;min-height:18px;margin:12px 0 0}
.surprise-footnote{font-size:11px;color:#b5c4ca;margin:8px 0 0}
.letter-spark{position:absolute;color:#d9c3a0;opacity:.7;pointer-events:none}
.spark-one{top:21%;left:17%;font-size:22px;transform:rotate(15deg)}
.spark-two{top:37%;right:12%;font-size:33px}
.spark-three{bottom:17%;left:12%;font-size:12px}
.opening-effects{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6}
.opening-halo{position:absolute;width:75%;height:100%;left:12.5%;top:0;background:radial-gradient(ellipse,#f5d89745,transparent 65%);opacity:0;mix-blend-mode:screen}
.opening-mote{position:absolute;left:50%;top:65%;color:#f8ddb2;font-size:16px;opacity:0;text-shadow:0 0 9px #ffe0a7;will-change:transform,opacity}
.opening-mote:nth-child(3n){font-size:28px;color:#f5e6ca}
.is-opening .wax-seal{animation:seal-release .95s cubic-bezier(.25,.5,.25,1) forwards}
.is-opening .envelope-flap{animation:flap-open 1.5s .7s cubic-bezier(.35,0,.25,1) forwards}
.is-opening .letter-peek{animation:letter-slide 2.7s 1.7s cubic-bezier(.2,.7,.2,1) forwards}
/* Move the complete assembly so the flap stays attached to the envelope edge. */
.is-opening .envelope{animation:envelope-away .65s 3.95s ease-in forwards}
.is-opening .letter-spark{animation:spark-glow 4.6s ease-out forwards}
.is-opening .opening-halo{animation:halo-bloom 4.6s ease-in-out forwards}
.is-opening .opening-mote{animation:mote-drift 2.1s var(--delay) ease-out forwards}
.founders-letter{color-scheme:light;background:linear-gradient(130deg,#fffefa,#f5f3ec);color:var(--earth);text-align:left;max-width:660px;padding:36px 46px;margin:30px auto 0;border:1px solid #e6e0d3;border-radius:3px;box-shadow:0 18px 55px #0003;position:relative;transform-origin:top center}
.founders-letter::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--blue)}
.letter-masthead{display:flex;align-items:center;gap:13px;padding-bottom:20px;border-bottom:1px solid #c4c7bf;font-size:9px;letter-spacing:1.7px;color:var(--slate)}
.letter-masthead img{width:38px;height:38px;flex-shrink:0}.letter-year{margin-left:auto}
.placeholder-note{font-size:9px;letter-spacing:.3px;color:#76583f;margin:23px 0 16px;text-transform:uppercase}
.founders-letter h2{font-size:29px;line-height:1.2;letter-spacing:-.7px;margin-bottom:24px;color:#254558}
.founders-letter p{font-size:13px;line-height:1.9;margin-bottom:18px}
.founders-letter .letter-greeting{font-weight:600}
.letter-signature{padding:8px 0 24px}
.letter-signature p{font-size:12px;margin:0 0 5px}.letter-signature strong{font-weight:600;color:var(--blue);font-size:17px;display:block}.letter-signature>span{display:block;font-size:10px;letter-spacing:1px;color:var(--slate);margin-top:5px}
.letter-postscript{display:flex;gap:15px;border-top:1px solid #c4c7bf;padding-top:20px;color:#485869}.letter-postscript>span{font-size:22px;color:#b06940}.letter-postscript p{font-size:11px;line-height:1.8;margin:0}.letter-postscript p span{font-size:10px}
.letter-tools{margin:12px 0 0}.letter-tools button{font-size:11px;min-height:44px}
.is-revealed .founders-letter{animation:letter-arrive 1.15s cubic-bezier(.2,.7,.2,1) both}
.is-revealed .surprise-intro h2{font-size:28px}.is-revealed .surprise-intro h2 br{display:none}
.surprise-experience [hidden]{display:none!important}
#letter-heading:focus{outline:none}.founders-letter{scroll-margin-top:20px}
@media(max-width:570px){.surprise-panel .actions{display:grid;grid-template-columns:1fr;gap:10px}.surprise-panel .actions .primary{grid-row:1;white-space:nowrap}.surprise-panel .actions button{width:100%}}
@keyframes seal-release{0%{transform:scale(1);opacity:1}35%{transform:translateY(-5px) scale(1.13);opacity:1}100%{transform:translateY(-30px) rotate(12deg) scale(.9);opacity:0}}
@keyframes flap-open{0%{transform:rotateX(0);z-index:4}55%{z-index:4}100%{transform:rotateX(-175deg);z-index:1;opacity:.7}}
@keyframes letter-slide{0%{transform:translateY(0)}55%{transform:translateY(-48%) rotate(-2deg)}80%{transform:translateY(-53%) rotate(1deg) scale(1.02)}100%{transform:translateY(-56%) scale(1.06)}}
@keyframes envelope-away{to{transform:translateY(30px) scale(.97);opacity:0}}
@keyframes letter-arrive{from{opacity:0;transform:perspective(900px) rotateX(-8deg) translateY(26px) scale(.97)}to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0) scale(1)}}
@keyframes spark-glow{35%{opacity:1;scale:1.3}75%{opacity:.6;scale:1.1}100%{opacity:0;scale:.8}}
@keyframes halo-bloom{0%{opacity:0;transform:scale(.7)}40%{opacity:1;transform:scale(1.15)}75%{opacity:.6}100%{opacity:0;transform:scale(1.4)}}
@keyframes mote-drift{0%{opacity:0;transform:translate(-50%,0) scale(.3)}20%{opacity:.9}75%{opacity:.55}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.6)}}
@media(max-width:570px){.surprise-panel{padding:26px 18px 22px}.surprise-intro .eyebrow{font-size:8px;letter-spacing:2px}.surprise-intro h2{font-size:30px}.surprise-intro .muted{font-size:12px}.envelope-scene{padding:100px 8px 25px}.envelope-address{font-size:6px;letter-spacing:1px;bottom:16px}.wax-seal{width:52px;height:52px;left:calc(50% - 26px);top:38%}.wax-seal img{width:100%;height:100%}.letter-peek{padding:12px}.letter-peek img{width:24px;height:24px;margin-bottom:6px}.letter-peek span{font-size:12px}.letter-peek i{margin-top:8px}.spark-one{left:4%;top:19%}.spark-two{right:0;top:26%;font-size:24px}.spark-three{left:0;bottom:7%}.envelope-prompt p{font-size:11px}.founders-letter{padding:26px 22px;margin-top:24px}.letter-masthead{font-size:7px;gap:9px;letter-spacing:1px}.letter-masthead img{width:30px;height:30px}.letter-year{display:none}.founders-letter h2{font-size:26px}.founders-letter p{font-size:12px}.letter-signature strong{font-size:15px}.letter-postscript{gap:9px}.letter-postscript p{font-size:10px}.is-revealed .surprise-intro h2{font-size:24px}.surprise-footnote{font-size:10px}}
@media(prefers-reduced-motion:reduce){.surprise-experience *,.surprise-experience *::before,.surprise-experience *::after{animation:none!important;transition:none!important}.envelope-button:not(:disabled):hover{transform:none}}