/* Gift Box opening scene — ribbon unravels, the lid floats off, a bouquet grows out.
   Ported from bloomletter-atelier-copy/studio/gift-bloom.css. Paired with gift-bloom.js,
   which wraps renderOpeningScene rather than editing app.js.

   The scene brings its own palette instead of reading themeTokens(), same as the candle
   and starfield intros: it is a designed set piece, and every colour here is chosen
   against this particular plum background. .gb-light is the light-letter variant. */
.gb-scene{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 56%,#654456,#392637 65%);color:#f6e2df;--gb-ink:#d8acbc}
/* max-width/centring added for the port: this line carries the recipient's name here,
   which the original's fixed copy did not, and a long one has to wrap rather than run
   off the edge of a phone. */
.gb-eyebrow{font:500 9px 'Jost',sans-serif;letter-spacing:.27em;margin:16px 0;text-align:center;max-width:min(90vw,420px);line-height:1.7}
.gb-scene h1{text-align:center;font:400 clamp(32px,4vw,52px)/1.05 'Cormorant Garamond',serif;margin:0;position:relative;z-index:1}
.gb-scene h1 em{display:block;font:400 clamp(44px,5vw,67px)/1.1 'Pinyon Script',cursive;color:var(--gb-ink);margin-top:6px}
.gb-present{position:relative;width:370px;height:355px;max-width:90vw;border:0;padding:0;background:transparent;cursor:pointer;isolation:isolate;flex-shrink:0;outline-offset:8px;-webkit-tap-highlight-color:transparent}
.gb-present:focus-visible{outline:2px solid #efc1cf;border-radius:30px}
.gb-present:disabled{cursor:default;opacity:1}
.gb-shadow{position:absolute;bottom:14px;left:65px;width:240px;height:20px;background:#1d122b26;border-radius:50%;filter:blur(8px)}
.gb-box-back{position:absolute;left:65px;bottom:30px;width:240px;height:152px;background:#a87188;border-radius:7px;z-index:1}
.gb-box-front{position:absolute;left:65px;bottom:30px;width:240px;height:152px;background:#dba9b7;border-radius:5px 5px 9px 9px;z-index:4;overflow:hidden;box-shadow:inset -9px 0 #bd879526,inset 0 -5px #bd879520}
.gb-box-front:before{content:'';position:absolute;inset:11px;border:1px solid #f8ddd64d;border-radius:3px;pointer-events:none}
.gb-band{position:absolute;left:103px;width:35px;height:100%;top:0;background:#eed2bc;border-inline:1px solid #f8e4cc88}
.gb-tag{position:absolute;left:143px;top:46px;width:67px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f8e6d6;color:#986978;transform:rotate(-9deg);font:26px 'Pinyon Script',cursive;clip-path:polygon(15% 0,85% 0,100% 16%,100% 100%,0 100%,0 16%);box-shadow:0 3px 6px #5c314222}
.gb-tag small{font:18px Georgia;margin-top:3px}
.gb-lid{position:absolute;left:55px;bottom:169px;width:260px;height:37px;background:#e8bec5;border-radius:6px;z-index:6;box-shadow:0 5px 0 #a66f822d,inset 0 3px #f8dbd455;transform-origin:50% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.gb-lid-band{position:absolute;left:113px;top:0;width:35px;height:100%;background:#f0d6bf}
.gb-bow{position:absolute;bottom:29px;width:67px;height:42px;border:12px solid #efd0b6;box-sizing:border-box;background:transparent;box-shadow:inset 0 -2px #b38a8030;transform-origin:100% 100%}
.gb-bow-left{left:64px;border-radius:70% 80% 20% 70%;transform:rotate(14deg)}
.gb-bow-right{left:130px;border-radius:80% 70% 70% 20%;transform-origin:0 100%;transform:rotate(-14deg)}
.gb-knot{position:absolute;left:118px;bottom:29px;width:25px;height:25px;background:#e4bc9f;border-radius:45%;z-index:2}
.gb-present:not(:disabled):hover .gb-lid{transform:translateY(-5px) rotate(-2deg)}
.gb-box-back:before{content:'';position:absolute;left:0;right:0;top:-12px;height:24px;border-radius:50%;background:#724455;box-shadow:inset 0 4px 0 #b88396;border:3px solid #dba9b7;box-sizing:border-box}
.gb-bouquet{position:absolute;left:calc(50% - 250px);bottom:132px;width:500px;height:350px;z-index:3;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 80%,74% 80%,74% 86%,26% 86%,26% 80%,0 80%)}
.gb-stem{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:translateY(260px);transform-origin:50% 86%}
.gb-stem svg{width:100%;height:100%;overflow:visible}
.gb-petals{transform-origin:0 0;transform:scale(.6)}
.gb-hint{font:12px 'Jost',sans-serif;color:var(--gb-ink);margin:13px 0 0;z-index:8}
.gb-signature{font:22px 'Pinyon Script',cursive;color:var(--gb-ink);margin:16px 0 20px}
.gb-loose-petal{position:absolute;left:50%;bottom:180px;width:13px;height:22px;background:var(--petal);border-radius:80% 15% 80% 20%;opacity:0;z-index:7;pointer-events:none}
.gb-opening .gb-bow-left{animation:gb-unravel-left .9s ease-in-out both}
.gb-opening .gb-bow-right{animation:gb-unravel-right .9s .1s ease-in-out both}
.gb-opening .gb-knot{animation:gb-knot-away .7s .25s both}
.gb-opening .gb-lid{animation:gb-lift 3.2s .55s cubic-bezier(.22,.7,.24,1) both}
.gb-opening .gb-stem{animation:gb-grow 2.4s var(--delay) cubic-bezier(.22,.68,.26,1) both}
.gb-opening .gb-petals{animation:gb-petal-open 2s var(--delay) cubic-bezier(.22,.68,.26,1) both}
.gb-opening .gb-flower{animation:gb-flower-sway 2.4s calc(2.4s + var(--sway)) ease-in-out infinite alternate;transform-origin:0 70px}
.gb-opening .gb-loose-petal{animation:gb-scatter 2.8s var(--delay) ease-out both}
.gb-opening .gb-band{animation:gb-band-away 1.25s .25s ease-in-out both}
.gb-opening h1{animation:gb-heading-away .8s .65s both}
.gb-opening .gb-present{animation:gb-finale .75s 5.95s ease-in both}
.gb-opening .gb-hint,.gb-opening .gb-signature{animation:gb-heading-away .7s 5.85s both}
@keyframes gb-unravel-left{40%{transform:translate(-12px,-5px) rotate(-10deg)}to{transform:translate(-78px,26px) rotate(-68deg) scale(.4);opacity:0}}
@keyframes gb-unravel-right{40%{transform:translate(12px,-5px) rotate(10deg)}to{transform:translate(78px,26px) rotate(68deg) scale(.4);opacity:0}}
@keyframes gb-knot-away{to{transform:translateY(17px) scale(.2);opacity:0}}
@keyframes gb-lift{0%{transform:none}18%{transform:translateY(-12px) rotate(-3deg)}48%{transform:translate(-13px,-138px) rotate(-12deg);opacity:1}75%{transform:translate(45px,-192px) rotate(15deg);opacity:.8}100%{transform:translate(105px,-235px) rotate(27deg);opacity:0}}
@keyframes gb-grow{0%{opacity:1;transform:translateY(260px) scaleX(.35)}100%{opacity:1;transform:translateY(0) scaleX(1)}}
@keyframes gb-petal-open{from{transform:scale(.55) rotate(-15deg)}to{transform:scale(1.16) rotate(0deg)}}
@keyframes gb-flower-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes gb-scatter{0%{opacity:0;transform:translate(0,20px) scale(.3)}18%{opacity:.85}70%{opacity:.7}100%{opacity:0;transform:translate(var(--px),var(--py)) rotate(var(--spin)) scale(.8)}}
@keyframes gb-band-away{to{transform:translateY(155px) rotate(9deg);opacity:0}}
@keyframes gb-heading-away{to{opacity:0;transform:translateY(-12px)}}
@keyframes gb-finale{to{opacity:0;transform:translateY(-15px) scale(1.04)}}

/* Resting state for a slide the reader has ALREADY opened and then stepped back to
   (the back arrow keeps state.envOpen true). Added for the port: the original only ever
   played forward, and re-rendering it fresh would offer a sealed box that no longer opens.
   Here the box is gone and the bouquet simply stands, with nothing animating in. */
.gb-done .gb-shadow,.gb-done .gb-box-back,.gb-done .gb-box-front,.gb-done .gb-lid,.gb-done .gb-loose-petal{display:none}
.gb-done .gb-stem{opacity:1;transform:none}
.gb-done .gb-petals{transform:scale(1.16)}
.gb-done .gb-flower{animation:gb-flower-sway 2.4s calc(var(--sway)) ease-in-out infinite alternate;transform-origin:0 70px}
.gb-done .gb-present{cursor:default}

.gb-light{background:radial-gradient(ellipse at 50% 56%,#f8e9df,#e7d4db 70%);color:#785164;--gb-ink:#9b6c80}
.gb-still *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.gb-scene *{animation:none!important;transition:none!important}}
@media(max-height:720px){.gb-present{height:310px;transform:scale(.86);margin:-20px 0}.gb-eyebrow{margin-top:60px}.gb-scene h1{font-size:32px}.gb-scene h1 em{font-size:45px}}