/* Not My Event: enclosures (public/assets/enclosure.js). A design's own holder, its opening, and the card folded to fit.
   Body classes: enc, enc-h-<holder>, enc-o-<opening>, enc-f-<fold>. Scene classes as usual (go, out, pop, done) plus uf (the card unfolds) and grow (the real card takes over and grows).
   Only transform and opacity move. No paper textures. */

/* ================= The classic holder: the flap opens toward the guest ================= */
.enc-o-wax { --enc-flap: .3s; }
.enc .go .ev-front .f1 { animation: enc-f1 .46s cubic-bezier(.45, .05, .55, .95) var(--enc-flap, 0s) forwards; }
.enc .go .ev-back .f2 { animation: enc-f2 .5s cubic-bezier(.3, .6, .4, 1) calc(var(--enc-flap, 0s) + .44s) forwards; }
@keyframes enc-f1 { 0% { transform: rotateX(0deg); opacity: 1; } 99% { transform: rotateX(90deg); opacity: 1; } 100% { transform: rotateX(90deg); opacity: 0; } }
@keyframes enc-f2 { 0% { transform: rotateX(90deg); opacity: 1; } 100% { transform: rotateX(180deg); opacity: 1; } }
/* a soft shadow on the inside of the envelope where the flap folds back */
.enc-hinge { position: absolute; left: 0; right: 0; top: 0; height: 9%; background: linear-gradient(to bottom, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); opacity: 0; pointer-events: none; }
.enc .go .enc-hinge { animation: enc-in .3s ease calc(var(--enc-flap, 0s) + .3s) forwards; }
@keyframes enc-in { to { opacity: 1; } }

/* ================= The wax seal: one seal across the seam, in two pieces that meet along the crack ================= */
.enc-seal-wrap { position: absolute; z-index: 4; left: 0; top: 0; width: 100%; height: 60.6%; transform-origin: 50% 0; pointer-events: none; }
.enc .go .enc-seal-wrap { animation: enc-f1 .46s cubic-bezier(.45, .05, .55, .95) var(--enc-flap, 0s) forwards; } /* the piece on the flap rides with the flap */
.ws-p { --wsz: calc(var(--ew) * var(--ws, .22)); position: absolute; left: 50%; width: var(--wsz); height: var(--wsz); margin-left: calc(var(--wsz) / -2); pointer-events: none; }
.ws-up { top: 100%; margin-top: calc(var(--wsz) / -2); }
.ws-low { z-index: 4; top: 60.6%; margin-top: calc(var(--wsz) / -2); }
.ws-p > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* The crack line: hidden until the tap, and only ever on the wax (clipped inside its rim). It used to run past the seal's edge along the flap's fold
   and show before the tap (the dash trick that hid it does not hold with a non-scaling stroke): the user saw "the line" by the seal, 2026-11-10. */
.ws-crack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; clip-path: circle(35% at 50% 50%); opacity: 0; }
.enc .go .ws-crack { opacity: 1; }
.ws-crack polyline { fill: none; stroke: rgba(24, 8, 8, .6); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* until the tap the lower piece shows the WHOLE seal (on top of the other piece), so there is no seam across the wax either; the cut comes with the tap */
.enc .scene:not(.go) .ws-low { clip-path: none !important; }
/* one gentle tap: the wax gives a little, then cracks along the seam */
.enc .go .ws-p > svg:first-child { animation: ws-press .3s ease-out; }
@keyframes ws-press { 40% { transform: scale(.955); } 100% { transform: scale(1); } }
.enc .go .ws-crack polyline { animation: ws-crack .2s ease-in .08s forwards; }
@keyframes ws-crack { to { stroke-dashoffset: 0; } }
.enc .scene:not(.go) .ev-front:hover .ws-p > svg:first-child, .enc .scene:not(.go) .ev-front:focus-visible .ws-p > svg:first-child { transform: scale(1.03); transition: transform .25s ease; }

/* ================= The card: folded to fit the holder, out, centred, unfolded, grown ================= */
.enc-h-classic .card { --k-s: .435; --k-rise: .62; }
.enc-h-classic.enc-f-half .card, .enc-h-classic.enc-f-quarter .card { --k-s: .85; }
.enc .card { --k-x: calc(var(--cw) * var(--k-fx, 0) * var(--k-s)); --k-y: calc(var(--ch) * var(--k-fy, 0) * var(--k-s));
  transform: translate(var(--k-x), calc(var(--k-y) + var(--eh) * var(--k-dy, .04))) scale(var(--k-s)); }
.enc .scene.out .card { animation: enc-out .52s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes enc-out { from { transform: translate(var(--k-x), calc(var(--k-y) + var(--eh) * var(--k-dy, .04))) scale(var(--k-s)); } to { transform: translate(var(--k-x), calc(var(--k-y) - var(--eh) * var(--k-rise))) scale(var(--k-s)); } }
.enc .scene.pop .card { z-index: 5; animation: enc-pop .5s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes enc-pop { from { transform: translate(var(--k-x), calc(var(--k-y) - var(--eh) * var(--k-rise))) scale(var(--k-s)); } to { transform: translate(var(--k-x), var(--k-y)) scale(var(--k-s)); } }
.enc .scene.grow .card { animation: enc-grow .78s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes enc-grow { from { transform: translate(var(--k-x), var(--k-y)) scale(var(--k-s)); } to { transform: translate(0, 0) scale(1); } }
.enc .scene.done .card { transform: none; animation: cardfloat 7s ease-in-out infinite; }

/* While the copies are folded, the real card is hidden; at "grow" it takes over (same picture, now with its buttons) and the copies go */
.enc .scene:not(.grow) .card.folded { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
.enc .scene:not(.grow) .card.folded > :not(.fd) { visibility: hidden; }
.enc .scene:not(.grow) .card.folded::before, .enc .scene:not(.grow) .card.folded::after { visibility: hidden; }
.enc .scene.grow .card .fd { display: none; }
/* Closed, the card is inside its holder and out of sight. It is folded the moment the guest opens it (begin() in enclosure.js, before "go"),
   so the unfolded card never hangs out of the holder or sits over the words under it (the user saw exactly that on 2026-11-10) */
.enc .scene:not(.go) > .card { visibility: hidden; }

.fd { position: absolute; inset: 0; z-index: 7; perspective: calc(var(--cw) * 3.2); transform-style: preserve-3d; pointer-events: none; }
.fp { position: absolute; transform-style: preserve-3d; }
/* Each side of a panel keeps its copy of the card inside it (z-index 0 makes it its own layer; the copy is a .card, which has a z-index of its own):
   without that the printed side escaped its side of the paper and showed through the back, upside down (the user, 2026-11-10) */
.ff, .fb { position: absolute; inset: 0; z-index: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* the panel that never turns: its back is never seen */
.fd > .fp > .fb { display: none; }
.fd > .fp > .ff { box-shadow: 0 calc(var(--ew) * .025) calc(var(--ew) * .05) rgba(0, 0, 0, .32); }
/* the outside of the folded card: the plain back of the paper, lit a little from the top left */
.fb { transform: rotateX(180deg); display: grid; place-items: center; background-color: var(--fd-paper, #fbf7ee); background-image: linear-gradient(160deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .05)); }
.fb-y { transform: rotateY(180deg); }
.fb-out { position: relative; z-index: 1; padding: 8%; text-align: center; font: italic 500 calc(var(--u) * 5.4) / 1.25 var(--display, Georgia, serif); color: var(--ink, #3b2a1e); }
.fd-copy { position: absolute !important; margin: 0 !important; width: var(--cw) !important; height: var(--ch) !important; transform: none !important; animation: none !important; translate: none !important; box-shadow: none !important; z-index: 0 !important; }
.fdim { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; }
/* the crease on each panel's folded edge: a soft shadow into the fold */
.fcr { position: absolute; z-index: 1; pointer-events: none; }
.fcr-top { left: 0; right: 0; top: 0; height: calc(var(--ch) * .03); background: linear-gradient(to bottom, rgba(70, 50, 30, .18), rgba(70, 50, 30, 0)); }
.fcr-bottom { left: 0; right: 0; bottom: 0; height: calc(var(--ch) * .03); background: linear-gradient(to top, rgba(70, 50, 30, .18), rgba(70, 50, 30, 0)); }
.fcr-left { top: 0; bottom: 0; left: 0; width: calc(var(--cw) * .03); background: linear-gradient(to right, rgba(70, 50, 30, .18), rgba(70, 50, 30, 0)); }
.fcr-right { top: 0; bottom: 0; right: 0; width: calc(var(--cw) * .03); background: linear-gradient(to left, rgba(70, 50, 30, .18), rgba(70, 50, 30, 0)); }

/* The folds. Each moving panel starts folded flat (a hair in front of the one under it, so they never flicker) and turns on its crease toward the guest.
   The transform lists always match (translateZ then the turn), so the turn goes the way it should. */
.fd-half .fp-b { transform: translateZ(1px) rotateX(180deg); }
.fd-quarter .fp-tr { transform: translateZ(3px) rotateY(-180deg); }
.fd-quarter .fp-bl { transform: translateZ(1px) rotateX(180deg); }
.fd-quarter .fp-br { transform: translateZ(-1px) rotateY(180deg); } /* inside the flipped bottom-left panel: it follows the top-right one */
.fd-tri .fp-t { transform: translateZ(2px) rotateX(-180deg); }
.fd-tri .fp-b { transform: translateZ(1px) rotateX(180deg); }
.fd-gate .fp-l { transform: translateZ(1px) rotateY(180deg); }
.fd-gate .fp-r { transform: translateZ(1px) rotateY(-180deg); }
.enc .scene.uf .fd-half .fp-b { animation: fd-x1 .8s linear forwards; }
.enc .scene.uf .fd-quarter .fp-tr { animation: fd-yn3 .7s linear forwards; }
.enc .scene.uf .fd-quarter .fp-br { animation: fd-yp-1 .7s linear forwards; }
.enc .scene.uf .fd-quarter .fp-bl { animation: fd-x1 .7s linear .7s forwards; }
.enc .scene.uf .fd-tri .fp-t { animation: fd-xn2 .65s linear forwards; }
.enc .scene.uf .fd-tri .fp-b { animation: fd-x1 .65s linear .65s forwards; }
.enc .scene.uf .fd-gate .fp-l { animation: fd-yp1 .9s linear forwards; }
.enc .scene.uf .fd-gate .fp-r { animation: fd-yn1 .9s linear forwards; }
/* every turn stands upright exactly halfway through (speeding up to there, slowing down after), so the side that shows can be switched right then */
@keyframes fd-x1 { 0% { transform: translateZ(1px) rotateX(180deg); animation-timing-function: cubic-bezier(.55, .05, .7, .4); } 50% { transform: translateZ(.5px) rotateX(90deg); animation-timing-function: cubic-bezier(.3, .6, .25, 1); } 100% { transform: translateZ(0) rotateX(0deg); } }
@keyframes fd-xn2 { 0% { transform: translateZ(2px) rotateX(-180deg); animation-timing-function: cubic-bezier(.55, .05, .7, .4); } 50% { transform: translateZ(1px) rotateX(-90deg); animation-timing-function: cubic-bezier(.3, .6, .25, 1); } 100% { transform: translateZ(0) rotateX(0deg); } }
@keyframes fd-yn3 { 0% { transform: translateZ(3px) rotateY(-180deg); animation-timing-function: cubic-bezier(.55, .05, .7, .4); } 50% { transform: translateZ(1.5px) rotateY(-90deg); animation-timing-function: cubic-bezier(.3, .6, .25, 1); } 100% { transform: translateZ(0) rotateY(0deg); } }
@keyframes fd-yp-1 { 0% { transform: translateZ(-1px) rotateY(180deg); animation-timing-function: cubic-bezier(.55, .05, .7, .4); } 50% { transform: translateZ(-.5px) rotateY(90deg); animation-timing-function: cubic-bezier(.3, .6, .25, 1); } 100% { transform: translateZ(0) rotateY(0deg); } }
@keyframes fd-yp1 { 0% { transform: translateZ(1px) rotateY(180deg); animation-timing-function: cubic-bezier(.55, .05, .7, .4); } 50% { transform: translateZ(.5px) rotateY(90deg); animation-timing-function: cubic-bezier(.3, .6, .25, 1); } 100% { transform: translateZ(0) rotateY(0deg); } }
@keyframes fd-yn1 { 0% { transform: translateZ(1px) rotateY(-180deg); animation-timing-function: cubic-bezier(.55, .05, .7, .4); } 50% { transform: translateZ(.5px) rotateY(-90deg); animation-timing-function: cubic-bezier(.3, .6, .25, 1); } 100% { transform: translateZ(0) rotateY(0deg); } }
/* Which side of a turning panel shows is also set outright, so it never depends on how a browser hides the back of a turned element:
   folded, a panel shows the plain back of the paper; at the moment it stands upright it switches to its printed side.
   The one exception is the bottom-right quarter, folded twice: printed side toward the guest (under the top-right quarter), then its back once its
   own turn is halfway (25% of the 1.4 s), then printed again once the bottom half's turn is halfway (75%). */
.fd-half .fp-b > .ff, .fd-quarter .fp-tr > .ff, .fd-quarter .fp-bl > .ff, .fd-quarter .fp-br > .fb, .fd-tri .fp-t > .ff, .fd-tri .fp-b > .ff, .fd-gate .fp-l > .ff, .fd-gate .fp-r > .ff { opacity: 0; }
.enc .scene.uf .fd-half .fp-b > .ff { animation: fd-on .8s forwards; }
.enc .scene.uf .fd-half .fp-b > .fb { animation: fd-off .8s forwards; }
.enc .scene.uf .fd-quarter .fp-tr > .ff { animation: fd-on .7s forwards; }
.enc .scene.uf .fd-quarter .fp-tr > .fb { animation: fd-off .7s forwards; }
.enc .scene.uf .fd-quarter .fp-bl > .ff { animation: fd-on .7s .7s forwards; }
.enc .scene.uf .fd-quarter .fp-bl > .fb { animation: fd-off .7s .7s forwards; }
.enc .scene.uf .fd-quarter .fp-br > .ff { animation: fd-br-f 1.4s forwards; }
.enc .scene.uf .fd-quarter .fp-br > .fb { animation: fd-br-b 1.4s forwards; }
.enc .scene.uf .fd-tri .fp-t > .ff { animation: fd-on .65s forwards; }
.enc .scene.uf .fd-tri .fp-t > .fb { animation: fd-off .65s forwards; }
.enc .scene.uf .fd-tri .fp-b > .ff { animation: fd-on .65s .65s forwards; }
.enc .scene.uf .fd-tri .fp-b > .fb { animation: fd-off .65s .65s forwards; }
.enc .scene.uf .fd-gate .fp-l > .ff { animation: fd-on .9s forwards; }
.enc .scene.uf .fd-gate .fp-l > .fb { animation: fd-off .9s forwards; }
.enc .scene.uf .fd-gate .fp-r > .ff { animation: fd-on .9s forwards; }
.enc .scene.uf .fd-gate .fp-r > .fb { animation: fd-off .9s forwards; }
@keyframes fd-on { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes fd-off { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fd-br-f { 0%, 24.9% { opacity: 1; } 25%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes fd-br-b { 0%, 24.9% { opacity: 0; } 25%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
/* a turning panel is shaded by its angle: its outside darkens as it stands up, its printed side brightens as it comes down flat */
.enc .scene.uf .fd-half .fp-b > .ff > .fdim, .enc .scene.uf .fd-quarter :is(.fp-tr, .fp-br) > .ff > .fdim, .enc .scene.uf .fd-gate :is(.fp-l, .fp-r) > .ff > .fdim { animation: fd-dimf .8s ease forwards; }
.enc .scene.uf .fd-half .fp-b > .fb > .fdim, .enc .scene.uf .fd-quarter :is(.fp-tr, .fp-br) > .fb > .fdim, .enc .scene.uf .fd-gate :is(.fp-l, .fp-r) > .fb > .fdim { animation: fd-dimb .8s ease forwards; }
.enc .scene.uf .fd-quarter .fp-bl > .ff > .fdim, .enc .scene.uf .fd-tri .fp-b > .ff > .fdim { animation: fd-dimf .7s ease .68s both; }
.enc .scene.uf .fd-quarter .fp-bl > .fb > .fdim, .enc .scene.uf .fd-tri .fp-b > .fb > .fdim { animation: fd-dimb .7s ease .68s both; }
.enc .scene.uf .fd-tri .fp-t > .ff > .fdim { animation: fd-dimf .65s ease forwards; }
.enc .scene.uf .fd-tri .fp-t > .fb > .fdim { animation: fd-dimb .65s ease forwards; }
@keyframes fd-dimf { 0% { opacity: .42; } 100% { opacity: 0; } }
@keyframes fd-dimb { 0% { opacity: 0; } 55% { opacity: .32; } 100% { opacity: .32; } }

/* The creases on the real card once it takes over: a line across the whole sheet, a shadow on one side and a lit edge on the other, the panels a shade apart.
   They fade away as the card grows toward the guest. */
.ecr { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ecr-h { position: absolute; left: 0; right: 0; top: var(--at); height: 0; }
.ecr-h::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--ch) * .03); background: linear-gradient(to bottom, rgba(70, 50, 30, 0), rgba(70, 50, 30, .16)); }
.ecr-h::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--ch) * .026); background: linear-gradient(to bottom, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .85) 1px, rgba(70, 50, 30, .08) 1.5px, rgba(70, 50, 30, 0)); }
.ecr-v { position: absolute; top: 0; bottom: 0; left: var(--at); width: 0; }
.ecr-v::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: calc(var(--cw) * .03); background: linear-gradient(to right, rgba(70, 50, 30, 0), rgba(70, 50, 30, .16)); }
.ecr-v::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--cw) * .026); background: linear-gradient(to right, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .85) 1px, rgba(70, 50, 30, .08) 1.5px, rgba(70, 50, 30, 0)); }
.ecr-p { position: absolute; } .ecr-p.lt { background: rgba(255, 255, 255, .06); } .ecr-p.dk { background: rgba(60, 40, 20, .05); }
.enc .scene.grow .ecr { animation: ecr-fade .85s ease .25s forwards; }
@keyframes ecr-fade { to { opacity: 0; } }

/* ================= The guide step "Your seal" ================= */
.ens { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.ens-prev svg { display: block; width: 96px; height: 96px; }
.ens-lbl { display: block; margin: 0 0 6px; font-size: 14px; }
.ens-swatches { display: grid; grid-template-columns: repeat(4, 36px); gap: 8px; margin-bottom: 12px; }
.ens-sw { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: radial-gradient(circle at 34% 30%, var(--w1), var(--w2) 58%, var(--w3)); box-shadow: 0 1px 3px rgba(0, 0, 0, .35), inset 0 -2px 3px rgba(0, 0, 0, .22); cursor: pointer; }
.ens-sw.on { border-color: #fff; box-shadow: 0 0 0 2px #e2006a, 0 1px 3px rgba(0, 0, 0, .35); }
.ens-sw:focus-visible { outline: 3px solid #e2006a; outline-offset: 2px; }
.ens-mono { box-sizing: border-box; width: 100%; max-width: 160px; min-height: 44px; padding: 6px 12px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 10px; font: 600 20px / 1 Georgia, serif; letter-spacing: .14em; }
.ens-play { margin-top: 12px; }
@media (max-width: 600px) { .ens { grid-template-columns: 72px minmax(0, 1fr); } .ens-prev svg { width: 72px; height: 72px; } }

@media (prefers-reduced-motion: reduce) {
  .enc .go .ev-front .f1, .enc .go .ev-back .f2, .enc .go .enc-seal-wrap, .enc .go .ws-crack polyline, .enc .go .ws-p > svg:first-child, .enc .go .enc-hinge,
  .enc .scene.out .card, .enc .scene.pop .card, .enc .scene.grow .card, .enc .scene.grow .ecr { animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* ================= Holders drawn by enclosure.js (body class enc-own): their size, the front pocket, the flap ================= */
/* --hw: the holder's width; --eh: its height (the cue under it follows --eh). The card's own size never changes. */
.enc-h-square .scene { --hw: calc(var(--ew) * .8); --eh: calc(var(--ew) * .8); --fl-top: 0%; --fl-h: 44%; }
/* the round holder (the pie): its lattice lid is the whole top of the pie, from the crust edge down to the seal at 68%; the pie's mouth (where the
   front crust starts and the card waits below) is at 35%. The user, 2026-11-10: the top was a flat brown cap above a band of lattice. */
.enc-h-round .scene { --hw: calc(var(--ew) * .86); --eh: calc(var(--ew) * .86); --fl-top: 0%; --fl-h: 68%; --mouth: 35%; }
.enc-own .ev-back, .enc-own .ev-front { width: var(--hw); height: var(--eh); margin: calc(var(--eh) / -2) 0 0 calc(var(--hw) / -2); }
.enc-own .ev-front > .pocket, .enc-own .ev-front > .under, .enc-own .flap { display: none; }
.enc-h-square .ev-back .body, .enc-h-square .hp { border-radius: calc(var(--ew) * .014); }
.enc-h-round .ev-back .body, .enc-h-round .hp { border-radius: 50%; }
/* the front pocket: the whole front of the holder (the card is behind it, the opening is at the top edge or at the slit) */
.hp { position: absolute; inset: 0; z-index: 0; background: var(--env-b, #ddd); box-shadow: inset 0 0 0 1px var(--edge, rgba(0, 0, 0, .25)); pointer-events: none; }
.hp-round { clip-path: inset(var(--mouth) 0 0 0); }
/* the flap: its outside on the front (it lifts toward the guest), its inside behind the card (it lies back once open) */
.hf { position: absolute; z-index: 2; left: 0; top: var(--fl-top); width: 100%; height: var(--fl-h); transform-origin: 50% 0; pointer-events: none; }
.hf-moon { left: 0; width: 100%; }
.hf-face { position: absolute; inset: 0; background: var(--flap, #ccc); }
.hf-straight .hf-face { clip-path: polygon(0 0, 100% 0, 100% 86%, 97.5% 100%, 2.5% 100%, 0 86%); }
/* the lid's shape: the top of the circle down to the mouth, then a rounded tongue down to the seal (#encLidMoon, drawn by enclosure.js) */
.hf-moon .hf-face { clip-path: url(#encLidMoon); }
.hf-o .hf-face { box-shadow: inset 0 0 0 1px var(--edge, rgba(0, 0, 0, .25)); }
.hf-edge { position: absolute; left: 3%; right: 3%; top: 100%; height: calc(var(--eh) * .04); background: linear-gradient(to bottom, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); }
.hf-moon .hf-edge { left: 22%; right: 22%; top: 95%; border-radius: 50%; }
.hf-i { z-index: 1; opacity: 0; transform: rotateX(90deg); }
.hf-i .hf-face { background: var(--flap-in, #999); }
.enc .go .hf-o { animation: enc-f1 .46s cubic-bezier(.45, .05, .55, .95) var(--enc-flap, 0s) forwards; }
.enc .go .hf-i { animation: enc-f2 .5s cubic-bezier(.3, .6, .4, 1) calc(var(--enc-flap, 0s) + .44s) forwards; }
.enc-own .enc-seal-wrap { top: var(--fl-top); height: var(--fl-h); }
.enc-own .ws-low { top: calc(var(--fl-top) + var(--fl-h)); }
.enc-own .enc-hinge { top: var(--fl-top); }
/* the card, folded to fit, and how far it rises to clear the opening */
.enc-h-square .card { --k-s: .95; --k-rise: .66; }
/* The round holder (the pie): its lid lifts off toward the guest and away. It does not fold back: folded back over the round top it made a second,
   mismatched dome, and its inside shadow ran past the circle (the user saw both, 2026-11-10). The card waits wholly below the lid's line (the pie's
   mouth), smaller and lower, so nothing of it shows above the lattice before it rises out. */
.enc-h-round .card { --k-s: .7; --k-dy: .14; --k-rise: .72; }
.enc-h-round .hf-i, .enc-h-round .enc-hinge { display: none; }
.enc-h-round .go .hf-o, .enc-h-round .go .enc-seal-wrap { animation: enc-lid .72s cubic-bezier(.4, 0, .6, 1) var(--enc-flap, 0s) forwards; }
@keyframes enc-lid { 0% { transform: translateY(0) rotateX(0deg) scale(1); opacity: 1; } 35% { transform: translateY(-10%) rotateX(16deg) scale(1.03); opacity: 1; } 100% { transform: translateY(-70%) rotateX(44deg) scale(1.08); opacity: 0; } }

/* ================= The tear strip: perforated, glued across the flap's closing edge ================= */
.enc-o-tear { --enc-flap: .66s; }
.ts { --ts-h: calc(var(--eh) * .1); position: absolute; z-index: 6; left: 0; right: 0; top: calc(var(--fl-top) + var(--fl-h) - var(--ts-h) * .55); height: var(--ts-h); pointer-events: auto; touch-action: none; cursor: grab; }
.ts-band { position: absolute; inset: 0; display: flex; }
.ts-band i { flex: 1; display: grid; place-items: center; background: var(--ts-c, #c62828); box-shadow: 0 1px 2px rgba(0, 0, 0, .28); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.4, 0, .8, .6), opacity .35s; }
.ts-band i::after { content: "›"; color: var(--ts-ink, #fff6ea); font: 700 calc(var(--ts-h) * .62) / 1 system-ui, sans-serif; opacity: .9; }
.ts-band i:first-child { border-radius: 2px 0 0 2px; } .ts-band i:last-child { border-radius: 0 2px 2px 0; }
.ts-perf { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--ts-perf, rgba(70, 35, 10, .55)); }
.ts-perf.a { top: -2px; } .ts-perf.b { bottom: -2px; }
.ts-tab { position: absolute; z-index: 1; left: calc(var(--ts-h) * -.5); top: -14%; bottom: -14%; display: flex; align-items: center; gap: .3em; padding: 0 .9em 0 1em; border-radius: 0 999px 999px 0; background: var(--ts-tab, #fff6ea); color: var(--ts-c, #c62828);
  font: 800 calc(var(--ts-h) * .44) / 1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.ts-tab b { font-size: 1.35em; }
.ts-band i.torn { transform: translate(14%, -170%) rotateZ(-16deg) rotateX(70deg); opacity: 0; }
.enc .scene:not(.go) .ts-tab { animation: ts-nudge 2.6s ease-in-out infinite; }
@keyframes ts-nudge { 0%, 72%, 100% { transform: none; } 82% { transform: translateX(8%); } 91% { transform: translateX(-2%); } }
/* one tap (or the rest of a pull): the pieces peel away from left to right, with a little curl, and the tab goes with them */
.enc .go .ts-band i:not(.torn) { animation: ts-peel .42s cubic-bezier(.4, 0, .8, .6) calc(var(--i) * 55ms) forwards; }
@keyframes ts-peel { 0% { transform: none; } 45% { transform: translateY(-35%) rotateZ(-7deg) rotateX(38deg); opacity: 1; } 100% { transform: translate(14%, -170%) rotateZ(-16deg) rotateX(70deg); opacity: 0; } }
.enc .go .ts-tab { animation: ts-tab .4s cubic-bezier(.5, 0, .9, .5) forwards; }
@keyframes ts-tab { to { transform: translate(-20%, -150%) rotate(-24deg); opacity: 0; } }
.enc .go .ts-perf { animation: ecr-fade .3s ease .62s forwards; }

@media (prefers-reduced-motion: reduce) {
  .enc .go .hf-o, .enc .go .hf-i, .enc .go .ts-band i, .enc .go .ts-tab, .enc .go .ts-perf { animation-duration: .01ms !important; animation-delay: 0s !important; }
  .enc .scene:not(.go) .ts-tab { animation: none; }
}

/* ================= The wide holder: a classic-sized envelope with a straight flap ================= */
.enc-h-wide .scene { --hw: var(--ew); --fl-top: 0%; --fl-h: 46%; }
.enc-h-wide .ev-back .body, .enc-h-wide .hp { border-radius: calc(var(--ew) * .012); }
.enc-h-wide .card { --k-s: .85; --k-rise: .7; }

/* ================= The puzzle: four interlocking pieces are the top of the holder's front. Each shifts a little to unlock, then lifts away, left to right,
   and the holder is open where they were: the front below them starts where they end, and behind them are the inside and the card. (They used to fold back
   like a flap over a solid front; the user: it should "rip apart that part of the envelope".) ================= */
.enc-o-puzzle { --enc-flap: .66s; }
.enc-o-puzzle .hf-o > .hf-face, .enc-o-puzzle .hf-i { display: none; }
.enc-o-puzzle .hp { clip-path: inset(calc(var(--fl-top) + var(--fl-h) * .86) 0 0 0); }
.enc-o-puzzle .hp::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--fl-top) + var(--fl-h) * .86); height: 1px; background: rgba(255, 255, 255, .4); }
.enc-o-puzzle .go .hf-o { animation: none; }
.enc-o-puzzle .go .hf-edge { animation: ecr-fade .3s ease forwards; }
.pz-p { position: absolute; inset: 0; transform-origin: 50% 0; transform: translate(0, 0) rotate(0deg); }
.pz-p svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pz-fill { fill: var(--flap, #ccc); }
.pz-1 .pz-fill, .pz-3 .pz-fill { fill: var(--flap-2, var(--flap, #ccc)); }
.pz-cut { fill: none; stroke: var(--pz-cut, rgba(0, 0, 0, .28)); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.enc .go .pz-0 { animation: pz-0 1s cubic-bezier(.45, .05, .4, 1) 0s forwards; }
.enc .go .pz-1 { animation: pz-1 1s cubic-bezier(.45, .05, .4, 1) .08s forwards; }
.enc .go .pz-2 { animation: pz-2 1s cubic-bezier(.45, .05, .4, 1) .16s forwards; }
.enc .go .pz-3 { animation: pz-3 1s cubic-bezier(.45, .05, .4, 1) .24s forwards; }
@keyframes pz-0 { 22%, 32% { transform: translate(-1.4%, -3%) rotate(-1.4deg); } 70% { opacity: 1; } 100% { transform: translate(-16%, -150%) rotate(-18deg); opacity: 0; } }
@keyframes pz-1 { 22%, 32% { transform: translate(-.5%, -4.5%) rotate(.8deg); } 70% { opacity: 1; } 100% { transform: translate(-6%, -175%) rotate(-7deg); opacity: 0; } }
@keyframes pz-2 { 22%, 32% { transform: translate(.5%, -4%) rotate(-.8deg); } 70% { opacity: 1; } 100% { transform: translate(6%, -170%) rotate(8deg); opacity: 0; } }
@keyframes pz-3 { 22%, 32% { transform: translate(1.4%, -3%) rotate(1.4deg); } 70% { opacity: 1; } 100% { transform: translate(16%, -150%) rotate(17deg); opacity: 0; } }

/* ================= The origami flap: the corners folded in along the diagonals (showing the paper's other side) unfold, then the sheet folds back ================= */
.enc-o-origami .ev-front .f1, .enc-o-origami .ev-back .f2 { display: none; }
.of-flap { position: absolute; z-index: 4; left: 0; top: 0; width: 100%; height: 60.6%; transform-origin: 50% 0; transform-style: preserve-3d; pointer-events: none; }
.of-p { position: absolute; inset: 0; background-color: var(--flap, #ccc); }
.of-cl { clip-path: polygon(0 0, 50% 0, 50% 100%, 40% 100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .12)); }
.of-cr { clip-path: polygon(50% 0, 100% 0, 60% 100%, 50% 100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%); }
/* the corners: the creases run at 45 degrees from the flap's top corners to 40% and 60% along its lower edge (the flap is 0.4 of the width high), so each folded
   corner lies inside the flap, as on a real origami envelope. Folded in, each shows the other side of the paper. */
.of-l { clip-path: polygon(0 0, 0 100%, 40% 100%); transform-origin: 0 0; transform: translateZ(1px) rotate3d(1, 1, 0, 180deg); background-color: var(--flap-in, #eee); background-image: linear-gradient(160deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .06)); }
.of-r { clip-path: polygon(100% 0, 100% 100%, 60% 100%); transform-origin: 100% 0; transform: translateZ(1px) rotate3d(-1, 1, 0, -180deg); background-color: var(--flap-in, #eee); background-image: linear-gradient(200deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .06)); }
.of-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.of-lines path { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.enc .go .of-l { animation: of-l .5s cubic-bezier(.45, .05, .55, .95) .05s forwards, of-face .5s linear .05s forwards; }
.enc .go .of-r { animation: of-r .5s cubic-bezier(.45, .05, .55, .95) .32s forwards, of-face .5s linear .32s forwards; }
@keyframes of-l { from { transform: translateZ(1px) rotate3d(1, 1, 0, 180deg); } to { transform: translateZ(0) rotate3d(1, 1, 0, 0deg); } }
@keyframes of-r { from { transform: translateZ(1px) rotate3d(-1, 1, 0, -180deg); } to { transform: translateZ(0) rotate3d(-1, 1, 0, 0deg); } }
@keyframes of-face { 0%, 49.9% { background-color: var(--flap-in, #eee); } 50%, 100% { background-color: var(--flap, #ccc); } }
.enc .go .of-flap { animation: enc-f1 .46s cubic-bezier(.45, .05, .55, .95) .9s forwards; }
.of-in { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 60.6%; transform-origin: 50% 0; opacity: 0; transform: rotateX(90deg); background: var(--flap-in, #eee); pointer-events: none; }
.of-in .of-lines path { stroke: rgba(0, 0, 0, .14); }
.enc .go .of-in { animation: enc-f2 .5s cubic-bezier(.3, .6, .4, 1) 1.34s forwards; }

@media (prefers-reduced-motion: reduce) {
  .enc .go .pz-p, .enc .go .of-l, .enc .go .of-r, .enc .go .of-flap, .enc .go .of-in { animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* ================= Enclosures that are not envelopes (body class enc-encl): a shell whose panels hinge open from its outer edges; the card is revealed in the middle ================= */
.enc-h-fourway .scene { --ew: min(78vw, 420px, calc(var(--H) * .5)); --hw: calc(var(--ew) * .98); --eh: calc(var(--ew) * 1.55); }
.enc-h-bloom .scene { --hw: calc(var(--ew) * .92); --eh: calc(var(--ew) * .92); }
.enc-encl .ev-back, .enc-encl .ev-front { width: var(--hw); height: var(--eh); margin: calc(var(--eh) / -2) 0 0 calc(var(--hw) / -2); }
.enc-encl .ev-front { perspective: 1000px; }
/* the shadow strip where an envelope's flap folds back has no place on a shell (it showed as a square band past the round garden: the user, 2026-11-10) */
.enc-encl .enc-hinge { display: none; }
/* the parts of panels that stay on the shell (the garden's petal rims) */
.ep-caps { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ep-cap { stroke: var(--edge, rgba(0, 0, 0, .3)); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* the garden's petals open nearly flat: less depth, so they do not swell toward the guest as they turn */
.enc-h-garden .ev-front { perspective: 2400px; }
.enc-encl .ev-front > .pocket, .enc-encl .ev-front > .under, .enc-encl .flap { display: none; }
.enc-h-fourway .ev-back .body { border-radius: calc(var(--ew) * .012); }
.enc-h-bloom .ev-back .body { border-radius: calc(var(--ew) * .05); }
/* the card waits in the middle of the shell (folded if the design folds it) and is revealed there: it does not rise out of anything */
.enc-h-fourway .card { --k-s: .88; --k-rise: 0; }
.enc-h-bloom .card { --k-s: .86; --k-rise: 0; }
/* the shell fades away (rather than dropping) once the card is free */
.enc-encl .scene.pop .ev-back, .enc-encl .scene.pop .ev-front { animation: enc-shell .6s ease forwards; }
@keyframes enc-shell { to { opacity: 0; } }

/* the panels: the shadow each casts, its outside (with a shade for its angle and its edge), its inside */
.ep, .ep-carry { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; transform-origin: var(--o); transform: var(--from); }
.ep > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ep-face, .ep-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ep-back { transform: var(--flip); }
.ep-cast { filter: blur(calc(var(--ew) * .006)); }
.ep-sh { fill: rgba(40, 28, 16, .32); }
.ep-fill { fill: var(--flap, #e8e0d4); }
.ep-t .ep-fill { fill: var(--ep-t, var(--flap, #e8e0d4)); } .ep-b .ep-fill { fill: var(--ep-b, var(--flap, #e8e0d4)); }
.ep-l .ep-fill { fill: var(--ep-l, var(--flap, #e8e0d4)); } .ep-r .ep-fill { fill: var(--ep-r, var(--flap, #e8e0d4)); }
.ep-in { fill: var(--flap-in, #d8cfc2); }
/* the inside's shade (a gradient from the crease, drawn by enclosure.js) and its thin lit edge */
.ep-inshade { stroke: none; }
.ep-inedge { fill: none; stroke: var(--ep-in-edge, rgba(45, 32, 18, .42)); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* a soft shadow all round an opened inside, so a flap reads as a flap even when it is white on a white table (the user, 2026-11-10) */
.ep-back { filter: drop-shadow(0 0 calc(var(--ew) * .018) rgba(0, 0, 0, .32)); }
/* the floor of an opened shell: a soft shadow along its edges, where the panels fold up from it */
.enc-encl .ev-back .body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 calc(var(--ew) * .08) rgba(0, 0, 0, .34); }
.ep-dim { fill: #1e140a; opacity: 0; }
.ep-hl { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ep-ln, .ep-ol { fill: none; stroke: var(--edge, rgba(110, 90, 66, .5)); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.enc .go .ep, .enc .go .ep-carry { animation: ep-open var(--dur, .8s) cubic-bezier(.4, 0, .2, 1) var(--dl) both; }
@keyframes ep-open { from { transform: var(--from); } to { transform: var(--to); } }
/* a panel held by a lock: it slides a little away from the middle first (the joints let go), then turns */
.enc .go .ep.ep-shift, .enc .go .ep-carry.ep-shift { animation-name: ep-open3; }
@keyframes ep-open3 { 0% { transform: var(--from); } 22% { transform: var(--mid); } 100% { transform: var(--to); } }
.enc .go .ep-dim { animation: ep-dim var(--dur, .8s) ease var(--dl) both; }
@keyframes ep-dim { 0% { opacity: 0; } 60% { opacity: .22; } 100% { opacity: .22; } }
.enc .go .ep-cast { animation: ecr-fade .35s ease var(--dl) forwards; }
/* the seal in the middle of the shell: its two pieces turn with two panels, each on a carrier above every panel (enclosure.js), and a piece is gone
   once its panel has turned past upright (it is on the outside of the panel) */
.ws-p.ws-mid { top: 50%; margin-top: calc(var(--wsz) / -2); z-index: 3; }
.ep-carry > .ws-p { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .enc .go .ep, .enc .go .ep-carry, .enc .go .ep-dim, .enc .go .ep-cast, .enc-encl .scene.pop .ev-back, .enc-encl .scene.pop .ev-front { animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* ================= Phase 4 enclosures: the origami diamond, the secret garden, the puzzle lock ================= */
.enc-h-diamond .scene { --hw: calc(var(--ew) * .96); --eh: calc(var(--ew) * .96); }
.enc-h-garden .scene { --hw: calc(var(--ew) * .94); --eh: calc(var(--ew) * .94); }
.enc-h-lock .scene { --hw: var(--ew); --eh: calc(var(--ew) * .66); }
/* the shells: a diamond (the folded square), a disc, a rectangle */
.enc-h-diamond .ev-back .body { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; box-shadow: none; }
.enc-h-diamond .ev-back { filter: drop-shadow(0 calc(var(--ew) * .05) calc(var(--ew) * .05) rgba(0, 0, 0, .45)); }
.enc-h-garden .ev-back .body { border-radius: 50%; }
.enc-h-lock .ev-back .body { border-radius: calc(var(--ew) * .014); }
/* the card waits in the middle, folded to fit */
.enc-h-diamond .card { --k-s: .72; --k-rise: 0; }
.enc-h-garden .card { --k-s: .82; --k-rise: 0; }
.enc-h-lock .card { --k-s: .85; --k-rise: 0; }

/* the clasp of the puzzle lock: it turns a quarter, then lifts away */
.pl-clasp { position: absolute; z-index: 6; left: 50%; top: 50%; width: calc(var(--ew) * .15); height: calc(var(--ew) * .15); margin: calc(var(--ew) * -.075) 0 0 calc(var(--ew) * -.075); pointer-events: none; }
.pl-clasp svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pl-turn { transform-origin: 30px 30px; transform-box: view-box; }
.enc .go .pl-turn { animation: pl-turn .3s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes pl-turn { to { transform: rotate(90deg); } }
.enc .go .pl-clasp { animation: pl-lift .26s ease-in .3s forwards; }
@keyframes pl-lift { to { transform: translateY(-12%) scale(1.15); opacity: 0; } }
.enc .scene:not(.go) .ev-front:hover .pl-clasp, .enc .scene:not(.go) .ev-front:focus-visible .pl-clasp { transform: scale(1.05); transition: transform .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .enc .go .pl-turn, .enc .go .pl-clasp { animation-duration: .01ms !important; animation-delay: 0s !important; }
}