/* A compact mail icon is the source; the reply blooms out as a speech bubble. */
.hero-visual.held-mail{container-type:inline-size;width:100%;max-width:440px;height:auto;aspect-ratio:5/6;justify-self:center;margin-inline:auto;--mail-orange:#d9552d}
.held-mail-composition{position:absolute;top:9cqw;left:0;width:100%;height:101cqw;isolation:isolate;z-index:1;overflow:visible}
.hero-visual.held-mail .mail-scene,.hero-visual.held-mail .mail-scene.is-open{top:24cqw;bottom:auto;left:0;width:100%;max-width:none;height:75cqw;transform:none!important;transition:none;z-index:2}
.held-mail .envelope-control{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;overflow:visible;text-align:left;perspective:none}
.held-mail .mail-burst-icon{position:absolute;left:7cqw;bottom:1cqw;width:15cqw;height:15cqw;display:grid;place-items:center;color:#fffaf3;background:var(--mail-orange);border:2px solid #f9d3a2;border-radius:33%;box-shadow:0 8px 18px #92381938;z-index:1;transform-origin:50% 75%}
.held-mail .mail-burst-icon svg{width:8.2cqw;height:8.2cqw;filter:drop-shadow(0 1px 0 #9637144d)}
.hero-visual.held-mail .letter{position:absolute;top:0;left:24cqw;bottom:auto;width:67cqw;height:auto;min-height:52cqw;padding:4.8cqw 5.2cqw 4.2cqw;background:#fffdf8;border:1px solid #e3c7a7;border-radius:7cqw 7cqw 7cqw 1.2cqw;box-shadow:0 14px 32px #7543251c;z-index:2;transform-origin:0 100%;overflow:visible}
.hero-visual.held-mail .letter:before{content:'';position:absolute;left:-4.7cqw;bottom:5.4cqw;width:8.2cqw;height:8.2cqw;background:#fffdf8;clip-path:polygon(100% 0,100% 100%,0 100%);filter:drop-shadow(-1px 1px 0 #e3c7a7);z-index:-1}
.hero-visual.held-mail .letter strong{display:block;margin:0;font-family:var(--hand);font-size:7.1cqw;font-weight:400;line-height:1.34;letter-spacing:0;white-space:normal;color:var(--ink)}
.hero-visual.held-mail .letter-footer{display:block;margin-top:2.9cqw;font-size:3.7cqw;line-height:1.45;letter-spacing:0;color:var(--ink)}
.hero-visual.held-mail .letter-footer>span{display:block}
.hero-visual.held-mail .letter-footer svg{display:none}
.hero-visual.held-mail.sequence-ready .mail-scene:not(.is-open) .letter{visibility:hidden!important;opacity:0!important;transform:translate(-5cqw,6cqw) scale(.56)!important;transition:none!important}
.hero-visual.held-mail.sequence-ready .mail-scene:not(.is-open) .mail-burst-icon{visibility:hidden;opacity:0;transform:translate(-2cqw,3cqw) scale(.45) rotate(-18deg);transition:none}
.hero-visual.held-mail.sequence-ready.sequence-playing .mail-scene:not(.is-open) .mail-burst-icon{visibility:visible;animation:mail-icon-preview .35s cubic-bezier(.18,1.2,.3,1) 1.05s both}
.hero-visual.held-mail.sequence-ready .mail-scene.is-open .letter{visibility:visible!important;opacity:1!important;transform:translate(0,0) scale(1)!important;transition:transform .56s cubic-bezier(.18,1.1,.3,1) .05s,opacity .28s ease .05s!important}
.hero-visual.held-mail.sequence-ready .mail-scene.is-open .mail-burst-icon{visibility:visible!important;opacity:1!important;animation:mail-icon-arrive .5s cubic-bezier(.18,1.2,.3,1) both}
@keyframes mail-icon-preview{0%{opacity:0;transform:translate(-2cqw,3cqw) scale(.45) rotate(-18deg)}100%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes mail-icon-arrive{0%{transform:translate(-2cqw,3cqw) scale(.45) rotate(-18deg)}68%{transform:translate(0,0) scale(1.12) rotate(4deg)}100%{transform:translate(0,0) scale(1) rotate(0)}}
.hero-visual.held-mail .floating-note{z-index:3;width:45%;max-width:none;top:1cqw;padding:2.5cqw;font-size:4.2cqw;line-height:1.5}
.hero-visual.held-mail .mail-hint{top:106cqw;bottom:auto;left:7%;right:auto;margin:0;z-index:3;font-size:3cqw;line-height:1.5;transform:none;color:var(--muted)}
.hero-visual.held-mail .mail-hint>span{font-size:6cqw}
.hero-visual.held-mail .plus-one{top:96cqw;bottom:auto;right:3%;width:6cqw;height:6cqw;z-index:3}
.held-mail .mail-sparkles{inset:-7cqw -5cqw -4cqw;z-index:6}
html:not(.js) .hero-visual.held-mail.sequence-ready .mail-scene:not(.is-open) .letter,html:not(.js) .hero-visual.held-mail.sequence-ready .mail-scene:not(.is-open) .mail-burst-icon,.motion-paused .hero-visual.held-mail.sequence-ready .letter,.motion-paused .hero-visual.held-mail.sequence-ready .mail-burst-icon{visibility:visible!important;opacity:1!important;transform:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.hero-visual.held-mail .letter{transition:none!important}.hero-visual.held-mail .mail-burst-icon{animation:none!important}}

/* Keep the mentor and both supporting hands together; the reply stays independent. */
.held-mail .restored-mentor{position:absolute;left:34cqw;top:18cqw;width:66cqw;height:99cqw;margin:0;z-index:0;pointer-events:none;mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 91%,transparent)}
.held-mail .restored-mentor img{width:100%;height:100%;object-fit:contain}
.hero-visual.held-mail .letter{left:1cqw;width:62cqw;min-height:50cqw;padding:4.8cqw 4.5cqw;border-radius:7cqw 7cqw 1.2cqw 7cqw;transform-origin:85% 100%}
.hero-visual.held-mail .letter strong{font-size:6.5cqw}
.hero-visual.held-mail .letter:before{left:auto;right:5cqw;bottom:-6cqw;width:8cqw;height:8cqw;clip-path:polygon(0 0,100% 0,100% 100%)}
.held-mail .mail-burst-icon{display:none}
.hero-visual.held-mail{aspect-ratio:5/7}
.hero-visual.held-mail .mail-hint{top:127cqw;left:7%}
.hero-visual.held-mail .plus-one{top:121cqw}

/* Match the photographed envelope: x=59..702, hinge y=795 in its 1024x1536 image. */
.held-mail .held-envelope-opening{position:absolute;left:37.803cqw;top:45.24cqw;width:41.445cqw;height:15.7cqw;perspective:800px;z-index:1;pointer-events:none}
.held-mail .held-envelope-lid,.held-mail .held-envelope-inside{position:absolute;inset:0;display:block;clip-path:polygon(0 0,100% 0,50% 100%)}
.held-mail .held-envelope-inside{background:linear-gradient(#9e4826,#d77e3d);opacity:0;transition:opacity .3s ease .12s}
.held-mail .held-envelope-lid{background:linear-gradient(155deg,#ffb86d,#ef8b40);transform-origin:50% 0;backface-visibility:visible;transform:rotateX(0deg);transition:transform .65s cubic-bezier(.25,.65,.2,1);filter:drop-shadow(0 2px 1px #91432130)}
.held-mail .mail-scene.is-open .held-envelope-lid{transform:rotateX(180deg)}
.held-mail .mail-scene.is-open .held-envelope-inside{opacity:1}
.hero-visual.held-mail.sequence-ready .mail-scene.is-open .letter{transition:transform .56s cubic-bezier(.18,1.1,.3,1) .65s,opacity .28s ease .65s!important}
.hero-visual.held-mail.is-sparkling .mail-sparkles i{animation-delay:calc(var(--delay) + .6s)}
.motion-paused .held-mail .held-envelope-lid{transform:rotateX(180deg);transition:none}
@media(prefers-reduced-motion:reduce){.held-mail .held-envelope-lid,.held-mail .held-envelope-inside{transition:none}}