/* The cover and every portfolio section share one stationary photograph. */
body{background:#edf3e8!important;background-image:none!important}
body::before{content:""!important;display:block!important;position:fixed!important;inset:0!important;z-index:0!important;background:#dce9df url("assets/window-meadow.jpg") center 67%/cover no-repeat!important;opacity:1!important;filter:none!important;transform:none!important;animation:none!important;transition:none!important;pointer-events:none}
.cover-sky,.cover-sky.motion-target,.cover-sky.motion-target.motion-in-view,.cover-grain,.meadow{transform:none!important;translate:none!important;scale:1!important;animation:none!important;transition:none!important}
.cover-sky{opacity:1!important;filter:none!important}

/* A fixed envelope pocket, raised flap, and a short sheet of plain stationery. */
.software-envelope{--pocket-height:200px;position:relative;isolation:isolate;display:block;width:min(100%,560px);height:460px;margin:6px auto 0;padding:0;border:0;border-radius:5px;background:transparent;color:#51485a;font:inherit;text-align:center;cursor:pointer;appearance:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.software-envelope:focus-visible{outline:2px solid #80917b;outline-offset:7px}
.software-envelope:active .se-pocket{filter:drop-shadow(0 6px 9px #51483b25)}
.se-body{position:absolute;z-index:0;left:0;right:0;bottom:12px;height:var(--pocket-height);border:1px solid #bfa7a0;border-radius:6px;background:#dec6c1;box-shadow:0 13px 24px #50423825,0 2px 4px #50423818}
.se-flap{position:absolute;z-index:5;left:0;width:100%;height:120px;bottom:calc(var(--pocket-height) + 12px);overflow:visible;transform-origin:center bottom;transform:perspective(900px) rotateX(-180deg);transition:transform .5s cubic-bezier(.22,.7,.24,1) .78s,z-index 0s linear .78s;filter:drop-shadow(0 -1px 1px #4d3e3414)}
.se-paper{position:absolute;z-index:2;left:6%;right:6%;height:180px;bottom:40px;box-sizing:border-box;border:1px solid #d6d0c4;border-radius:2px;background:#fffefa;box-shadow:0 -2px 7px #554b3b16;transform:translateY(20px);transition:transform .55s cubic-bezier(.22,.7,.24,1) .2s;overflow:hidden}
.se-paper-line{display:block;width:62%;height:1px;margin:24px auto 0;background:#e1dcd2}
.se-paper-line+ .se-paper-line{width:43%;margin-top:9px}
.se-pocket{position:absolute;z-index:3;left:0;width:100%;bottom:12px;height:var(--pocket-height);overflow:visible;filter:drop-shadow(0 2px 2px #51483b13);transition:filter .2s ease}
.se-tools{position:absolute;z-index:4;inset:6px 4% auto;height:248px;pointer-events:none}
.se-tool{position:absolute;display:flex;width:28%;height:78px;align-items:center;flex-direction:column;justify-content:center;gap:5px;opacity:0;transform:translateY(195px) scale(.45);transform-origin:center bottom;transition:transform .56s cubic-bezier(.22,.7,.24,1),opacity .23s ease;transition-delay:0s;will-change:transform,opacity}
.se-tool img{width:54px;height:54px;object-fit:cover;box-sizing:border-box;border:3px solid #fff;border-radius:13px;box-shadow:0 5px 10px #403a3220;flex:none}
.se-tool>span{max-width:100%;font:600 11px/1.15 var(--sans);color:#51485a}
.se-tool-0{left:3%;top:20px;--tilt:-5deg;--order:0}.se-tool-1{left:36%;top:2px;--tilt:3deg;--order:1}.se-tool-2{left:69%;top:26px;--tilt:-3deg;--order:2}.se-tool-3{left:1%;top:110px;--tilt:3deg;--order:3}.se-tool-4{left:35%;top:96px;--tilt:-2deg;--order:4}.se-tool-5{left:71%;top:119px;--tilt:4deg;--order:5}.se-tool-6{left:36%;top:185px;--tilt:-2deg;--order:6}
.se-tool-6 img{width:90px;height:34px;object-fit:contain;border-radius:5px;background:#fff}
.software-envelope.is-open .se-paper{transform:translateY(-42px);transition-delay:.3s}
.software-envelope.is-open .se-flap{z-index:1;transform:perspective(900px) rotateX(8deg);transition:transform .5s cubic-bezier(.22,.7,.24,1),z-index 0s linear .25s}
.software-envelope.is-open .se-tool{opacity:1;transform:translateY(0) scale(1) rotate(var(--tilt));transition-delay:calc(70ms + var(--order)*35ms)}
@media(max-width:760px){.software-envelope{--pocket-height:180px;height:440px;margin-top:0}.se-flap{height:105px}.se-paper{height:165px;bottom:35px}.se-tool img{width:48px;height:48px}.se-tool>span{font-size:10px}.se-tool-6 img{width:77px;height:30px}.se-tool-6{top:180px}.se-tools{inset-inline:1%}}
@media(prefers-reduced-motion:reduce){.software-envelope .se-paper,.software-envelope .se-flap,.software-envelope .se-tool{transition:none!important}}

/* The pocket physically hides the logos until they cross its opening. */
.se-tools{z-index:3;visibility:hidden}
.software-envelope.is-ready .se-tools{visibility:visible}
.se-pocket{z-index:4}
.se-tool{opacity:1;transform-origin:center;transform:translate(var(--launch-x,0px),var(--launch-y,0px)) scale(.65);transition:transform .76s cubic-bezier(.25,.65,.25,1);transition-delay:0s}
.software-envelope.is-open .se-tool{opacity:1;transform:translate(0,0) scale(1) rotate(var(--tilt));transition-delay:calc(420ms + var(--order)*45ms)}
.se-tool-6{top:163px}
@media(max-width:760px){.se-tool-6{top:163px}}