/* Shared motion: content stays visible when JavaScript is unavailable. */
@view-transition { navigation: auto; }
::view-transition-old(root){animation:page-out .22s ease both}
::view-transition-new(root){animation:page-in .5s ease both}
@keyframes page-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes page-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.motion-toggle{position:fixed;right:18px;bottom:18px;z-index:20;border:1px solid #d0bda2;background:#fffaf0f5;color:#684f40;padding:9px 14px;border-radius:30px;font-size:13px;min-height:44px;box-shadow:0 3px 15px #52341d10}
footer{padding-bottom:80px}
.envelope{animation:float-letter 4.6s ease-in-out 3;transform-origin:50% 70%}
.envelope.opening{animation:none}
@keyframes float-letter{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-7px)}}
.seal{transition:opacity .3s,box-shadow .4s}
.halo{transform-box:fill-box;transform-origin:center;animation:signal 2.4s ease-out 4}
@keyframes signal{0%{opacity:.45;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
.letter{transform-origin:50% 0}
.letter-view:not([hidden]) .letter{animation:paper-arrive 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes paper-arrive{from{opacity:0;transform:perspective(1400px) rotateX(-9deg) translateY(28px)}to{opacity:1;transform:none}}
.letter-view:not([hidden]) .letter .lead{animation:ink-arrive .9s .25s both}
.letter-view:not([hidden]) .letter .words{animation:ink-arrive .9s .4s both}
@keyframes ink-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.memory-links a,.open-btn,.return,nav a{transition:transform .3s,background .3s,box-shadow .3s,color .3s}
.memory-links a span:last-child{transition:transform .3s}
.memory-links a:hover span:last-child{transform:translate(3px,-3px)}
nav a[aria-current="location"]{background:#a43c35;color:#fff8ed}
.reading-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:#a43c35;transform:scaleX(0);transform-origin:left;z-index:30;pointer-events:none}
figure{transition:box-shadow .35s;position:relative}
.photo{overflow:hidden}.photo img{transition:filter .35s}.zoom{transition:transform .3s,background .3s}
@media(hover:hover) and (pointer:fine){figure:hover{box-shadow:0 15px 35px #52341d18}.photo:hover .zoom{transform:rotate(90deg)}.memory-links a:hover{transform:translateY(-3px);box-shadow:0 8px 20px #52341d0d}.open-btn:hover,.return:hover{transform:translateY(-2px)}}
dialog[open]{animation:viewer-arrive .3s ease both}
@keyframes viewer-arrive{from{opacity:0}to{opacity:1}}
.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}