/* One wrapped ribbon, a lifted lid, and the same frame resting on the box floor. */
.gift-wrap .present-button{z-index:2}
.box-inner{transform-style:preserve-3d}
.present .rope{transform-style:preserve-3d}
.lid-back .rope,.lid-left .rope{left:104px}
.lid-top .top-thread{height:118px;width:28px}
.lid-top .top-front{left:104px;top:118px}
.lid-top .top-back{left:104px;top:0}
.lid-top .top-right{left:118px;top:104px;width:118px;height:28px}
.lid-top .top-left{left:0;top:104px;width:118px;height:28px}
.ribbon-pin,.frame-corner{position:absolute;width:0;height:0;pointer-events:none}
.frame-corner:nth-last-child(4){left:0;top:0}
.frame-corner:nth-last-child(3){left:100%;top:0}
.frame-corner:nth-last-child(2){left:100%;top:100%}
.frame-corner:nth-last-child(1){left:0;top:100%}
.gift-wrap.unwrapping .present-lid,.gift-wrap.unwrapping .gift-base{animation:none;visibility:visible}
.gift-wrap.unwrapping .present .rope{transition:none;transform:none;opacity:1}
.gift-wrap.unwrapping .present-bow path{transition:none;transform:none;stroke-dashoffset:0}
.gift-wrap.unwrapping .tap-ring{opacity:0;animation:none;transition:opacity .2s}
.ribbon-thread{position:absolute;inset:0;width:100%;height:100%;z-index:6;overflow:visible;pointer-events:none}
.ribbon-silk,.ribbon-edge{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ribbon-silk{stroke:var(--pink);stroke-width:14}
.ribbon-edge{stroke:#FFE4EB;stroke-width:1.1;stroke-opacity:.6}
.gift-photo.frame-in-box{position:absolute;inset:auto;left:22px;top:22px;width:152px;height:152px;max-height:none;margin:0;padding:10px 10px 24px;border:0;box-shadow:none;transform:translateZ(13px);transform-origin:0 0;animation:none;z-index:1}
.frame-in-box .bead-grid{gap:4px}
.gift-photo.frame-revealing{position:absolute;inset:auto;left:0;top:0;margin:0;max-height:none;animation:none;transform-origin:0 0;z-index:8;border:0;box-shadow:none;transition:box-shadow .5s}
.gift-photo.frame-revealing.frame-near{box-shadow:12px 24px 55px #00144155}
.gift-photo.frame-presented{position:absolute;inset:auto;left:50%;top:50%;width:min(84vw,370px,60.8svh);height:auto;aspect-ratio:1;max-height:none;margin:0;transform:translate(-50%,-50%) rotate(-2.5deg);transform-origin:center;animation:none;z-index:8}
@media(prefers-reduced-motion:reduce){.gift-photo.frame-revealing{transition:none}}

/* A real framed object: recessed white mat, bevelled black rails, and four depth planes. */
.gift-photo.frame-in-box,.gift-photo.frame-revealing,.gift-photo.frame-presented{background:transparent;border:0;padding:0;overflow:visible;transform-style:preserve-3d;box-shadow:none}
.frame-solid{position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--frame-rx,5deg)) rotateY(var(--frame-ry,-9deg))}
.frame-in-box .frame-solid{transform:none}
/* Only the nine covers receive touches; the decorative depth never catches them. */
.gift-photo,.frame-solid,.frame-front,.frame-mat,.bead-grid{pointer-events:none}
.frame-presented .frame-front{transform-style:flat}
.frame-presented .frame-mat{transform:none}
.frame-front{position:absolute;inset:0;padding:0;border:clamp(9px,2.7vw,14px) solid #17191C;background:transparent;transform-style:preserve-3d;box-shadow:inset 2px 2px 2px #46494D,inset -3px -3px 3px #050608}
.frame-mat{position:relative;width:100%;height:100%;background:#FAF9F4;padding:10%;display:flex;align-items:center;justify-content:center;box-shadow:inset 2px 3px 6px #0004;transform:translateZ(-2px)}
.frame-side{position:absolute;display:block;backface-visibility:visible;transform-origin:0 0;pointer-events:none}
.frame-side-right{left:100%;top:0;width:12px;height:100%;background:#080A0D;transform:rotateY(90deg)}
.frame-side-left{left:0;top:0;width:12px;height:100%;background:#303236;transform:translateZ(-12px) rotateY(-90deg)}
.frame-side-top{left:0;top:0;width:100%;height:12px;background:#383B40;transform:translateZ(-12px) rotateX(90deg)}
.frame-side-bottom{left:0;top:100%;width:100%;height:12px;background:#0A0B0E;transform:rotateX(-90deg)}
.frame-presented .frame-front,.frame-near .frame-front{box-shadow:inset 2px 2px 2px #46494D,inset -3px -3px 3px #050608,9px 17px 32px #00144160}
.frame-mat .bead-grid{gap:7%;width:100%;aspect-ratio:1}
.album-cover{position:relative;display:block;min-width:0;aspect-ratio:1;transition:transform .2s,box-shadow .2s;touch-action:manipulation;pointer-events:auto}
.album-cover img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;pointer-events:none}
.album-cover:hover{transform:translateY(-2px);box-shadow:2px 4px 7px #0002}
.album-cover:active{transform:scale(.96)}
.album-cover:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.album-hint{position:absolute;bottom:2.8%;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.06em;color:#4E566A;opacity:0;transition:opacity .5s .3s}
.frame-presented .album-hint{opacity:1}
.frame-in-box .frame-front{border-width:6px}
.frame-in-box .frame-mat{box-shadow:inset 1px 2px 3px #0004}
@media(prefers-reduced-motion:reduce){.album-cover,.album-hint{transition:none}}