/* One tangible envelope: the wax, fold, pocket and letter move separately. */
.storybook .intro .envelope{perspective:1400px;animation:owl-post-hover 9s ease-in-out infinite;filter:drop-shadow(0 22px 25px #0008)}
.storybook .envelope-art{transition:none}
.storybook .envelope-lining{z-index:0;opacity:1;clip-path:inset(42.3% 0 0 0);transform:translateY(-8%) scale(1.05);transform-origin:50% 100%}
.storybook .envelope-shell{z-index:3;clip-path:polygon(7% 32.2%,7% 87%,93% 87%,93% 32.2%,91.5% 38.5%,85% 45%,67% 61%,50% 72.5%,33% 61%,15% 45%,8.5% 38.5%);mask-image:radial-gradient(ellipse 8.5% 11.5% at 49.8% 69.3%,transparent 98%,#000 100%)}
.envelope-flap{position:absolute;inset:0;z-index:5;transform-origin:50% 32.2%;transform-style:preserve-3d;pointer-events:none}
.flap-face{position:absolute;inset:0;backface-visibility:hidden;transform-origin:50% 32.2%}
.flap-front img{clip-path:polygon(7% 32.2%,93% 32.2%,91.5% 38.5%,85% 45%,67% 61%,50% 72.5%,33% 61%,15% 45%,8.5% 38.5%);mask-image:radial-gradient(ellipse 8.5% 11.5% at 49.8% 69.3%,transparent 98%,#000 100%)}
.flap-back{transform:rotateX(180deg)}
.flap-back img{clip-path:inset(0 0 57.7% 0);transform:translateY(-8%) scale(1.05);transform-origin:50% 100%}
.storybook .envelope-pocket{z-index:4;opacity:0;transition:none}
.wax-piece{position:absolute;inset:0;z-index:7;background:url('assets/envelope-closed.png') center/contain no-repeat;mask-image:radial-gradient(ellipse 8.5% 11.5% at 49.8% 69.3%,#000 98%,transparent 100%);pointer-events:none;transform-origin:49.8% 69.3%}
.wax-left{clip-path:polygon(0 0,50% 0,50% 61%,49% 65%,51% 69%,49.5% 73%,50.5% 78%,50% 100%,0 100%)}
.wax-right{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,50.5% 78%,49.5% 73%,51% 69%,49% 65%,50% 61%)}
.storybook .intro .seal,.storybook .intro.opening .seal{top:69.3%;z-index:9;animation:none;box-shadow:none;opacity:1;transform:translate(-50%,-50%);transition:box-shadow .25s}
.storybook .intro .seal:hover{box-shadow:0 0 30px #d8b56b35}
.storybook .intro.opening .seal{pointer-events:none}
.spell-sparks{position:absolute;left:49.8%;top:69.3%;z-index:8;pointer-events:none}
.spell-sparks i{position:absolute;display:block;width:3px;height:3px;border-radius:50%;background:#ffe8b7;box-shadow:0 0 8px #ecc271;opacity:0}
.spell-sparks i:nth-child(1){--spark-x:-32px;--spark-y:-24px}
.spell-sparks i:nth-child(2){--spark-x:28px;--spark-y:-30px}
.spell-sparks i:nth-child(3){--spark-x:-40px;--spark-y:10px}
.spell-sparks i:nth-child(4){--spark-x:36px;--spark-y:15px}
.spell-sparks i:nth-child(5){--spark-x:5px;--spark-y:-42px}
.storybook .intro .letter{--letter-rise:-175px;z-index:2;opacity:0;transform:translateY(14px);transition:none;font-size:1.25rem;box-shadow:0 8px 14px #39220e30;will-change:transform}
.storybook .intro.opening .envelope{animation:envelope-settle 3.55s cubic-bezier(.22,1,.36,1) both}
.storybook .intro.opening .wax-left{animation:wax-left-fall .85s cubic-bezier(.4,0,.8,.4) both}
.storybook .intro.opening .wax-right{animation:wax-right-fall .9s .03s cubic-bezier(.4,0,.8,.4) both}
.storybook .intro.opening .spell-sparks i{animation:seal-spark .8s .05s ease-out both}
.storybook .intro.opening .envelope-shell{animation:shell-withdraw .24s .66s both}
.storybook .intro.opening .envelope-flap{animation:flap-unfold 1.4s .5s cubic-bezier(.45,0,.2,1) both}
.storybook .intro.opening .flap-front{animation:fold-light 1.4s .5s ease-in-out both}
.storybook .intro.opening .envelope-pocket{animation:pocket-arrive .2s .72s both}
.storybook .intro.opening .letter{animation:letter-slide 2.1s 1.45s cubic-bezier(.22,1,.36,1) both;box-shadow:0 10px 22px #2d1c1430}
.storybook .intro.opening:before{animation:library-approach 5.65s cubic-bezier(.22,1,.36,1) both}
.storybook .intro.departing{transform:scale(1.04);transition:opacity .95s ease,visibility .95s,transform .95s ease}
@keyframes owl-post-hover{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-5px) rotate(.4deg)}}
@keyframes envelope-settle{0%{transform:translateY(0) rotate(-.6deg)}18%{transform:translateY(5px) rotate(-.3deg)}55%{transform:translateY(24px) rotate(0)}100%{transform:translateY(40px) rotate(0)}}
@keyframes wax-left-fall{0%{opacity:1;transform:none}18%{opacity:1;transform:translate(-3px,2px) rotate(-4deg)}68%{opacity:1;transform:translate(-20px,50px) rotate(-18deg)}100%{opacity:0;transform:translate(-35px,130px) rotate(-30deg)}}
@keyframes wax-right-fall{0%{opacity:1;transform:none}18%{opacity:1;transform:translate(3px,2px) rotate(4deg)}68%{opacity:1;transform:translate(25px,60px) rotate(20deg)}100%{opacity:0;transform:translate(45px,145px) rotate(38deg)}}
@keyframes seal-spark{0%{opacity:0;transform:scale(.2)}20%{opacity:.8}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.3)}}
@keyframes shell-withdraw{0%{opacity:1}100%{opacity:0}}
@keyframes pocket-arrive{0%{opacity:0}100%{opacity:1}}
@keyframes flap-unfold{0%{transform:rotateX(0);z-index:5}45%{z-index:5}55%{z-index:1}100%{transform:rotateX(180deg);z-index:1}}
@keyframes fold-light{0%,100%{filter:brightness(1)}50%{filter:brightness(.72)}}
@keyframes letter-slide{0%{opacity:0;transform:translateY(14px) rotate(0)}8%{opacity:1}85%{opacity:1;transform:translateY(calc(var(--letter-rise) - 4px)) rotate(-1.2deg)}100%{opacity:1;transform:translateY(var(--letter-rise)) rotate(-1.2deg)}}
@keyframes library-approach{0%{transform:scale(1.03)}100%{transform:scale(1.09)}}
@media(max-width:600px){.storybook .intro .letter{--letter-rise:-120px;font-size:1rem}}
@media(max-height:550px) and (min-width:601px){.storybook .intro .envelope{width:min(450px,80vw)}.storybook .intro .letter{--letter-rise:-120px;padding:16px 10px}.storybook .intro .letter strong{font-size:1.8rem;margin:8px 0}.storybook .intro .letter>span:last-child{font-size:1rem}.storybook .intro-note{font-size:1.3rem}.storybook .intro .eyebrow{margin-bottom:0}.storybook .intro .text-button{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.storybook .intro .envelope,.storybook .intro.opening .envelope,.storybook .intro.opening:before{animation:none;transform:none}.storybook .intro.departing{transform:none}.storybook .intro.opening .wax-piece,.storybook .intro.opening .spell-sparks i{display:none}.storybook .intro .letter{will-change:auto}}