/* the invitation stage, fixed behind the pinned journey; the card sits left of the RTL captions (portrait: above them).
   No preserve-3d on .scene, so plain z-index stacks the card between the envelope's back and its front pocket. */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.stage.off{visibility:hidden}
.scene{--ch:min(68vh,42rem);position:absolute;height:var(--ch);aspect-ratio:5/7;left:calc(30vw - var(--ch) * 5 / 14);top:calc(50% - var(--ch) / 2 + 2rem);transition:height .7s var(--ease),top .7s var(--ease),left .7s var(--ease)}
@media (max-aspect-ratio:1/1){.scene{--ch:min(46vh,118vw);left:calc(50% - var(--ch) * 5 / 14);top:10vh}.is-cfg .scene{--ch:40vh;top:8.5vh}}

/* envelope: kraft-cream back, front pocket with a V, flap that folds up, their logo as the seal */
.env{position:absolute;left:-7%;right:-7%;top:14%;height:76%;display:block;will-change:transform,opacity}
.env__back{z-index:2;border-radius:.9rem;background:#e7d7c3;box-shadow:0 50px 90px -45px #2b1a3d99}
.env__pocket{z-index:5;border-radius:0 0 .9rem .9rem;background:linear-gradient(170deg,#f7eee2,#ecdcc8);clip-path:polygon(0 34%,50% 66%,100% 34%,100% 100%,0 100%)}
.env__pocket::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 60%,#2b1a3d0d)}
.env__flap{z-index:6;height:calc(76% * .62);background:linear-gradient(180deg,#f2e5d4,#e6d4bd);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0}
.seal{position:absolute;z-index:8;top:calc(14% + 76% * .62 - 1.6rem);left:35%;width:30%;height:auto;padding:.45rem .7rem;border-radius:99px;background:#fff;box-shadow:0 10px 24px -10px #2b1a3d88;will-change:transform,opacity}

/* the card: two faces on one turning plate */
.card{position:absolute;inset:0;z-index:3;perspective:1400px;will-change:transform,opacity}
.turn{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.face,.mini{background:#fff;container-type:size;overflow:hidden}
.face{position:absolute;inset:0;border-radius:1.1rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 34px 70px -34px #2b1a3daa}
.face--back{transform:rotateY(180deg)}

/* the invitation itself, sized in card units (cqh) so the minis are the same design, smaller */
.inv{--m:color-mix(in srgb,var(--c) 20%,transparent);position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:1.3cqh;padding:7cqh 9cqw;text-align:center;color:var(--ink);background-color:#fff}
.inv::before{content:"";position:absolute;inset:3cqh;border:.45cqh solid var(--c);border-radius:2cqh;pointer-events:none}
.inv::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 58% at 50% 52%,#fff 62%,#fff0 100%)}
.inv>*{position:relative;z-index:1}
.inv__kick{font:600 6.2cqh/1 var(--f-d);color:var(--c)}
.inv__pic{position:relative;width:44cqh;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 .7cqh #fff,0 0 0 1.2cqh var(--c);margin-block:1.4cqh .6cqh}
.inv__pic img{width:100%;height:100%;object-fit:contain;padding:3.4cqh;border-radius:50%}
.inv__pic.cover img{object-fit:cover;padding:0}
.inv__age{position:absolute;left:-1.5cqh;bottom:-.5cqh;display:grid;place-items:center;width:14cqh;height:14cqh;border-radius:50%;background:var(--c);color:#fff;font:600 7.5cqh/1 var(--f-d);box-shadow:0 0 0 .8cqh #fff}
.inv__day{font:500 3cqh/1 var(--f-t);letter-spacing:.08em;color:var(--ink-2)}
.inv__name{font:600 8.4cqh/1.05 var(--f-d);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv__name.ph{font-size:6cqh}
.inv__theme{font:500 3.5cqh/1.25 var(--f-t)}
.inv__theme em{color:var(--c)}
.inv__when{min-width:62%;padding-top:1.4cqh;border-top:.3cqh dashed var(--m);font:300 3cqh/1.3 var(--f-t);color:var(--ink-2)}
.inv__by img{height:4.2cqh;width:auto;margin-top:.4cqh}
.inv .ph{opacity:.4}
/* one pattern per world: dots, stripes, sparkles, halftone, scales, bands, gingham, hopscotch checks */
.p0{background-image:radial-gradient(var(--m) 1.1cqh,transparent 1.2cqh);background-size:8cqh 8cqh}
.p1{background-image:repeating-linear-gradient(135deg,var(--m) 0 1.6cqh,transparent 1.6cqh 4.6cqh)}
.p2{background-image:radial-gradient(var(--m) .5cqh,transparent .6cqh),radial-gradient(var(--m) .9cqh,transparent 1cqh);background-size:7cqh 7cqh;background-position:0 0,3.5cqh 3.5cqh}
.p3{background-image:radial-gradient(var(--m) 32%,transparent 34%);background-size:3.6cqh 3.6cqh}
.p4{background-image:radial-gradient(circle at 50% 0,transparent 2.5cqh,var(--m) 2.6cqh 3cqh,transparent 3.1cqh);background-size:6cqh 3.4cqh}
.p5{background-image:repeating-linear-gradient(0deg,var(--m) 0 1.1cqh,transparent 1.1cqh 3.8cqh)}
.p6{background-image:linear-gradient(90deg,var(--m) 50%,transparent 50%),linear-gradient(var(--m) 50%,transparent 50%);background-size:6cqh 6cqh}
.p7{background-image:conic-gradient(var(--m) 25%,transparent 0 50%,var(--m) 0 75%,transparent 0);background-size:8cqh 8cqh}

/* the other 18, small */
.minis{position:absolute;inset:0;visibility:hidden}
.mini{position:absolute;left:0;top:0;width:clamp(5.5rem,8.5vw,8.5rem);aspect-ratio:5/7;border-radius:.6rem;box-shadow:0 18px 30px -18px #2b1a3d88;will-change:transform,opacity}
@media (max-aspect-ratio:1/1){.mini{width:21vw}}