/* Not My Event: the look of "Quince Velas", the night of fifteen candles (public/templates/quince-velas.html; drawings /assets/velas-art.js, behaviour /assets/velas.js).
   Five scenes (her night in order: her room, the red carpet, the grand entrance, the party, midnight), one at a time, each a full picture. A scene fades in like a camera walking through a door. Everything a guest can press is an svg group with the class "hit"; a lit candle shows its flame, and when a room's three candles are lit
   the room wakes up (the class "lit" turns on everything marked "onlit"). The bar at the bottom is the one place for the words, "Details", "Next room" and "RSVP".
   Anything that moves uses the individual CSS properties translate, rotate and scale on svg groups that carry a transform attribute, so a drawing never jumps away from where it is placed. */
:root { --gold: #f0c95a; --gold2: #b8862a; --pink: #ff6fae; --hot: #e0408a; --cream: #fff8ee; --plum: #3a0f4a; --night: #12052a; --teal: #27c6c0; --violet: #a56bf0;
  --display: "Parisienne", "Brush Script MT", cursive; --body: "Josefin Sans", system-ui, sans-serif; --chunk: "Fredoka", system-ui, sans-serif; --bar: 150px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--night); color: var(--cream); font-family: var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 300; padding: 10px 14px; background: #fff; color: #000; border-radius: 8px; } .skip:focus { top: 8px; }
#net { position: fixed; left: 0; right: 0; top: 0; z-index: 250; padding: 10px 14px; text-align: center; background: #e0306a; color: #fff; font-size: 14px; }
#net[hidden] { display: none; }

/* ---------- the rooms ---------- */
#stage { position: fixed; inset: 0; }
.room { position: absolute; inset: 0; overflow: hidden; visibility: hidden; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1), visibility 0s .7s; outline: none; }
.room.on { visibility: visible; opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.room.gone { transform: scale(.94); }
.art-host, .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.art { display: block; -webkit-user-select: none; user-select: none; }
.hit { cursor: pointer; outline: none; }
.hit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hit.tap { transform-box: fill-box; transform-origin: 50% 100%; animation: tap .45s ease; }
@keyframes tap { 0%, 100% { scale: 1; } 40% { scale: 1.1; } }
.onlit { opacity: 0; transition: opacity 1.3s ease; }
.room.lit .onlit { opacity: 1; }
.room.lit.r5 .art { filter: saturate(1.12) brightness(1.06); }

/* ---------- the invitation plaque on the first room, and the tags ---------- */
.copy { position: absolute; left: 0; right: 0; top: 17.5svh; z-index: 5; padding: 0 18px; text-align: center; pointer-events: none; text-shadow: 0 2px 10px rgba(10, 2, 30, .85); }
.copy .eyebrow { font-weight: 600; font-size: clamp(11px, 2.7vw, 14px); letter-spacing: .34em; text-transform: uppercase; color: #ffd9ec; }
.copy h1 { margin-top: 4px; font-family: var(--display); font-weight: 400; font-size: clamp(38px, 11vw, 78px); line-height: 1.02; color: var(--gold); text-wrap: balance; overflow-wrap: anywhere; filter: drop-shadow(0 0 14px rgba(240, 201, 90, .35)); }
.copy .sub { margin-top: 6px; font-size: clamp(13px, 3.4vw, 18px); font-weight: 300; letter-spacing: .06em; color: #fff; text-wrap: balance; }
.copy .with { margin-top: 8px; font-size: clamp(12px, 3vw, 15px); letter-spacing: .12em; color: #ffd9ec; }
.copy .with span { pointer-events: auto; }
.copy h1, .copy .sub, .copy .with span { pointer-events: auto; }

/* ---------- the bar ---------- */
.hud { position: fixed; z-index: 30; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: center; padding: max(10px, env(safe-area-inset-top, 0px)) 62px 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
#back { position: fixed; left: max(10px, env(safe-area-inset-left, 0px)); top: max(10px, env(safe-area-inset-top, 0px)); min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 3, 24, .55); font-weight: 600; }
#back[hidden] { display: none; }
.hudmid { display: grid; justify-items: center; gap: 6px; padding-top: 4px; }
.dots { display: flex; gap: 12px; }
.dot { position: relative; width: 13px; height: 13px; padding: 0; border-radius: 50%; border: 2px solid var(--gold); background: transparent; }
.dot::after { content: ""; position: absolute; inset: -16px; }
.dot[aria-current="true"] { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.dot.done { background: rgba(240, 201, 90, .45); }
.tally { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(10, 3, 24, .6); border: 1px solid rgba(240, 201, 90, .55); font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.tally svg { width: 14px; height: 14px; }
.tally.full { background: var(--gold); color: #3a0f4a; }
.bar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 22px 14px max(12px, env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(10, 3, 24, .94) 0%, rgba(10, 3, 24, .8) 62%, rgba(10, 3, 24, 0) 100%); text-align: center; }
.slogan { font-family: var(--display); font-size: clamp(26px, 7vw, 38px); line-height: 1.05; color: var(--gold); }
.hintline { margin: 4px auto 10px; max-width: 46ch; min-height: 2.6em; font-size: clamp(13px, 3.4vw, 16px); line-height: 1.3; color: #ffe9f4; text-wrap: balance; }
.hintline b { color: var(--gold); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .86em; }
.row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pill, .go { min-height: 48px; border-radius: 999px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.pill { padding: 0 18px; border: 2px solid rgba(240, 201, 90, .7); background: rgba(10, 3, 24, .55); }
.pill.pri { background: var(--hot); border-color: #ffd0e2; }
.go { flex: 1 1 auto; max-width: 260px; padding: 0 22px; border: 2px solid #fff1bd; background: linear-gradient(180deg, #fff1bd, #f0c95a); color: #3a0f4a; font-size: 17px; }
.go.ready { animation: readyp 1.4s ease-in-out infinite; }
@keyframes readyp { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 201, 90, .7); } 50% { box-shadow: 0 0 0 10px rgba(240, 201, 90, 0); } }
.go[hidden], .pill[hidden] { display: none; }
#cap { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--bar) + 18px); width: min(86vw, 360px); padding: 12px 18px; border-radius: 6px; background: var(--cream); color: var(--plum); text-align: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 0 0 2px #f0c95a; transform: translate(-50%, 20px) rotate(-1.5deg); opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2); }
#cap.on { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg); }
#cap small { display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #a0527a; }
#cap b { display: block; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.1; color: #c4286e; }
#cap span { display: block; font-size: 15px; line-height: 1.3; font-style: italic; text-wrap: balance; }
.bub { position: fixed; z-index: 60; max-width: 210px; padding: 6px 12px; border-radius: 14px; background: #fff; color: #2a1a10; font: 700 14px / 1.25 system-ui, sans-serif; text-align: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); pointer-events: none; transform: translate(-50%, calc(-100% - 8px)); animation: bub 2.4s ease both; }
@keyframes bub { 0% { opacity: 0; translate: 0 8px; } 12%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -8px; } }
#fin { position: absolute; z-index: 6; left: 0; right: 0; top: 13svh; padding: 0 16px; text-align: center; pointer-events: none; opacity: 0; transform: scale(.85); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .9, .3, 1.15); }
#fin.show { opacity: 1; transform: none; }
#fin h2 { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 15vw, 120px); line-height: 1; color: var(--gold); text-shadow: 0 0 24px rgba(240, 201, 90, .6), 0 3px 12px rgba(10, 2, 30, .9); }
#fin p { margin-top: 6px; font-size: clamp(15px, 4vw, 22px); color: #fff; text-shadow: 0 2px 8px rgba(10, 2, 30, .9); }

/* ---------- the sheets ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(8, 3, 20, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet-wrap[hidden] { display: none; }
.sheetp { position: relative; width: min(480px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; padding: 28px 22px 22px; border-radius: 18px; background: var(--cream); color: var(--plum); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), inset 0 0 0 2px var(--gold); outline: none; text-align: left; }
.sheetp h2 { font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.05; color: #c4286e; margin: 0 40px 6px 0; }
.sheetp h3 { font-family: var(--display); font-weight: 400; font-size: 28px; color: #c4286e; }
.sheetp .sub { margin: 0 0 14px; color: #7a4a6a; line-height: 1.4; }
.x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--plum); font-size: 28px; line-height: 1; }
.det { display: grid; gap: 12px; margin: 0 0 16px; }
.det div { display: grid; gap: 2px; }
.det dt { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: #a0527a; font-weight: 600; }
.det dd { margin: 0; font-size: 17px; line-height: 1.35; color: var(--plum); overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { min-height: 50px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--gold2); background: var(--hot); color: #fff; font-weight: 800; font-size: 16px; }
.btn.ghost { background: transparent; color: var(--plum); border-color: var(--gold2); }
.linkish { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--plum); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.f { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 800; color: #7a4a6a; }
.f input[type=text], #g-name { width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid #e1b9cf; background: #fff; color: var(--plum); font: inherit; font-size: 16px; font-weight: 500; }
.err { margin: 0 0 10px; color: #c0283c; font-weight: 700; font-size: 14px; } .err[hidden], #done[hidden], #rsvp-form[hidden], #plus-field[hidden], #more[hidden], #sample-note[hidden] { display: none; }
.ans { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.ans label { position: relative; display: block; }
.ans input { position: absolute; opacity: 0; pointer-events: none; }
.ans span { display: flex; align-items: center; min-height: 50px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #e1b9cf; font-weight: 700; cursor: pointer; background: #fff; }
.ans input:checked + span { border-color: var(--hot); background: #ffe1ee; }
.ans input:focus-visible + span { outline: 3px solid var(--hot); outline-offset: 2px; }
.step { display: flex; align-items: center; gap: 16px; }
.step button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--gold2); background: #fff; color: var(--plum); font-size: 24px; line-height: 1; }
.step output { min-width: 2ch; text-align: center; font-size: 22px; font-weight: 800; }
#done { text-align: center; display: grid; gap: 10px; padding: 6px 0; }
#done p { margin: 0; color: #7a4a6a; line-height: 1.4; }
.crowd-h { margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #a0527a; }
.crowd-h span { color: var(--hot); }
.crowd { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.gc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #fff; border: 1.5px solid #f0c95a; font-weight: 700; font-size: 14px; }
.gc svg { width: 16px; height: 16px; flex: none; }
.gc.new { animation: tap .7s ease 2; }
.gempty { color: #7a4a6a; font-size: 14px; } #more { margin-top: 8px; border: 0; background: none; color: var(--plum); font-weight: 700; }
#sample-note { margin-top: 10px; font-size: 12px; color: #7a4a6a; }

/* ---------- things that move ---------- */
.dnx { transform-box: fill-box; transform-origin: 50% 100%; animation: step 1.6s ease-in-out infinite; }
.dn1 .dnx { animation-delay: -.4s; animation-duration: 1.9s; } .dn2 .dnx { animation-delay: -.9s; animation-duration: 1.4s; } .dn3 .dnx { animation-delay: -1.3s; }
@keyframes step { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.skirt { transform-box: fill-box; transform-origin: 50% 0; animation: skirt 1.3s ease-in-out infinite alternate; }
@keyframes skirt { from { transform: scaleX(.88); } to { transform: scaleX(1.1); } }
#r4:not(.lit) .dnx { filter: brightness(.2) saturate(.4); } .dnx { transition: filter 1.2s ease; }
.dancer.twirl .dnx, .girl.twirl .gfig, .entr.twirl .gfig { animation: spin .9s ease-in-out; }
@keyframes spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1) translateY(-14px); } 100% { transform: scaleX(1); } }
body.hora .dnx { animation-duration: .45s; }
.candle .fl { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .4s ease, scale .4s ease; }
.candle:not(.lit) .fl { opacity: 0; scale: .2; }
.candle.lit .fl { opacity: 1; scale: 1; animation: flick .5s ease-in-out infinite alternate; }
.candle.lit.out .fl { opacity: 0; scale: .3; animation: none; }
@keyframes flick { from { scale: .96 .9; } to { scale: 1.08 1.12; } }
.ring { transform-box: fill-box; transform-origin: 50% 50%; animation: ping 1.8s ease-out infinite; }
.candle.lit .ring { display: none; }
@keyframes ping { 0% { scale: .7; opacity: .95; } 100% { scale: 2.1; opacity: 0; } }
.crys { animation: glint 2.6s ease-in-out infinite; animation-delay: var(--d); } @keyframes glint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.twk { animation: glint 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
.bulb { animation: glint 1.6s ease-in-out infinite alternate; animation-delay: var(--d); }
.pulse { transform-box: fill-box; transform-origin: 50% 50%; animation: pulse 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); } @keyframes pulse { 0%, 100% { scale: .8; } 50% { scale: 1.2; } }
.chx { transform-origin: 0px -460px; } .chand.sway .chx { animation: swing 2.6s ease-out; }
@keyframes swing { 0% { rotate: 0deg; } 15% { rotate: 7deg; } 35% { rotate: -5deg; } 55% { rotate: 3deg; } 75% { rotate: -1.5deg; } 100% { rotate: 0deg; } }
.bsc { animation: bscroll 3.2s linear infinite; } @keyframes bscroll { from { transform: translateX(0); } to { transform: translateX(9px); } }
.spots { transform-box: fill-box; transform-origin: 50% 50%; animation: turn 34s linear infinite; } @keyframes turn { to { rotate: 360deg; } }
.room.spin .bsc { animation-duration: .4s; } .room.spin .spots { animation-duration: 3.2s; }
.lantern { animation: lbob 4s ease-in-out infinite alternate; } .lt1 { animation-delay: -1s; } .lt2 { animation-delay: -2s; } .lt3 { animation-delay: -3s; }
@keyframes lbob { from { translate: 0 0; } to { translate: 0 -9px; } }
.lantern.fly { animation: fly 3.2s ease-in forwards; } @keyframes fly { 0% { translate: 0 0; opacity: 1; } 100% { translate: 0 -640px; opacity: 0; } }
.fsit { transform-box: fill-box; transform-origin: 50% 100%; animation: chat 3s ease-in-out infinite alternate; } .f1 { animation-delay: -1s; animation-duration: 2.4s; } .f2 { animation-delay: -2s; animation-duration: 3.4s; }
@keyframes chat { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-2px) rotate(1.5deg); } }
.fam.cheer .fsit { animation: cheer .3s ease-in-out 6 alternate; } @keyframes cheer { from { transform: translateY(0); } to { transform: translateY(-9px); } }

/* scene 1, her room: the things she gets fade in one by one, flats turn into heels and she stands a little taller */
.acc { opacity: 0; transition: opacity .5s ease; }
#r1.has-tiara .acc-tiara, #r1.has-bq .acc-bq, #r1.has-doll .acc-doll, #r1.has-heels .sh-heel { opacity: 1; }
.sh-flat { transition: opacity .3s ease; } #r1.has-heels .sh-flat { opacity: 0; }
.gfig { transition: translate .6s cubic-bezier(.3, 1.5, .5, 1); } #r1.has-heels .gfig { translate: 0 -9px; }
.item.used { opacity: .4; }
/* the little girls run back and forth along the floor (the drawing sets how far, how long and where in the run each one starts) */
.kid { animation: krun var(--kt, 3.4s) ease-in-out infinite alternate; animation-delay: var(--kd, 0s); }
@keyframes krun { from { translate: calc(var(--kx, 40px) * -1) 0; } to { translate: var(--kx, 40px) 0; } }
body.hora .kid { animation-duration: 1.3s; }
/* scene 2, the red carpet: flashes go off all by themselves, and all at once when the page adds .on */
.fsh { opacity: 0; animation: shut 4.4s linear infinite; animation-delay: var(--d, 0s); }
@keyframes shut { 0% { opacity: 0; } 1.5% { opacity: 1; } 5% { opacity: 0; } 100% { opacity: 0; } }
.fsh.on { animation: none; opacity: 1; }
/* scene 3, the grand entrance: the two door leaves swing open (they shrink toward their hinges), light floods in and she and her father appear */
.dl, .dr { transform-box: fill-box; transition: scale .9s cubic-bezier(.5, 0, .2, 1); } .dl { transform-origin: 0 50%; } .dr { transform-origin: 100% 50%; }
#r3.open .dl, #r3.open .dr { scale: .07 1; }
.flood { opacity: 0; transition: opacity 1.2s ease; } #r3.open .flood { opacity: .8; }
.entr, .entr-f { opacity: 0; visibility: hidden; transition: opacity 1s ease .4s, visibility 0s 1.4s; }
#r3.open .entr, #r3.open .entr-f { opacity: 1; visibility: visible; transition: opacity 1s ease .4s, visibility 0s .4s; }
#r3.open .doorhit { pointer-events: none; }
/* scene 4, the party: the beams only swing while the mirror ball is spinning (body.hora) */
.beam { opacity: 0; transition: opacity .6s ease; transform-box: view-box; animation: sweep 7s ease-in-out infinite alternate; } .bm1 { animation-duration: 9s; animation-delay: -3s; } .bm2 { animation-duration: 6s; animation-delay: -1.5s; } .bm3 { animation-duration: 8s; animation-delay: -5s; }
@keyframes sweep { from { rotate: -16deg; } to { rotate: 16deg; } }
body.hora .beam { animation-duration: 1.3s; opacity: .34; }
.pinata .swing { transform-box: fill-box; transform-origin: 50% 0; animation: psw 3s ease-in-out infinite alternate; } @keyframes psw { from { rotate: -5deg; } to { rotate: 5deg; } }
.pinata.whack .swing { animation: whack .55s ease-out; } @keyframes whack { 0% { rotate: 0deg; } 30% { rotate: 28deg; } 60% { rotate: -16deg; } 100% { rotate: 0deg; } }
.gst { transform-box: fill-box; animation: gb 3s ease-in-out infinite alternate; animation-delay: var(--d); } @keyframes gb { from { translate: 0 0; } to { translate: 0 -4px; } }

/* a phone turned on its side has no room for the bar's words: the slogan goes and the buttons shrink */
@media (max-height: 520px) { .slogan { display: none; } .hintline { margin-bottom: 6px; min-height: 0; } .bar { padding-top: 12px; } .copy { top: 12svh; } :root { --bar: 96px; } .pill, .go { min-height: 42px; } }
@media (max-width: 380px) { .pill { padding: 0 12px; } .go { padding: 0 14px; font-size: 16px; } }
html.nme-edit .bar { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .room { transform: 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. */
.dnx, .kid, body.hora .kid, .dancer.twirl .dnx, .girl.twirl .gfig, .entr.twirl .gfig { animation: none !important; }