/* Collection "Sărbătoare" (ADR-0069): cover invitations for birthdays, company parties and themed nights, bold and
   festive. The cover, its openings, the scene layers, the dust, the entrances, the parallax and the wide layout are
   the shared engine of css/invitation-motion.css (kind "cover", inv-k--cover); each model here is a block of --pv-*
   variables plus the slots it switches on, and the choreography of its theme as sarbatoare-* keyframes (transform
   and opacity only): a burst of confetti, a mask that lifts off the cover, a fringe that shimmies, an old television
   switching off, lyrics that fill as they are sung, marquee bulbs, cut-paper flags in the wind, smoke from a grill,
   doors that swing open, tent flaps drawn aside, a piñata that swings and bursts, flames, a ship that rocks, a medal
   that turns. The drawings are made by tools/invitations/sarbatoare-svg.pl. Contract: docs/invitation-templates.md. */

/* ================= the collection: its taste ================= */

.inv-c--sarbatoare {
    --sb-divider: url(../../img/invitations/ornaments/sarbatoare-divider.svg);
    --sb-divider-ratio: 300 / 30;
    --pv-deco: url(../../img/invitations/ornaments/sarbatoare-deco.svg);
    --pv-deco-display: block;
    --pv-deco-ratio: 360 / 130;
    --pv-deco-opacity: .34;
    --box-bg: color-mix(in srgb, var(--inv-surface) 86%, transparent);
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 38%, transparent);
    --box-radius: 18px;
    --box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .5);
    --button-radius: 999px;
    --amb-image: url(../../img/invitations/ornaments/sarbatoare-confetti.svg);
    --amb-ratio: 24 / 40;
    --amb-anim: inv-confetti;
    --amb-size: 12px;
    --amb-duration: 11s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .9;
    --pv-in-odd: translateX(-60px) rotate(-1.5deg);
    --pv-in-even: translateX(60px) rotate(1.5deg);
    --pv-letter-step: 38ms;
    /* the confetti of a model: three colours of the palette taking turns */
    --sb-c1: var(--inv-primary);
    --sb-c2: var(--inv-ornament);
    --sb-c3: color-mix(in srgb, var(--inv-primary) 45%, var(--inv-ornament));
}

.inv-c--sarbatoare.inv--dark {
    --box-bg: color-mix(in srgb, var(--inv-surface) 78%, transparent);
    --box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8);
}

.inv-c--sarbatoare .orn--divider {
    display: block;
    --orn-image: var(--sb-divider);
    --orn-ratio: var(--sb-divider-ratio);
    --orn-width: 62%;
    --orn-max: 260px;
}

.inv-c--sarbatoare .orn--heading {
    display: block;
    --orn-image: var(--sb-divider);
    --orn-ratio: var(--sb-divider-ratio);
    --orn-width: 40%;
    --orn-max: 160px;
    --orn-margin: -8px auto 24px;
    --orn-opacity: .85;
}

/* Particles in three colours, taking turns. */
.inv-c--sarbatoare .inv__ambient i:nth-child(3n),
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(3n) {
    background: var(--sb-c1);
}

.inv-c--sarbatoare .inv__ambient i:nth-child(3n + 1),
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(3n + 1) {
    background: var(--sb-c2);
}

.inv-c--sarbatoare .inv__ambient i:nth-child(3n + 2),
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(3n + 2) {
    background: var(--sb-c3);
}

/* Where each particle of the cover flies when a model scatters them at the opening (from its place, outwards). */
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(1) { --sb-x: -59cqw; --sb-y: -48cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(2) { --sb-x: -36cqw; --sb-y: 11cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(3) { --sb-x: -15cqw; --sb-y: -28cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(4) { --sb-x: 7cqw; --sb-y: 36cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(5) { --sb-x: 25cqw; --sb-y: -53cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(6) { --sb-x: 45cqw; --sb-y: -8cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(7) { --sb-x: 57cqw; --sb-y: 25cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(8) { --sb-x: -49cqw; --sb-y: 48cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(9) { --sb-x: -20cqw; --sb-y: -30cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(10) { --sb-x: 15cqw; --sb-y: -34cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(11) { --sb-x: -27cqw; --sb-y: -59cqh; }
.inv-c--sarbatoare .inv-envelope__scene i:nth-child(12) { --sb-x: 36cqw; --sb-y: 56cqh; }

/* A drawn element that shines: a band of light crosses it every few seconds (the element is a mask, so the light
   stays inside the drawing). Used by the mask, the saxophone, the medal. */
.inv-c--sarbatoare .orn--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    display: var(--sb-glint, none);
    background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, #fff 75%, transparent) 50%, transparent 65%);
    animation: sarbatoare-glint 5.5s ease-in-out infinite;
}

.inv-c--sarbatoare .orn--hero {
    position: relative;
    overflow: hidden;
}

/* ================================================================================================================
   BIRTHDAYS AND THEMED NIGHTS
   ================================================================================================================ */

/* ========== Cifra: the date of the party in huge figures, confetti bursting around them; the cover opens in a
   flood of colour and its confetti fly apart ========== */

.inv--cifra {
    --f-display: "Abril Fatface", Georgia, serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --f-names: "Abril Fatface", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.4rem, 12.4cqi, 4.8rem);
    --names-line: 1.04;
    --names-color: var(--inv-text);
    --amp-size: .5em;
    --amp-style: normal;
    --amp-color: var(--inv-primary);
    --kicker-weight: 600;
    --kicker-spacing: .38em;
    --date-short-display: block;
    --date-long-display: none;
    --heading-weight: 400;
    --heading-size: 2.2rem;
    --body-weight: 400;
    --message-style: normal;
    --text-display-font: "Outfit", "Segoe UI", sans-serif;
    --pv-sky:
        radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent min(60cqi, 360px)),
        radial-gradient(ellipse 80% 30% at 50% 100%, color-mix(in srgb, var(--inv-primary) 16%, transparent), transparent 80%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg)), var(--inv-bg) 70%);
    --pv-near: url(../../img/invitations/ornaments/sarbatoare-streamers.svg);
    --pv-near-h: clamp(70px, 22cqi, 130px);
    --pv-near-fill:
        linear-gradient(180deg, transparent 0 86%, var(--inv-bg) 93%),
        repeating-linear-gradient(90deg, var(--sb-c1) 0, var(--sb-c2) calc(var(--pv-near-h) * 1.11), var(--sb-c3) calc(var(--pv-near-h) * 2.22), var(--sb-c1) calc(var(--pv-near-h) * 3.333));
    --hero-pad: 60px 8px calc(var(--pv-near-h) + 44px);
    --pv-rays-display: block;
    --pv-rays: var(--inv-ornament);
    --pv-rays-opacity: .2;
    --pv-rays-time: 46s;
    --amb-size: 13px;
    --amb-duration: 9s;
    --pv-cover-anim: inv-confetti;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-bloom-display: block;
    --pv-bloom: color-mix(in srgb, var(--inv-ornament) 80%, #fff);
    --pv-in-odd: translateY(50px) scale(.9);
    --pv-in-even: translateY(50px) scale(.9);
}

.inv--cifra.inv--dark {
    --names-color: var(--inv-text);
}

/* the date, as big as a poster, painted in the colours of the confetti */
.inv--cifra .inv-hero__date {
    margin: 14px 0 4px;
    font: 400 clamp(2.5rem, 13.6cqi, 6.4rem)/1 "Abril Fatface", Georgia, serif;
    letter-spacing: .01em;
    background: linear-gradient(100deg, var(--sb-c1) 10%, var(--sb-c2) 45%, var(--sb-c1) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.inv--cifra .inv__ambient i {
    top: -6%;
}

/* every fourth particle is a burst of confetti that opens in place around the figures */
.inv--cifra .inv__ambient i:nth-child(4n) {
    top: calc(14% + var(--amb-y) * .6);
    width: clamp(80px, 26cqi, 150px);
    margin-left: clamp(-75px, -13cqi, -40px);
    aspect-ratio: 1;
    -webkit-mask-image: url(../../img/invitations/ornaments/sarbatoare-burst.svg);
    mask-image: url(../../img/invitations/ornaments/sarbatoare-burst.svg);
    animation-name: inv-burst;
    animation-duration: 4.2s;
    animation-timing-function: cubic-bezier(.1, .7, .3, 1);
}

html.inv-js .inv--cifra .inv-envelope.is-opening .inv-envelope__scene i {
    animation: sarbatoare-scatter 1.2s cubic-bezier(.2, .7, .3, 1) both;
}

/* ========== Bal mascat: a golden Venetian mask over a violet night, sequins; at the opening the mask lifts off the
   cover and floats away ========== */

.inv--bal-mascat {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Cinzel", Georgia, serif;
    --f-names: "Pinyon Script", cursive;
    --names-weight: 400;
    --names-size: clamp(3.2rem, 17cqi, 6.6rem);
    --names-line: 1.05;
    --names-color: var(--inv-primary);
    --amp-font: "Cinzel", Georgia, serif;
    --amp-style: normal;
    --amp-size: .32em;
    --amp-color: var(--inv-text);
    --kicker-font: "Cinzel", Georgia, serif;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-text);
    --date-font: "Cinzel", Georgia, serif;
    --heading-font: "Pinyon Script", cursive;
    --heading-size: 2.9rem;
    --heading-weight: 400;
    --body-weight: 400;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --label-font: "Cinzel", Georgia, serif;
    --pv-sky:
        radial-gradient(ellipse 54% 34% at 50% 26%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 72%),
        radial-gradient(ellipse 50% 60% at 0% 100%, color-mix(in srgb, var(--inv-accent) 90%, transparent), transparent 70%),
        radial-gradient(ellipse 50% 60% at 100% 100%, color-mix(in srgb, var(--inv-accent) 90%, transparent), transparent 70%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 60%);
    --hero-pad: 40px 8px 90px;
    --hero-justify: flex-start;
    --pv-sheen-display: block;
    --pv-sheen: var(--inv-primary);
    --pv-sheen-opacity: .5;
    --pv-sheen-time: 9s;
    --pv-orn-anim: inv-sway-soft;
    --pv-orn-time: 6.5s;
    --sb-glint: block;
    --amb-image: url(../../img/invitations/ornaments/sarbatoare-sparkle.svg);
    --amb-ratio: 1;
    --amb-anim: inv-sparkle;
    --pv-cover-anim: inv-sparkle;
    --amb-size: 14px;
    --amb-duration: 4.6s;
    --amb-opacity: 1;
    --sb-c1: var(--inv-primary);
    --sb-c2: color-mix(in srgb, var(--inv-primary) 50%, #fff);
    --sb-c3: var(--inv-ornament);
    --pv-in-odd: translateX(-50px) rotate(-2deg);
    --pv-in-even: translateX(50px) rotate(2deg);
}

/* sequins sparkle where they are; one in three is a feather drifting down */
.inv--bal-mascat .inv__ambient i:nth-child(3n) {
    top: -10%;
    width: 22px;
    aspect-ratio: 40 / 120;
    -webkit-mask-image: url(../../img/invitations/ornaments/sarbatoare-feather.svg);
    mask-image: url(../../img/invitations/ornaments/sarbatoare-feather.svg);
    animation-name: inv-petal;
    animation-duration: 16s;
}

/* the mask above the names, in gold leaf, swaying; a band of light crosses it */
.inv--bal-mascat .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/sarbatoare-mask.svg);
    --orn-ratio: 300 / 170;
    --orn-width: min(64cqi, 330px);
    --orn-max: 330px;
    --orn-fill: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 60%, #fff), var(--inv-primary) 40%, color-mix(in srgb, var(--inv-primary) 70%, #000) 70%, var(--inv-primary));
    --orn-margin: 0 auto 6px;
}

/* the mask on the cover: when the guest opens, it lifts away and floats off, turning */
.inv--bal-mascat .inv-envelope__door--l {
    top: 7%;
    bottom: auto;
    left: 50%;
    display: block;
    width: min(64vw, 300px);
    height: auto;
    aspect-ratio: 300 / 170;
    margin-left: max(-32vw, -150px);
    background: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 60%, #fff), var(--inv-primary) 40%, color-mix(in srgb, var(--inv-primary) 70%, #000) 70%, var(--inv-primary));
    -webkit-mask: url(../../img/invitations/ornaments/sarbatoare-mask.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/sarbatoare-mask.svg) center / contain no-repeat;
    box-shadow: none;
    animation: inv-sway-soft 6.5s ease-in-out infinite;
    transition: transform 1.3s cubic-bezier(.5, 0, .2, 1) .1s, opacity .7s ease .6s;
}

.inv--bal-mascat .inv-envelope.is-opening .inv-envelope__door--l {
    opacity: 0;
    transform: translateY(-70vh) rotate(-18deg) scale(.8);
}

@media (max-height: 620px) {
    .inv--bal-mascat .inv-envelope__door--l {
        display: none;
    }
}

/* ========== Anii ’20: a fringe that shimmies, ostrich plumes, strands of pearls; the cover is a fringe curtain that
   parts with a swish ========== */

.inv--anii-20 {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Josefin Sans", "Segoe UI", sans-serif;
    --names-weight: 300;
    --names-size: clamp(2.2rem, 11.6cqi, 4.8rem);
    --names-transform: uppercase;
    --names-spacing: .16em;
    --names-line: 1.16;
    --names-color: var(--inv-primary);
    --amp-font: "Great Vibes", cursive;
    --amp-style: normal;
    --amp-size: 1em;
    --amp-color: var(--inv-ornament);
    --kicker-spacing: .5em;
    --kicker-color: var(--inv-ornament);
    --date-spacing: .4em;
    --heading-font: "Playfair Display", Georgia, serif;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2.3rem;
    --body-weight: 300;
    --text-display-font: "Playfair Display", Georgia, serif;
    --sb-fringe-h: clamp(110px, 32cqi, 190px);
    --pv-sky:
        radial-gradient(ellipse 70% 42% at 50% 0%, color-mix(in srgb, var(--inv-primary) 20%, transparent), transparent 74%),
        radial-gradient(ellipse 60% 30% at 50% 100%, color-mix(in srgb, var(--inv-ornament) 16%, transparent), transparent 80%),
        linear-gradient(180deg, var(--inv-bg), color-mix(in srgb, var(--inv-accent) 60%, var(--inv-bg)));
    --hero-pad: calc(var(--sb-fringe-h) + 10px) 8px clamp(120px, 34cqi, 200px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/sarbatoare-feather.svg);
    --amb-ratio: 40 / 120;
    --amb-anim: inv-petal;
    --pv-cover-anim: inv-petal;
    --amb-size: 18px;
    --amb-duration: 17s;
    --amb-opacity: .75;
    --sb-c1: var(--inv-primary);
    --sb-c2: var(--inv-ornament);
    --sb-c3: color-mix(in srgb, var(--inv-text) 80%, transparent);
    --pv-in-odd: translateX(-46px) skewX(-6deg);
    --pv-in-even: translateX(46px) skewX(6deg);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 58%, transparent) 0 2px, color-mix(in srgb, var(--inv-primary) 8%, transparent) 2px 6px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 90%, #000) 0 3%, color-mix(in srgb, var(--inv-bg) 92%, transparent) 3.4%, color-mix(in srgb, var(--inv-bg) 84%, transparent) 60%, color-mix(in srgb, var(--inv-bg) 60%, transparent));
}

.inv--anii-20 .inv__ambient i {
    top: -14%;
}

/* two rows of beaded fringe across the top, shimmying out of step */
.inv--anii-20 .inv-hero__corner--tl,
.inv--anii-20 .inv-hero__corner--tr {
    display: block;
    top: 0;
    left: 50%;
    right: auto;
    width: 100cqi;
    max-width: none;
    height: var(--sb-fringe-h);
    margin-left: -50cqi;
    aspect-ratio: auto;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, #000), var(--inv-primary) 30%, color-mix(in srgb, var(--inv-primary) 55%, #fff) 70%, var(--inv-primary));
    -webkit-mask: url(../../img/invitations/ornaments/sarbatoare-fringe.svg) top left / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/sarbatoare-fringe.svg) top left / auto 100% repeat-x;
    opacity: 1;
    transform-origin: 50% 0;
    transform: none;
    animation: sarbatoare-shimmy 1.7s ease-in-out infinite alternate;
}

.inv--anii-20 .inv-hero__corner--tr {
    height: calc(var(--sb-fringe-h) * .72);
    -webkit-mask-position: 37px 0;
    mask-position: 37px 0;
    background: var(--inv-ornament);
    opacity: .55;
    animation-duration: 2.3s;
    animation-delay: -.8s;
}

/* ostrich plumes rising at the two lower corners, swaying */
.inv--anii-20 .inv-hero__corner--bl,
.inv--anii-20 .inv-hero__corner--br {
    display: block;
    bottom: 0;
    width: clamp(110px, 32cqi, 230px);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/sarbatoare-plume.svg);
    --hero-corner-ratio: 220 / 300;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 70%, #fff), var(--inv-ornament) 60%, color-mix(in srgb, var(--inv-ornament) 60%, #000));
    --hero-corner-opacity: .85;
    --hero-corner-inset: -10px;
    transform-origin: 50% 100%;
    animation: inv-sway-soft 7s ease-in-out infinite;
}

.inv--anii-20 .inv-hero__corner--bl {
    transform: none;
}

.inv--anii-20 .inv-hero__corner--br {
    transform: scaleX(-1);
    animation-delay: -3.5s;
}

/* a strand of pearls between the names and the date */
.inv--anii-20 .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/sarbatoare-pearls.svg);
    --orn-ratio: 400 / 84;
    --orn-width: min(70cqi, 330px);
    --orn-max: 330px;
    --orn-fill: linear-gradient(90deg, var(--inv-text), color-mix(in srgb, var(--inv-text) 60%, var(--inv-primary)) 50%, var(--inv-text));
    --orn-margin: 20px auto 0;
}

/* the cover: the curtain of fringe hangs in front of the scene, then parts with a swish */
html.inv-js .inv--anii-20 .inv-envelope {
    background: transparent;
}

.inv--anii-20 .inv-envelope::before,
.inv--anii-20 .inv-envelope::after {
    display: none;
}

.inv--anii-20 .inv-envelope.is-opening .inv-envelope__door--l,
.inv--anii-20 .inv-envelope.is-opening .inv-envelope__door--r {
    transform: translateX(-102%) skewX(10deg);
}

/* ========== Anii ’80: a striped sun, neon ridges, a grid running to the horizon, palms; the cover switches off like
   an old television ========== */

.inv--anii-80 {
    --f-display: "Montserrat", "Segoe UI", sans-serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --f-names: "Pacifico", cursive;
    --names-weight: 400;
    --names-size: clamp(2.6rem, 13.6cqi, 5.4rem);
    --names-line: 1.18;
    --names-color: var(--inv-primary);
    --names-shadow: 0 0 10px color-mix(in srgb, var(--inv-primary) 70%, transparent), 0 0 30px color-mix(in srgb, var(--inv-primary) 45%, transparent);
    --pv-names-loop: sarbatoare-neon 7s linear 2.4s infinite;
    --pv-letter-anim: sarbatoare-letter-pop;
    --pv-letter-step: 60ms;
    --amp-font: "Montserrat", "Segoe UI", sans-serif;
    --amp-style: italic;
    --amp-size: .34em;
    --amp-color: var(--inv-ornament);
    --kicker-weight: 800;
    --kicker-style: italic;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-ornament);
    --date-weight: 700;
    --date-spacing: .32em;
    --heading-font: "Pacifico", cursive;
    --heading-weight: 400;
    --heading-size: 2.4rem;
    --body-weight: 400;
    --message-style: normal;
    --text-display-font: "Montserrat", "Segoe UI", sans-serif;
    --sb-horizon: 66%;
    --sb-sun: min(56cqi, 300px);
    --pv-sky:
        linear-gradient(180deg, var(--pv-night) 0, var(--inv-bg) 36%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-primary)) calc(var(--sb-horizon) - 1px), var(--inv-bg) var(--sb-horizon));
    --pv-far: url(../../img/invitations/ornaments/sarbatoare-ridges.svg);
    --pv-far-fill: linear-gradient(180deg, var(--inv-ornament) 0 4%, color-mix(in srgb, var(--inv-accent) 70%, #000) 30%);
    --pv-far-h: clamp(50px, 15cqi, 100px);
    --pv-far-bottom: calc(100% - var(--sb-horizon));
    --pv-far-size: auto 100%;
    --hero-pad: 56px 8px 120px;
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/sarbatoare-sparkle.svg);
    --amb-ratio: 1;
    --amb-anim: inv-twinkle;
    --pv-cover-anim: inv-twinkle;
    --amb-size: 10px;
    --amb-duration: 5s;
    --sb-c1: var(--inv-text);
    --sb-c2: var(--inv-ornament);
    --sb-c3: var(--inv-primary);
    --pv-in-odd: translateX(-80px) skewX(-12deg);
    --pv-in-even: translateX(80px) skewX(12deg);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1400;
    --pv-reveal-ms: 900;
}

/* stars only in the sky, above the sun */
.inv--anii-80 .inv__ambient i {
    top: calc(var(--amb-y) * .5);
}

/* the sun, striped, half behind the ridge */
.inv--anii-80 .inv-hero__corner--tl {
    display: block;
    top: calc(var(--sb-horizon) - var(--sb-sun) * .8);
    left: 50%;
    width: var(--sb-sun);
    max-width: none;
    margin-left: calc(var(--sb-sun) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/sarbatoare-sun.svg);
    --hero-corner-ratio: 1;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 30%, #ffe27a), color-mix(in srgb, var(--inv-primary) 85%, #ffb347) 55%, var(--inv-primary));
    --hero-corner-opacity: 1;
    clip-path: inset(0 0 20% 0);
    animation: sarbatoare-sun 9s ease-in-out infinite alternate;
}

/* the grid of the floor, seen in perspective, running towards the guest */
.inv--anii-80 .inv-hero__corner--br {
    display: block;
    top: var(--sb-horizon);
    right: auto;
    bottom: 0;
    left: 50%;
    width: 100cqi;
    max-width: none;
    margin-left: -50cqi;
    aspect-ratio: auto;
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 26%, transparent), transparent 60%);
    -webkit-mask: linear-gradient(180deg, transparent, #000 28%);
    mask: linear-gradient(180deg, transparent, #000 28%);
    opacity: 1;
    transform: none;
}

.inv--anii-80 .inv-hero__corner--br::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 220%;
    height: 340%;
    background:
        linear-gradient(90deg, var(--inv-ornament) 0 2px, transparent 2px) 0 0 / 44px 44px,
        linear-gradient(180deg, var(--inv-ornament) 0 2px, transparent 2px) 0 0 / 44px 44px;
    transform-origin: 50% 0;
    animation: sarbatoare-grid 1.15s linear infinite;
}

/* palms at the edges, black against the sunset */
.inv--anii-80 .inv-hero__corner--tr,
.inv--anii-80 .inv-hero__corner--bl {
    display: block;
    top: calc(var(--sb-horizon) - clamp(90px, 26cqi, 180px) * 1.5);
    bottom: auto;
    width: clamp(90px, 26cqi, 180px);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/sarbatoare-palm.svg);
    --hero-corner-ratio: 170 / 260;
    --hero-corner-fill: color-mix(in srgb, var(--inv-bg) 80%, #000);
    --hero-corner-opacity: 1;
    --hero-corner-inset: -14px;
    transform-origin: 50% 100%;
    animation: inv-sway-soft 8s ease-in-out infinite;
}

.inv--anii-80 .inv-hero__corner--bl {
    left: -14px;
    transform: none;
    animation-delay: -4s;
}

/* the cover: scan lines over the screen, then it switches off: a line, a dot, dark */
.inv--anii-80 .inv-envelope__scene::after {
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: repeating-linear-gradient(180deg, color-mix(in srgb, #000 22%, transparent) 0 1px, transparent 1px 4px);
    opacity: 1;
    transform: none;
    transition: none;
}

html.inv-js .inv--anii-80 .inv-envelope.is-opening {
    animation: sarbatoare-crt 1s cubic-bezier(.6, 0, .4, 1) .15s both;
}

.inv--anii-80 .inv-envelope.is-opening .inv-envelope__scene::after {
    transform: none;
}

/* ========== Karaoke: a microphone in the spotlight, sound rings, lyric lines that fill as they are sung, notes
   that rise; the cover pulses to the beat and leaves ========== */

.inv--karaoke {
    --f-display: "Montserrat", "Segoe UI", sans-serif;
    --f-body: "Poppins", "Segoe UI", sans-serif;
    --f-names: "Montserrat", "Segoe UI", sans-serif;
    --names-weight: 800;
    --names-size: clamp(2.3rem, 12cqi, 4.8rem);
    --names-transform: uppercase;
    --names-spacing: .02em;
    --names-line: 1.02;
    --names-color: var(--inv-text);
    --names-shadow: 0 0 22px color-mix(in srgb, var(--inv-primary) 40%, transparent);
    --amp-font: "Poppins", "Segoe UI", sans-serif;
    --amp-style: normal;
    --amp-size: .4em;
    --amp-color: var(--inv-primary);
    --kicker-weight: 600;
    --kicker-color: var(--inv-primary);
    --date-weight: 600;
    --heading-weight: 800;
    --heading-size: 1.9rem;
    --heading-transform: uppercase;
    --body-weight: 400;
    --message-style: normal;
    --text-display-font: "Poppins", "Segoe UI", sans-serif;
    --pv-letter-anim: sarbatoare-letter-drop;
    --pv-letter-step: 70ms;
    --sb-mic: clamp(150px, 40cqi, 210px);
    --pv-sky:
        conic-gradient(from 180deg at 50% -8%, transparent 158deg, color-mix(in srgb, var(--inv-primary) 20%, transparent) 170deg 190deg, transparent 202deg),
        radial-gradient(ellipse 70% 22% at 50% 100%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 80%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 60%);
    --hero-pad: 46px 8px 80px;
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/sarbatoare-note.svg);
    --amb-ratio: 40 / 60;
    --amb-anim: inv-bubble;
    --pv-cover-anim: inv-bokeh;
    --amb-size: 22px;
    --amb-duration: 12s;
    --amb-opacity: .5;
    --sb-c1: var(--inv-primary);
    --sb-c2: var(--inv-ornament);
    --sb-c3: color-mix(in srgb, var(--inv-text) 80%, transparent);
    --pv-in: scale(.86);
    --pv-in-odd: translateX(-70px);
    --pv-in-even: translateX(70px);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1500;
    --pv-reveal-ms: 1000;
}

.inv--karaoke .inv__ambient i {
    top: 0;
}

.inv--karaoke .inv__ambient i:nth-child(2n) {
    width: 30px;
    aspect-ratio: 64 / 60;
    -webkit-mask-image: url(../../img/invitations/ornaments/sarbatoare-notes.svg);
    mask-image: url(../../img/invitations/ornaments/sarbatoare-notes.svg);
}

/* the microphone on its stand */
.inv--karaoke .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/sarbatoare-mic.svg);
    --orn-ratio: 140 / 280;
    --orn-width: calc(var(--sb-mic) / 2);
    --orn-max: 120px;
    --orn-fill: linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 55%, #000), var(--inv-text) 40%, color-mix(in srgb, var(--inv-text) 70%, #000));
    --orn-margin: 0 auto 2px;
    --sb-glint: block;
}

/* rings of sound on both sides of the microphone, beating */
.inv--karaoke .inv-hero__corner--tl,
.inv--karaoke .inv-hero__corner--tr {
    display: block;
    top: calc(46px + 24px + var(--sb-mic) * .05);
    width: calc(var(--sb-mic) * .28);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/sarbatoare-soundwaves.svg);
    --hero-corner-ratio: 120 / 200;
    --hero-corner-fill: var(--inv-ornament);
    --hero-corner-opacity: 1;
    animation: sarbatoare-beat-ring 1.1s ease-out infinite;
}

.inv--karaoke .inv-hero__corner--tr {
    left: calc(50% + var(--sb-mic) * .2);
    right: auto;
    transform: none;
}

.inv--karaoke .inv-hero__corner--tl {
    left: auto;
    right: calc(50% + var(--sb-mic) * .2);
    transform: scaleX(-1);
}

/* two lines of lyrics: a dim track, and the light that fills it as the words are sung */
.inv--karaoke .orn--hero-divider,
.inv--karaoke .orn--hero-bottom {
    position: relative;
    display: block;
    overflow: hidden;
    height: 7px;
    border-radius: 999px;
    -webkit-mask: none;
    mask: none;
    --orn-fill: color-mix(in srgb, var(--inv-text) 22%, transparent);
    --orn-ratio: auto;
    --orn-width: min(64cqi, 300px);
    --orn-max: 300px;
    --orn-margin: 22px auto 0;
    animation: none;
}

.inv--karaoke .orn--hero-bottom {
    --orn-width: min(44cqi, 210px);
    --orn-margin: 14px auto 0;
}

.inv--karaoke .orn--hero-divider::after,
.inv--karaoke .orn--hero-bottom::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, #fff));
    transform-origin: 0 50%;
    animation: sarbatoare-sing 7s linear infinite;
}

.inv--karaoke .orn--hero-bottom::after {
    animation-delay: 3s;
}

html.inv-js .inv--karaoke .inv-envelope.is-opening {
    animation: sarbatoare-beat 1.3s ease-in both;
}

/* ========== Cinema: projector reels turning at the top, marquee bulbs around the names, a strip of film running
   below; the cover is a velvet curtain that parts ========== */

.inv--cinema {
    --f-display: "Bodoni Moda", Georgia, serif;
    --f-body: "Tenor Sans", "Segoe UI", sans-serif;
    --f-names: "Bodoni Moda", Georgia, serif;
    --names-weight: 600;
    --names-size: clamp(2.2rem, 11.4cqi, 4.6rem);
    --names-transform: uppercase;
    --names-spacing: .06em;
    --names-line: 1.08;
    --names-color: var(--inv-primary);
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: 1em;
    --amp-color: var(--inv-text);
    --kicker-font: "Tenor Sans", "Segoe UI", sans-serif;
    --kicker-spacing: .46em;
    --kicker-color: var(--inv-text);
    --date-spacing: .36em;
    --heading-weight: 500;
    --heading-size: 2rem;
    --heading-transform: uppercase;
    --heading-spacing: .06em;
    --body-weight: 400;
    --text-display-font: "Bodoni Moda", Georgia, serif;
    --sb-reel: clamp(120px, 36cqi, 220px);
    --pv-sky:
        conic-gradient(from 180deg at 50% -4%, transparent 166deg, color-mix(in srgb, #fff 9%, transparent) 174deg 186deg, transparent 194deg),
        radial-gradient(ellipse 80% 50% at 50% 50%, color-mix(in srgb, var(--inv-accent) 70%, transparent), transparent 80%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 64%);
    --pv-near: url(../../img/invitations/ornaments/sarbatoare-filmstrip.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-text) 12%, #000);
    --pv-near-h: clamp(46px, 14cqi, 80px);
    --hero-pad: calc(var(--sb-reel) * .7 + 30px) 8px calc(var(--pv-near-h) + 60px);
    --amb-image: none;
    --amb-radius: 50%;
    --amb-anim: inv-bokeh;
    --pv-cover-anim: inv-bokeh;
    --amb-size: 5px;
    --amb-duration: 9s;
    --amb-opacity: .55;
    --sb-c1: color-mix(in srgb, #fff 80%, var(--inv-primary));
    --sb-c2: var(--inv-primary);
    --sb-c3: color-mix(in srgb, #fff 60%, transparent);
    --pv-in-odd: translateX(-60px);
    --pv-in-even: translateX(60px);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, #000) 0 9%, color-mix(in srgb, var(--inv-primary) 40%, #000) 9.6%, transparent 12%),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-ornament) 70%, #000) 0, var(--inv-ornament) 3.5cqi, color-mix(in srgb, var(--inv-ornament) 55%, #000) 7cqi),
        var(--inv-ornament);
}

/* dust in the projector's beam */
.inv--cinema .inv__ambient i {
    top: calc(14% + var(--amb-y) * .7);
}

/* the two reels of the projector at the top corners, turning */
.inv--cinema .inv-hero__corner--tl,
.inv--cinema .inv-hero__corner--tr {
    display: block;
    top: calc(var(--sb-reel) * -.3);
    width: var(--sb-reel);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/sarbatoare-reel.svg);
    --hero-corner-fill: color-mix(in srgb, var(--inv-text) 30%, var(--inv-bg));
    --hero-corner-opacity: 1;
    animation: sarbatoare-turn 7s linear infinite;
}

.inv--cinema .inv-hero__corner--tl {
    left: calc(var(--sb-reel) * -.24);
}

.inv--cinema .inv-hero__corner--tr {
    right: calc(var(--sb-reel) * -.24);
    animation-duration: 5s;
}

/* the marquee: a frame of bulbs around the names, the bulbs lighting up one after the other */
.inv--cinema .inv-hero__frame {
    top: calc(var(--sb-reel) * .7 + 14px);
    bottom: calc(var(--pv-near-h) + 40px);
    left: 50%;
    width: min(92cqi, 760px);
    height: auto;
    margin-left: max(-46cqi, -380px);
    border: 2px solid color-mix(in srgb, var(--inv-primary) 70%, transparent);
    border-radius: 14px;
    background:
        radial-gradient(circle, var(--inv-primary) 0 3px, transparent 4px) 0 0 / 24px 24px repeat-x,
        radial-gradient(circle, var(--inv-primary) 0 3px, transparent 4px) 0 100% / 24px 24px repeat-x,
        radial-gradient(circle, var(--inv-primary) 0 3px, transparent 4px) 0 0 / 24px 24px repeat-y,
        radial-gradient(circle, var(--inv-primary) 0 3px, transparent 4px) 100% 0 / 24px 24px repeat-y,
        color-mix(in srgb, var(--inv-bg) 55%, transparent);
    -webkit-mask: none;
    mask: none;
    box-shadow: 0 0 40px color-mix(in srgb, var(--inv-primary) 20%, transparent), inset 0 0 0 12px color-mix(in srgb, var(--inv-bg) 60%, transparent);
    animation: none;
    translate: none;
}

.inv--cinema .inv-hero__frame::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background:
        radial-gradient(circle, #fff 0 3px, color-mix(in srgb, var(--inv-primary) 60%, transparent) 4px, transparent 8px) 12px 0 / 24px 24px repeat-x,
        radial-gradient(circle, #fff 0 3px, color-mix(in srgb, var(--inv-primary) 60%, transparent) 4px, transparent 8px) 12px 100% / 24px 24px repeat-x,
        radial-gradient(circle, #fff 0 3px, color-mix(in srgb, var(--inv-primary) 60%, transparent) 4px, transparent 8px) 0 12px / 24px 24px repeat-y,
        radial-gradient(circle, #fff 0 3px, color-mix(in srgb, var(--inv-primary) 60%, transparent) 4px, transparent 8px) 100% 12px / 24px 24px repeat-y;
    animation: sarbatoare-chase 1.2s steps(2, jump-none) infinite;
}

/* the strip of film runs sideways along the foot of the screen */
.inv--cinema .inv-hero::after {
    width: calc(100cqi + var(--pv-near-h) * 3);
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    --pv-tile: calc(var(--pv-near-h) * -3);
    animation: inv-slide 4s linear infinite;
}

/* the cover: the velvet curtain of the cinema, its pelmet; the curtains part */
html.inv-js .inv--cinema .inv-envelope {
    background: transparent;
}

.inv--cinema .inv-envelope::before,
.inv--cinema .inv-envelope::after,
.inv--cinema .inv-envelope__scene::before {
    display: none;
}

.inv--cinema .inv-envelope {
    --pv-cover-ink: color-mix(in srgb, #fff 92%, var(--inv-primary));
    --pv-cover-accent: var(--inv-primary);
}

/* ========== Fiesta: rows of cut-paper flags fluttering, confetti and marigolds; the cover falls like a banner ========== */

.inv--fiesta {
    --f-display: "Amatic SC", cursive;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Amatic SC", cursive;
    --names-weight: 700;
    --names-size: clamp(3.6rem, 20cqi, 8rem);
    --names-line: .96;
    --names-color: var(--inv-primary);
    --names-shadow: 3px 3px 0 color-mix(in srgb, var(--inv-ornament) 60%, transparent);
    --amp-font: "Dancing Script", cursive;
    --amp-style: normal;
    --amp-size: .44em;
    --amp-color: var(--inv-text);
    --kicker-weight: 800;
    --kicker-spacing: .3em;
    --date-weight: 700;
    --heading-font: "Amatic SC", cursive;
    --heading-weight: 700;
    --heading-size: 3.2rem;
    --body-weight: 400;
    --message-style: normal;
    --text-display-font: "Nunito", "Segoe UI", sans-serif;
    --sb-papel-h: clamp(84px, 25cqi, 140px);
    --sb-flag: calc(var(--sb-papel-h) * .8462);
    --sb-c1: var(--inv-primary);
    --sb-c2: var(--inv-ornament);
    --sb-c3: color-mix(in srgb, #1d9e93 80%, var(--inv-primary));
    --pv-sky:
        radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--inv-ornament) 40%, transparent), transparent 62%),
        linear-gradient(180deg, var(--inv-accent), var(--inv-bg) 72%);
    --hero-pad: calc(var(--sb-papel-h) * 1.7 + 10px) 8px 80px;
    --hero-justify: flex-start;
    --amb-size: 13px;
    --amb-duration: 10s;
    --pv-cover-anim: inv-confetti;
    --pv-in: translateY(60px) rotate(-3deg);
    --pv-in-odd: translateY(60px) rotate(-3deg);
    --pv-in-even: translateY(60px) rotate(3deg);
    --pv-open: translateY(104%) rotate(3deg);
    --pv-open-opacity: 1;
}

.inv--fiesta .inv__ambient i {
    top: -6%;
}

/* one particle in three is a marigold, turning as it falls */
.inv--fiesta .inv__ambient i:nth-child(3n) {
    width: 20px;
    aspect-ratio: 1;
    background: var(--inv-ornament);
    -webkit-mask-image: url(../../img/invitations/ornaments/sarbatoare-marigold.svg);
    mask-image: url(../../img/invitations/ornaments/sarbatoare-marigold.svg);
    animation-name: inv-petal;
    animation-duration: 14s;
}

/* two rows of papel picado across the top, each flag in its colour, fluttering out of step */
.inv--fiesta .inv-hero__corner--tl,
.inv--fiesta .inv-hero__corner--tr,
.inv--fiesta .inv-envelope::after {
    background: repeating-linear-gradient(90deg, var(--sb-c1) 0 var(--sb-flag), var(--sb-c2) var(--sb-flag) calc(var(--sb-flag) * 2), var(--sb-c3) calc(var(--sb-flag) * 2) calc(var(--sb-flag) * 3));
    -webkit-mask: url(../../img/invitations/ornaments/sarbatoare-papel.svg) top left / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/sarbatoare-papel.svg) top left / auto 100% repeat-x;
}

.inv--fiesta .inv-hero__corner--tl,
.inv--fiesta .inv-hero__corner--tr {
    display: block;
    top: 0;
    left: 50%;
    right: auto;
    width: 100cqi;
    max-width: none;
    height: var(--sb-papel-h);
    margin-left: -50cqi;
    aspect-ratio: auto;
    opacity: 1;
    transform-origin: 50% 0;
    transform: none;
    animation: sarbatoare-flutter 2.6s ease-in-out infinite alternate;
}

.inv--fiesta .inv-hero__corner--tr {
    top: calc(var(--sb-papel-h) * .82);
    background: repeating-linear-gradient(90deg, var(--sb-c3) 0 var(--sb-flag), var(--sb-c1) var(--sb-flag) calc(var(--sb-flag) * 2), var(--sb-c2) calc(var(--sb-flag) * 2) calc(var(--sb-flag) * 3));
    -webkit-mask-position: calc(var(--sb-flag) * -1.5) 0;
    mask-position: calc(var(--sb-flag) * -1.5) 0;
    animation-duration: 3.2s;
    animation-delay: -1.4s;
}

/* the cover carries a row of flags at its top edge, and falls away like a banner */
.inv--fiesta .inv-envelope::after {
    top: 0;
    bottom: auto;
    height: var(--sb-papel-h);
}

/* ========== Grătar: a garden in the evening, string lights, smoke rising from the grill, fireflies ========== */

.inv--gratar {
    --f-display: "Caveat", cursive;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Caveat", cursive;
    --names-weight: 700;
    --names-size: clamp(3.4rem, 18cqi, 7rem);
    --names-line: .98;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --amp-style: normal;
    --amp-color: var(--inv-text);
    --kicker-font: "Caveat", cursive;
    --kicker-size: 1.5rem;
    --kicker-spacing: .04em;
    --kicker-transform: none;
    --kicker-weight: 600;
    --kicker-color: var(--inv-text);
    --heading-font: "Caveat", cursive;
    --heading-weight: 700;
    --heading-size: 2.8rem;
    --body-weight: 500;
    --message-style: normal;
    --text-display-font: "Quicksand", "Segoe UI", sans-serif;
    --sb-lights: clamp(60px, 18cqi, 110px);
    --pv-sky:
        radial-gradient(ellipse 80% 30% at 50% 82%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 80%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 44%, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)) 84%);
    --pv-far: url(../../img/invitations/ornaments/sarbatoare-garden.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-bg) 62%, #000);
    --pv-far-h: clamp(150px, 50cqi, 290px);
    --pv-far-bottom: calc(var(--pv-near-h) * .6);
    --pv-near: url(../../img/invitations/ornaments/sarbatoare-fence.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-text) 55%, var(--inv-bg)), color-mix(in srgb, var(--inv-text) 25%, var(--inv-bg)) 70%, var(--inv-bg) 96%);
    --pv-near-h: clamp(60px, 19cqi, 110px);
    --hero-pad: calc(var(--sb-lights) * 1.9) 8px calc(var(--pv-near-h) + var(--pv-far-h) * .55);
    --hero-justify: flex-start;
    --amb-image: none;
    --amb-radius: 50%;
    --amb-anim: inv-firefly;
    --pv-cover-anim: inv-firefly;
    --amb-size: 6px;
    --amb-duration: 9s;
    --amb-opacity: 1;
    --sb-c1: color-mix(in srgb, var(--inv-primary) 70%, #fff);
    --sb-c2: var(--inv-primary);
    --sb-c3: color-mix(in srgb, var(--inv-primary) 50%, var(--inv-ornament));
    --pv-in-odd: translateX(-50px) rotate(-1deg);
    --pv-in-even: translateX(50px) rotate(1deg);
    --pv-open: translateY(-6%) scale(1.12);
    --pv-open-opacity: 0;
}

/* fireflies keep to the garden, under the names */
.inv--gratar .inv__ambient i {
    top: calc(48% + var(--amb-y) * .4);
}

/* one particle in three is a puff of smoke rising from the grill */
.inv--gratar .inv__ambient i:nth-child(3n) {
    top: auto;
    bottom: calc(var(--pv-near-h) * .9 + clamp(50px, 15cqi, 90px));
    left: calc(16% + clamp(20px, 6cqi, 40px));
    width: clamp(50px, 16cqi, 90px);
    aspect-ratio: 120 / 104;
    background: color-mix(in srgb, var(--inv-text) 70%, var(--inv-bg));
    -webkit-mask-image: url(../../img/invitations/ornaments/sarbatoare-smoke.svg);
    mask-image: url(../../img/invitations/ornaments/sarbatoare-smoke.svg);
    opacity: .5;
    animation-name: sarbatoare-smoke;
    animation-duration: 8s;
    animation-timing-function: ease-out;
}

/* the grill, over the fence on the left */
.inv--gratar .inv-hero__corner--bl {
    display: block;
    bottom: calc(var(--pv-near-h) * .5);
    left: 16%;
    width: clamp(70px, 21cqi, 130px);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/sarbatoare-grill.svg);
    --hero-corner-ratio: 160 / 172;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-text) 62%, var(--inv-bg)), color-mix(in srgb, var(--inv-text) 30%, var(--inv-bg)));
    --hero-corner-opacity: 1;
    transform: none;
}

/* string lights in two swags across the top: the wire, and the bulbs that glow and breathe */
.inv--gratar .inv-hero__corner--tl,
.inv--gratar .inv-hero__corner--tr,
.inv--gratar .inv-hero__corner--br {
    display: block;
    top: 0;
    left: 50%;
    right: auto;
    width: 100cqi;
    max-width: none;
    height: var(--sb-lights);
    margin-left: -50cqi;
    aspect-ratio: auto;
    -webkit-mask: url(../../img/invitations/ornaments/sarbatoare-festoon-wire.svg) top left / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/sarbatoare-festoon-wire.svg) top left / auto 100% repeat-x;
    background: color-mix(in srgb, var(--inv-text) 30%, #000);
    opacity: 1;
    transform: none;
}

.inv--gratar .inv-hero__corner--tr {
    -webkit-mask-image: url(../../img/invitations/ornaments/sarbatoare-festoon-bulbs.svg);
    mask-image: url(../../img/invitations/ornaments/sarbatoare-festoon-bulbs.svg);
    background: color-mix(in srgb, var(--inv-primary) 80%, #fff);
    animation: inv-pulse 3.2s ease-in-out infinite;
}

/* a second string, lower and smaller, out of step */
.inv--gratar .inv-hero__corner--br {
    top: calc(var(--sb-lights) * .62);
    bottom: auto;
    height: calc(var(--sb-lights) * .8);
    -webkit-mask-image: url(../../img/invitations/ornaments/sarbatoare-festoon-bulbs.svg);
    mask-image: url(../../img/invitations/ornaments/sarbatoare-festoon-bulbs.svg);
    -webkit-mask-position: calc(var(--sb-lights) * 1.8) 0;
    mask-position: calc(var(--sb-lights) * 1.8) 0;
    background: color-mix(in srgb, var(--inv-ornament) 70%, #fff);
    animation: inv-pulse 2.6s ease-in-out -1.2s infinite;
}

/* ========== Jazz: a saxophone in the spotlight, smoke drifting, notes in the air, a keyboard; the doors of the
   club swing open ========== */

.inv--jazz {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Tenor Sans", "Segoe UI", sans-serif;
    --f-names: "Alex Brush", cursive;
    --names-weight: 400;
    --names-size: clamp(3.4rem, 18cqi, 7rem);
    --names-line: 1.02;
    --names-color: var(--inv-primary);
    --names-shadow: 0 0 26px color-mix(in srgb, var(--inv-primary) 35%, transparent);
    --amp-font: "Tenor Sans", "Segoe UI", sans-serif;
    --amp-style: normal;
    --amp-size: .3em;
    --amp-color: var(--inv-text);
    --kicker-font: "Tenor Sans", "Segoe UI", sans-serif;
    --kicker-spacing: .5em;
    --kicker-color: var(--inv-text);
    --date-spacing: .4em;
    --heading-font: "Alex Brush", cursive;
    --heading-size: 3rem;
    --heading-weight: 400;
    --body-weight: 400;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --sb-sax: clamp(150px, 46cqi, 250px);
    --pv-sky:
        conic-gradient(from 180deg at 50% -6%, transparent 160deg, color-mix(in srgb, var(--inv-primary) 16%, transparent) 172deg 188deg, transparent 200deg),
        radial-gradient(ellipse 60% 40% at 50% 34%, color-mix(in srgb, var(--inv-primary) 12%, transparent), transparent 74%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 50%, color-mix(in srgb, var(--inv-accent) 85%, var(--inv-ornament)) 90%);
    --pv-far: url(../../img/invitations/ornaments/sarbatoare-skyline.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-bg) 70%, #000);
    --pv-far-h: clamp(100px, 30cqi, 190px);
    --pv-far-bottom: calc(var(--pv-near-h) - 4px);
    --pv-near: url(../../img/invitations/ornaments/sarbatoare-keys.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-text) 92%, var(--inv-primary)), color-mix(in srgb, var(--inv-text) 70%, var(--inv-bg)));
    --pv-near-h: clamp(46px, 14cqi, 80px);
    --hero-pad: 40px 8px calc(var(--pv-near-h) + var(--pv-far-h) * .7);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/sarbatoare-note.svg);
    --amb-ratio: 40 / 60;
    --amb-anim: inv-breeze;
    --pv-cover-anim: inv-bokeh;
    --amb-size: 18px;
    --amb-duration: 16s;
    --amb-opacity: .8;
    --sb-c1: var(--inv-primary);
    --sb-c2: color-mix(in srgb, var(--inv-text) 80%, transparent);
    --sb-c3: var(--inv-ornament);
    --pv-orn-anim: inv-sway-soft;
    --pv-orn-time: 5s;
    --sb-glint: block;
    --pv-in-odd: translateX(-50px);
    --pv-in-even: translateX(50px);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        radial-gradient(circle at 86% 50%, var(--inv-primary) 0 7px, color-mix(in srgb, var(--inv-primary) 60%, #000) 8px, transparent 9px),
        radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--inv-ornament) 30%, #000) 0 34px, var(--inv-primary) 35px 39px, transparent 40px),
        repeating-linear-gradient(180deg, transparent 0 46px, color-mix(in srgb, #000 22%, transparent) 46px 48px),
        linear-gradient(90deg, color-mix(in srgb, var(--inv-surface) 90%, #000), var(--inv-surface) 40%, color-mix(in srgb, var(--inv-surface) 70%, #000));
}

/* notes drift sideways at the height of the saxophone */
.inv--jazz .inv__ambient i {
    top: calc(8% + var(--amb-y) * .45);
}

.inv--jazz .inv__ambient i:nth-child(2n) {
    width: 26px;
    aspect-ratio: 64 / 60;
    -webkit-mask-image: url(../../img/invitations/ornaments/sarbatoare-notes.svg);
    mask-image: url(../../img/invitations/ornaments/sarbatoare-notes.svg);
}

/* the saxophone above the names, swaying, with light running along it */
.inv--jazz .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/sarbatoare-sax.svg);
    --orn-ratio: 180 / 300;
    --orn-width: calc(var(--sb-sax) * .6);
    --orn-max: 160px;
    --orn-fill: linear-gradient(120deg, color-mix(in srgb, var(--inv-primary) 60%, #fff), var(--inv-primary) 40%, color-mix(in srgb, var(--inv-primary) 60%, #000));
    --orn-margin: 0 auto 4px;
}

/* smoke of the club, drifting slowly across the light */
.inv--jazz .inv-hero__corner--tl,
.inv--jazz .inv-hero__corner--tr {
    display: block;
    top: 18%;
    left: -30%;
    width: 110cqi;
    max-width: none;
    height: 40%;
    aspect-ratio: auto;
    background: radial-gradient(ellipse 50% 40% at 50% 50%, color-mix(in srgb, var(--inv-text) 14%, transparent), transparent 70%);
    -webkit-mask: none;
    mask: none;
    opacity: 1;
    transform: none;
    animation: sarbatoare-drift 26s ease-in-out infinite alternate;
}

.inv--jazz .inv-hero__corner--tr {
    top: 44%;
    left: auto;
    right: -40%;
    animation-duration: 34s;
    animation-direction: alternate-reverse;
}

/* the cover: the two doors of the club, studded, with round windows; they swing open on their hinges */
html.inv-js .inv--jazz .inv-envelope {
    background: transparent;
}

.inv--jazz .inv-envelope::before,
.inv--jazz .inv-envelope::after,
.inv--jazz .inv-envelope__scene::before {
    display: none;
}

.inv--jazz .inv-envelope {
    --pv-cover-ink: var(--inv-text);
    --pv-cover-accent: var(--inv-primary);
}

.inv--jazz .inv-envelope.is-opening .inv-envelope__door--l,
.inv--jazz .inv-envelope.is-opening .inv-envelope__door--r {
    transform: perspective(1200px) translateX(-50%) rotateY(-100deg) translateX(50%);
}

/* ========== Circ: inside the big top, its stripes overhead, the tent, bunting and stars; the tent flaps are drawn
   aside like curtains ========== */

.inv--circ {
    --f-display: "Yeseva One", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Yeseva One", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.6rem, 13.4cqi, 5.4rem);
    --names-line: 1.06;
    --names-color: var(--inv-primary);
    --names-shadow: 0 3px 0 color-mix(in srgb, var(--inv-ornament) 50%, transparent);
    --amp-size: .5em;
    --amp-style: normal;
    --amp-color: var(--inv-ornament);
    --kicker-weight: 800;
    --kicker-spacing: .32em;
    --date-weight: 700;
    --heading-weight: 400;
    --heading-size: 2.1rem;
    --body-weight: 500;
    --message-style: normal;
    --text-display-font: "Nunito", "Segoe UI", sans-serif;
    --sb-bunting: clamp(50px, 15cqi, 84px);
    --sb-pennant: calc(var(--sb-bunting) * .6944);
    --sb-c1: var(--inv-primary);
    --sb-c2: var(--inv-ornament);
    --sb-c3: color-mix(in srgb, #2f6fb0 75%, var(--inv-primary));
    --pv-sky:
        radial-gradient(ellipse 70% 50% at 50% 58%, var(--inv-bg) 30%, transparent 70%),
        repeating-conic-gradient(from 0deg at 50% -30%, color-mix(in srgb, var(--inv-primary) 16%, var(--inv-bg)) 0 5deg, var(--inv-bg) 5deg 10deg);
    --hero-pad: calc(var(--sb-bunting) + 24px) 8px 70px;
    --hero-justify: flex-start;
    --pv-rays-display: block;
    --pv-rays: var(--inv-ornament);
    --pv-rays-opacity: .16;
    --pv-rays-time: 60s;
    --pv-orn-anim: inv-breathe;
    --pv-orn-time: 4s;
    --amb-image: url(../../img/invitations/ornaments/sarbatoare-star.svg);
    --amb-ratio: 1;
    --amb-anim: inv-twinkle;
    --pv-cover-anim: inv-twinkle;
    --amb-size: 14px;
    --amb-duration: 4.4s;
    --amb-opacity: 1;
    --pv-in: scale(.86);
    --pv-in-odd: translateX(-60px) rotate(-3deg);
    --pv-in-even: translateX(60px) rotate(3deg);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(90deg, color-mix(in srgb, #000 12%, transparent), transparent 30%, color-mix(in srgb, #000 16%, transparent)),
        repeating-linear-gradient(90deg, var(--inv-primary) 0 7cqi, var(--inv-surface) 7cqi 14cqi);
}

/* the tent, breathing in time with the music */
.inv--circ .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/sarbatoare-tent.svg);
    --orn-ratio: 320 / 250;
    --orn-width: min(54cqi, 270px);
    --orn-max: 270px;
    --orn-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, #000));
    --orn-margin: 0 auto 8px;
}

/* bunting along the top, each pennant in its colour, rocking */
.inv--circ .inv-hero__corner--tl {
    display: block;
    top: 0;
    left: 50%;
    width: 100cqi;
    max-width: none;
    height: var(--sb-bunting);
    margin-left: -50cqi;
    aspect-ratio: auto;
    background: repeating-linear-gradient(90deg, var(--sb-c1) 0 var(--sb-pennant), var(--sb-c2) var(--sb-pennant) calc(var(--sb-pennant) * 2), var(--sb-c3) calc(var(--sb-pennant) * 2) calc(var(--sb-pennant) * 3));
    -webkit-mask: url(../../img/invitations/ornaments/sarbatoare-bunting.svg) top left / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/sarbatoare-bunting.svg) top left / auto 100% repeat-x;
    opacity: 1;
    transform-origin: 50% 0;
    transform: none;
    animation: sarbatoare-flutter 2.2s ease-in-out infinite alternate;
}

/* the cover: two striped flaps of the tent, drawn aside and gathered at the edges */
html.inv-js .inv--circ .inv-envelope {
    background: transparent;
}

.inv--circ .inv-envelope::before,
.inv--circ .inv-envelope::after,
.inv--circ .inv-envelope__scene::before {
    display: none;
}

.inv--circ .inv-envelope {
    --pv-cover-ink: var(--inv-text);
}

.inv--circ .inv-envelope__kicker,
.inv--circ .inv-envelope__names,
.inv--circ .inv-envelope__date {
    padding: 4px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--inv-surface) 88%, transparent);
}

.inv--circ .inv-envelope.is-opening .inv-envelope__door--l,
.inv--circ .inv-envelope.is-opening .inv-envelope__door--r {
    transform: translateX(-50%) scaleX(.1) skewY(-12deg) translateX(50%);
}

/* ========== Piñata: a star piñata swinging on its string, candy and confetti falling; on the cover it bursts ========== */

.inv--pinata {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-weight: 700;
    --names-style: italic;
    --names-size: clamp(2.6rem, 13.6cqi, 5.4rem);
    --names-line: 1.04;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --amp-color: var(--inv-ornament);
    --kicker-weight: 800;
    --kicker-spacing: .3em;
    --date-weight: 700;
    --heading-weight: 700;
    --heading-style: italic;
    --heading-size: 2.1rem;
    --body-weight: 500;
    --message-style: normal;
    --text-display-font: "Nunito", "Segoe UI", sans-serif;
    --sb-pinata: clamp(150px, 46cqi, 240px);
    --sb-c1: var(--inv-primary);
    --sb-c2: var(--inv-ornament);
    --sb-c3: color-mix(in srgb, #f2b33d 85%, var(--inv-primary));
    --pv-sky:
        radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--inv-surface) 90%, transparent), transparent min(46cqi, 260px)),
        linear-gradient(180deg, var(--inv-accent), var(--inv-bg) 66%);
    --hero-pad: calc(var(--sb-pinata) * 1.12 + 6px) 8px 70px;
    --hero-justify: flex-start;
    --pv-rays-display: block;
    --pv-rays: var(--inv-primary);
    --pv-rays-opacity: .12;
    --pv-rays-time: 40s;
    --amb-image: url(../../img/invitations/ornaments/sarbatoare-candy.svg);
    --amb-ratio: 52 / 26;
    --amb-size: 26px;
    --amb-duration: 9s;
    --pv-cover-anim: inv-sparkle;
    --pv-in: scale(.86);
    --pv-in-odd: translateX(-60px) rotate(-4deg);
    --pv-in-even: translateX(60px) rotate(4deg);
    --pv-open: scale(1.12);
    --pv-open-opacity: 0;
    --pv-open-ms: 1700;
}

.inv--pinata .inv__ambient i {
    top: -6%;
}

.inv--pinata .inv__ambient i:nth-child(2n) {
    width: 12px;
    aspect-ratio: 24 / 40;
    -webkit-mask-image: url(../../img/invitations/ornaments/sarbatoare-confetti.svg);
    mask-image: url(../../img/invitations/ornaments/sarbatoare-confetti.svg);
}

/* the piñata hanging from the top of the screen, each point in its colour, swinging */
.inv--pinata .inv-hero__corner--tl,
.inv--pinata .inv-envelope__door--l {
    background: conic-gradient(from -36deg at 50% 51.9%, var(--sb-c1) 0 72deg, var(--sb-c2) 72deg 144deg, var(--sb-c3) 144deg 216deg, var(--sb-c1) 216deg 288deg, var(--sb-c2) 288deg 360deg);
    -webkit-mask: url(../../img/invitations/ornaments/sarbatoare-pinata.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/sarbatoare-pinata.svg) center / contain no-repeat;
    transform-origin: 50% 0;
    animation: sarbatoare-swing 3.4s ease-in-out infinite alternate;
}

.inv--pinata .inv-hero__corner--tl {
    display: block;
    top: 0;
    left: 50%;
    width: var(--sb-pinata);
    max-width: none;
    margin-left: calc(var(--sb-pinata) / -2);
    aspect-ratio: 240 / 270;
    opacity: 1;
    transform: none;
}

/* the cover: the piñata swings at the top; at the opening it bursts and its confetti fly in every direction */
.inv--pinata .inv-envelope__door--l {
    top: 0;
    bottom: auto;
    left: 50%;
    display: block;
    width: min(46vw, 220px);
    height: auto;
    aspect-ratio: 240 / 270;
    margin-left: max(-23vw, -110px);
    box-shadow: none;
}

.inv--pinata .inv-envelope.is-opening .inv-envelope__door--l {
    animation: sarbatoare-pop .8s ease-in both;
}

html.inv-js .inv--pinata .inv-envelope.is-opening .inv-envelope__scene i {
    animation: sarbatoare-scatter 1.1s cubic-bezier(.2, .7, .3, 1) .3s both;
}

@media (max-height: 620px) {
    .inv--pinata .inv-envelope__door--l {
        display: none;
    }
}

/* ========== Foc de tabără: a campfire under the stars, sparks rising between the spruces; the night lifts like
   smoke at the opening ========== */

.inv--foc-de-tabara {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Dancing Script", cursive;
    --names-weight: 700;
    --names-size: clamp(3.2rem, 17cqi, 6.6rem);
    --names-line: 1;
    --names-color: var(--inv-primary);
    --names-shadow: 0 0 30px color-mix(in srgb, var(--sb-ember) 40%, transparent);
    --amp-font: "Lora", Georgia, serif;
    --amp-size: .34em;
    --amp-color: var(--inv-text);
    --kicker-spacing: .42em;
    --kicker-color: var(--inv-text);
    --heading-font: "Dancing Script", cursive;
    --heading-weight: 700;
    --heading-size: 2.7rem;
    --body-weight: 400;
    --text-display-font: "Lora", Georgia, serif;
    --sb-fire: clamp(140px, 42cqi, 240px);
    --sb-ember: color-mix(in srgb, #e4682a 75%, var(--inv-ornament));
    --sb-flame: color-mix(in srgb, #f5ae42 78%, var(--inv-primary));
    --pv-sky:
        radial-gradient(ellipse 54% 36% at 50% 100%, color-mix(in srgb, var(--sb-ember) 50%, transparent), transparent 76%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 60%, color-mix(in srgb, var(--inv-bg) 70%, var(--sb-ember)));
    --pv-far: url(../../img/invitations/ornaments/sarbatoare-spruces.svg);
    --pv-far-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 55%, #000), color-mix(in srgb, var(--inv-bg) 60%, var(--sb-ember)));
    --pv-far-h: clamp(110px, 36cqi, 220px);
    --pv-far-bottom: 0px;
    --hero-pad: 56px 8px calc(var(--sb-fire) * .9 + 40px);
    --hero-justify: flex-start;
    --amb-image: none;
    --amb-radius: 50%;
    --amb-size: 4px;
    --amb-duration: 4.2s;
    --amb-opacity: 1;
    --pv-cover-anim: inv-bubble;
    --sb-c1: color-mix(in srgb, var(--sb-flame) 50%, #fff);
    --sb-c2: var(--sb-flame);
    --sb-c3: var(--sb-ember);
    --pv-in-odd: translateY(50px);
    --pv-in-even: translateY(50px);
    --pv-open: translateY(-104%);
    --pv-open-opacity: 1;
}

.inv--foc-de-tabara .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/sarbatoare-stars.svg);
    --texture-size: 260px;
    --texture-opacity: .7;
    --texture-fill: var(--inv-text);
}

/* sparks rise from the fire and go out */
.inv--foc-de-tabara .inv__ambient i {
    top: auto;
    bottom: calc(var(--sb-fire) * .3);
    left: 50%;
    animation-name: sarbatoare-spark;
    animation-timing-function: ease-out;
}

.inv--foc-de-tabara .inv__ambient i:nth-child(3n) { --sb-dx: -46px; margin-left: -18px; animation-duration: 5.2s; }
.inv--foc-de-tabara .inv__ambient i:nth-child(3n + 1) { --sb-dx: 38px; margin-left: 14px; }
.inv--foc-de-tabara .inv__ambient i:nth-child(3n + 2) { --sb-dx: -8px; margin-left: -4px; animation-duration: 3.6s; }

/* the logs and two layers of flame, flickering out of step */
.inv--foc-de-tabara .inv-hero__corner--br,
.inv--foc-de-tabara .inv-hero__corner--bl,
.inv--foc-de-tabara .inv-hero__corner--tr {
    display: block;
    top: auto;
    right: auto;
    left: 50%;
    max-width: none;
    transform: none;
}

.inv--foc-de-tabara .inv-hero__corner--br {
    bottom: 8px;
    width: var(--sb-fire);
    margin-left: calc(var(--sb-fire) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/sarbatoare-logs.svg);
    --hero-corner-ratio: 300 / 150;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--sb-ember) 50%, #000) 0 50%, color-mix(in srgb, var(--inv-text) 30%, #000));
    --hero-corner-opacity: 1;
}

.inv--foc-de-tabara .inv-hero__corner--bl,
.inv--foc-de-tabara .inv-hero__corner--tr {
    bottom: calc(var(--sb-fire) * .16);
    width: calc(var(--sb-fire) * .58);
    margin-left: calc(var(--sb-fire) * -.29);
    --hero-corner-image: url(../../img/invitations/ornaments/sarbatoare-flames.svg);
    --hero-corner-ratio: 200 / 240;
    --hero-corner-fill: linear-gradient(0deg, var(--sb-ember), var(--sb-flame) 50%, color-mix(in srgb, var(--sb-flame) 30%, #fff8d0));
    --hero-corner-opacity: .95;
    transform-origin: 50% 100%;
    animation: sarbatoare-flame 1.3s ease-in-out infinite alternate;
}

.inv--foc-de-tabara .inv-hero__corner--tr {
    bottom: calc(var(--sb-fire) * .2);
    width: calc(var(--sb-fire) * .4);
    margin-left: calc(var(--sb-fire) * -.17);
    --hero-corner-fill: linear-gradient(0deg, var(--sb-flame), color-mix(in srgb, var(--sb-flame) 20%, #fffbe6));
    --hero-corner-opacity: .8;
    animation-duration: .9s;
    animation-delay: -.4s;
}

/* ========== Croazieră: the deck of a ship, signal flags, the sea moving, gulls, the wheel; the cover rocks and sails
   away ========== */

.inv--croaziera {
    --f-display: "Forum", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Forum", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.4rem, 12.4cqi, 5rem);
    --names-transform: uppercase;
    --names-spacing: .12em;
    --names-line: 1.12;
    --names-color: var(--inv-primary);
    --amp-font: "Great Vibes", cursive;
    --amp-style: normal;
    --amp-size: 1em;
    --amp-color: var(--inv-ornament);
    --kicker-spacing: .46em;
    --date-spacing: .36em;
    --heading-weight: 400;
    --heading-size: 2.1rem;
    --heading-transform: uppercase;
    --heading-spacing: .12em;
    --body-weight: 400;
    --text-display-font: "Forum", Georgia, serif;
    --sb-flags: clamp(56px, 17cqi, 96px);
    --sb-flag: calc(var(--sb-flags) * .7895);
    --sb-c1: var(--inv-ornament);
    --sb-c2: var(--inv-primary);
    --sb-c3: color-mix(in srgb, #f2c230 85%, var(--inv-ornament));
    --sb-sea: clamp(120px, 34cqi, 210px);
    --pv-horizon: calc(100% - var(--sb-sea));
    --pv-sky:
        radial-gradient(circle at 78% 18%, color-mix(in srgb, #fff 90%, var(--inv-ornament)) 0 min(6cqi, 34px), transparent calc(min(6cqi, 34px) + 1px)),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 55%, var(--inv-surface)) 0, var(--inv-accent) var(--pv-horizon), color-mix(in srgb, var(--inv-primary) 55%, var(--inv-accent)) calc(var(--pv-horizon) + 1px), color-mix(in srgb, var(--inv-primary) 32%, var(--inv-bg)));
    --pv-far: url(../../img/invitations/ornaments/sarbatoare-waves.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-primary) 40%, var(--inv-surface));
    --pv-far-h: clamp(40px, 12cqi, 70px);
    --pv-far-bottom: calc(var(--pv-near-h) * .74);
    --pv-near: url(../../img/invitations/ornaments/sarbatoare-railing.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 75%, var(--inv-text)), color-mix(in srgb, var(--inv-primary) 85%, #000) 80%);
    --pv-near-h: clamp(70px, 22cqi, 120px);
    --hero-pad: calc(var(--sb-flags) + 16px) 8px calc(var(--sb-sea) + 34px);
    --hero-justify: flex-start;
    --pv-orn-anim: sarbatoare-steer;
    --pv-orn-time: 9s;
    --amb-image: url(../../img/invitations/ornaments/sarbatoare-gull.svg);
    --amb-ratio: 60 / 24;
    --amb-anim: inv-glide;
    --pv-cover-anim: inv-glide;
    --amb-size: 24px;
    --amb-duration: 26s;
    --amb-fill: color-mix(in srgb, var(--inv-text) 70%, transparent);
    --amb-opacity: .7;
    --pv-in-odd: translateX(-56px) rotate(-1deg);
    --pv-in-even: translateX(56px) rotate(1deg);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1800;
}

/* gulls in the sky, not over the sea */
.inv--croaziera .inv__ambient i:nth-child(n) {
    top: calc(var(--amb-y) * .5);
    background: var(--amb-fill);
}

/* the ship's wheel above the names, turned to and fro */
.inv--croaziera .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/sarbatoare-helm.svg);
    --orn-ratio: 1;
    --orn-width: min(30cqi, 150px);
    --orn-max: 150px;
    --orn-fill: linear-gradient(135deg, var(--inv-ornament), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-ornament)));
    --orn-margin: 0 auto 8px;
    --orn-opacity: .9;
}

/* signal flags strung across the top */
.inv--croaziera .inv-hero__corner--tl {
    display: block;
    top: 0;
    left: 50%;
    width: 100cqi;
    max-width: none;
    height: var(--sb-flags);
    margin-left: -50cqi;
    aspect-ratio: auto;
    background: repeating-linear-gradient(90deg, var(--sb-c1) 0 var(--sb-flag), var(--sb-c2) var(--sb-flag) calc(var(--sb-flag) * 2), var(--sb-c3) calc(var(--sb-flag) * 2) calc(var(--sb-flag) * 3));
    -webkit-mask: url(../../img/invitations/ornaments/sarbatoare-signal-flags.svg) top left / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/sarbatoare-signal-flags.svg) top left / auto 100% repeat-x;
    opacity: 1;
    transform-origin: 50% 0;
    transform: none;
    animation: sarbatoare-flutter 2.4s ease-in-out infinite alternate;
}

/* the sea slides by and the horizon rocks with the ship */
.inv--croaziera .inv-hero__frame {
    width: calc(100cqi + var(--pv-far-h) * 4.45);
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    --pv-tile: calc(var(--pv-far-h) * -4.4444);
    transform-origin: 50% 100%;
    animation: inv-slide 7s linear infinite, sarbatoare-rock 7s ease-in-out infinite;
}

html.inv-js .inv--croaziera .inv-envelope.is-opening {
    animation: sarbatoare-sail 1.6s cubic-bezier(.5, 0, .5, 1) both;
}

/* ================================================================================================================
   COMPANY PARTIES AND GALAS
   ================================================================================================================ */

/* ========== Medalie: a gold medal on its ribbon, laurels, rays of light; the cover turns like a coin ========== */

.inv--medalie {
    --f-display: "EB Garamond", Georgia, serif;
    --f-body: "Cinzel", Georgia, serif;
    --f-names: "Cinzel", Georgia, serif;
    --names-weight: 600;
    --names-size: clamp(2.2rem, 11.2cqi, 4.6rem);
    --names-transform: uppercase;
    --names-spacing: .08em;
    --names-line: 1.14;
    --names-color: var(--inv-primary);
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: 1.1em;
    --amp-color: var(--inv-text);
    --kicker-font: "Cinzel", Georgia, serif;
    --kicker-spacing: .3em;
    --kicker-color: var(--inv-text);
    --date-font: "Cinzel", Georgia, serif;
    --heading-font: "Cinzel", Georgia, serif;
    --heading-weight: 500;
    --heading-size: 1.8rem;
    --body-weight: 400;
    --text-display-font: "EB Garamond", Georgia, serif;
    --label-font: "Cinzel", Georgia, serif;
    --sb-medal: clamp(120px, 34cqi, 190px);
    --pv-sky:
        radial-gradient(circle at 50% calc(40px + var(--sb-medal) * 1.05), color-mix(in srgb, var(--inv-primary) 30%, transparent), transparent min(52cqi, 300px)),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 64%);
    --hero-pad: 40px 8px 80px;
    --hero-justify: flex-start;
    --pv-rays-display: block;
    --pv-rays: var(--inv-primary);
    --pv-rays-opacity: .2;
    --pv-rays-time: 70s;
    --pv-sheen-display: block;
    --pv-sheen-opacity: .3;
    --pv-orn-anim: sarbatoare-dangle;
    --pv-orn-time: 5s;
    --sb-glint: block;
    --amb-image: url(../../img/invitations/ornaments/sarbatoare-sparkle.svg);
    --amb-ratio: 1;
    --amb-anim: inv-sparkle;
    --pv-cover-anim: inv-sparkle;
    --amb-size: 13px;
    --amb-duration: 5s;
    --amb-opacity: 1;
    --sb-c1: var(--inv-primary);
    --sb-c2: color-mix(in srgb, var(--inv-primary) 50%, #fff);
    --sb-c3: var(--inv-ornament);
    --pv-in: scale(.9);
    --pv-in-odd: translateX(-46px);
    --pv-in-even: translateX(46px);
    --pv-open: perspective(900px) rotateY(90deg) scale(.86);
    --pv-open-opacity: 0;
}

/* the medal above the names, hanging from its ribbon, turning a little, a band of light across it */
.inv--medalie .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/sarbatoare-medal.svg);
    --orn-ratio: 200 / 300;
    --orn-width: calc(var(--sb-medal) * .667);
    --orn-max: 130px;
    --orn-fill: linear-gradient(150deg, color-mix(in srgb, var(--inv-primary) 55%, #fff), var(--inv-primary) 45%, color-mix(in srgb, var(--inv-primary) 65%, #000) 75%, var(--inv-primary));
    --orn-margin: 0 auto 6px;
    transform-origin: 50% 0;
}

/* laurels between the names and the date */
.inv--medalie .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/sarbatoare-laurel.svg);
    --orn-ratio: 320 / 130;
    --orn-width: min(58cqi, 280px);
    --orn-max: 280px;
    --orn-fill: linear-gradient(90deg, var(--inv-ornament), color-mix(in srgb, var(--inv-primary) 60%, #fff) 50%, var(--inv-ornament));
    --orn-margin: 6px auto -8px;
    --orn-opacity: .8;
}

/* ================= drawings on the cover ================= */

/* Models that do not open with doors draw their theme on the cover in the slots of the doors: confetti bursts, the
   striped sun, the microphone, the campfire, the ship's wheel, the medal. They leave with the cover. */
.inv--cifra .inv-envelope__door,
.inv--anii-80 .inv-envelope__door--l,
.inv--karaoke .inv-envelope__door--l,
.inv--foc-de-tabara .inv-envelope__door,
.inv--croaziera .inv-envelope__door--l,
.inv--medalie .inv-envelope__door--l {
    top: var(--sb-art-top, 6%);
    bottom: auto;
    left: 50%;
    display: block;
    width: var(--sb-art-w);
    height: auto;
    aspect-ratio: var(--sb-art-ratio, 1);
    margin-left: calc(var(--sb-art-w) / -2);
    background: var(--sb-art-fill);
    -webkit-mask: var(--sb-art) center / contain no-repeat;
    mask: var(--sb-art) center / contain no-repeat;
    box-shadow: none;
    transform-origin: 50% 0;
    animation: var(--sb-art-anim, none);
}

.inv--cifra .inv-envelope.is-opening .inv-envelope__door,
.inv--anii-80 .inv-envelope.is-opening .inv-envelope__door--l,
.inv--karaoke .inv-envelope.is-opening .inv-envelope__door--l,
.inv--foc-de-tabara .inv-envelope.is-opening .inv-envelope__door,
.inv--croaziera .inv-envelope.is-opening .inv-envelope__door--l,
.inv--medalie .inv-envelope.is-opening .inv-envelope__door--l {
    transform: none;
}

.inv--cifra {
    --sb-art: url(../../img/invitations/ornaments/sarbatoare-burst.svg);
    --sb-art-w: min(52vw, 30vh, 260px);
    --sb-art-top: 5%;
    --sb-art-fill: conic-gradient(var(--sb-c1) 0 25%, var(--sb-c2) 25% 50%, var(--sb-c3) 50% 75%, var(--sb-c2) 75%);
    --sb-art-anim: inv-burst 3.6s cubic-bezier(.1, .7, .3, 1) infinite;
}

.inv--cifra .inv-envelope__door--l {
    left: 26%;
}

.inv--cifra .inv-envelope__door--r {
    top: auto;
    bottom: 10%;
    left: 74%;
    animation-delay: -1.8s;
}

/* the words of the cover stand in the sky, above the sun */
html.inv-js .inv--anii-80 .inv-envelope {
    justify-content: flex-start;
    padding-top: max(36px, 8vh);
}

.inv--anii-80 {
    --sb-art: url(../../img/invitations/ornaments/sarbatoare-sun.svg);
    --sb-art-w: min(50vw, 26vh, 240px);
    --sb-art-top: calc(var(--sb-horizon) - var(--sb-art-w) * .75);
    --sb-art-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 30%, #ffe27a), color-mix(in srgb, var(--inv-primary) 85%, #ffb347) 55%, var(--inv-primary));
}

/* the sun sits on the horizon: its foot is cut at the line */
.inv--anii-80 .inv-envelope__door--l {
    clip-path: inset(0 0 25% 0);
}

.inv--karaoke {
    --sb-art: url(../../img/invitations/ornaments/sarbatoare-mic.svg);
    --sb-art-ratio: 140 / 280;
    --sb-art-w: min(26vw, 13vh, 120px);
    --sb-art-fill: linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 55%, #000), var(--inv-text) 40%, color-mix(in srgb, var(--inv-text) 70%, #000));
}

.inv--foc-de-tabara {
    --sb-art: url(../../img/invitations/ornaments/sarbatoare-flames.svg);
    --sb-art-ratio: 200 / 240;
    --sb-art-w: min(30vw, 18vh, 150px);
    --sb-art-top: auto;
    --sb-art-fill: linear-gradient(0deg, var(--sb-ember), var(--sb-flame) 50%, color-mix(in srgb, var(--sb-flame) 30%, #fff8d0));
    --sb-art-anim: sarbatoare-flame 1.3s ease-in-out infinite alternate;
}

.inv--foc-de-tabara .inv-envelope__door--l {
    bottom: calc(min(46vw, 26vh, 230px) * .3);
    transform-origin: 50% 100%;
}

.inv--foc-de-tabara .inv-envelope__door--r {
    bottom: 3%;
    width: min(46vw, 26vh, 230px);
    margin-left: calc(min(46vw, 26vh, 230px) / -2);
    aspect-ratio: 300 / 150;
    background: color-mix(in srgb, var(--inv-text) 30%, #000);
    -webkit-mask-image: url(../../img/invitations/ornaments/sarbatoare-logs.svg);
    mask-image: url(../../img/invitations/ornaments/sarbatoare-logs.svg);
    animation: none;
}

.inv--croaziera {
    --sb-art: url(../../img/invitations/ornaments/sarbatoare-helm.svg);
    --sb-art-w: min(40vw, 22vh, 180px);
    --sb-art-fill: linear-gradient(135deg, var(--inv-ornament), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-ornament)));
    --sb-art-anim: sarbatoare-steer 9s ease-in-out infinite;
}

.inv--croaziera .inv-envelope__door--l {
    transform-origin: 50% 50%;
}

.inv--medalie {
    --sb-art: url(../../img/invitations/ornaments/sarbatoare-medal.svg);
    --sb-art-ratio: 200 / 300;
    --sb-art-w: min(30vw, 17vh, 130px);
    --sb-art-top: 4%;
    --sb-art-fill: linear-gradient(150deg, color-mix(in srgb, var(--inv-primary) 55%, #fff), var(--inv-primary) 45%, color-mix(in srgb, var(--inv-primary) 65%, #000) 75%, var(--inv-primary));
    --sb-art-anim: sarbatoare-dangle 5s ease-in-out infinite;
}

@media (max-height: 620px) {
    .inv--cifra .inv-envelope__door,
    .inv--anii-80 .inv-envelope__door--l,
    .inv--karaoke .inv-envelope__door--l,
    .inv--foc-de-tabara .inv-envelope__door,
    .inv--croaziera .inv-envelope__door--l,
    .inv--medalie .inv-envelope__door--l {
        display: none;
    }
}

/* ================= keyframes of the collection (transform and opacity only) ================= */

/* A band of light across a drawing. */
@keyframes sarbatoare-glint {
    0%, 60% { transform: translateX(-110%); }
    100% { transform: translateX(110%); }
}

/* The confetti of the cover fly out from their places. */
@keyframes sarbatoare-scatter {
    from { transform: none; opacity: 1; }
    to { transform: translate(var(--sb-x, 0), var(--sb-y, -40cqh)) rotate(220deg) scale(1.6); opacity: 0; }
}

/* A fringe shimmies, skewing from its top. */
@keyframes sarbatoare-shimmy {
    from { transform: skewX(-4deg) scaleY(1); }
    to { transform: skewX(4deg) scaleY(1.03); }
}

/* Neon that flickers now and then. */
@keyframes sarbatoare-neon {
    0%, 70%, 74%, 78%, 100% { opacity: 1; }
    72%, 76% { opacity: .4; }
}

/* A letter that pops out of the screen. */
@keyframes sarbatoare-letter-pop {
    0% { opacity: 0; transform: scale(2.2); }
    60% { opacity: 1; transform: scale(.92); }
    100% { opacity: 1; transform: none; }
}

/* A letter that drops into its place and bounces. */
@keyframes sarbatoare-letter-drop {
    0% { opacity: 0; transform: translateY(-1.2em); }
    55% { opacity: 1; transform: translateY(.12em); }
    75% { transform: translateY(-.06em); }
    100% { opacity: 1; transform: none; }
}

/* The eighties sun rises and sinks a little behind the ridge. */
@keyframes sarbatoare-sun {
    from { transform: translateY(4%); }
    to { transform: translateY(-3%); }
}

/* The floor grid runs towards the guest: one square, again and again. */
@keyframes sarbatoare-grid {
    from { transform: perspective(260px) rotateX(70deg) translateY(-44px); }
    to { transform: perspective(260px) rotateX(70deg) translateY(0); }
}

/* An old television switching off: it collapses to a line, then to a dot, then goes dark. */
@keyframes sarbatoare-crt {
    0% { transform: none; opacity: 1; }
    45% { transform: scale(1, .006); opacity: 1; }
    75% { transform: scale(.02, .006); opacity: 1; }
    100% { transform: scale(0, 0); opacity: 0; }
}

/* Rings of sound beating out from the microphone. */
@keyframes sarbatoare-beat-ring {
    0% { opacity: .25; scale: .9; }
    25% { opacity: 1; scale: 1.06; }
    100% { opacity: .25; scale: .9; }
}

/* A lyric line fills as it is sung, stays lit, then goes out for the next verse. */
@keyframes sarbatoare-sing {
    0% { transform: scaleX(0); opacity: 1; }
    40% { transform: scaleX(1); opacity: 1; }
    80% { transform: scaleX(1); opacity: 1; }
    90%, 100% { transform: scaleX(1); opacity: 0; }
}

/* The cover pulses to the beat, then flies at the guest and fades. */
@keyframes sarbatoare-beat {
    0% { transform: none; opacity: 1; }
    14% { transform: scale(1.05); }
    28% { transform: scale(.97); }
    42% { transform: scale(1.07); opacity: 1; }
    56% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* A reel of film turning. */
@keyframes sarbatoare-turn {
    to { rotate: 360deg; }
}

/* Marquee bulbs: the second set lights while the first goes dim. */
@keyframes sarbatoare-chase {
    0% { opacity: 1; }
    100% { opacity: .15; }
}

/* Paper flags in the wind, bending from their string. */
@keyframes sarbatoare-flutter {
    from { transform: skewY(1deg) scaleY(1); }
    to { transform: skewY(-1deg) scaleY(.94); }
}

/* A puff of smoke rising from the grill, growing and fading. */
@keyframes sarbatoare-smoke {
    0% { transform: translate(0, 0) scale(.3); opacity: 0; }
    20% { opacity: .55; }
    100% { transform: translate(clamp(30px, 12cqw, 90px), -46cqh) scale(2.2); opacity: 0; }
}

/* Smoke of the club, drifting across. */
@keyframes sarbatoare-drift {
    from { transform: translateX(-12%) scale(1); opacity: .6; }
    to { transform: translateX(18%) scale(1.2); opacity: 1; }
}

/* A piñata swinging on its string. */
@keyframes sarbatoare-swing {
    from { rotate: -9deg; }
    to { rotate: 9deg; }
}

/* The piñata swells and bursts. */
@keyframes sarbatoare-pop {
    0% { transform: none; opacity: 1; }
    35% { transform: scale(1.12) rotate(-5deg); opacity: 1; }
    55% { transform: scale(1.3) rotate(4deg); opacity: 1; }
    75% { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* A spark leaves the fire, drifts up and goes out. */
@keyframes sarbatoare-spark {
    0% { transform: translate(0, 0); opacity: 0; }
    12% { opacity: 1; }
    60% { opacity: .9; }
    100% { transform: translate(var(--sb-dx, 20px), -52cqh); opacity: 0; }
}

/* Flames: they stretch, lean and settle. */
@keyframes sarbatoare-flame {
    0% { transform: scale(1, 1) skewX(0deg); opacity: .95; }
    35% { transform: scale(.94, 1.08) skewX(-3deg); opacity: 1; }
    70% { transform: scale(1.05, .95) skewX(2deg); opacity: .85; }
    100% { transform: scale(.97, 1.04) skewX(-1deg); opacity: 1; }
}

/* The wheel turned to and fro. */
@keyframes sarbatoare-steer {
    0%, 100% { rotate: -24deg; }
    50% { rotate: 24deg; }
}

/* The horizon rocking with the ship. */
@keyframes sarbatoare-rock {
    0%, 100% { rotate: -1.2deg; }
    50% { rotate: 1.2deg; }
}

/* The cover rocks on the water, then sails away. */
@keyframes sarbatoare-sail {
    0% { transform: none; opacity: 1; }
    20% { transform: rotate(-2.5deg); }
    40% { transform: rotate(2deg); opacity: 1; }
    100% { transform: translateX(-112%) rotate(-4deg); opacity: .6; }
}

/* A medal on its ribbon, turning a little. */
@keyframes sarbatoare-dangle {
    0%, 100% { rotate: -4deg; }
    50% { rotate: 4deg; }
}