/* Not My Event: the looks of the four Diwali invitation cards (pages written by scripts/make-envelope-cards.mjs from scripts/envelope-diwali.mjs). The layout and the opening are the shared
   /assets/envelope-card.css: a closed envelope, a tap, the flap lifts, the card slides out, POPS toward the viewer and settles. What is here is each design's own colors, paper, fonts and extras.
     body.d-marigold   The Marigold Garland: saffron envelope draped with marigolds, a brass diya seal, a cream card hung with a garland.     (the card grows straight at you)
     body.d-midnight   The Midnight Diya:   midnight-blue envelope trimmed in gold, a midnight card with a glowing diya.                      (the card tilts up toward you)
     body.d-rangoli    The Rangoli Postcard: hot pink envelope, turquoise flap with a rangoli on it, a white card with a big rangoli.         (the card bounces out)
     body.d-mithai     The Sweet Box: royal purple envelope with a gold ribbon and a tag, a menu card of mithai.                              (the card flips up to face you)
   RULES: the card paper is a SOLID color (never rgba, never opacity, never a blend), every envelope color is a solid hex, and everything that decorates the envelope (garlands, ribbons, trims, stamps) is
   inside the envelope's own front (.ev-front), which drops away when the card pops, so nothing of the envelope can ever sit on top of the card. */

/* ---------- shared bits ---------- */
.dyf { transform-box: fill-box; transform-origin: 50% 100%; animation: dy-flick 1.3s ease-in-out infinite alternate; }
@keyframes dy-flick { 0% { transform: scale(1, 1) rotate(-1.5deg); } 100% { transform: scale(.94, 1.1) rotate(1.8deg); } }
@keyframes dw-fall { to { opacity: 0; transform: translateY(12px); } }
.diya { display: block; }
.d-marigold .go .mg-garland, .d-midnight .go .mn-trim, .d-rangoli .go .rg-flap, .d-rangoli .go .rg-stamp, .d-mithai .go .mt-ribbon, .d-mithai .go .mt-tag, .d-mithai .go .mt-trim { animation: dw-fall .45s ease-in forwards; }

/* ====================================================== The Marigold Garland ====================================================== */
body.d-marigold { --bg: #2a0d04; --env-back: #a8520a; --env-l: #f29a2e; --env-r: #ee8e22; --env-b: #f5a63e; --flap: #e8791a; --flap-in: #8a4308; --edge: rgba(120, 54, 0, .55);
  --paper: #fff4dc; --ink: #4a1d05; --ink-soft: #8a5a3a; --accent: #d9650a; --gold: #e9a23a; --gold-l: #ffd9a0; --gold-d: #a8520a;
  --display: "Rozha One", Georgia, serif; --body: "Hind", system-ui, sans-serif; --script: "Rozha One", Georgia, serif; --t1: 11; --t2: 9.2; --t3: 7.6; color: #ffd9a0; }
.d-marigold .bg { background: radial-gradient(ellipse 80% 60% at 50% 40%, #7a2a08 0, #3a1204 55%, #1d0802 100%); }
.d-marigold .bg i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(255, 184, 80, .5), transparent 66%); animation: mg-glow var(--d) ease-in-out infinite; }
@keyframes mg-glow { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
/* a string of small lights along the top of the screen that pulses, so you can tell the lights are on */
.d-marigold .strand { position: absolute; left: 0; right: 0; top: 0; height: 18px; background: radial-gradient(circle, #ffd27a 0 3px, transparent 4px) 0 7px / 26px 18px repeat-x; animation: mg-strand 1.6s ease-in-out infinite; }
@keyframes mg-strand { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.d-marigold .tap-hint, .d-marigold .quiet { color: var(--gold-l); font-family: var(--body); }
.d-marigold .mg-garland { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.d-marigold .seal { background: radial-gradient(circle at 35% 30%, #f8dc8a, #e0a53a 55%, #8a5a12); box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 0 0 calc(var(--ew) * .011) rgba(255, 255, 255, .35); }
.d-marigold .seal .diya { width: 78%; height: auto; }
.d-marigold .ev-from { color: var(--gold-l); font-family: var(--body); }
.d-marigold .card { background: #fff4dc; border-radius: 3px; color: var(--ink);
  box-shadow: 0 0 0 calc(var(--u) * 1) #d9650a, 0 0 0 calc(var(--u) * 1.4) #ffd27a, 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .45), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-marigold .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.4); border: 1px solid #e9a23a; pointer-events: none; }
.d-marigold .card-in { padding: calc(var(--u) * 4) calc(var(--u) * 7) calc(var(--u) * 6); gap: calc(var(--u) * 1.7); }
.d-marigold .mg-top { width: 100%; height: auto; flex: none; }
.d-marigold .kicker { font-family: var(--body); font-weight: 500; color: var(--ink-soft); max-width: 32ch; }
.d-marigold .title { font-family: var(--display); color: #b23a06; }
.d-marigold .mg-rule { width: 40%; color: #e9a23a; }
.d-marigold .mg-rule .diya { width: calc(var(--u) * 7); height: auto; flex: none; }
.d-marigold .when, .d-marigold .where { font-family: var(--display); color: var(--ink); font-size: calc(var(--u) * 4.8); }
.d-marigold .note { font-family: var(--body); color: var(--ink-soft); }
.d-marigold .hope { font-family: var(--display); color: #b23a06; font-size: calc(var(--u) * 5.6); }

/* ====================================================== The Midnight Diya ====================================================== */
body.d-midnight { --bg: #060b1f; --env-back: #0a1230; --env-l: #1a2a5c; --env-r: #16254f; --env-b: #223572; --flap: #2a3f86; --flap-in: #0b1534; --edge: rgba(244, 213, 139, .6);
  --paper: #101b3d; --ink: #f4dc9a; --ink-soft: #b9c0dd; --accent: #f4d58b; --gold: #f4d58b; --gold-l: #ffe9a8; --gold-d: #b8964a;
  --display: "Cormorant Garamond", Georgia, serif; --body: "Jost", system-ui, sans-serif; --script: "Cormorant Garamond", Georgia, serif; --t1: 13.5; --t2: 11; --t3: 8.8; color: #f4dc9a; }
.d-midnight .bg { background: radial-gradient(ellipse 80% 60% at 50% 30%, #1b2a66 0, #0b1334 55%, #04071a 100%); }
.d-midnight .bg i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); background: #ffe9a8; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: mn-twinkle var(--d) ease-in-out infinite; opacity: .2; }
@keyframes mn-twinkle { 0%, 100% { opacity: .1; transform: scale(.7) rotate(0); } 50% { opacity: .95; transform: scale(1.1) rotate(45deg); } }
.d-midnight .skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22vh; }
.d-midnight .tap-hint, .d-midnight .quiet { color: var(--gold-l); font-family: var(--body); }
.d-midnight .mn-trim { position: absolute; inset: 5%; z-index: 2; border: 1px dashed #f4d58b; pointer-events: none; }
.d-midnight .seal { background: radial-gradient(circle at 35% 30%, #f8e3a0, #e0b24a 55%, #8a5a12); box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 0 0 calc(var(--ew) * .011) rgba(255, 255, 255, .35); }
.d-midnight .seal .diya { width: 78%; height: auto; }
.d-midnight .ev-from { color: var(--gold-l); font-family: var(--body); bottom: 4%; }
.d-midnight .card { background: #101b3d; border-radius: 3px; color: var(--ink);
  box-shadow: 0 0 0 calc(var(--u) * .8) #f4d58b, 0 0 0 calc(var(--u) * 2.6) #0b1334, 0 0 0 calc(var(--u) * 3) #f4d58b, 0 0 0 calc(var(--u) * 5) rgba(0, 0, 0, .45), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55); }
.d-midnight .card::before { content: ""; position: absolute; inset: calc(var(--u) * 3); border: 1px solid #3a4478; pointer-events: none; }
.d-midnight .card-in { padding: calc(var(--u) * 5) calc(var(--u) * 7) calc(var(--u) * 6); gap: calc(var(--u) * 1.8); }
.d-midnight .mn-glow { position: absolute; left: 50%; top: calc(var(--u) * 4); width: calc(var(--u) * 52); height: calc(var(--u) * 32); margin-left: calc(var(--u) * -26); background: radial-gradient(ellipse at 50% 62%, #3a4a8a 0, #1b2a5e 38%, #101b3d 72%); animation: mn-pulse 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes mn-pulse { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.06); } }
.d-midnight .diya.big { position: relative; width: calc(var(--u) * 24); height: auto; flex: none; }
.d-midnight .kicker { font-family: var(--body); font-weight: 300; color: var(--ink-soft); }
.d-midnight .title { font-family: var(--display); font-weight: 600; color: #f4dc9a; }
.d-midnight .rule { color: #f4d58b; }
.d-midnight .mn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 3); width: 100%; text-align: center; }
.d-midnight .mn-grid small { display: block; margin-bottom: calc(var(--u) * .8); font-family: var(--body); font-size: calc(var(--u) * 2.8); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.d-midnight .when, .d-midnight .where { font-family: var(--display); color: #f4dc9a; font-size: calc(var(--u) * 5); }
.d-midnight .note { font-family: var(--display); color: var(--ink-soft); }
.d-midnight .hope { font-family: var(--display); font-style: italic; color: #f4d58b; font-size: calc(var(--u) * 6); }
.d-midnight .pop .card { animation: mn-pop 1.3s cubic-bezier(.22, 1.2, .36, 1) forwards; }
@keyframes mn-pop { from { transform: translateY(calc(var(--ew) * -.66)) scale(.435) perspective(900px) rotateX(28deg); } to { transform: translateY(0) scale(1) perspective(900px) rotateX(0deg); } }
.d-midnight .done .card { transform: none; animation: cardfloat 7s ease-in-out infinite; }

/* ====================================================== The Rangoli Postcard ====================================================== */
body.d-rangoli { --bg: #2b0f4a; --env-back: #a0185c; --env-l: #ef5ba1; --env-r: #e94f98; --env-b: #f26dae; --flap: #19b0a8; --flap-in: #0b6b66; --edge: rgba(255, 255, 255, .75);
  --paper: #ffffff; --ink: #3a1260; --ink-soft: #7a5a9a; --accent: #e5408f;
  --display: "Fredoka", system-ui, sans-serif; --body: "Nunito", system-ui, sans-serif; --script: "Fredoka", system-ui, sans-serif; --t1: 11.5; --t2: 9.5; --t3: 7.8; color: #ffffff; }
.d-rangoli .bg { background: linear-gradient(160deg, #4a1a7a, #2b0f4a 60%, #1b0a33); }
.d-rangoli .bg i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; animation: rg-glow var(--d) ease-in-out infinite; }
.d-rangoli .bg i:nth-child(1) { background: radial-gradient(circle, rgba(229, 64, 143, .55), transparent 66%); } .d-rangoli .bg i:nth-child(2) { background: radial-gradient(circle, rgba(31, 181, 174, .5), transparent 66%); }
.d-rangoli .bg i:nth-child(3) { background: radial-gradient(circle, rgba(248, 198, 43, .5), transparent 66%); } .d-rangoli .bg i:nth-child(4) { background: radial-gradient(circle, rgba(244, 124, 32, .5), transparent 66%); }
@keyframes rg-glow { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.d-rangoli .tap-hint, .d-rangoli .quiet { color: #fff; font-family: var(--body); font-weight: 700; }
.d-rangoli .rg-flap { position: absolute; z-index: 3; left: 50%; top: 4%; width: 34%; height: auto; margin-left: -17%; pointer-events: none; }
.d-rangoli .rg-stamp { position: absolute; z-index: 3; right: 5%; top: 7%; width: 14%; aspect-ratio: .8; background: radial-gradient(circle at 50% 42%, #f8c62b 0 26%, #e5408f 28% 52%, #ffffff 54%); border: calc(var(--ew) * .008) dashed #19b0a8; transform: rotate(6deg); pointer-events: none; }
.d-rangoli .seal { background: radial-gradient(circle at 35% 30%, #fde68a, #f8c62b 55%, #c98f00); box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 0 0 calc(var(--ew) * .011) rgba(255, 255, 255, .5); color: #7a1d4a; font: 700 calc(var(--ew) * .08) / 1 var(--display); }
.d-rangoli .ev-from { color: #ffffff; font-family: var(--display); font-weight: 600; letter-spacing: .1em; }
.d-rangoli .card { background: #ffffff; border-radius: calc(var(--u) * 3); color: var(--ink);
  box-shadow: 0 0 0 calc(var(--u) * 1.2) #e5408f, 0 0 0 calc(var(--u) * 2.4) #f8c62b, 0 0 0 calc(var(--u) * 3.6) #1fb5ae, 0 0 0 calc(var(--u) * 5.6) rgba(0, 0, 0, .4), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-rangoli .card-in { padding: calc(var(--u) * 5) calc(var(--u) * 7) calc(var(--u) * 6); gap: calc(var(--u) * 1.8); }
.d-rangoli .rg-big { width: calc(var(--u) * 30); height: auto; flex: none; animation: rg-spin 40s linear infinite; }
@keyframes rg-spin { to { transform: rotate(360deg); } }
.d-rangoli .kicker { font-family: var(--body); font-weight: 700; color: var(--ink-soft); }
.d-rangoli .title { font-family: var(--display); font-weight: 600; color: #ffffff; background: #19b0a8; padding: .1em .5em .16em; border-radius: calc(var(--u) * 4); max-width: 100%; }
.d-rangoli .rg-tag { font-family: var(--display); font-size: calc(var(--u) * 4.4); line-height: 1.2; color: #e5408f; text-wrap: balance; }
.d-rangoli .rg-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1.6); }
.d-rangoli .rg-chip { padding: calc(var(--u) * 1.1) calc(var(--u) * 3); border-radius: 999px; font-family: var(--body); font-weight: 700; font-size: calc(var(--u) * 4.2); }
.d-rangoli .rg-chip.a { background: #e5408f; color: #ffffff; } .d-rangoli .rg-chip.b { background: #f8c62b; color: #4a1d00; }
.d-rangoli .note { font-family: var(--body); font-style: normal; font-weight: 600; color: var(--ink-soft); }
.d-rangoli .hope { font-family: var(--display); color: #7b45b8; font-size: calc(var(--u) * 5.4); }
.d-rangoli .pop .card { animation: rg-pop 1.35s cubic-bezier(.3, 1.7, .4, 1) forwards; }
@keyframes rg-pop { from { transform: translateY(calc(var(--ew) * -.66)) scale(.435) rotate(-9deg); } to { transform: translateY(0) scale(1) rotate(0deg); } }
.d-rangoli .done .card { transform: none; animation: cardfloat 7s ease-in-out infinite; }

/* ====================================================== The Sweet Box ====================================================== */
body.d-mithai { --bg: #2a0a1e; --env-back: #2e0b44; --env-l: #6a2490; --env-r: #5e1f84; --env-b: #7a2ea0; --flap: #7a2ea0; --flap-in: #2a0a3a; --edge: rgba(255, 214, 120, .7);
  --paper: #fff0e2; --ink: #5a1646; --ink-soft: #8a5a70; --accent: #c9822a; --gold: #d9a443; --gold-l: #f6e3a0; --gold-d: #9a6a1a;
  --display: "Marcellus", Georgia, serif; --body: "Lato", system-ui, sans-serif; --script: "Marcellus", Georgia, serif; --t1: 12; --t2: 9.8; --t3: 8; color: #f6e3a0; }
.d-mithai .bg { background: radial-gradient(ellipse 80% 60% at 50% 40%, #5a1a40 0, #2e0c24 55%, #1a0614 100%); }
.d-mithai .bg i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 130, .45), transparent 66%); animation: mg-glow var(--d) ease-in-out infinite; }
.d-mithai .tap-hint, .d-mithai .quiet { color: var(--gold-l); font-family: var(--body); }
.d-mithai .mt-ribbon { position: absolute; z-index: 3; left: 46%; width: 8%; top: 0; bottom: 0; background: linear-gradient(90deg, #c99a3a, #f6e3a0 50%, #c99a3a); box-shadow: 0 0 3px rgba(0, 0, 0, .4); pointer-events: none; }
.d-mithai .mt-trim { position: absolute; z-index: 2; inset: 5%; border: 1px solid #f6e3a0; pointer-events: none; }
.d-mithai .mt-tag { position: absolute; z-index: 4; left: 11%; top: 46%; padding: calc(var(--ew) * .012) calc(var(--ew) * .03); border-radius: 3px; background: #fff0e2; color: #5a1646; font: 400 calc(var(--ew) * .036) / 1.2 var(--body); transform: rotate(-8deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); pointer-events: none; }
.d-mithai .mt-tag b { font-weight: 700; }
.d-mithai .seal { background: radial-gradient(circle at 35% 30%, #f8e3a0, #d9a443 55%, #8a5a12); box-shadow: 0 3px 8px rgba(0, 0, 0, .55), inset 0 0 0 calc(var(--ew) * .011) rgba(255, 255, 255, .35); }
.d-mithai .seal .sw { width: 78%; height: auto; }
.d-mithai .card { background: #fff0e2; border-radius: 3px; color: var(--ink);
  box-shadow: 0 0 0 calc(var(--u) * 1) #d9a443, 0 0 0 calc(var(--u) * 1.4) #f6e3a0, 0 0 0 calc(var(--u) * 3) rgba(0, 0, 0, .45), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .5); }
.d-mithai .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.6); border: calc(var(--u) * .7) double #d9a443; pointer-events: none; }
.d-mithai .card-in { padding: calc(var(--u) * 5.5) calc(var(--u) * 7) calc(var(--u) * 6); gap: calc(var(--u) * 1.8); }
.d-mithai .mt-head { font-family: var(--display); letter-spacing: .26em; color: var(--gold-d); }
.d-mithai .mt-sweets { display: flex; justify-content: center; gap: calc(var(--u) * 3); }
.d-mithai .mt-sweets .sw { width: calc(var(--u) * 11); height: auto; }
.d-mithai .title { font-family: var(--display); color: #5a1646; }
.d-mithai .mt-rule { color: #d9a443; }
.d-mithai .mt-menu { font-family: var(--display); font-style: italic; font-size: calc(var(--u) * 4.6); line-height: 1.25; color: var(--ink-soft); max-width: 26ch; text-wrap: balance; }
.d-mithai .mt-facts p b { margin-right: .5em; font-family: var(--body); font-size: calc(var(--u) * 3); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-d); }
.d-mithai .when, .d-mithai .where { font-family: var(--display); color: #5a1646; font-size: calc(var(--u) * 4.8); }
.d-mithai .note { font-family: var(--body); font-style: normal; color: var(--ink-soft); }
.d-mithai .hope { font-family: var(--display); font-style: italic; color: #9a4a10; font-size: calc(var(--u) * 5.6); }
.d-mithai .pop .card { animation: mt-pop 1.3s cubic-bezier(.22, 1.2, .36, 1) forwards; }
@keyframes mt-pop { from { transform: translateY(calc(var(--ew) * -.66)) scale(.435) perspective(900px) rotateY(78deg); } to { transform: translateY(0) scale(1) perspective(900px) rotateY(0deg); } }
.d-mithai .done .card { transform: none; animation: cardfloat 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .dyf, .d-marigold .bg i, .d-marigold .strand, .d-midnight .bg i, .d-midnight .mn-glow, .d-rangoli .bg i, .d-rangoli .rg-big, .d-mithai .bg i { animation: none; }
  .d-midnight .pop .card, .d-rangoli .pop .card, .d-mithai .pop .card { animation-duration: .01ms; }
}