/*
 * Template "Pesta Balon" (Ulang Tahun): the classic kids' party.
 * Colors from the variant (<x-inv.head>): --inv-primary, --inv-accent, --inv-sky, --inv-lilac, --inv-mint (the five
 * balloon colors), --inv-background (page), --inv-text (ink, also every button), --inv-paper (cards).
 * The look: calm white cards with soft colored "lift" shadows on a confetti-dotted page, round Baloo 2 titles,
 * Nunito text. Decoration is busy; text always sits on a plain card in ink, so it stays readable.
 * Motion only under html.inv-anim (off with "reduce motion"); scroll-driven parts inside @supports.
 */

:root {
    --inv-primary: #ff4f8b;
    --inv-accent: #ffc72c;
    --inv-sky: #3db5f0;
    --inv-lilac: #a487ff;
    --inv-mint: #43d19a;
    --inv-background: #fff6e8;
    --inv-text: #33245a;
    --inv-paper: #ffffff;
}

.pesta-balon-body {
    --pb-w: 460px;
    --pb-paper: var(--inv-paper);
    --pb-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --pb-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pb-muted: color-mix(in srgb, var(--inv-text) 80%, var(--pb-paper));
    --pb-kicker: color-mix(in srgb, var(--inv-primary) 42%, var(--inv-text));
    --pb-line: color-mix(in srgb, var(--inv-text) 14%, transparent);
    --pb-string: color-mix(in srgb, var(--inv-text) 38%, var(--pb-paper));
    --pb-lift: 0 5px 0 color-mix(in srgb, var(--inv-text) 10%, transparent), 0 18px 32px -20px color-mix(in srgb, var(--inv-text) 55%, transparent);
    --inv-radius: 1.2rem;

    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font: 600 1rem/1.6 var(--pb-body);
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
p, figure, blockquote { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }

.pesta-balon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pesta-balon-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* the five balloon colors, used in turn (--tone) with a partner color (--tone-2) */
.pesta-balon-tone--primary { --tone: var(--inv-primary); --tone-2: var(--inv-accent); }
.pesta-balon-tone--accent { --tone: var(--inv-accent); --tone-2: var(--inv-primary); }
.pesta-balon-tone--sky { --tone: var(--inv-sky); --tone-2: var(--inv-accent); }
.pesta-balon-tone--lilac { --tone: var(--inv-lilac); --tone-2: var(--inv-mint); }
.pesta-balon-tone--mint { --tone: var(--inv-mint); --tone-2: var(--inv-lilac); }
[class*="pesta-balon-tone--"] { --tone-soft: color-mix(in srgb, var(--tone) 22%, var(--pb-paper)); --tone-mid: color-mix(in srgb, var(--tone) 55%, var(--pb-paper)); }

.pesta-balon-balloon { display: block; color: var(--tone); overflow: visible; --pb-string: color-mix(in srgb, var(--inv-text) 38%, #fff); }
.pesta-balon-hat { display: block; --pb-hat-a: var(--tone); --pb-hat-b: var(--tone-2); --pb-hat-c: #fff; overflow: visible; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .1)); }

/* bunting garland */
.pesta-balon-bunting { display: block; width: 100%; height: auto; overflow: visible; }
.pesta-balon-bunting__string { stroke: var(--pb-string); }
.pesta-balon-bunting__flag { fill: var(--tone); }

/* foil number balloon */
.pesta-balon-foil { display: block; overflow: visible; }
.pesta-balon-foil text { font: 800 150px/1 var(--pb-display); }
.pesta-balon-foil--2 text { font-size: 140px; }
.pesta-balon-foil--3 text { font-size: 128px; }
.pesta-balon-foil__edge { fill: url(#pesta-balon-foil-edge); stroke: url(#pesta-balon-foil-edge); stroke-width: 24px; stroke-linejoin: round; paint-order: stroke; }
.pesta-balon-foil__face { fill: url(#pesta-balon-foil); stroke: color-mix(in srgb, var(--inv-primary) 35%, #fff); stroke-width: 18px; stroke-linejoin: round; paint-order: stroke; }
.pesta-balon-foil__shine { fill: none; stroke: rgb(255 255 255 / .85); stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 22 300; stroke-dashoffset: -8; }

/* ---------- column and backdrop ---------- */

.pesta-balon-backdrop {
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 3.6rem 4.4rem at 7% 18%, color-mix(in srgb, var(--inv-primary) 55%, transparent) 97%, transparent),
        radial-gradient(ellipse 3rem 3.7rem at 13% 30%, color-mix(in srgb, var(--inv-accent) 65%, transparent) 97%, transparent),
        radial-gradient(ellipse 3.4rem 4.2rem at 92% 24%, color-mix(in srgb, var(--inv-sky) 55%, transparent) 97%, transparent),
        radial-gradient(ellipse 2.8rem 3.4rem at 86% 70%, color-mix(in srgb, var(--inv-lilac) 55%, transparent) 97%, transparent),
        radial-gradient(ellipse 3.2rem 3.9rem at 9% 78%, color-mix(in srgb, var(--inv-mint) 55%, transparent) 97%, transparent),
        radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 35%, transparent) 0 3px, transparent 3.5px) 0 0 / 46px 46px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-sky) 40%, transparent) 0 2.5px, transparent 3px) 23px 23px / 46px 46px,
        color-mix(in srgb, var(--inv-sky) 14%, var(--inv-background));
}
@media (max-width: 519px) { .pesta-balon-backdrop { display: none; } }

/* the confetti-dotted page paper (also the cover) */
.pesta-balon-page, .pesta-balon-cover {
    --pb-dots:
        radial-gradient(circle at 22px 28px, color-mix(in srgb, var(--inv-primary) 30%, transparent) 0 3px, transparent 3.5px),
        radial-gradient(circle at 96px 84px, color-mix(in srgb, var(--inv-sky) 34%, transparent) 0 2.5px, transparent 3px),
        radial-gradient(circle at 58px 128px, color-mix(in srgb, var(--inv-accent) 48%, transparent) 0 3px, transparent 3.5px),
        radial-gradient(circle at 128px 18px, color-mix(in srgb, var(--inv-lilac) 34%, transparent) 0 2.5px, transparent 3px),
        radial-gradient(circle at 136px 122px, color-mix(in srgb, var(--inv-mint) 36%, transparent) 0 2px, transparent 2.5px);
}

.pesta-balon-page {
    position: relative; z-index: 1;
    width: min(100%, var(--pb-w)); min-height: 100vh; margin: 0 auto;
    overflow-x: clip;
    background: var(--pb-dots), var(--inv-background);
    background-size: 150px 150px;
}
@media (min-width: 520px) {
    .pesta-balon-page { box-shadow: 0 0 0 1px var(--pb-line), 0 30px 80px -10px rgb(0 0 0 / .28); }
}

.pesta-balon-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding: .45rem 1rem;
    background: var(--inv-accent); color: var(--inv-text); text-align: center;
    font: 800 .8rem/1.4 var(--pb-body);
}

/* ---------- shared bits: buttons, chips ---------- */

.pesta-balon-body .inv-button {
    min-height: 3rem; padding: .7rem 1.35rem; gap: .5rem;
    border: 0; border-radius: 999px;
    background: var(--inv-text); color: #fff;
    font: 800 1rem/1.15 var(--pb-body); letter-spacing: .01em;
    box-shadow: 0 5px 0 var(--inv-primary);
    transition: translate .12s ease, box-shadow .12s ease;
}
.pesta-balon-body .inv-button--outline {
    background: var(--pb-paper); color: var(--inv-text);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-text) 22%, transparent), 0 4px 0 color-mix(in srgb, var(--inv-text) 12%, transparent);
}
.pesta-balon-body .inv-button:focus-visible { outline: 3px solid var(--inv-primary); outline-offset: 3px; }
html .pesta-balon-body .inv-button:active, html.inv-anim .pesta-balon-body .inv-button:active { transform: none; translate: 0 3px; box-shadow: 0 2px 0 var(--inv-primary); }
html .pesta-balon-body .inv-button--outline:active { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-text) 22%, transparent), 0 1px 0 transparent; }
.pesta-balon-body .pesta-balon-btn--small { min-height: 2.75rem; padding: .5rem 1rem; font-size: .92rem; }

.pesta-balon-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem;
    border-radius: 999px; background: var(--tone-soft); color: var(--inv-text);
    font: 800 .88rem/1.3 var(--pb-body);
}

.pesta-balon-lead { max-width: 23rem; margin: 0 auto 1.2rem; color: var(--pb-muted); }

/* ---------- cover ---------- */

.pesta-balon-cover {
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--pb-w)); margin: 0 auto;
    display: flex; overflow-x: hidden; overflow-y: auto;
    color: var(--inv-text);
    background:
        radial-gradient(130% 55% at 50% 0%, color-mix(in srgb, var(--inv-sky) 26%, var(--pb-paper)) 0, transparent 72%),
        radial-gradient(90% 40% at 50% 100%, color-mix(in srgb, var(--inv-primary) 14%, transparent), transparent 75%),
        var(--pb-dots), var(--inv-background);
    background-size: auto, auto, 150px 150px, auto;
}
@media (min-width: 520px) {
    .pesta-balon-cover { box-shadow: 0 0 0 1px var(--pb-line), 0 30px 80px -10px rgb(0 0 0 / .28); }
}

.pesta-balon-cover__sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pesta-balon-cover__bunting { position: absolute; top: -8px; left: -2%; width: 104%; }
.pesta-balon-dot { position: absolute; width: .55rem; height: .9rem; border-radius: 2px; background: var(--inv-primary); rotate: 24deg; opacity: .85; }
.pesta-balon-dot--a { left: 5%; top: 24%; }
.pesta-balon-dot--b { right: 6%; top: 30%; background: var(--inv-sky); rotate: -30deg; }
.pesta-balon-dot--c { left: 4%; top: 62%; background: var(--inv-accent); width: .7rem; height: .7rem; border-radius: 50%; }
.pesta-balon-dot--d { right: 5%; top: 56%; background: var(--inv-mint); rotate: 60deg; }
.pesta-balon-dot--e { left: 8%; bottom: 9%; background: var(--inv-lilac); rotate: -12deg; }
.pesta-balon-dot--f { right: 9%; bottom: 14%; background: var(--inv-primary); width: .6rem; height: .6rem; border-radius: 50%; }
.pesta-balon-cover__hat { position: absolute; width: min(12vw, 3.2rem, 7svh); }
.pesta-balon-cover__hat--l { left: -.5rem; top: 34%; rotate: -22deg; }
.pesta-balon-cover__hat--r { right: -.5rem; top: 40%; rotate: 20deg; }

.pesta-balon-cover__inner {
    position: relative; z-index: 1;
    width: 100%; min-height: 100%; margin: auto;
    padding: calc(min(100vw, var(--pb-w)) * .14) 1.25rem 2.4rem;
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: .55rem;
    text-align: center;
}

.pesta-balon-cover__kicker {
    display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; padding: .38rem 1rem;
    border-radius: 999px; background: var(--pb-paper); box-shadow: var(--pb-lift);
    font: 800 .8rem/1.3 var(--pb-body); letter-spacing: .1em; text-transform: uppercase;
}
.pesta-balon-cover__kicker .pesta-balon-icon { color: var(--inv-primary); }

/* the stage: the name card, hidden behind five balloons */
.pesta-balon-stage { position: relative; flex: none; width: min(20.5rem, 86vw, 46svh); aspect-ratio: 1.75; container-type: inline-size; }
.pesta-balon-stage__reveal {
    position: absolute; inset: 26% 4% 6%;
    display: grid; place-content: center; justify-items: center; gap: .1rem; padding: .4rem .6rem;
    border-radius: 1.6rem; background: var(--pb-paper);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--inv-primary) 30%, transparent), var(--pb-lift);
}
.pesta-balon-stage__reveal::before {
    content: ''; position: absolute; inset: 7px; border-radius: 1.25rem; pointer-events: none;
    border: 2px dashed color-mix(in srgb, var(--inv-sky) 55%, transparent);
}
.pesta-balon-cover__name {
    max-width: 100%; font: 800 min(3.6rem, 15vw, 8.5svh)/1 var(--pb-display); overflow-wrap: anywhere; text-wrap: balance;
    text-shadow: .045em .05em 0 color-mix(in srgb, var(--inv-accent) 85%, transparent);
}
.pesta-balon-cover__name--l { font-size: min(3rem, 12.5vw, 7.5svh); }
.pesta-balon-cover__name--m { font-size: min(2.4rem, 10vw, 6.4svh); line-height: 1.05; }
.pesta-balon-cover__name--s { font-size: min(1.9rem, 8vw, 5.4svh); line-height: 1.1; }
.pesta-balon-stage__turns { display: flex; align-items: center; justify-content: center; gap: .2em; font: 800 10cqw/1 var(--pb-display); color: var(--pb-kicker); }
.pesta-balon-stage__turns--plain { display: block; font-size: 7.6cqw; }
.pesta-balon-stage__foil { width: auto; height: 2.5em; margin: -.3em 0 -1em; rotate: 8deg; filter: drop-shadow(0 4px 3px rgb(0 0 0 / .14)); }
.pesta-balon-stage__spark { position: absolute; color: var(--inv-accent); }
.pesta-balon-stage__spark .pesta-balon-icon { width: 100%; height: 100%; }
.pesta-balon-stage__spark--a { left: 6%; top: 10%; width: 9cqw; height: 9cqw; }
.pesta-balon-stage__spark--b { right: 7%; bottom: 14%; width: 7cqw; height: 7cqw; color: var(--inv-sky); }

/* the balloons over it (buttons) */
.pesta-balon-pop {
    position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 60 / 96;
    padding: 0; border: 0; background: none; cursor: pointer; color: var(--tone);
    rotate: var(--r); transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent;
    --pb-string: color-mix(in srgb, var(--inv-text) 35%, #fff);
}
.pesta-balon-pop__balloon { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 5px rgb(0 0 0 / .13)); transform-origin: 50% 70%; }
.pesta-balon-pop:focus-visible { outline: 3px dashed var(--inv-text); outline-offset: 2px; border-radius: 45%; }
.pesta-balon-pop__flash { position: absolute; left: 50%; top: 34%; width: 118%; translate: -50% -50%; fill: var(--inv-accent); opacity: 0; pointer-events: none; }
.pesta-balon-pop.is-popped { pointer-events: none; visibility: hidden; }

html.inv-anim .pesta-balon-pop__balloon { animation: pesta-balon-bob 3.2s ease-in-out var(--d) infinite alternate; }
html.inv-anim .pesta-balon-pop.is-popped { visibility: visible; animation: pesta-balon-hide 0s .5s forwards; }
html.inv-anim .pesta-balon-pop.is-popped .pesta-balon-pop__balloon { animation: pesta-balon-pop .3s ease-out forwards; }
html.inv-anim .pesta-balon-pop.is-popped .pesta-balon-pop__flash { animation: pesta-balon-flash .45s ease-out forwards; }
html.inv-anim .pesta-balon-stage.is-clear .pesta-balon-stage__reveal { animation: pesta-balon-tada .7s cubic-bezier(.3, 1.5, .5, 1) .15s both; }
@keyframes pesta-balon-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-7px) rotate(2deg); } }
@keyframes pesta-balon-pop { 0% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.22, 1.12); opacity: 1; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes pesta-balon-flash { 0% { opacity: 0; scale: .2; rotate: 0deg; } 30% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.25; rotate: 25deg; } }
@keyframes pesta-balon-hide { to { visibility: hidden; } }
@keyframes pesta-balon-tada { 0% { transform: scale(.92); } 50% { transform: scale(1.06) rotate(-1.5deg); } 100% { transform: none; } }

.pesta-balon-cover__hint { min-height: 1.4em; font: 800 .9rem/1.4 var(--pb-body); color: var(--pb-kicker); }

.pesta-balon-cover__date {
    display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem;
    border-radius: 999px; background: var(--pb-paper); box-shadow: var(--pb-lift);
    font: 800 .98rem/1.3 var(--pb-body);
}
.pesta-balon-cover__date .pesta-balon-icon { color: var(--inv-primary); }
.pesta-balon-cover__quote { max-width: 20rem; font: 600 .95rem/1.45 var(--pb-body); color: var(--pb-muted); }

/* the guest on a gift tag with a bow */
.pesta-balon-cover__guest {
    position: relative; width: min(100%, 17.5rem); padding: .7rem 1rem .65rem;
    border-radius: 1.1rem; background: var(--pb-paper); box-shadow: var(--pb-lift);
}
.pesta-balon-cover__guest::before {
    content: ''; position: absolute; inset: 5px; border-radius: .8rem; pointer-events: none;
    border: 2px dashed color-mix(in srgb, var(--inv-primary) 35%, transparent);
}
.pesta-balon-cover__guest-bow { position: absolute; left: 50%; top: -.55rem; width: 2.2rem; height: 1rem; translate: -50% 0; }
.pesta-balon-cover__guest-bow::before, .pesta-balon-cover__guest-bow::after {
    content: ''; position: absolute; top: 0; width: 1.05rem; height: .95rem; background: var(--inv-primary);
    border-radius: 60% 40% 40% 60% / 60% 50% 50% 40%;
}
.pesta-balon-cover__guest-bow::before { left: 0; rotate: -14deg; }
.pesta-balon-cover__guest-bow::after { right: 0; rotate: 14deg; scale: -1 1; }
.pesta-balon-cover__guest-label { font: 800 .72rem/1.3 var(--pb-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pb-muted); }
.pesta-balon-cover__guest-name { font: 700 1.2rem/1.25 var(--pb-display); overflow-wrap: anywhere; }

.pesta-balon-body .pesta-balon-open {
    width: min(100%, 17.5rem); min-height: 3.3rem; font-size: 1.08rem;
    background: repeating-linear-gradient(-45deg, transparent 0 12px, rgb(255 255 255 / .09) 12px 24px), var(--inv-text);
    box-shadow: 0 6px 0 var(--inv-primary);
}

/* leaving: the balloons that are left fly away, then the cover fades */
.pesta-balon-cover--leave { transition: opacity .5s ease .35s; }
.pesta-balon-cover--gone { opacity: 0; }
html.inv-anim .pesta-balon-cover.is-leaving .pesta-balon-pop:not(.is-popped) {
    translate: 0 -115svh; transition: translate .8s cubic-bezier(.55, 0, .75, .35) calc(var(--i) * 50ms);
}
html.inv-anim .pesta-balon-cover.is-leaving .pesta-balon-cover__inner > :not(.pesta-balon-stage) { opacity: 0; transition: opacity .35s ease; }

/* ---------- hero (top of the page) ---------- */

.pesta-balon-hero {
    position: relative; display: grid; justify-items: center; gap: .55rem;
    padding: calc(min(100vw, var(--pb-w)) * .15 + .4rem) 1.25rem 1.6rem; text-align: center;
}
.pesta-balon-hero__bunting { position: absolute; top: -8px; left: -2%; width: 104%; }
.pesta-balon-hero__kicker {
    padding: .35rem .95rem; border-radius: 999px; background: var(--pb-paper); box-shadow: var(--pb-lift);
    font: 800 .78rem/1.3 var(--pb-body); letter-spacing: .12em; text-transform: uppercase; color: var(--pb-kicker);
}
.pesta-balon-hero__art { position: relative; width: min(100%, 21rem); height: 17.5rem; margin-top: .4rem; }
.pesta-balon-hero__photo, .pesta-balon-finale__photo { position: absolute; margin: 0; aspect-ratio: .84; }
.pesta-balon-hero__photo { left: 6%; top: 0; width: 58%; }
.pesta-balon-hero__photo img, .pesta-balon-finale__photo img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
    border-radius: 50% 50% 47% 47% / 55% 55% 45% 45%;
    border: .45rem solid var(--pb-paper);
    box-shadow: 0 0 0 3px var(--inv-primary), 0 22px 34px -20px color-mix(in srgb, var(--inv-text) 70%, transparent);
}
/* the knot and the string of the photo balloon */
.pesta-balon-hero__photo::before, .pesta-balon-finale__photo::before {
    content: ''; position: absolute; left: 50%; top: calc(100% - .1rem); width: 1.1rem; height: .8rem; translate: -50% 0;
    background: var(--inv-primary); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pesta-balon-hero__photo::after, .pesta-balon-finale__photo::after {
    content: ''; position: absolute; left: 50%; top: calc(100% + .7rem); width: 2px; height: 2.6rem;
    background: var(--pb-string); rotate: 6deg; transform-origin: top;
}
.pesta-balon-hero__bunch { position: absolute; left: 2%; top: 0; width: 64%; height: 100%; }
.pesta-balon-hero__b { position: absolute; width: 42%; filter: drop-shadow(0 8px 6px rgb(0 0 0 / .12)); }
.pesta-balon-hero__b--1 { left: 0; top: 10%; rotate: -12deg; }
.pesta-balon-hero__b--2 { left: 30%; top: 0; width: 46%; }
.pesta-balon-hero__b--3 { left: 58%; top: 14%; rotate: 12deg; }
.pesta-balon-hero__b--4 { left: 22%; top: 34%; width: 40%; rotate: -4deg; }
.pesta-balon-hero__foil { position: absolute; right: 0; top: 16%; width: 40%; height: auto; rotate: 8deg; filter: drop-shadow(0 10px 8px rgb(0 0 0 / .15)); }
.pesta-balon-hero__foil.pesta-balon-foil--2 { width: 46%; right: -3%; }
.pesta-balon-hero__foil.pesta-balon-foil--3 { width: 50%; right: -4%; }
.pesta-balon-hero__hat { position: absolute; left: -1%; top: -3%; width: 17%; rotate: -24deg; }
.pesta-balon-hero__name { font: 800 3.2rem/1 var(--pb-display); overflow-wrap: anywhere; text-shadow: .045em .05em 0 color-mix(in srgb, var(--inv-accent) 85%, transparent); }
.pesta-balon-hero__age { font: 800 1rem/1.3 var(--pb-body); color: var(--pb-kicker); letter-spacing: .04em; }
.pesta-balon-hero__date {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: .3rem; padding: .45rem 1.1rem;
    border-radius: 999px; background: var(--pb-paper); box-shadow: var(--pb-lift); font: 800 .98rem/1.3 var(--pb-body);
}
.pesta-balon-hero__date .pesta-balon-icon { color: var(--inv-primary); }

html.inv-anim.inv-opened .pesta-balon-hero__art > * { animation: pesta-balon-rise-in 1s cubic-bezier(.25, .8, .35, 1) both; }
html.inv-anim.inv-opened .pesta-balon-hero__foil { animation-delay: .18s; }
html.inv-anim.inv-opened .pesta-balon-hero__hat { animation-delay: .3s; }
@keyframes pesta-balon-rise-in { 0% { opacity: 0; transform: translateY(70px) rotate(-3deg); } 60% { opacity: 1; transform: translateY(-6px) rotate(1deg); } 100% { transform: none; } }

/* ---------- sections, headings, scroll motion ---------- */

.pesta-balon-section { position: relative; padding: 3rem 1.25rem; text-align: center; }

.pesta-balon-heading { display: grid; justify-items: center; gap: .15rem; margin-bottom: 1.5rem; }
.pesta-balon-heading__art { position: relative; width: 3.3rem; height: 3.9rem; margin-bottom: .3rem; }
.pesta-balon-heading__badge {
    position: absolute; left: 0; top: 0; width: 3.3rem; height: 3.6rem; display: grid; place-items: center;
    border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%;
    background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .55) 0 12%, transparent 13%), var(--inv-accent);
    color: var(--inv-text); rotate: -6deg;
    box-shadow: inset -5px -6px 0 rgb(0 0 0 / .07);
}
.pesta-balon-heading__badge::after {
    content: ''; position: absolute; left: 50%; top: 100%; width: .7rem; height: .5rem; translate: -50% -1px;
    background: var(--inv-accent); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pesta-balon-heading__badge .pesta-balon-icon { width: 1.45rem; height: 1.45rem; }
.pesta-balon-heading__bit { position: absolute; width: .42rem; height: .7rem; border-radius: 2px; }
.pesta-balon-heading__bit--a { left: -1.1rem; top: .5rem; background: var(--inv-primary); rotate: -25deg; }
.pesta-balon-heading__bit--b { right: -1.2rem; top: .2rem; background: var(--inv-sky); rotate: 30deg; }
.pesta-balon-heading__bit--c { left: -.7rem; top: 2.6rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--inv-mint); }
.pesta-balon-heading__bit--d { right: -.8rem; top: 2.4rem; background: var(--inv-lilac); rotate: 70deg; }
.pesta-balon-heading__kicker { font: 800 .76rem/1.3 var(--pb-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pb-kicker); }
.pesta-balon-heading__title { font: 800 2rem/1.08 var(--pb-display); text-wrap: balance; text-shadow: 0 .07em 0 color-mix(in srgb, var(--inv-accent) 70%, transparent); }

/* sections float up like balloons, with a little wobble (data-reveal-sections="balloon") */
html.inv-anim .pesta-balon-main [data-reveal="balloon"] { transform: translateY(46px) rotate(-1.5deg); }
html.inv-anim .pesta-balon-main [data-reveal="balloon"].is-revealed { transform: none; animation: pesta-balon-float-in 1.15s cubic-bezier(.25, .8, .35, 1) var(--reveal-delay, 0ms) both; }
@keyframes pesta-balon-float-in {
    0% { transform: translateY(46px) rotate(-1.5deg); }
    55% { transform: translateY(-7px) rotate(1.2deg); }
    78% { transform: translateY(2px) rotate(-.5deg); }
    100% { transform: none; }
}
/* the confetti of a heading pops out of its balloon */
html.inv-anim .pesta-balon-heading.is-revealed .pesta-balon-heading__bit { animation: pesta-balon-bit .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--reveal-delay, 0ms) + .35s) both; }
html.inv-anim .pesta-balon-heading.is-revealed .pesta-balon-heading__bit--b { animation-delay: calc(var(--reveal-delay, 0ms) + .42s); }
html.inv-anim .pesta-balon-heading.is-revealed .pesta-balon-heading__bit--c { animation-delay: calc(var(--reveal-delay, 0ms) + .5s); }
html.inv-anim .pesta-balon-heading.is-revealed .pesta-balon-heading__bit--d { animation-delay: calc(var(--reveal-delay, 0ms) + .56s); }
@keyframes pesta-balon-bit { from { opacity: 0; translate: 0 1.2rem; scale: .2; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ---------- opening ---------- */

.pesta-balon-opening { padding-top: 1.4rem; }
.pesta-balon-opening__greeting { font: 800 2.1rem/1.1 var(--pb-display); text-wrap: balance; }
.pesta-balon-opening__greeting::after {
    content: ''; display: block; width: 7rem; height: .55rem; margin: .45rem auto 0;
    background: radial-gradient(circle at 50% 0, transparent .32rem, var(--inv-primary) .34rem .5rem, transparent .52rem) 0 0 / 1.1rem .55rem repeat-x;
}
.pesta-balon-shout {
    position: relative; max-width: 24rem; margin: 1.6rem auto 0; padding: 1.5rem 1.4rem 1.4rem;
    border-radius: 2rem; background: var(--pb-paper); box-shadow: var(--pb-lift);
    font-size: 1.05rem; line-height: 1.7;
}
.pesta-balon-shout::before {
    content: ''; position: absolute; inset: 7px; border-radius: 1.6rem; pointer-events: none;
    border: 2px dashed color-mix(in srgb, var(--inv-sky) 50%, transparent);
}
.pesta-balon-shout__hat { position: absolute; top: -2rem; width: 2.6rem; }
.pesta-balon-shout__hat--l { left: -.4rem; rotate: -24deg; }
.pesta-balon-shout__hat--r { right: -.4rem; rotate: 22deg; }

/* ---------- celebrant ---------- */

.pesta-balon-portrait { position: relative; width: min(66%, 14.5rem); aspect-ratio: 1; margin: 3.4rem auto 1.5rem; }
.pesta-balon-portrait__frame {
    position: absolute; inset: 0; border-radius: 50%; padding: .55rem;
    background: repeating-conic-gradient(var(--inv-primary) 0 15deg, var(--inv-accent) 15deg 30deg, var(--inv-sky) 30deg 45deg, var(--inv-lilac) 45deg 60deg, var(--inv-mint) 60deg 75deg);
    box-shadow: 0 20px 36px -20px color-mix(in srgb, var(--inv-text) 70%, transparent);
}
.pesta-balon-portrait__frame img, .pesta-balon-portrait__initial {
    display: block; width: 100%; height: 100%; border-radius: 50%; border: .35rem solid var(--pb-paper);
}
.pesta-balon-portrait__frame img { object-fit: cover; object-position: center 25%; }
.pesta-balon-portrait__initial {
    display: grid; place-items: center; background: var(--pb-dots), color-mix(in srgb, var(--inv-accent) 30%, var(--pb-paper));
    background-size: 150px 150px, auto;
    font: 800 6rem/1 var(--pb-display); color: var(--inv-text); text-shadow: .05em .05em 0 var(--inv-primary);
}
.pesta-balon-portrait__hat { position: absolute; z-index: 2; left: 50%; top: -21%; width: 27%; translate: -20% 0; rotate: 16deg; }
.pesta-balon-portrait__foil { position: absolute; z-index: 2; right: -20%; bottom: -14%; width: 34%; rotate: 10deg; filter: drop-shadow(0 8px 8px rgb(0 0 0 / .16)); }
.pesta-balon-portrait__foil.pesta-balon-foil--2 { width: 44%; right: -26%; }
.pesta-balon-portrait__foil.pesta-balon-foil--3 { width: 52%; right: -28%; }

.pesta-balon-ribbon { margin-bottom: .7rem; }
.pesta-balon-ribbon span {
    display: inline-block; padding: .4rem 1.6rem; background: var(--inv-accent); color: var(--inv-text);
    font: 800 .95rem/1.3 var(--pb-body); letter-spacing: .06em; text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 50%, 100% 100%, 0 100%, .7rem 50%);
}
.pesta-balon-celebrant__name { font: 800 1.75rem/1.15 var(--pb-display); text-wrap: balance; overflow-wrap: anywhere; }
.pesta-balon-celebrant__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .9rem; }
.pesta-balon-parents {
    max-width: 22rem; margin: 1.2rem auto 0; padding: 1rem 1.1rem;
    border-radius: 1.2rem; background: var(--pb-paper); box-shadow: var(--pb-lift);
}
.pesta-balon-parents__order { font: 800 .76rem/1.4 var(--pb-body); letter-spacing: .12em; text-transform: uppercase; color: var(--pb-kicker); }
.pesta-balon-parents__names { margin-top: .2rem; font: 700 1.15rem/1.35 var(--pb-display); }
.pesta-balon-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.pesta-balon-social {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .45rem 1rem;
    border-radius: 999px; background: var(--pb-paper); color: var(--inv-text); text-decoration: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-primary) 40%, transparent);
    font: 800 .9rem/1.2 var(--pb-body);
}
.pesta-balon-social:focus-visible { outline: 3px solid var(--inv-primary); outline-offset: 2px; }

/* ---------- message: a speech bubble ---------- */

.pesta-balon-bubble { max-width: 24rem; margin: 0 auto; text-align: left; }
.pesta-balon-bubble__text {
    position: relative; padding: 2rem 1.3rem 1.3rem; border-radius: 1.8rem 1.8rem 1.8rem .6rem;
    background: var(--pb-paper); box-shadow: var(--pb-lift); font-size: 1.04rem; line-height: 1.7;
}
.pesta-balon-bubble__text::before {
    content: '\201C'; position: absolute; left: 1rem; top: -.9rem;
    font: 800 4.2rem/1 var(--pb-display); color: var(--inv-primary);
}
.pesta-balon-bubble__text::after {
    content: ''; position: absolute; left: 1.4rem; top: calc(100% - 1px); width: 1.4rem; height: 1rem;
    background: var(--pb-paper); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.pesta-balon-bubble__from { display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 0 .4rem; font: 700 1.1rem/1.2 var(--pb-display); }
.pesta-balon-bubble__avatar {
    display: grid; place-items: center; width: 2.8rem; height: 2.8rem; overflow: hidden; flex: none;
    border-radius: 50%; border: 3px solid var(--pb-paper); background: var(--inv-accent);
    box-shadow: 0 0 0 2px var(--inv-primary); font: 800 1.2rem/1 var(--pb-display);
}
.pesta-balon-bubble__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- events: party cards hanging from a balloon ---------- */

.pesta-balon-events__list { display: grid; gap: 3rem; max-width: 25rem; margin: 0 auto; padding-top: 2.4rem; }
.pesta-balon-event {
    position: relative; padding: 2.5rem 1.15rem 1.25rem;
    border-radius: 1.5rem; background: var(--pb-paper); box-shadow: var(--pb-lift); text-align: left;
}
.pesta-balon-event::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: .75rem; border-radius: 1.5rem 1.5rem 0 0;
    background: repeating-linear-gradient(-45deg, var(--tone) 0 10px, var(--tone-mid) 10px 20px);
}
.pesta-balon-event__tag { position: absolute; left: 50%; top: -3.1rem; width: 2.9rem; translate: -50% 0; color: var(--tone); }
.pesta-balon-event__tag svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 4px 4px rgb(0 0 0 / .12)); }
.pesta-balon-event__tag b {
    position: absolute; left: 50%; top: .78rem; width: 1.55rem; height: 1.55rem; translate: -50% 0;
    display: grid; place-items: center; border-radius: 50%; background: var(--pb-paper); color: var(--inv-text);
    font: 800 .95rem/1 var(--pb-display);
}
.pesta-balon-event__name { text-align: center; font: 800 1.5rem/1.15 var(--pb-display); text-wrap: balance; }
.pesta-balon-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: .9rem; border-radius: 1rem; }
.pesta-balon-event__rows { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; }
.pesta-balon-event__rows li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.pesta-balon-event__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--tone-soft); }
.pesta-balon-event__icon .pesta-balon-icon { width: 1.3rem; height: 1.3rem; }
.pesta-balon-event__rows small { display: block; font: 800 .7rem/1.5 var(--pb-body); letter-spacing: .12em; text-transform: uppercase; color: var(--pb-muted); }
.pesta-balon-event__rows span { font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.pesta-balon-event__rows strong { display: block; font: 700 1.08rem/1.3 var(--pb-display); }
.pesta-balon-event__rows em { display: block; margin-top: .15rem; font-style: normal; font-weight: 600; font-size: .92rem; color: var(--pb-muted); }
.pesta-balon-event .inv-maps { display: grid; gap: .7rem; margin-top: 1.1rem; }
.pesta-balon-event .inv-maps .inv-button { width: 100%; }
.pesta-balon-event .inv-maps__frame { height: 200px; margin: 0; border-radius: 1rem; }

/* ---------- countdown: the three-tier cake ---------- */

.pesta-balon-cake { position: relative; width: min(100%, 20rem); margin: 0 auto; padding-top: 4.4rem; }
.pesta-balon-cake__candles {
    position: absolute; left: 50%; top: .2rem; width: 48%; height: 4.4rem; translate: -50% 0;
    display: flex; justify-content: center; align-items: flex-end; gap: clamp(2px, 1.1vw, 6px);
}
.pesta-balon-candle {
    position: relative; flex: 0 1 .72rem; height: 2.5rem; border-radius: 3px 3px 1px 1px;
    background: repeating-linear-gradient(-35deg, var(--tone) 0 5px, #fff 5px 9px);
    box-shadow: inset -2px 0 0 rgb(0 0 0 / .08);
}
.pesta-balon-candle:nth-child(even) { height: 2.2rem; }
.pesta-balon-candle::before { content: ''; position: absolute; left: 50%; top: -6px; width: 2px; height: 7px; translate: -50% 0; border-radius: 1px; background: #4a3b2a; }
.pesta-balon-candle__flame {
    position: absolute; left: 50%; bottom: calc(100% + 4px); width: .64rem; height: 1.05rem; translate: -50% 0;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(ellipse at 50% 72%, #fff 0 16%, #ffe680 30%, #ffa21f 64%, #ff6a2b 100%);
    box-shadow: 0 0 10px 3px rgb(255 190 60 / .55);
    transform-origin: 50% 90%; transition: opacity .25s ease calc(var(--c) * 70ms), scale .25s ease calc(var(--c) * 70ms);
}
.pesta-balon-candle__smoke {
    position: absolute; left: 50%; bottom: calc(100% + 6px); width: .5rem; height: .5rem; translate: -50% 0;
    border-radius: 50%; background: rgb(150 145 160 / .55); opacity: 0; pointer-events: none;
}
.pesta-balon-cake.is-out .pesta-balon-candle__flame { opacity: 0; scale: .2; }
.pesta-balon-cake__topper {
    position: absolute; left: 50%; top: 1.2rem; width: 3.2rem; height: 3.2rem; translate: -50% 0; display: grid; place-items: center;
    border-radius: 50%; background: var(--inv-accent); color: var(--inv-text); box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-text) 15%, transparent);
}
.pesta-balon-cake__topper .pesta-balon-icon { width: 1.8rem; height: 1.8rem; }

.pesta-balon-cake .inv-countdown { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pesta-balon-cake .inv-countdown__item {
    position: relative; min-width: 0; padding: 1rem .3rem .65rem; border-radius: 0; text-align: center;
    background:
        radial-gradient(circle, var(--inv-accent) 0 1.6px, transparent 2px) 7px 70% / 23px 22px,
        radial-gradient(circle, var(--inv-mint) 0 1.6px, transparent 2px) 17px 88% / 27px 20px,
        var(--pb-tier);
    color: var(--inv-text);
}
/* the icing on top of each tier, with drips */
.pesta-balon-cake .inv-countdown__item::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: .85rem;
    background:
        radial-gradient(circle at 50% 0, var(--pb-paper) .42rem, transparent .45rem) 0 .1rem / .95rem .8rem repeat-x,
        linear-gradient(var(--pb-paper), var(--pb-paper)) top / 100% .38rem no-repeat;
}
.pesta-balon-cake .inv-countdown__item:nth-child(1) { --pb-tier: color-mix(in srgb, var(--inv-primary) 34%, var(--pb-paper)); grid-column: 1 / -1; justify-self: center; width: 54%; border-radius: 1.1rem 1.1rem .3rem .3rem; }
.pesta-balon-cake .inv-countdown__item:nth-child(1)::before { border-radius: 1.1rem 1.1rem 0 0; }
.pesta-balon-cake .inv-countdown__item:nth-child(2), .pesta-balon-cake .inv-countdown__item:nth-child(3) { --pb-tier: color-mix(in srgb, var(--inv-sky) 34%, var(--pb-paper)); width: 76%; }
.pesta-balon-cake .inv-countdown__item:nth-child(2) { justify-self: end; border-radius: 1.1rem 0 0 .3rem; border-right: 2px dashed color-mix(in srgb, var(--inv-text) 18%, transparent); }
.pesta-balon-cake .inv-countdown__item:nth-child(2)::before { border-radius: 1.1rem 0 0 0; }
.pesta-balon-cake .inv-countdown__item:nth-child(3) { justify-self: start; border-radius: 0 1.1rem .3rem 0; }
.pesta-balon-cake .inv-countdown__item:nth-child(3)::before { border-radius: 0 1.1rem 0 0; }
.pesta-balon-cake .inv-countdown__item:nth-child(4) { --pb-tier: color-mix(in srgb, var(--inv-lilac) 34%, var(--pb-paper)); grid-column: 1 / -1; border-radius: 1.1rem 1.1rem .5rem .5rem; }
.pesta-balon-cake .inv-countdown__item:nth-child(4)::before { border-radius: 1.1rem 1.1rem 0 0; }
.pesta-balon-cake .inv-countdown__value { font: 800 2.1rem/1 var(--pb-display); font-variant-numeric: tabular-nums; }
.pesta-balon-cake .inv-countdown__item:nth-child(1) .inv-countdown__value { font-size: 2.4rem; }
.pesta-balon-cake .inv-countdown__label { margin-top: .15rem; font: 800 .68rem/1.3 var(--pb-body); letter-spacing: .14em; text-transform: uppercase; opacity: 1; color: color-mix(in srgb, var(--inv-text) 85%, transparent); }
/* the cake stand */
.pesta-balon-cake .inv-countdown::after {
    content: ''; grid-column: 1 / -1; justify-self: center; width: 106%; height: 1rem; margin-top: -.15rem;
    border-radius: 50%; background: var(--pb-paper);
    box-shadow: 0 5px 0 color-mix(in srgb, var(--inv-text) 14%, transparent), 0 18px 22px -14px color-mix(in srgb, var(--inv-text) 60%, transparent);
}
.pesta-balon-cake .inv-countdown__done {
    padding: 1rem 1.1rem; border-radius: 1.2rem; background: var(--pb-paper); box-shadow: var(--pb-lift); font-weight: 700;
}
.pesta-balon-cake .inv-countdown__actions { margin-top: 1.5rem; gap: .7rem; }
.pesta-balon-cake .inv-countdown__actions .inv-button { font-size: .9rem; min-height: 2.75rem; padding: .5rem 1rem; }

.pesta-balon-cake__wish { display: grid; justify-items: center; gap: .5rem; margin-top: 1.3rem; }
.pesta-balon-cake__hint { font: 700 .9rem/1.45 var(--pb-body); color: var(--pb-muted); }

.pesta-balon-calendar.inv-cal {
    --inv-cal-bg: var(--pb-paper); --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--inv-primary);
    max-width: 20rem; margin: 2rem auto 0; border-radius: 1.3rem; box-shadow: var(--pb-lift);
}
.pesta-balon-calendar .inv-cal__month { font: 800 1.6rem/1.1 var(--pb-display); }
.pesta-balon-calendar .inv-cal__note { font-weight: 800; }

html.inv-anim .pesta-balon-candle__flame { animation: pesta-balon-flicker 1.1s ease-in-out calc(var(--c) * -.17s) infinite alternate; }
html.inv-anim .pesta-balon-cake.is-revealed .pesta-balon-candle { animation: pesta-balon-candle-in .5s cubic-bezier(.3, 1.6, .5, 1) calc(.45s + var(--c) * 80ms) both; }
html.inv-anim .pesta-balon-cake.is-out .pesta-balon-candle__smoke { animation: pesta-balon-smoke 1.4s ease-out calc(var(--c) * 70ms + .1s) both; }
@keyframes pesta-balon-flicker { from { transform: rotate(-4deg) scaleY(.94); } to { transform: rotate(4deg) scaleY(1.06); } }
@keyframes pesta-balon-candle-in { from { translate: 0 1rem; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes pesta-balon-smoke { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -2.4rem) scale(2.6); } }

/* ---------- party: theme & dress code ---------- */

.pesta-balon-pennant {
    display: inline-grid; gap: .1rem; max-width: 100%; padding: .85rem 2.3rem .95rem;
    background: linear-gradient(color-mix(in srgb, var(--inv-primary) 22%, var(--pb-paper)), color-mix(in srgb, var(--inv-primary) 22%, var(--pb-paper)));
    clip-path: polygon(0 0, 100% 0, calc(100% - 1.2rem) 50%, 100% 100%, 0 100%, 1.2rem 50%);
}
.pesta-balon-pennant small { font: 800 .72rem/1.3 var(--pb-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pb-kicker); }
.pesta-balon-pennant p { font: 800 1.6rem/1.15 var(--pb-display); overflow-wrap: anywhere; }
.pesta-balon-dress {
    max-width: 22rem; margin: 1.3rem auto 0; padding: 1.1rem 1.1rem 1.2rem;
    border-radius: 1.3rem; background: var(--pb-paper); box-shadow: var(--pb-lift);
}
.pesta-balon-dress__label { display: inline-flex; align-items: center; gap: .4rem; font: 800 .76rem/1.4 var(--pb-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pb-kicker); }
.pesta-balon-dress__code { margin-top: .2rem; font: 700 1.25rem/1.3 var(--pb-display); }
.pesta-balon-dress__colors { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: .9rem 0 0; padding: 0; }
.pesta-balon-dress__colors li { width: 2.4rem; color: var(--swatch); --pb-string: color-mix(in srgb, var(--inv-text) 35%, #fff); }
.pesta-balon-dress__colors svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 1px rgb(0 0 0 / .35)) drop-shadow(0 4px 3px rgb(0 0 0 / .1)); }
html.inv-anim .pesta-balon-dress__colors svg { animation: pesta-balon-bob 2.8s ease-in-out calc(var(--i) * -.7s) infinite alternate; transform-origin: 50% 100%; }
.pesta-balon-sticky {
    position: relative; max-width: 20rem; margin: 1.6rem auto 0; padding: 1.2rem 1.15rem 1.1rem;
    background: color-mix(in srgb, var(--inv-accent) 42%, var(--pb-paper)); rotate: -1.6deg; text-align: left;
    box-shadow: 0 14px 20px -14px color-mix(in srgb, var(--inv-text) 60%, transparent); font-weight: 700; line-height: 1.55;
    border-radius: .3rem .3rem 1.4rem .3rem;
}
.pesta-balon-sticky::before {
    content: ''; position: absolute; left: 50%; top: -.65rem; width: 5rem; height: 1.3rem; translate: -50% 0; rotate: 3deg;
    background: color-mix(in srgb, var(--inv-sky) 40%, rgb(255 255 255 / .6)); border-radius: 2px;
}
.pesta-balon-hashtag {
    display: inline-block; margin-top: 1.6rem; padding: .45rem 1.25rem; max-width: 100%; overflow-wrap: anywhere;
    border-radius: 999px; background: var(--inv-text); color: #fff; box-shadow: 0 5px 0 var(--inv-primary);
    font: 800 1.3rem/1.25 var(--pb-display);
}

/* ---------- rundown: balloons on a string ---------- */

.pesta-balon-steps { position: relative; list-style: none; max-width: 24rem; margin: 0 auto; padding: 0; display: grid; gap: 1.1rem; text-align: left; }
.pesta-balon-steps::before {
    content: ''; position: absolute; left: 2.1rem; top: 1.5rem; bottom: 1.5rem; width: 2px; translate: -1px 0;
    background: repeating-linear-gradient(var(--pb-string) 0 7px, transparent 7px 12px);
}
.pesta-balon-step { position: relative; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .85rem; align-items: center; }
.pesta-balon-step__time {
    position: relative; display: grid; place-items: center; width: 4.2rem; height: 4.7rem; padding-bottom: .4rem;
    border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%;
    background: radial-gradient(ellipse at 30% 26%, rgb(255 255 255 / .7) 0 10%, transparent 11%), var(--tone-mid);
    box-shadow: inset -5px -7px 0 rgb(0 0 0 / .06);
    font: 800 1.02rem/1 var(--pb-display); color: var(--inv-text); font-variant-numeric: tabular-nums;
}
.pesta-balon-step__time::after {
    content: ''; position: absolute; left: 50%; top: calc(100% - 2px); width: .7rem; height: .5rem; translate: -50% 0;
    background: var(--tone-mid); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pesta-balon-step__card {
    padding: .8rem 1rem; border-radius: 1.1rem; background: var(--pb-paper); box-shadow: var(--pb-lift);
    border-left: .4rem solid var(--tone);
}
.pesta-balon-step__card h3 { font: 700 1.08rem/1.3 var(--pb-display); }
.pesta-balon-step__card p { margin-top: .15rem; font-size: .9rem; line-height: 1.45; color: var(--pb-muted); }

@supports (animation-timeline: view()) {
    html.inv-anim .pesta-balon-steps::before { transform-origin: top; animation: pesta-balon-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
    html.inv-anim .pesta-balon-step__time { animation: pesta-balon-sway linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
}
@keyframes pesta-balon-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pesta-balon-sway { 0% { rotate: -10deg; translate: 0 14px; } 70% { rotate: 3deg; } 100% { rotate: 0deg; translate: 0 0; } }

/* ---------- story: snapshots on a garland ---------- */

.pesta-balon-snaps { list-style: none; margin: 0; padding: .9rem 0 0; display: grid; gap: 2.4rem; }
.pesta-balon-snap {
    position: relative; width: min(88%, 20rem); margin: 0 auto; padding: .7rem .7rem 1.1rem;
    border-radius: .5rem; background: var(--pb-paper); box-shadow: var(--pb-lift); rotate: -2deg;
}
.pesta-balon-snap:nth-child(even) { rotate: 2.2deg; }
/* the drooping string through the pins */
.pesta-balon-snap::before {
    content: ''; position: absolute; left: -16%; right: -16%; top: -1.6rem; height: 1.7rem; pointer-events: none;
    border-bottom: 2px solid var(--pb-string); border-radius: 0 0 50% 50% / 0 0 100% 100%; rotate: inherit;
}
.pesta-balon-snap__pin {
    position: absolute; z-index: 1; left: 50%; top: -.95rem; width: .8rem; height: 1.9rem; translate: -50% 0;
    border-radius: .2rem; background: var(--tone); box-shadow: inset -3px 0 0 rgb(0 0 0 / .12);
}
.pesta-balon-snap__photo {
    position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: visible; border-radius: .35rem;
    background: repeating-linear-gradient(-45deg, var(--tone-soft) 0 12px, var(--pb-paper) 12px 24px);
}
.pesta-balon-snap__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: .35rem; }
.pesta-balon-snap__balloon { width: 28%; height: auto; color: var(--tone); overflow: visible; }
.pesta-balon-snap__year {
    position: absolute; right: -.7rem; top: -.7rem; max-width: 75%; padding: .3rem .8rem;
    border-radius: 999px; background: var(--inv-accent); color: var(--inv-text); rotate: 8deg;
    font: 800 .95rem/1.2 var(--pb-display); box-shadow: 0 3px 0 rgb(0 0 0 / .1); overflow-wrap: anywhere;
}
.pesta-balon-snap h3 { margin-top: .8rem; font: 800 1.2rem/1.25 var(--pb-display); }
.pesta-balon-snap p { margin-top: .25rem; padding: 0 .3rem; font-size: .93rem; line-height: 1.55; color: var(--pb-muted); }

/* ---------- gallery: tilted party frames ---------- */

.pesta-balon-frames .inv-gallery { gap: .85rem; }
.pesta-balon-frames .inv-gallery__item {
    border-radius: 1rem; border: .3rem solid var(--pb-paper);
    box-shadow: 0 0 0 2.5px var(--inv-primary), var(--pb-lift); rotate: -1.5deg;
}
.pesta-balon-frames .inv-gallery__item:nth-child(4n + 2) { rotate: 1.5deg; box-shadow: 0 0 0 2.5px var(--inv-sky), var(--pb-lift); }
.pesta-balon-frames .inv-gallery__item:nth-child(4n + 3) { rotate: 1deg; box-shadow: 0 0 0 2.5px var(--inv-accent), var(--pb-lift); }
.pesta-balon-frames .inv-gallery__item:nth-child(4n) { rotate: -1deg; box-shadow: 0 0 0 2.5px var(--inv-lilac), var(--pb-lift); }
.pesta-balon-frames .inv-gallery__item:focus-visible { outline: 3px solid var(--inv-text); outline-offset: 3px; }

/* ---------- live streaming: a party TV ---------- */

.pesta-balon-tv {
    position: relative; max-width: 22rem; margin: 2.2rem auto 0; padding: 1rem 1rem 1.1rem;
    border-radius: 1.7rem; background: var(--inv-text); box-shadow: 0 6px 0 var(--inv-primary);
}
.pesta-balon-tv::before, .pesta-balon-tv::after {
    content: ''; position: absolute; bottom: 100%; width: 3px; height: 2rem; border-radius: 3px; background: var(--inv-text); transform-origin: bottom;
}
.pesta-balon-tv::before { left: 42%; rotate: -28deg; }
.pesta-balon-tv::after { left: 56%; rotate: 28deg; }
.pesta-balon-tv__screen {
    display: grid; gap: .5rem; justify-items: center; padding: 1.2rem 1rem;
    border-radius: 1.1rem; background: color-mix(in srgb, var(--inv-sky) 22%, var(--pb-paper)); color: var(--inv-text);
}
.pesta-balon-tv__live {
    display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .7rem; border-radius: 999px;
    background: #d92b48; color: #fff; font: 800 .78rem/1.4 var(--pb-body); letter-spacing: .14em; text-transform: uppercase;
}
.pesta-balon-tv__live i { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; }
html.inv-anim .pesta-balon-tv__live i { animation: pesta-balon-blink 1.2s steps(2, jump-none) infinite; }
@keyframes pesta-balon-blink { 50% { opacity: .2; } }
.pesta-balon-tv__note { font-weight: 800; }
.pesta-balon-body .pesta-balon-tv .inv-button { width: 100%; margin-top: 1rem; background: var(--inv-accent); color: var(--inv-text); box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-accent) 55%, #000); }

/* ---------- forms (RSVP pass and wishes card) ---------- */

.pesta-balon-body .inv-form { gap: 1rem; }
.pesta-balon-body .inv-form label, .pesta-balon-body .inv-form__choices legend { font: 800 .86rem/1.35 var(--pb-body); color: var(--inv-text); gap: .35rem; }
.pesta-balon-body .inv-form input:not([type=radio]):not([type=checkbox]),
.pesta-balon-body .inv-form select,
.pesta-balon-body .inv-form textarea {
    min-height: 3rem; padding: .7rem .95rem;
    border: 2px solid color-mix(in srgb, var(--inv-text) 16%, transparent); border-radius: 1rem;
    background: color-mix(in srgb, var(--inv-background) 55%, var(--pb-paper)); color: var(--inv-text);
    font: 700 1rem/1.4 var(--pb-body);
}
.pesta-balon-body .inv-form textarea { min-height: 6rem; resize: vertical; }
.pesta-balon-body .inv-form select {
    appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--inv-text) 50%), linear-gradient(135deg, var(--inv-text) 50%, transparent 50%);
    background-position: calc(100% - 1.35rem) 52%, calc(100% - 1rem) 52%;
    background-size: .4rem .4rem; background-repeat: no-repeat;
}
.pesta-balon-body .inv-form :is(input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--inv-primary) 60%, transparent); outline-offset: 2px; border-color: var(--inv-primary);
}
.pesta-balon-body .inv-form ::placeholder { color: color-mix(in srgb, var(--inv-text) 55%, transparent); }

.pesta-balon-body .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pesta-balon-body .inv-form__choices legend { grid-column: 1 / -1; float: left; width: 100%; margin-bottom: .45rem; padding: 0; }
.pesta-balon-body .inv-form__choices label {
    --tone: var(--inv-mint);
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .45rem;
    min-height: 4.8rem; padding: .7rem .3rem .6rem; cursor: pointer; text-align: center;
    border-radius: 1.1rem; border: 2px solid transparent;
    background: color-mix(in srgb, var(--tone) 18%, var(--pb-paper));
    box-shadow: 0 4px 0 color-mix(in srgb, var(--tone) 45%, transparent);
    font: 800 .88rem/1.2 var(--pb-body);
    transition: translate .12s ease, box-shadow .12s ease, background-color .2s ease, border-color .2s ease;
}
.pesta-balon-body .inv-form__choices label:nth-of-type(2) { --tone: var(--inv-primary); }
.pesta-balon-body .inv-form__choices label:nth-of-type(3) { --tone: var(--inv-accent); }
/* the radio dot becomes a big round check */
.pesta-balon-body .inv-form__choices label::before {
    content: ''; width: 1.55rem; height: 1.55rem; flex: none; border-radius: 50%;
    background: var(--pb-paper); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-text) 28%, transparent);
    transition: background-color .2s ease, box-shadow .2s ease;
}
.pesta-balon-body .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: calc(.7rem + .3rem); width: .42rem; height: .75rem; translate: -50% 0; rotate: 45deg;
    border: solid #fff; border-width: 0 3px 3px 0; opacity: 0; transition: opacity .2s ease;
}
.pesta-balon-body .inv-form__choices input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pesta-balon-body .inv-form__choices label:has(input:checked) {
    border-color: var(--inv-text); background: color-mix(in srgb, var(--tone) 45%, var(--pb-paper));
    box-shadow: 0 4px 0 var(--inv-text);
}
.pesta-balon-body .inv-form__choices label:has(input:checked)::before { background: var(--inv-text); box-shadow: none; }
.pesta-balon-body .inv-form__choices label:has(input:checked)::after { opacity: 1; }
.pesta-balon-body .inv-form__choices label:has(input:focus-visible) { outline: 3px solid var(--inv-primary); outline-offset: 3px; }
.pesta-balon-body .inv-form__choices label:active { translate: 0 3px; box-shadow: 0 1px 0 color-mix(in srgb, var(--tone) 45%, transparent); }
.pesta-balon-body .inv-form button[type=submit] { width: 100%; margin-top: .2rem; font-size: 1.05rem; }
.pesta-balon-body .inv-form__notice { padding: .85rem 1rem; border-radius: 1rem; background: color-mix(in srgb, var(--inv-mint) 24%, var(--pb-paper)); font-weight: 700; font-size: .92rem; color: var(--inv-text); }
.pesta-balon-body .inv-form__error { border-radius: 1rem; font-weight: 700; }

/* ---------- RSVP: the Party Pass ---------- */

.pesta-balon-pass { position: relative; max-width: 24rem; margin: 0 auto; text-align: left; filter: drop-shadow(0 16px 20px color-mix(in srgb, var(--inv-text) 22%, transparent)); }
.pesta-balon-pass__main { overflow: hidden; border-radius: 1.5rem 1.5rem 0 0; background: var(--pb-paper); }
.pesta-balon-pass__top {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1rem;
    background: repeating-linear-gradient(-45deg, var(--inv-primary) 0 14px, color-mix(in srgb, var(--inv-primary) 45%, #fff) 14px 28px);
}
.pesta-balon-pass__top span, .pesta-balon-pass__top b {
    padding: .25rem .8rem; border-radius: 999px; font: 800 .8rem/1.3 var(--pb-body); letter-spacing: .14em; text-transform: uppercase;
}
.pesta-balon-pass__top span { background: var(--inv-text); color: #fff; }
.pesta-balon-pass__top b { max-width: 60%; background: var(--pb-paper); color: var(--inv-text); letter-spacing: .06em; overflow-wrap: anywhere; }
.pesta-balon-pass__body { padding: 1.2rem 1.15rem 1.1rem; }
.pesta-balon-pass__intro { margin-bottom: 1rem; font-weight: 700; color: var(--pb-muted); line-height: 1.5; }
.pesta-balon-rsvp .inv-rsvp__deadline {
    display: inline-block; margin: 0 0 .9rem; padding: .3rem .8rem; border-radius: 999px;
    background: color-mix(in srgb, var(--inv-accent) 40%, var(--pb-paper)); font: 800 .82rem/1.4 var(--pb-body);
}
.pesta-balon-rsvp .inv-rsvp__done .inv-button { width: 100%; }

/* the perforated tear line, with a notch on both sides */
.pesta-balon-pass__perf {
    position: relative; height: 1.5rem; background: var(--pb-paper);
    -webkit-mask: radial-gradient(circle .75rem at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle .75rem at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(circle .75rem at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle .75rem at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
.pesta-balon-pass__perf::before {
    content: ''; position: absolute; left: 1.1rem; right: 1.1rem; top: 50%; translate: 0 -50%;
    border-top: 3px dotted color-mix(in srgb, var(--inv-text) 30%, transparent);
}
.pesta-balon-pass__stub {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1.15rem 1.1rem; border-radius: 0 0 1.5rem 1.5rem; background: var(--pb-paper);
    transform-origin: 88% 0;
    transition: transform .75s cubic-bezier(.3, 1.45, .5, 1), clip-path .2s ease;
}
.pesta-balon-pass__admit { display: grid; gap: .05rem; }
.pesta-balon-pass__admit small { font: 800 .7rem/1.4 var(--pb-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pb-muted); }
.pesta-balon-pass__admit b { font: 800 1.15rem/1.2 var(--pb-display); }
.pesta-balon-pass__torn-hint { font-size: .78rem; font-weight: 700; color: var(--pb-muted); }
.pesta-balon-pass__code {
    flex: none; width: 4.6rem; height: 2.7rem; border-radius: 3px;
    background: repeating-linear-gradient(90deg, var(--inv-text) 0 2px, transparent 2px 4px, var(--inv-text) 4px 7px, transparent 7px 9px, var(--inv-text) 9px 10px, transparent 10px 13px);
    opacity: .85;
}
.pesta-balon-pass__stamp {
    position: absolute; right: 1rem; top: 50%; max-width: 62%; padding: .35rem .75rem; translate: 0 -50%; rotate: -8deg;
    border: 3px solid var(--pb-kicker); border-radius: .6rem; background: color-mix(in srgb, var(--pb-paper) 90%, transparent);
    color: var(--pb-kicker); font: 800 .95rem/1.15 var(--pb-display); text-transform: uppercase; text-align: center;
}
/* torn: zigzag edges on both sides of the tear, the stub drops and tilts */
.pesta-balon-pass.is-torn .pesta-balon-pass__perf {
    clip-path: polygon(0 0, 100% 0, 100% 55%, 95% 85%, 90% 55%, 85% 85%, 80% 55%, 75% 85%, 70% 55%, 65% 85%, 60% 55%, 55% 85%, 50% 55%, 45% 85%, 40% 55%, 35% 85%, 30% 55%, 25% 85%, 20% 55%, 15% 85%, 10% 55%, 5% 85%, 0 55%);
}
.pesta-balon-pass.is-torn .pesta-balon-pass__stub {
    transform: translateY(1.4rem) rotate(3.5deg);
    clip-path: polygon(0 .45rem, 5% 0, 10% .45rem, 15% 0, 20% .45rem, 25% 0, 30% .45rem, 35% 0, 40% .45rem, 45% 0, 50% .45rem, 55% 0, 60% .45rem, 65% 0, 70% .45rem, 75% 0, 80% .45rem, 85% 0, 90% .45rem, 95% 0, 100% .45rem, 100% 100%, 0 100%);
}
.pesta-balon-pass.is-torn { margin-bottom: 1.6rem; }
html.inv-anim .pesta-balon-pass.is-torn .pesta-balon-pass__stamp { animation: pesta-balon-stamp .5s cubic-bezier(.3, 1.6, .5, 1) .35s both; }
@keyframes pesta-balon-stamp { from { opacity: 0; scale: 2.2; } to { opacity: 1; scale: 1; } }

/* ---------- wishes: a greeting card and speech bubbles ---------- */

.pesta-balon-card-note {
    position: relative; max-width: 25rem; margin: 0 auto; padding: 1.4rem 1.1rem 1.2rem;
    border-radius: 1.5rem 2.6rem 1.5rem 1.5rem; background: var(--pb-paper); box-shadow: var(--pb-lift); text-align: left;
}
/* the folded corner */
.pesta-balon-card-note::before {
    content: ''; position: absolute; right: 0; top: 0; width: 2.6rem; height: 2.6rem; border-radius: 0 2.6rem 0 .8rem;
    background: linear-gradient(225deg, var(--inv-background) 50%, color-mix(in srgb, var(--inv-primary) 28%, var(--pb-paper)) 50%);
}
.pesta-balon-card-note__balloon { position: absolute; left: -.7rem; top: -2.6rem; width: 2.5rem; height: auto; rotate: -14deg; color: var(--tone); overflow: visible; }
html.inv-anim .pesta-balon-card-note.is-waved { animation: pesta-balon-wave .8s ease-in-out; }
@keyframes pesta-balon-wave { 25% { rotate: -2deg; } 50% { rotate: 1.6deg; } 75% { rotate: -.8deg; } }

.pesta-balon-wishes .inv-wishes__list { --inv-wishes-height: 22rem; gap: .9rem; margin-top: 1.4rem; padding: .2rem .4rem .6rem .1rem; }
.pesta-balon-wishes .inv-wish {
    --tone: var(--inv-primary);
    position: relative; margin-bottom: .4rem; padding: .75rem .95rem .7rem;
    border-radius: 1.2rem 1.2rem 1.2rem .3rem; background: color-mix(in srgb, var(--tone) 16%, var(--pb-paper));
}
.pesta-balon-wishes .inv-wish::after {
    content: ''; position: absolute; left: .7rem; top: calc(100% - 1px); width: .9rem; height: .55rem;
    background: color-mix(in srgb, var(--tone) 16%, var(--pb-paper)); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.pesta-balon-wishes .inv-wish:nth-child(4n + 2) { --tone: var(--inv-sky); }
.pesta-balon-wishes .inv-wish:nth-child(4n + 3) { --tone: var(--inv-accent); }
.pesta-balon-wishes .inv-wish:nth-child(4n) { --tone: var(--inv-mint); }
.pesta-balon-wishes .inv-wish__name { font: 800 1rem/1.3 var(--pb-display); }
.pesta-balon-wishes .inv-wish__message { font-size: .93rem; font-weight: 600; line-height: 1.5; }
.pesta-balon-wishes .inv-wish__time { opacity: 1; color: var(--pb-muted); font-weight: 700; }
.pesta-balon-wishes .inv-wish__reply { border-left-color: var(--inv-primary); background: rgb(255 255 255 / .7); }
.pesta-balon-wishes .inv-wishes__empty { padding: .8rem 1rem; border-radius: 1rem; background: color-mix(in srgb, var(--inv-accent) 24%, var(--pb-paper)); opacity: 1; font-weight: 700; }
.pesta-balon-wishes .inv-wishes__more { margin-top: .3rem; }

/* ---------- gift: envelopes ---------- */

.pesta-balon-envelopes { max-width: 25rem; margin: 0 auto; }
.pesta-balon-envelopes .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.pesta-balon-envelopes .inv-gift__accounts > .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .4rem); }
.pesta-balon-envelopes .inv-gift__account {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem;
    margin: 0; padding: 2.6rem .75rem 1rem; overflow: hidden;
    border-radius: 1.1rem; background: var(--pb-paper); box-shadow: var(--pb-lift); text-align: center;
}
.pesta-balon-envelopes .inv-gift__accounts .inv-gift__account::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2.2rem;
    background: color-mix(in srgb, var(--pb-flap, var(--inv-primary)) 30%, var(--pb-paper)); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.pesta-balon-envelopes .inv-gift__accounts .inv-gift__account::after {
    content: ''; position: absolute; left: 50%; top: 1.6rem; width: 1.15rem; height: 1.15rem; translate: -50% 0;
    border-radius: 50%; background: var(--pb-flap, var(--inv-primary)); box-shadow: 0 0 0 3px var(--pb-paper);
}
.pesta-balon-envelopes .inv-gift__accounts .inv-gift__account:nth-child(even) { --pb-flap: var(--inv-sky); }
.pesta-balon-envelopes .inv-gift__bank { margin-top: .4rem; font: 800 1rem/1.3 var(--pb-display); }
.pesta-balon-envelopes .inv-gift__logo { box-shadow: 0 0 0 1px var(--pb-line); }
.pesta-balon-envelopes .inv-gift__number { font: 800 1.05rem/1.3 var(--pb-display); letter-spacing: .02em; word-break: break-all; }
.pesta-balon-envelopes .inv-gift__holder { font-size: .85rem; font-weight: 700; color: var(--pb-muted); overflow-wrap: anywhere; }
.pesta-balon-envelopes .inv-gift__account .inv-button { width: 100%; margin-top: .5rem; min-height: 2.75rem; padding: .45rem .6rem; font-size: .86rem; }
/* the gift address: an airmail parcel label */
.pesta-balon-envelopes .inv-gift__address {
    margin-top: 1rem; padding: 1.1rem 1.1rem 1.15rem; border: 6px solid transparent; border-radius: 1.1rem;
    background:
        linear-gradient(var(--pb-paper), var(--pb-paper)) padding-box,
        repeating-linear-gradient(-45deg, var(--inv-primary) 0 10px, var(--pb-paper) 10px 20px, var(--inv-sky) 20px 30px, var(--pb-paper) 30px 40px) border-box;
    font-weight: 700; line-height: 1.5;
}
.pesta-balon-envelopes .inv-gift__address .inv-gift__bank { margin: 0; font-size: .78rem; font-family: var(--pb-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pb-kicker); }
.pesta-balon-envelopes .inv-gift__address .inv-gift__holder { font: 700 1.1rem/1.3 var(--pb-display); color: var(--inv-text); }
.pesta-balon-envelopes .inv-gift__address .inv-button { max-width: 16rem; }

/* ---------- wishlist: gift boxes ---------- */

.pesta-balon-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem .9rem; max-width: 25rem; margin: 0 auto; padding: 1.3rem 0 1.4rem; }
.pesta-balon-box:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .45rem); }
.pesta-balon-box { position: relative; }
.pesta-balon-box__inside {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    min-height: 12rem; height: 100%; padding: 1rem .65rem .9rem;
    border-radius: .9rem; background: var(--pb-paper); box-shadow: inset 0 0 0 2px var(--tone-soft), var(--pb-lift);
}
.pesta-balon-box__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .6rem; }
.pesta-balon-box__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--tone-soft); }
.pesta-balon-box__icon .pesta-balon-icon { width: 1.5rem; height: 1.5rem; }
.pesta-balon-box h3 { font: 800 1.02rem/1.25 var(--pb-display); overflow-wrap: anywhere; }
.pesta-balon-box p { font-size: .84rem; line-height: 1.4; color: var(--pb-muted); }
.pesta-balon-box .inv-button { margin-top: .3rem; }

.pesta-balon-box__wrap {
    position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.pesta-balon-box__wrap:focus-visible { outline: 3px solid var(--inv-text); outline-offset: 4px; border-radius: 1rem; }
.pesta-balon-box__paper {
    position: absolute; inset: 0; border-radius: .9rem; transform-origin: 50% 100%;
    background:
        linear-gradient(90deg, transparent calc(50% - .55rem), var(--tone-2) calc(50% - .55rem) calc(50% + .55rem), transparent 0),
        linear-gradient(transparent calc(45% - .55rem), var(--tone-2) calc(45% - .55rem) calc(45% + .55rem), transparent 0),
        repeating-linear-gradient(45deg, var(--tone) 0 11px, var(--tone-mid) 11px 22px);
    box-shadow: inset -7px -8px 0 rgb(0 0 0 / .06), var(--pb-lift);
    transition: transform .5s cubic-bezier(.5, 0, .7, .4) .05s, opacity .35s ease .15s;
}
.pesta-balon-box__lid {
    position: absolute; left: -6%; right: -6%; top: -1.2rem; height: 2.4rem; border-radius: .55rem;
    background:
        linear-gradient(90deg, transparent calc(50% - .6rem), var(--tone-2) calc(50% - .6rem) calc(50% + .6rem), transparent 0),
        color-mix(in srgb, var(--tone) 80%, #000);
    box-shadow: 0 4px 0 rgb(0 0 0 / .14);
    transition: transform .55s cubic-bezier(.3, .7, .3, 1), opacity .4s ease .1s;
}
/* the bow: two loops on top of the lid */
.pesta-balon-box__bow { position: absolute; left: 50%; bottom: calc(100% - .35rem); width: 3rem; height: 1.3rem; translate: -50% 0; }
.pesta-balon-box__bow::before, .pesta-balon-box__bow::after {
    content: ''; position: absolute; bottom: 0; width: 1.45rem; height: 1.15rem; background: var(--tone-2);
    border-radius: 60% 40% 30% 70% / 70% 60% 40% 30%; box-shadow: inset -3px -3px 0 rgb(0 0 0 / .12);
}
.pesta-balon-box__bow::before { left: 0; rotate: -18deg; }
.pesta-balon-box__bow::after { right: 0; rotate: 18deg; scale: -1 1; }
.pesta-balon-box__label {
    position: absolute; left: 50%; bottom: .7rem; translate: -50% 0; white-space: nowrap;
    padding: .3rem .75rem; border-radius: 999px; background: var(--inv-text); color: #fff;
    font: 800 .78rem/1.3 var(--pb-body); transition: bottom .4s ease;
}
.pesta-balon-box.is-open .pesta-balon-box__wrap { pointer-events: none; }
.pesta-balon-box.is-open .pesta-balon-box__label { pointer-events: auto; bottom: -1.6rem; background: var(--pb-paper); color: var(--inv-text); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-text) 22%, transparent); }
.pesta-balon-box.is-open .pesta-balon-box__paper { transform: translateY(14%) scaleY(0); opacity: 0; }
.pesta-balon-box.is-open .pesta-balon-box__lid { transform: translate(30%, -150%) rotate(24deg); opacity: 0; }
html.inv-anim .pesta-balon-box:not(.is-open) .pesta-balon-box__lid { animation: pesta-balon-jiggle 3.6s ease-in-out calc(var(--i, 0) * .4s) infinite; }
.pesta-balon-box:nth-child(2) { --i: 1; } .pesta-balon-box:nth-child(3) { --i: 2; } .pesta-balon-box:nth-child(4) { --i: 3; }
@keyframes pesta-balon-jiggle { 0%, 80%, 100% { rotate: 0deg; } 84% { rotate: -3deg; } 88% { rotate: 3deg; } 92% { rotate: -2deg; } }
html.inv-anim .pesta-balon-box.is-open .pesta-balon-box__inside > * { animation: pesta-balon-peek .5s cubic-bezier(.3, 1.5, .5, 1) .15s both; }
@keyframes pesta-balon-peek { from { opacity: 0; translate: 0 1rem; } to { opacity: 1; translate: 0 0; } }

/* ---------- co-hosts, contacts, protocol, vendors ---------- */

.pesta-balon-hosts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem .6rem; margin: 0 auto; padding: 0; max-width: 26rem; }
.pesta-balon-hosts li {
    display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1rem .45rem .6rem;
    border-radius: 999px; background: var(--pb-paper); box-shadow: var(--pb-lift); font: 800 .95rem/1.3 var(--pb-body);
}
.pesta-balon-hosts svg { width: 1.15rem; height: 1.85rem; flex: none; margin-top: .55rem; color: var(--tone); overflow: visible; }

.pesta-balon-contacts__list { display: grid; gap: .9rem; max-width: 24rem; margin: 0 auto; }
.pesta-balon-contact {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem .85rem; padding: 1rem;
    border-radius: 1.3rem; background: var(--pb-paper); box-shadow: var(--pb-lift); text-align: left;
}
.pesta-balon-contact__avatar {
    display: grid; place-items: center; width: 3.1rem; height: 3.3rem;
    border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%; background: var(--tone-mid); font: 800 1.35rem/1 var(--pb-display);
}
.pesta-balon-contact__name { font: 800 1.1rem/1.25 var(--pb-display); }
.pesta-balon-contact__role { font-size: .88rem; color: var(--pb-muted); }
.pesta-balon-contact .inv-button, .pesta-balon-contact__phone { grid-column: 1 / -1; }
.pesta-balon-contact .inv-button { width: 100%; }

.pesta-balon-protocol__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; max-width: 24rem; margin: 0 auto 1rem; padding: 0; }
.pesta-balon-protocol__list li {
    display: grid; justify-items: center; gap: .4rem; padding: 1rem .6rem;
    border-radius: 1.2rem; background: var(--pb-paper); box-shadow: var(--pb-lift); font: 800 .9rem/1.3 var(--pb-body);
}
.pesta-balon-protocol__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--tone-soft); }

.pesta-balon-vendors__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 25rem; margin: 0 auto; padding: 0; }
.pesta-balon-vendors__list li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .375rem); }
.pesta-balon-vendors__list li {
    display: grid; justify-items: center; align-content: start; gap: .3rem; padding: 1rem .6rem;
    border-radius: 1.2rem; background: var(--pb-paper); box-shadow: var(--pb-lift);
}
.pesta-balon-vendors__role {
    padding: .15rem .65rem; border-radius: 999px; background: var(--tone-soft);
    font: 800 .7rem/1.5 var(--pb-body); letter-spacing: .12em; text-transform: uppercase;
}
.pesta-balon-vendors__name { font: 800 1.02rem/1.25 var(--pb-display); overflow-wrap: anywhere; }
.pesta-balon-vendors__ig {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; padding: 0 .4rem;
    color: var(--inv-text); font-size: .84rem; font-weight: 800; text-decoration: none; overflow-wrap: anywhere;
}
.pesta-balon-vendors__ig:focus-visible { outline: 3px solid var(--inv-primary); outline-offset: 2px; border-radius: .5rem; }

/* ---------- closing: the finale ---------- */

.pesta-balon-closing { padding-bottom: 4.2rem; }
.pesta-balon-finale { position: relative; width: min(100%, 21rem); height: 19rem; margin: 0 auto 1.6rem; }
.pesta-balon-finale__photo { left: 50%; top: 0; width: 56%; translate: -50% 0; }
.pesta-balon-finale__b { position: absolute; width: 22%; filter: drop-shadow(0 8px 6px rgb(0 0 0 / .12)); }
.pesta-balon-finale__b--l { left: 1%; top: 22%; rotate: -12deg; }
.pesta-balon-finale__b--r { right: 1%; top: 10%; rotate: 12deg; }
.pesta-balon-finale__b--c { left: 24%; top: 2%; width: 30%; rotate: -6deg; }
.pesta-balon-finale__b--c2 { left: 48%; top: 12%; width: 28%; rotate: 8deg; }
.pesta-balon-closing__message { max-width: 22rem; margin: 0 auto; font-size: 1.06rem; line-height: 1.7; }
.pesta-balon-closing__signature { margin-top: 1.3rem; font-weight: 800; color: var(--pb-muted); }
.pesta-balon-closing__name { margin-top: .1rem; font: 800 3rem/1.05 var(--pb-display); overflow-wrap: anywhere; text-shadow: .045em .05em 0 color-mix(in srgb, var(--inv-accent) 85%, transparent); }
.pesta-balon-closing__bunting { position: absolute; left: 0; bottom: .4rem; width: 100%; }

@supports (animation-timeline: view()) {
    html.inv-anim .pesta-balon-finale__b { animation: pesta-balon-drift linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    html.inv-anim .pesta-balon-closing__bunting .pesta-balon-bunting__flag,
    html.inv-anim .pesta-balon-hero__bunting .pesta-balon-bunting__flag { transform-box: fill-box; transform-origin: 50% 0; }
    html.inv-anim .pesta-balon-closing__bunting .pesta-balon-bunting__flag { animation: pesta-balon-flag linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@keyframes pesta-balon-drift { from { translate: 0 3rem; } to { translate: 0 0; } }
@keyframes pesta-balon-flag { from { scale: 1 0; } to { scale: 1 1; } }

/* ---------- floating UI ---------- */

.pesta-balon-branding { color: var(--inv-text); font-weight: 700; opacity: 1; }
body:has(.inv-nav) .pesta-balon-branding { padding-bottom: 2.6rem; }
.pesta-balon-body .inv-checkin { border-radius: 1.3rem; box-shadow: var(--pb-lift); }

.pesta-balon-nav.inv-nav {
    --inv-nav-bg: var(--pb-paper); --inv-nav-text: var(--inv-text); --inv-nav-active: var(--inv-text);
    border: 2px solid color-mix(in srgb, var(--inv-text) 10%, transparent);
    box-shadow: 0 5px 0 var(--inv-primary), 0 16px 30px -12px rgb(0 0 0 / .35);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pesta-balon-nav .inv-nav__item { font: 800 .62rem/1 var(--pb-body); }
.pesta-balon-body .inv-music__button { background: var(--inv-text); color: #fff; box-shadow: 0 4px 0 var(--inv-primary); }
.pesta-balon-body .inv-autoscroll { border: 2px solid color-mix(in srgb, var(--inv-text) 30%, transparent); color: var(--inv-text); font-weight: 800; }
.pesta-balon-body .inv-autoscroll--running { background: var(--inv-text); color: #fff; }
.pesta-balon-body .inv-ambient { --inv-ambient-1: var(--inv-primary); --inv-ambient-2: var(--inv-sky); opacity: .7; }

/* ---------- cover fit: every phone ---------- */

@media (max-height: 760px) {
    .pesta-balon-cover__inner { padding-bottom: 2.2rem; gap: .45rem; }
    .pesta-balon-stage { width: min(19.5rem, 84vw, 43svh); }
    .pesta-balon-cover__quote { font-size: .9rem; line-height: 1.4; }
    .pesta-balon-cover__guest { padding-block: .55rem .5rem; }
}
@media (max-height: 660px) {
    .pesta-balon-cover__inner { padding-top: calc(min(100vw, var(--pb-w)) * .13); padding-bottom: 2.1rem; gap: .35rem; }
    .pesta-balon-stage { width: min(17.5rem, 80vw, 40svh); }
    .pesta-balon-cover__kicker { font-size: .72rem; padding: .28rem .85rem; }
    .pesta-balon-cover__hint { font-size: .82rem; }
    .pesta-balon-cover__date { font-size: .9rem; padding: .3rem .85rem; }
    .pesta-balon-cover__quote { font-size: .84rem; line-height: 1.35; }
    .pesta-balon-cover__guest-name { font-size: 1.08rem; }
    .pesta-balon-body .pesta-balon-open { min-height: 3rem; padding-block: .6rem; font-size: 1rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .pesta-balon-cover--leave { transition: opacity .3s ease; }
    .pesta-balon-pass__stub, .pesta-balon-box__paper, .pesta-balon-box__lid, .pesta-balon-candle__flame { transition: none; }
}