/* The opening: a sealed envelope on a dark,starry page. One orchestrated moment,then the gift. */
.gift-opening{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;padding:24px;background:radial-gradient(70% 55% at 50% 45%,#4a2433,#201c24 70%);color:#f8e8d0;font-family:'DM Sans',sans-serif;transition:opacity .6s ease,transform .6s ease}.gift-opening[hidden]{display:none}.opening-sky{position:absolute;inset:0;pointer-events:none}.opening-sky i{position:absolute;left:var(--x);top:var(--y);font-style:normal;font-size:12px;color:#f2d583;opacity:.35;animation:opening-float var(--d) ease-in-out var(--delay) infinite}.opening-sky i:nth-child(3n){color:#e8a0a3;font-size:10px}
@keyframes opening-float{50%{transform:translateY(-14px);opacity:.75}}.opening-content{position:relative;display:grid;justify-items:center;gap:14px;text-align:center}.opening-from{margin:0;font:500 26px/1.2 'Caveat',cursive;color:#e8a0a3}.opening-title{margin:0 0 18px;font:500 clamp(46px,12vw,74px)/1 'Playfair Display',Georgia,serif;letter-spacing:-2px}.opening-title em{color:#f2d583}.opening-envelope{position:relative;width:min(300px,78vw);aspect-ratio:1.45;padding:0;border:0;background:none;cursor:pointer;perspective:900px;animation:envelope-breathe 3.2s ease-in-out infinite}.opening-envelope:focus-visible{outline:3px solid #f2d583;outline-offset:10px;border-radius:12px}
@keyframes envelope-breathe{50%{transform:translateY(-6px) rotate(-1deg)}}.gift-opening .envelope-back,.gift-opening .envelope-front,.gift-opening .envelope-flap{position:absolute;left:0;right:0;border-radius:10px}.gift-opening .envelope-back{inset:0;background:#c9475f;box-shadow:0 24px 50px #0008}.gift-opening .envelope-front{inset:0;z-index:3;background:linear-gradient(to top right,#e0687d 50%,transparent 50.4%) left/50.2% 100% no-repeat,linear-gradient(to top left,#d65a70 50%,transparent 50.4%) right/50.2% 100% no-repeat;clip-path:polygon(0 30%,50% 64%,100% 30%,100% 100%,0 100%)}.gift-opening .envelope-flap{top:0;height:62%;z-index:4;background:#b83a52;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .6s cubic-bezier(.5,0,.3,1) .3s,z-index 0s .6s;filter:drop-shadow(0 3px 2px #0003)}.gift-opening .envelope-card{position:absolute;z-index:2;left:7%;right:7%;top:8%;bottom:6%;display:grid;grid-template-rows:1fr auto auto;gap:3px;padding:8px 8px 10px;border-radius:6px;background:#fff8ec;color:#482832;text-align:left;opacity:0;transition:transform .7s cubic-bezier(.2,1.2,.4,1) .85s,opacity .2s .6s}.gift-opening .envelope-card img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:4px}.gift-opening .envelope-card b{font:800 18px/1 'Barlow Condensed',sans-serif;text-transform:uppercase}.gift-opening .envelope-card small{font-size:10px;opacity:.7}.gift-opening .wax-seal{position:absolute;z-index:5;left:50%;top:62%;display:grid;place-items:center;width:68px;height:68px;transform:translate(-50%,-50%)}.gift-opening .wax-seal b{position:relative;z-index:2;font:600 15px/1 'Playfair Display',Georgia,serif;color:#fff1da;letter-spacing:.5px;transition:opacity .2s}.gift-opening .seal-half{position:absolute;inset:0;background:radial-gradient(circle at 38% 32%,#e46b80,#8e1f33 70%);box-shadow:0 4px 10px #0006,inset 0 0 0 4px #ffffff22;transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .45s}.gift-opening .seal-half.left{clip-path:polygon(0 0,54% 0,44% 38%,56% 62%,46% 100%,0 100%);border-radius:50%}.gift-opening .seal-half.right{clip-path:polygon(54% 0,100% 0,100% 100%,46% 100%,56% 62%,44% 38%);border-radius:50%}.opening-envelope:not(:active) .wax-seal{animation:seal-pulse 2.2s ease-in-out infinite}
@keyframes seal-pulse{50%{transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 0 12px #f2d58399)}}.opening-hint{margin:6px 0 0;font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.7}.opening-skip{position:absolute;right:20px;bottom:20px;padding:10px 16px;border:1px solid #f8e8d055;border-radius:999px;background:transparent;color:#f8e8d0;font:500 12px 'DM Sans',sans-serif;cursor:pointer}.opening-skip:focus-visible{outline:3px solid #f2d583;outline-offset:3px}/* Opening sequence,driven by two classes. */
.gift-opening.is-opening .opening-envelope{animation:none}.gift-opening.is-opening .wax-seal{animation:none}.gift-opening.is-opening .wax-seal b{opacity:0}.gift-opening.is-opening .seal-half.left{transform:translate(-26px,30px) rotate(-35deg);opacity:0}.gift-opening.is-opening .seal-half.right{transform:translate(26px,34px) rotate(32deg);opacity:0}.gift-opening.is-opening .envelope-flap{transform:rotateX(180deg);z-index:1}.gift-opening.is-opening .envelope-card{transform:translateY(-62%);opacity:1}.gift-opening.is-opening .opening-hint{opacity:0;transition:opacity .3s}.gift-opening.is-leaving{opacity:0;transform:scale(1.08)}

@media (prefers-reduced-motion:reduce){.opening-sky i,.opening-envelope,.gift-opening .wax-seal{animation:none!important}.gift-opening,.gift-opening .envelope-flap,.gift-opening .envelope-card,.gift-opening .seal-half{transition:none}}/* The portal's main action sits right under the title,before anything else. */
body.is-sealed{overflow:hidden}.portal-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:22px 0 26px}.portal-play{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px 0 22px;border:0;border-radius:999px;background:#b34c60;color:#fffaf6;font:700 16px 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 12px 26px #b34c6044;transition:transform .2s,box-shadow .2s}.portal-play span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fffaf6;color:#b34c60;font-size:12px;padding-left:2px}.portal-play:hover{transform:translateY(-2px);box-shadow:0 16px 30px #b34c6055}.portal-play:focus-visible{outline:3px solid #f2d583;outline-offset:4px}.portal-cta small{font-size:12px;color:#89656b}
@media (max-width:760px){.portal-header>span{display:none}.portal-intro .portal-cover{min-height:360px}.portal-cta{margin:18px 0 22px}.portal-play{width:100%;justify-content:center}.portal-cta small{width:100%;text-align:center}}.opening-from,.opening-title{transition:opacity .45s ease .55s,transform .45s ease .55s}.gift-opening.is-opening .opening-from,.gift-opening.is-opening .opening-title{opacity:0;transform:translateY(-24px)}/* The YouTube soundtrack player: present on the page but not seen (see youtube-soundtrack.mjs). */
.youtube-soundtrack{position:fixed;left:0;bottom:0;width:200px;height:200px;opacity:0;pointer-events:none;clip-path:inset(50%);z-index:2147483647}.youtube-soundtrack.is-visible{opacity:1;clip-path:none;z-index:50;left:12px;bottom:12px;border-radius:12px;overflow:hidden;pointer-events:auto;box-shadow:0 12px 30px #0006}/* Album: a floating sound button while the book is open. */
.album-sound{position:fixed;z-index:60;right:18px;bottom:18px;display:flex;align-items:center;gap:10px;max-width:min(260px,calc(100vw - 36px));min-height:48px;padding:6px 16px 6px 6px;border:1px solid #e7cfc6;border-radius:999px;background:#fffaf6;color:#482832;font:600 13px 'DM Sans',sans-serif;box-shadow:0 10px 26px #4a222c26;cursor:pointer}.album-sound[hidden]{display:none}.album-sound span{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#b34c60;color:#fffaf6;font-size:15px}.album-sound small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.album-sound[aria-pressed="true"] span{animation:sound-pulse 1.6s ease-in-out infinite}
@keyframes sound-pulse{50%{box-shadow:0 0 0 7px #b34c6026}}.album-sound:focus-visible{outline:3px solid #b34c60;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.album-sound[aria-pressed="true"] span{animation:none}}