/* Burgundy envelope · blossom seal (core/opening/029) — INV-12 Burgundy Blossom · Premium W1 (A1483; D-062; plan
   docs/plans/plan_inv12_burgundy_blossom_master.md §1). A deep burgundy envelope on sunlit linen, gold-foil names on the
   flap, a gold blossom wax seal with a real sprig tucked under it. Tap the seal: the flap folds away from the guest and
   the cream card slides out to land exactly on the hero card (he011). Tier 2, CSS only (AG-T076); every piece is a
   direct child of the gate so the card can pass between the envelope's layers; no scale above 1, nothing toward the
   guest (AG-T078); hex fallbacks everywhere (opening-check renders this under the garden and shahi skins). The art comes
   from the skin's files, written out in full in the BBTINT block (kit sync), so a couple's colour tints the sprig and
   the prop exactly as it tints the page. */
.op029 {
  --op029-vh: 1vh;
  --op029-ew: min(calc(100vw - 56px), 520px, calc((100svh - 160px) * .72));
  --op029-eh: calc(var(--op029-ew) / .72);
  --op029-top: calc(50svh - var(--op029-eh) / 2 - 2.5svh);
  --op029-left: calc(50vw - var(--op029-ew) / 2);
  --op029-cw: var(--k-cw, min(calc(100vw - 2 * clamp(14px, 4vw, 48px)), 600px, calc((100svh - clamp(14px, 4vw, 48px)) * .62)));
  --op029-gut: var(--k-gut, clamp(14px, 4vw, 48px));
  --op029-ph: var(--k-panel-h, calc(100svh - clamp(14px, 4vw, 48px)));
  --op029-y0: calc(var(--op029-top) + var(--op029-eh) * .06 - var(--op029-gut));
  --op029-s0: tan(atan2(calc(var(--op029-ew) - 16px), var(--op029-cw)));
  --op029-sw: max(104px, calc(var(--op029-ew) * .30));
  --op029-head: calc(100 * var(--op029-vh));
  --op029-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .85  0 0 0 0 .8  .09 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --op029-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23  0 0 0 0 .2  0 0 0 0 .17  .12 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  position: fixed; inset: 0; z-index: 100; overflow: hidden; touch-action: none; overscroll-behavior: contain;
  background: #E6CEBE; color: var(--k-ink, #33291F);
}
@supports (height: 1svh) { .op029 { --op029-vh: 1svh; } }

/* z 0: the linen ground (the page's own linen files, so they come from cache after the tap) and the desktop prop */
.op029 .op029__ground { position: absolute; inset: 0; z-index: 0;
  background: #E6CEBE image-set(url("/skins/burgundy_blossom/assets/art/linen-tall-390.webp") 1x, url("/skins/burgundy_blossom/assets/art/linen-tall-780.webp") 2x) center / cover no-repeat; }
@media (min-aspect-ratio: 1/1) {
  .op029 .op029__ground { background-image: image-set(url("/skins/burgundy_blossom/assets/art/linen-wide-1440.webp") 1x, url("/skins/burgundy_blossom/assets/art/linen-wide-2400.webp") 2x); }
}
.op029 .op029__prop { display: none; z-index: 0; }
@media (min-aspect-ratio: 1/1) and (min-width: 1000px) {
  .op029 .op029__prop { display: block; width: min(30vw, 440px); left: -6vw; top: -12svh; rotate: -28deg;
    filter: drop-shadow(-3px 6px 4px rgb(60 32 20 / .28)) drop-shadow(-10px 18px 18px rgb(60 32 20 / .18)); }
}

/* the envelope box: back (z 1), front with the bottom-flap seams (z 3), the top flap (z 4) */
.op029 .op029__back, .op029 .op029__body, .op029 .op029__seams, .op029 .op029__flapwrap {
  position: absolute; left: var(--op029-left); top: var(--op029-top); width: var(--op029-ew); height: var(--op029-eh);
}
.op029 .op029__back { z-index: 1; border-radius: 2px; background-color: #5D1827; background-color: color-mix(in oklab, var(--k-env-flap, #651A2A) 92%, #000); }
.op029 .op029__body { z-index: 3; border-radius: 2px; background-color: var(--k-env, #5A1422);
  background-image: var(--op029-noise), linear-gradient(208deg, rgb(255 196 176 / .16), rgb(255 196 176 / 0) 46%), linear-gradient(0deg, rgb(24 2 8 / .22), rgb(24 2 8 / 0) 42%);
  box-shadow: inset 0 0 0 1px rgb(255 200 190 / .05), -1px 2px 2px rgb(40 10 12 / .30), -10px 20px 32px -10px rgb(40 10 12 / .50); }
.op029 .op029__seams { z-index: 3; overflow: visible; pointer-events: none; }
.op029 .op029__flapwrap { z-index: 4; pointer-events: none; transform-style: preserve-3d; transform-origin: 50% 0; transform: perspective(1400px) rotateX(0deg); }
.op029 .op029__flapface, .op029 .op029__liner { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* the shadow sits on the face, not the 3D wrapper: a filter on the wrapper would flatten it and the liner would never show */
.op029 .op029__flapface { filter: drop-shadow(0 1.5px 1.5px rgb(22 2 8 / .55)) drop-shadow(0 5px 8px rgb(22 2 8 / .25)); }
.op029 .op029__flap { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 56% 49%, 50% 52%, 44% 49%);
  background-color: var(--k-env-flap, #651A2A);
  background-image: var(--op029-noise), linear-gradient(208deg, rgb(255 196 176 / .16), rgb(255 196 176 / 0) 46%), linear-gradient(0deg, rgb(24 2 8 / .22), rgb(24 2 8 / 0) 42%); }
.op029 .op029__flapline, .op029 .op029__linerline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the cream liner is the flap's back face (a symmetric flap's back is a turn about the vertical axis) */
.op029 .op029__liner { clip-path: polygon(0 0, 100% 0, 56% 49%, 50% 52%, 44% 49%); background: #F4E6DA; transform: rotateY(180deg); }

/* z 2: the cream card, held in a clip whose foot is the envelope's foot (the card is taller than the envelope, so it
   stays in the pocket); the clip sinks with the envelope while the card counter-moves, so only the edge travels */
.op029 .op029__cardclip { position: absolute; z-index: 2; left: 0; right: 0; top: calc(-1 * var(--op029-head));
  height: calc(var(--op029-head) + var(--op029-top) + var(--op029-eh)); overflow: hidden; pointer-events: none; }
.op029 .op029__card { position: absolute; left: calc(50% - var(--op029-cw) / 2); top: calc(var(--op029-head) + var(--op029-gut));
  width: var(--op029-cw); height: var(--op029-ph); transform-origin: 50% 0; transform: translateY(var(--op029-y0)) scale(var(--op029-s0));
  background-color: var(--k-paper, #F4E6DA);
  background-image: var(--op029-grain), radial-gradient(130% 60% at 92% 0%, rgb(255 251 243 / .62), rgb(255 251 243 / 0) 62%);
  box-shadow: inset 1px 0 0 rgb(110 60 40 / .07), inset -1px 0 0 rgb(110 60 40 / .07), -6px 0 8px 8px rgb(60 32 20 / .11);
  clip-path: inset(0 -30px); } /* = the hero card's (rev3 A1) */

/* z 5: the names in gold foil on the flap (one text block, timed with Element Timing: AG-T057, AG-T091); padded so the
   script's swashes stay inside the clipped background (AG-T082) */
.op029 .op029__names { position: absolute; z-index: 5; left: var(--op029-left); width: var(--op029-ew);
  top: calc(var(--op029-top) + var(--op029-eh) * .135 - .08em); margin: 0; padding: .08em .3em .14em;
  text-align: center; text-wrap: balance;
  font: 400 clamp(16px, min(calc(var(--op029-ew) * .086), calc(var(--op029-ew) * .76 / ((var(--op029-len) * 2 + 3) * .42))), 46px)/1.2 var(--k-font-script, "Great Vibes", cursive);
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(100deg, rgb(255 248 225 / 0) 40%, rgb(255 248 225 / .75) 50%, rgb(255 248 225 / 0) 60%),
    linear-gradient(100deg, #8D6B3B 0%, #E9D3A1 30%, #B38F58 52%, #F3E3BB 68%, #9C7A45 100%);
  background-size: 250% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgb(22 2 8 / .5));
  animation: op029-shine 1.2s ease-in-out 900ms both; }
.op029 .op029__amp { font: inherit; }
.op029 .op029__sprig { z-index: 5; width: calc(var(--op029-ew) * .40);
  left: calc(var(--op029-left) + var(--op029-ew) * .13); top: calc(var(--op029-top) + var(--op029-eh) * .38); rotate: -38deg;
  filter: drop-shadow(-2px 4px 3px rgb(22 2 8 / .45)) drop-shadow(-6px 10px 10px rgb(22 2 8 / .22)); }

/* z 6: the seal is the open button (a.k-btn, reset), centred on the flap tip; and the hint on the linen */
.op029 .op029-seal { position: absolute; z-index: 6; display: block; width: var(--op029-sw); aspect-ratio: 1.043; min-height: 0;
  left: calc(var(--op029-left) + var(--op029-ew) * .5 - var(--op029-sw) / 2);
  top: calc(var(--op029-top) + var(--op029-eh) * .52 - var(--op029-sw) / 2.086);
  padding: 0; border: 0; border-radius: 50%; box-shadow: none; color: transparent;
  background-color: transparent;
  background-image: image-set(url("/skins/burgundy_blossom/assets/art/seal-160.webp") 1x, url("/skins/burgundy_blossom/assets/art/seal-320.webp") 2x);
  background-position: center; background-size: contain; background-repeat: no-repeat;
  filter: drop-shadow(-2px 4px 3px rgb(22 2 8 / .5)) drop-shadow(-6px 12px 12px rgb(22 2 8 / .28)); }
.op029 .op029-seal:focus-visible { outline: 2px solid #E9D3A1; outline-offset: 4px; }
.op029 .op029__hint { position: absolute; z-index: 6; left: 0; right: 0; top: calc(var(--op029-top) + var(--op029-eh) + 4svh);
  margin: 0; padding-left: .28em; text-align: center;
  font: 400 clamp(10px, 2.7vw, 13px)/1 var(--k-font-caps, Georgia, serif); letter-spacing: .28em; text-transform: uppercase;
  color: var(--k-wine, #5E1220); text-shadow: 0 0 12px rgb(250 242 234 / .95), 0 0 4px rgb(250 242 234 / .95);
  opacity: 0; animation: op029-hint 600ms ease 1800ms forwards; }

/* the art (scripts/burgundy_blossom_kit.py sync writes this block from the skin's BBTINT block) */
/*BBTINT>*/
/* generated by scripts/burgundy_blossom_kit.py sync from skin.css BBTINT: do not edit */
.op029 .op029-bb-art { position: absolute; isolation: isolate; pointer-events: none; background: var(--op029-bb-img) center / 100% 100% no-repeat; }
.op029 .op029-bb-art > i { position: absolute; inset: 0; display: block; background-color: transparent; -webkit-mask: var(--op029-bb-mask) center / 100% 100% no-repeat; mask: var(--op029-bb-mask) center / 100% 100% no-repeat; }
.op029 .op029-bb-art > .op029-bb-lift { mix-blend-mode: screen; }
.op029 .op029-bb-art > .op029-bb-petal { mix-blend-mode: color; }
.op029 .op029-bb-art > .op029-bb-boost { mix-blend-mode: multiply; }
@supports (color: oklab(from red calc(l - .1) a b / clamp(0, l, 1))) {
  .op029 .op029-bb-art > .op029-bb-lift { background-color: oklab(from var(--c-primary, #A0143B) 1 0 0 / clamp(0, (l - .4579) * 1.6, .85)); }
  .op029 .op029-bb-art > .op029-bb-petal { background-color: oklab(from var(--c-primary, #A0143B) l a b / clamp(0, (max(l - .4579, .4579 - l) + max(a - .1667, .1667 - a) + max(b - .0390, .0390 - b) - .006) * 15, .92)); }
  .op029 .op029-bb-art > .op029-bb-boost { background-color: oklab(from var(--c-primary, #A0143B) clamp(0, l / .85, 1) 0 0 / clamp(0, (.4079 - l) * 3, .8)); }
}
.op029 .op029-bb-branch { --op029-bb-img: image-set(url("/skins/burgundy_blossom/assets/art/branch-900.webp") 1x, url("/skins/burgundy_blossom/assets/art/branch-1800.webp") 2x); --op029-bb-mask: url("/skins/burgundy_blossom/assets/art/branch-petal.webp"); aspect-ratio: 0.2211; }
.op029 .op029-bb-branch-r { --op029-bb-img: image-set(url("/skins/burgundy_blossom/assets/art/branch-r-900.webp") 1x, url("/skins/burgundy_blossom/assets/art/branch-r-1800.webp") 2x); --op029-bb-mask: url("/skins/burgundy_blossom/assets/art/branch-r-petal.webp"); }
.op029 .op029-bb-spray-tr { --op029-bb-img: image-set(url("/skins/burgundy_blossom/assets/art/spray-tr-260.webp") 1x, url("/skins/burgundy_blossom/assets/art/spray-tr-520.webp") 2x); --op029-bb-mask: url("/skins/burgundy_blossom/assets/art/spray-tr-petal.webp"); aspect-ratio: 0.4990; }
.op029 .op029-bb-spray-br { --op029-bb-img: image-set(url("/skins/burgundy_blossom/assets/art/spray-br-180.webp") 1x, url("/skins/burgundy_blossom/assets/art/spray-br-360.webp") 2x); --op029-bb-mask: url("/skins/burgundy_blossom/assets/art/spray-br-petal.webp"); aspect-ratio: 0.4467; }
.op029 .op029-bb-head { --op029-bb-img: image-set(url("/skins/burgundy_blossom/assets/art/head-160.webp") 1x, url("/skins/burgundy_blossom/assets/art/head-320.webp") 2x); --op029-bb-mask: url("/skins/burgundy_blossom/assets/art/head-petal.webp"); aspect-ratio: 1.0191; }
.op029 .op029-bb-sprig { --op029-bb-img: image-set(url("/skins/burgundy_blossom/assets/art/sprig-150.webp") 1x, url("/skins/burgundy_blossom/assets/art/sprig-300.webp") 2x); --op029-bb-mask: url("/skins/burgundy_blossom/assets/art/sprig-petal.webp"); aspect-ratio: 0.9146; }
.op029 .op029-bb-prop { --op029-bb-img: image-set(url("/skins/burgundy_blossom/assets/art/prop-560.webp") 1x, url("/skins/burgundy_blossom/assets/art/prop-1120.webp") 2x); --op029-bb-mask: url("/skins/burgundy_blossom/assets/art/prop-petal.webp"); aspect-ratio: 0.5426; }
.op029 .op029-bb-fall-a { --op029-bb-img: url("/skins/burgundy_blossom/assets/art/fall-a-64.webp"); --op029-bb-mask: url("/skins/burgundy_blossom/assets/art/fall-a-petal.webp"); aspect-ratio: 0.9697; }
.op029 .op029-bb-fall-b { --op029-bb-img: url("/skins/burgundy_blossom/assets/art/fall-b-64.webp"); --op029-bb-mask: url("/skins/burgundy_blossom/assets/art/fall-b-petal.webp"); aspect-ratio: 0.9014; }
.op029 .op029-bb-fall-c { --op029-bb-img: url("/skins/burgundy_blossom/assets/art/fall-c-64.webp"); --op029-bb-mask: url("/skins/burgundy_blossom/assets/art/fall-c-petal.webp"); aspect-ratio: 0.9697; }
.op029 .op029-bb-seal { background: image-set(url("/skins/burgundy_blossom/assets/art/seal-160.webp") 1x, url("/skins/burgundy_blossom/assets/art/seal-320.webp") 2x) center / contain no-repeat; aspect-ratio: 1.0458; }
/*<BBTINT*/

/* ---------- the tap (times from the tap; the gate is hidden at ms 2200) ---------- */
.op029.is-opening { pointer-events: none; animation: op029-out 420ms ease 1780ms forwards; }
.op029.is-opening .op029-env-part { animation: op029-sink 820ms cubic-bezier(.5, 0, .75, 0) 900ms both; }
.op029.is-opening .op029-seal, .op029.is-opening .op029__sprig { animation: op029-pop 300ms cubic-bezier(.3, .7, .4, 1) both; }
.op029.is-opening .op029__names { animation: op029-shine 1.2s ease-in-out 900ms both, op029-fade 260ms ease both; }
.op029.is-opening .op029__hint { animation: none; opacity: 0; }
/* the 3D wrapper moves only (opacity would flatten it and the liner would never turn); its two faces fade */
.op029.is-opening .op029__flapwrap { animation: op029-fold 700ms cubic-bezier(.55, 0, .25, 1) 180ms both, op029-flapz 700ms steps(1, end) 180ms both, op029-clipsink 820ms cubic-bezier(.5, 0, .75, 0) 900ms both; }
.op029.is-opening .op029__flapface, .op029.is-opening .op029__liner { animation: op029-fade 820ms cubic-bezier(.5, 0, .75, 0) 900ms both; }
.op029.is-opening .op029__cardclip { animation: op029-clipsink 820ms cubic-bezier(.5, 0, .75, 0) 900ms both; }
.op029.is-opening .op029__card { animation: op029-rise 900ms cubic-bezier(.22, 1, .36, 1) 640ms both, op029-unsink 820ms cubic-bezier(.5, 0, .75, 0) 900ms both, op029-fade 300ms ease 1600ms both; }
.op029.is-opening .op029__ground, .op029.is-opening .op029__prop { animation: op029-fade 500ms ease 1450ms both; }

@keyframes op029-shine { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
@keyframes op029-hint { to { opacity: 1; } }
@keyframes op029-pop { 35% { translate: 0 -8px; } 100% { translate: 0 -18px; opacity: 0; } }
@keyframes op029-fade { to { opacity: 0; } }
/* rotateX negative about the top edge: the free edge moves away from the guest */
@keyframes op029-fold { from { transform: perspective(1400px) rotateX(0deg); } to { transform: perspective(1400px) rotateX(-178deg); } }
/* half way through the fold the open flap drops behind the rising card */
@keyframes op029-flapz { 0% { z-index: 4; } 50%, 100% { z-index: 1; } }
@keyframes op029-rise { from { transform: translateY(var(--op029-y0)) scale(var(--op029-s0)); } to { transform: translateY(0) scale(1); } }
@keyframes op029-sink { from { translate: 0 0; opacity: 1; } to { translate: 0 calc(70 * var(--op029-vh)); opacity: 0; } }
@keyframes op029-clipsink { from { translate: 0 0; } to { translate: 0 calc(70 * var(--op029-vh)); } }
@keyframes op029-unsink { from { translate: 0 0; } to { translate: 0 calc(-70 * var(--op029-vh)); } }
@keyframes op029-out { to { opacity: 0; } }

/* reduced motion: the gate fades and nothing else moves (op026); the hint is always shown (D-026) */
html.motion-reduce .op029.is-opening { animation: op029-out .4s ease forwards; }
html.motion-reduce .op029 *, html.motion-reduce .op029 *::before, html.motion-reduce .op029 *::after { animation: none !important; transition: none !important; }
html.motion-reduce .op029 .op029__hint { opacity: 1; }