/* Not My Event: the look of "Mis Quince Años", the quinceañera envelope card (page made by scripts/make-envelope-cards.mjs from scripts/envelope-quince.mjs). A hot pink envelope with a gold crown seal and a lace edge, a cream
   card with a gold tiara, and a happy party behind it: papel picado across the top, a gold 1 and 5 balloon with a star piñata between them, and on the dance floor the cake, a bouquet of roses and the glass slipper, with
   butterflies drifting by. Props hang in the band at the top or stand on the floor band at the bottom (the card covers the middle of a phone); sizes come from --pu (card-scratch.css). Nothing here is ever see-through.
   The base (the opening, the pop, the back layer's reactions) is envelope-card.css and envelope-card.js; the RSVP button under the card is card-reply.css, which takes the --rp-* colors set below. */
body.d-quince { --bg: #3a0f4a; --env-back: #8a1450; --env-l: #e0408a; --env-r: #d83a82; --env-b: #ee5a9e; --flap: #f7a0c8; --flap-in: #b02a68; --edge: rgba(246, 214, 120, .9);
  --paper: #fff8ee; --ink: #8a1450; --ink-soft: #a0527a; --accent: #d4a73a; --display: "Parisienne", "Brush Script MT", cursive; --body: "Josefin Sans", system-ui, sans-serif; --t1: 13; --t2: 10.6; --t3: 8.6; --bw: min(92vw, 560px); color: #ffe9f4;
  --rp-bg: #f0c95a; --rp-fg: #5a0f3a; --rp-edge: #fff1bd; }
body.d-quince[class*="d-"] { --pu: clamp(46px, min(8.6vh, 15vw), 108px); --qd: min(var(--pu), 12vw); }
@keyframes qn-tw { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes qn-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes qn-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes qn-flap { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
@keyframes qn-fly1 { 0% { transform: translate(0, 0) rotate(8deg); } 25% { transform: translate(14vw, -3vh) rotate(-6deg); } 50% { transform: translate(26vw, 2vh) rotate(10deg); } 75% { transform: translate(12vw, 5vh) rotate(-8deg); } 100% { transform: translate(0, 0) rotate(8deg); } }
@keyframes qn-fly2 { 0% { transform: translate(0, 0) rotate(-8deg); } 30% { transform: translate(-16vw, 3vh) rotate(8deg); } 60% { transform: translate(-28vw, -2vh) rotate(-10deg); } 100% { transform: translate(0, 0) rotate(-8deg); } }

/* ---- the dance floor behind the envelope: stage lights sweeping down from the top, the cake on its table at the left, the dancers along the floor line ---- */
@keyframes qn-sweep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes qn-pool { from { transform: translateX(-6vw); } to { transform: translateX(6vw); } }
@keyframes qn-twirl { from { transform: scaleX(.86); } to { transform: scaleX(1.1); } }
@keyframes qn-step { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes qn-flick { from { transform: scale(1, .88); } to { transform: scale(1.12, 1.12); } }
.d-quince .bg { background: #3a0f4a; }
.d-quince .sky { position: absolute; inset: 0 0 22% 0; background: linear-gradient(180deg, #3a0f4a 0%, #8a2a78 36%, #e0508a 70%, #ffb2a0 100%); }
.d-quince .glow { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 50% 72%, rgba(255, 240, 180, .35), transparent 70%); }
.d-quince .sparkles { position: absolute; inset: 0 0 24% 0; background: radial-gradient(1.5px 1.5px at 8% 30%, #fff, transparent), radial-gradient(2px 2px at 24% 52%, #ffe9a8, transparent), radial-gradient(1.5px 1.5px at 40% 36%, #fff, transparent), radial-gradient(2px 2px at 60% 60%, #ffe9a8, transparent), radial-gradient(1.5px 1.5px at 78% 34%, #fff, transparent), radial-gradient(2px 2px at 92% 56%, #ffe9a8, transparent), radial-gradient(1.5px 1.5px at 50% 20%, #fff, transparent); animation: qn-tw 3.6s ease-in-out infinite; }
.d-quince .beams { position: absolute; inset: 0 0 22% 0; overflow: hidden; pointer-events: none; }
.d-quince .bm { position: absolute; top: -2%; width: 42vmin; height: 98%; margin-left: -21vmin; transform-origin: 50% 0; clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); animation: qn-sweep 7s ease-in-out infinite alternate; }
.d-quince .bm.a { left: 8%; background: linear-gradient(180deg, rgba(255, 111, 174, .62), rgba(255, 111, 174, 0) 88%); } .d-quince .bm.b { left: 29%; background: linear-gradient(180deg, rgba(39, 198, 192, .55), rgba(39, 198, 192, 0) 88%); animation-duration: 9s; animation-delay: -3s; }
.d-quince .bm.c { left: 50%; background: linear-gradient(180deg, rgba(255, 210, 63, .5), rgba(255, 210, 63, 0) 88%); animation-duration: 6s; animation-delay: -1.5s; } .d-quince .bm.d { left: 71%; background: linear-gradient(180deg, rgba(180, 92, 242, .58), rgba(180, 92, 242, 0) 88%); animation-duration: 8s; animation-delay: -5s; }
.d-quince .bm.e { left: 92%; background: linear-gradient(180deg, rgba(255, 111, 174, .55), rgba(255, 111, 174, 0) 88%); animation-duration: 10s; animation-delay: -2s; }
.d-quince .rig { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.d-quince .hd { position: absolute; top: 0; width: 5vmin; height: 2.6vmin; margin-left: -2.5vmin; border-radius: 0 0 8px 8px; background: #1a0f2a; box-shadow: 0 2px 0 #ff6fae; }
.d-quince .hd.a { left: 8%; } .d-quince .hd.b { left: 29%; box-shadow: 0 2px 0 #27c6c0; } .d-quince .hd.c { left: 50%; box-shadow: 0 2px 0 #ffd23f; } .d-quince .hd.d { left: 71%; box-shadow: 0 2px 0 #b45cf2; } .d-quince .hd.e { left: 92%; }
.d-quince .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; border-top: 5px solid #f0c95a; background: repeating-linear-gradient(45deg, #ffe3ee 0 22px, #ffc6dc 22px 44px); box-shadow: inset 0 12px 20px rgba(120, 20, 80, .28); }
.d-quince .pools { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; overflow: hidden; pointer-events: none; }
.d-quince .fpool { position: absolute; bottom: 3%; width: 32vmin; height: 7vmin; border-radius: 50%; animation: qn-pool 6s ease-in-out infinite alternate; }
.d-quince .fpool.a { left: 8%; background: radial-gradient(ellipse, rgba(255, 111, 174, .6), transparent 70%); } .d-quince .fpool.b { left: 38%; background: radial-gradient(ellipse, rgba(39, 198, 192, .55), transparent 70%); animation-delay: -2.4s; } .d-quince .fpool.c { left: 68%; background: radial-gradient(ellipse, rgba(255, 210, 63, .55), transparent 70%); animation-delay: -4s; }
.d-quince.party .bm { animation-duration: 1.8s; } .d-quince.party .fpool { animation-duration: 1.4s; } .d-quince.party .p-d1, .d-quince.party .p-d2, .d-quince.party .p-d3, .d-quince.party .p-d4, .d-quince.party .p-d5, .d-quince.party .p-d6 { animation-duration: .7s; } .d-quince.party .skirt { animation-duration: .5s; }
.d-quince .p-banner { left: 50%; margin-left: calc(var(--bw) / -2); width: var(--bw); top: 1%; transform-origin: 50% 0; animation: qn-sway 6s ease-in-out infinite; }
.d-quince .p-pinata { left: 50%; margin-left: calc(var(--pu) * -.45); top: 8.5%; width: calc(var(--pu) * .9); transform-origin: 50% 0; animation: qn-sway 4.6s ease-in-out infinite; }
/* the cake on its draped table, at the left of the card; a tap lights the 1 and the 5 (the prop gets the class "on") */
.d-quince .p-cake { left: 2%; bottom: 1%; width: calc(var(--pu) * 1.75); }
.d-quince .p-cake .flm, .d-quince .p-cake .halo { opacity: 0; transition: opacity .45s ease; } .d-quince .p-cake .flm { transform-box: fill-box; transform-origin: 50% 100%; }
.d-quince .p-cake.on .flm { opacity: 1; animation: qn-flick .45s ease-in-out infinite alternate; } .d-quince .p-cake.on .halo { opacity: .5; } .d-quince .p-cake.on svg { filter: drop-shadow(0 0 12px rgba(255, 210, 120, .8)); }
/* the dancers: two rows along the floor line (the back row stands higher, a little smaller, the front row lower); the skirts twirl and everybody steps */
.d-quince .p-d2 { left: 29%; bottom: 10%; width: calc(var(--pu) * 1.7); } .d-quince .p-d4 { left: 47%; bottom: 11%; width: calc(var(--pu) * 1.6); } .d-quince .p-d6 { left: 64%; bottom: 10%; width: calc(var(--pu) * .9); } .d-quince .p-d5 { right: 3%; bottom: 10%; width: calc(var(--pu) * 1.7); }
.d-quince .p-d1 { left: 33%; bottom: 1%; width: calc(var(--pu) * 1.25); } .d-quince .p-d3 { left: 52%; bottom: 1%; width: calc(var(--pu) * 1.8); }
.d-quince .p-d1, .d-quince .p-d2, .d-quince .p-d3, .d-quince .p-d4, .d-quince .p-d5, .d-quince .p-d6 { transform-origin: 50% 100%; animation: qn-step 1.6s ease-in-out infinite; }
.d-quince .p-d2 { animation-delay: -.4s; } .d-quince .p-d3 { animation-delay: -.9s; } .d-quince .p-d4 { animation-delay: -.2s; } .d-quince .p-d5 { animation-delay: -1.2s; } .d-quince .p-d6 { animation-delay: -.7s; }
.d-quince .skirt { transform-box: fill-box; transform-origin: 50% 0; animation: qn-twirl 1.3s ease-in-out infinite alternate; }
/* ---- more girls on the floor, and the family at the tables along the back wall (small, far away, standing on the far edge of the floor behind the dancers); sizes come from --qd, a little smaller than --pu on a phone so a crowd never swallows the screen ---- */
@keyframes qn-chat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.3px) rotate(1.4deg); } }
@keyframes qn-cheer { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-5px) rotate(2deg); } }
.d-quince .p-d7 { left: 13%; bottom: 10.5%; width: calc(var(--qd) * 1.05); } .d-quince .p-d12 { left: 40.5%; bottom: 11.5%; width: calc(var(--qd) * .95); } .d-quince .p-d8 { left: 72%; bottom: 10.5%; width: calc(var(--qd) * 1.75); }
.d-quince .p-d11 { left: 14%; bottom: 1%; width: calc(var(--qd) * 2.5); } .d-quince .p-d10 { left: 62%; bottom: 1%; width: calc(var(--qd) * 2.95); } .d-quince .p-d9 { right: 2%; bottom: 1%; width: calc(var(--qd) * 1.2); }
.d-quince .p-d7, .d-quince .p-d8, .d-quince .p-d9, .d-quince .p-d10, .d-quince .p-d11, .d-quince .p-d12 { transform-origin: 50% 100%; animation: qn-step 1.6s ease-in-out infinite; }
.d-quince .p-d7 { animation-delay: -1s; } .d-quince .p-d8 { animation-delay: -.3s; } .d-quince .p-d9 { animation-delay: -1.4s; } .d-quince .p-d10 { animation-delay: -.6s; animation-duration: 1.9s; } .d-quince .p-d11 { animation-delay: -1.1s; } .d-quince .p-d12 { animation-delay: -.5s; animation-duration: 1.4s; }
.d-quince.party .p-d7, .d-quince.party .p-d8, .d-quince.party .p-d9, .d-quince.party .p-d10, .d-quince.party .p-d11, .d-quince.party .p-d12 { animation-duration: .7s; }
.d-quince .p-t1 { left: 11%; bottom: 18%; width: calc(var(--qd) * 2.1); } .d-quince .p-t2 { left: 33%; bottom: 19.6%; width: calc(var(--qd) * 1.9); } .d-quince .p-t3 { left: 58%; bottom: 18.4%; width: calc(var(--qd) * 2.2); } .d-quince .p-t4 { right: 2%; bottom: 19.2%; width: calc(var(--qd) * 2); }
.d-quince .tb .sit { transform-box: fill-box; transform-origin: 50% 100%; animation: qn-chat 3.2s ease-in-out infinite; }
.d-quince .tb .s2 { animation-duration: 2.6s; animation-delay: -.8s; } .d-quince .tb .s3 { animation-duration: 3.7s; animation-delay: -1.6s; } .d-quince .tb .s4 { animation-duration: 2.9s; animation-delay: -2.2s; }
.d-quince.cheer .tb .sit { animation: qn-cheer .3s ease-in-out infinite alternate; }
.d-quince .p-bf1 { left: 18%; top: 13%; width: calc(var(--pu) * .5); animation: qn-fly1 14s ease-in-out infinite; } .d-quince .p-bf2 { right: 20%; top: 17%; width: calc(var(--pu) * .45); animation: qn-fly2 17s ease-in-out infinite; }
.d-quince .bfl .wing { transform-box: view-box; transform-origin: 30px 30px; } .d-quince .bfl .wl, .d-quince .bfl .wr { animation: qn-flap .42s ease-in-out infinite alternate; }
.d-quince.gust .p-banner { animation-duration: 1.4s; }
.d-quince .tap-hint, .d-quince .quiet { color: #ffe9f4; font-family: var(--body); }

/* ---- the envelope: hot pink, a gold crown for a seal, a white lace edge ---- */
.d-quince .seal { background: none; box-shadow: none; } .d-quince .seal svg { width: 128%; height: 128%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.d-quince .ev-from { bottom: 11%; color: #fff3c8; font-family: var(--display); letter-spacing: .04em; text-transform: none; font-size: calc(var(--ew) * .065); text-shadow: 0 2px 3px rgba(90, 10, 60, .55); }
.d-quince .qn-lace { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 8%; background: radial-gradient(circle at 8px 0, #fff 7px, transparent 8px) 0 0 / 16px 100% repeat-x; pointer-events: none; }

/* ---- the card: cream paper, a gold tiara, a double gold border with a little rose in each corner ---- */
.d-quince .card { background: #fff8ee; border-radius: 6px; color: var(--ink); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(60, 0, 40, .55); }
.d-quince .card::before { content: ""; position: absolute; inset: calc(var(--u) * 2.4); border: 2px solid #d4a73a; border-radius: 4px; pointer-events: none; }
.d-quince .card::after { content: ""; position: absolute; inset: calc(var(--u) * 3.4); border: 1px solid #f0c95a; border-radius: 3px; pointer-events: none; background: radial-gradient(circle at 0 0, #ff6fae 0 calc(var(--u) * 1.5), transparent calc(var(--u) * 1.6)), radial-gradient(circle at 100% 0, #ff6fae 0 calc(var(--u) * 1.5), transparent calc(var(--u) * 1.6)), radial-gradient(circle at 0 100%, #ff6fae 0 calc(var(--u) * 1.5), transparent calc(var(--u) * 1.6)), radial-gradient(circle at 100% 100%, #ff6fae 0 calc(var(--u) * 1.5), transparent calc(var(--u) * 1.6)); }
.d-quince .card-in { gap: calc(var(--u) * 1.9); }
.d-quince .qn-crown { width: calc(var(--u) * 19); height: auto; filter: drop-shadow(0 1px 1px rgba(120, 80, 10, .35)); }
.d-quince .kicker { font-family: var(--body); font-weight: 600; letter-spacing: .26em; color: #a0527a; }
.d-quince .title { font-family: var(--display); font-weight: 400; color: #c4286e; line-height: 1.02; }
.d-quince .qn-rule { gap: calc(var(--u) * 2.6); } .d-quince .qn-rule span { background: #d4a73a; opacity: .8; } .d-quince .qn-rule b { font: 700 calc(var(--u) * 6.4) / 1 Fredoka, var(--body); color: #d4a73a; text-shadow: 0 1px 0 #fff, 0 2px 2px rgba(120, 80, 10, .3); }
.d-quince .qn-es { font: 400 calc(var(--u) * 7.4) / 1 var(--display); color: #8a1450; } .d-quince .qn-en { margin-top: calc(var(--u) * -1); font: 300 calc(var(--u) * 3.6) / 1.1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.d-quince .when, .d-quince .where { font-family: var(--body); font-weight: 400; color: #5a0f3a; } .d-quince .when { font-weight: 600; letter-spacing: .04em; }
.d-quince .note { font-family: var(--body); font-weight: 300; font-style: italic; color: var(--ink-soft); }
.d-quince .hope { font-family: var(--display); font-weight: 400; color: #c4286e; }
.d-quince .kicker.by { font-weight: 400; letter-spacing: .12em; text-transform: none; font-size: calc(var(--u) * 3.6); }

/* ---- the greeting card (Feliz Quinceañera): the same party, a card that says it in Spanish ---- */
.d-quince .qn-to b { font-weight: 600; color: #c4286e; letter-spacing: .2em; }
.d-quince .gr-msg { max-width: 33ch; font: italic 400 calc(var(--u) * 3.9) / 1.42 var(--body); color: #5a0f3a; text-wrap: balance; } .d-quince .n-l .gr-msg { font-size: calc(var(--u) * 3.4); }
.d-quince .gr-sign { display: grid; justify-items: center; gap: calc(var(--u) * .6); font: 400 calc(var(--u) * 7) / 1 var(--display); color: #c4286e; } .d-quince .gr-sign small { font: 300 calc(var(--u) * 3.2) / 1.2 var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .d-quince .sparkles, .d-quince .bm, .d-quince .fpool, .d-quince .p-banner, .d-quince .p-pinata, .d-quince .p-bf1, .d-quince .p-bf2, .d-quince .bfl .wl, .d-quince .bfl .wr, .d-quince .skirt, .d-quince .p-d1, .d-quince .p-d2, .d-quince .p-d3, .d-quince .p-d4, .d-quince .p-d5, .d-quince .p-d6, .d-quince .p-cake.on .flm, .d-quince .p-d7, .d-quince .p-d8, .d-quince .p-d9, .d-quince .p-d10, .d-quince .p-d11, .d-quince .p-d12, .d-quince .tb .sit, .d-quince.cheer .tb .sit { animation: none; }
}

/* People never bob, sway, rock, slide back and forth or run in a loop (the user, 2026-11-09). They stand still; legs that step and a wave are fine. */
.d-quince [class*="p-d"] { animation: none !important; }