/* An addition after the completed descent; no opening or descent overrides. */
.personal-introduction[hidden]{display:none}
.personal-introduction{position:absolute;top:var(--letter-top);left:50%;transform:translateX(-50%);width:calc(100% - 56px);max-width:32rem;text-align:center;padding-bottom:max(76px,env(safe-area-inset-bottom));color:#e5e7e4;text-shadow:0 2px 18px #001c3060}
.personal-introduction p{font-family:OceanSerif,Georgia,serif;font-size:clamp(1.3rem,5.3vw,1.5rem);font-weight:400;line-height:1.7;text-wrap:pretty;margin:0 0 clamp(42px,7svh,68px);opacity:0;transform:translate3d(-2px,12px,0);transition:opacity 1.15s ease,transform 1.45s cubic-bezier(.2,.65,.3,1)}
.personal-introduction p.is-readable{opacity:1;transform:translate3d(0,0,0)}
/* Keep the same atmosphere behind the longer, scrollable introduction. */
.underwater.letter-ready .depth-atmosphere{position:fixed}
.deeper-invitation{margin:4px auto 0;width:24px;height:44px;color:#acd3df;opacity:0;transform:translateY(-4px);transition:opacity 1.2s ease,transform 1.6s ease}
.deeper-invitation.is-readable{opacity:.7;transform:translateY(0)}
.deeper-invitation svg{display:block;width:100%;height:100%;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.personal-introduction p,.deeper-invitation{transform:none;transition:opacity .2s ease!important}}