.env{display:none}html.env-armed .env{display:grid;align-content:center;justify-items:center;gap:clamp(1.25rem,4vh,2rem)}html.env-armed body{overflow:hidden}.env{position:fixed;inset:0;z-index:200;background:var(--ivory);cursor:pointer;perspective:1600px;transition:opacity .7s var(--ease);--flap-time: 1.5s;--flap-ease: cubic-bezier(.37, 0, .63, 1);--flap-turn: calc(var(--flap-time) * .52)}.env[data-state=done]{opacity:0;pointer-events:none}.env{isolation:isolate}.env-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}.env.env-3d .env-stage{opacity:0;touch-action:none;cursor:grab}.env-stage{position:relative;width:min(74vw,20rem);aspect-ratio:3 / 4;transform-style:preserve-3d;transform:rotateY(calc(var(--mx, 0) * 24deg)) rotateX(calc(var(--my, 0) * -24deg));transition:transform .12s linear}@media(min-width:48rem){.env-stage{width:clamp(19rem,40svh,27rem)}}.env{--paper: #f1ede3;--grain: url(/paper-grain.webp);--grain-size: auto 150px;--crease: rgba(104, 92, 72, .3)}.env-flap-face,.env-fold{background-color:var(--paper);background-image:var(--grain);background-size:var(--grain-size);background-blend-mode:multiply}.env-back,.env-front,.env-flap{position:absolute;inset-inline:0;transition:opacity .5s var(--ease)}.env-back{top:0;bottom:0;border-radius:3px;background-image:url(/pattern-liner.webp);background-size:auto 110px;box-shadow:inset 0 0 36px #4f4a4038,0 0 0 1px var(--gilt-wash),0 2px 4px #4f4a4029,0 24px 60px #4f4a402e;transform:translateZ(0)}.env-front{top:0;bottom:0;transform:translateZ(2px)}.env-fold{position:absolute;inset:0;border-radius:0 0 3px 3px}.env-fold-left{clip-path:polygon(0 0,51% 50%,0 100%);filter:brightness(1.012) drop-shadow(1px 0 1.5px var(--crease))}.env-fold-right{clip-path:polygon(100% 0,49% 50%,100% 100%);filter:brightness(.986) drop-shadow(-1px 0 1.5px var(--crease))}.env-fold-base{clip-path:polygon(0 100%,0 73%,29% 48%,71% 48%,100% 73%,100% 100%);filter:brightness(1.004) drop-shadow(0 -1.5px 2.5px var(--crease))}.env-flap{top:0;height:50%;transform-origin:top center;transform:translateZ(3px) rotateX(0);transition:transform var(--flap-time) var(--flap-ease)}.env-flap-face{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,51.6% 97%,48.4% 97%);filter:brightness(1.009) drop-shadow(0 2px 4px var(--crease));transition:background-color 0s var(--flap-turn),background-image 0s var(--flap-turn),filter 0s var(--flap-turn),box-shadow 0s var(--flap-turn)}.env:not([data-state=sealed]) .env-flap{transform:translateZ(-1px) rotateX(-178deg)}.env:not([data-state=sealed]) .env-flap-face{background-color:#e4d3b0;background-image:url(/pattern-liner.webp);background-size:auto 96px;background-blend-mode:normal;filter:none;box-shadow:inset 0 0 34px #4f4a4042}.env-seal{position:absolute;left:50%;bottom:0;width:4.7rem;height:auto;transform:translate(-50%,50%);filter:drop-shadow(0 2px 3px rgba(74,48,42,.42))}.env-seal-hinge{position:absolute;top:0;inset-inline:0;height:50%;z-index:4;pointer-events:none;transform-origin:top center;transform:translateZ(4px) rotateX(0);transition:transform var(--flap-time) var(--flap-ease),opacity 0s var(--flap-turn)}.env:not([data-state=sealed]) .env-seal-hinge{transform:translateZ(-2px) rotateX(-178deg);opacity:0}.env-card{position:absolute;inset:4% 4% auto;margin:0;z-index:2;transform:translateZ(1px);transition:transform 2s var(--flap-ease)}.env-card img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 10px 30px #4f4a4038}.env[data-state=rising] .env-card{transform:translate3d(0,-50%,1px)}.env[data-state=showing] .env-card,.env[data-state=done] .env-card{transform:translate3d(0,var(--centre, -62%),1px) scale(var(--grow, 1.6));transition:transform 1.15s var(--ease)}.env[data-state=showing] .env-stage,.env[data-state=done] .env-stage{transform:rotateY(calc(var(--mx, 0) * 12deg)) rotateX(calc(var(--my, 0) * -12deg))}.env[data-state=showing] .env-back,.env[data-state=showing] .env-front,.env[data-state=showing] .env-flap,.env[data-state=done] .env-back,.env[data-state=done] .env-front,.env[data-state=done] .env-flap{opacity:0}.env-hint{margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);animation:hint 2.8s ease-in-out infinite}@keyframes hint{0%,to{opacity:.45}50%{opacity:1}}html.env-unsealed .env[data-state=sealed] .env-hint{visibility:hidden}.env:not([data-state=sealed]) .env-hint{opacity:0;animation:none;transition:opacity .3s var(--ease)}.env[data-state=showing] .env-hint{position:fixed;left:50%;bottom:max(1.1rem,env(safe-area-inset-bottom));z-index:3;transform:translate(-50%);opacity:1;animation:hint 2.8s ease-in-out .6s infinite;transition:opacity .6s var(--ease) .5s}.env[data-state=showing] .env-hint{white-space:nowrap}.env[data-state=showing] .env-skip,.env[data-state=done] .env-skip{display:none}.env-skip{position:absolute;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));padding:.5rem .9rem;border:0;background:none;color:var(--muted);font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;cursor:pointer}.env-skip:hover{color:var(--ink)}@media(prefers-reduced-motion:reduce){html.env-armed .env{display:none}html.env-armed body{overflow:auto}}
