/* Collection "Funde & Dungi": the coquette taste (bows, satin ribbons, stripes, lace, pearls, candy colours) as a
   cover collection on the shared motion engine (css/invitation-motion.css, ADR-0069). The engine draws the cover, the
   scene, the particles, the entrances, the parallax and the wide layout; this file keeps the taste of the collection
   and its 14 models, each a block of --pv-* variables plus the slots it switches on (docs/invitation-templates.md §9).
   Every cover leaves in its own way, with the collection's own keyframes (funde-si-dungi-*): a bow that unties before
   the two halves slide apart, loops that pull apart, an awning that rolls up, a lid that rises, a box that shakes, a
   cloth that folds, a heart that beats, a party curtain, a handkerchief pulled away, a letter whose knot slips, a
   cake whose candle floods the screen with light, a sail, velvet curtains that gather, a lid that swings open.
   With a photograph the cover is the photograph and leaves with the engine's slow zoom: the drawn decorations and
   the cover's own exits stay off then. The drawings come from tools/invitations/funde-si-dungi-svg.pl. */

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

.inv-c--funde-si-dungi {
    --pv-divider: url(../../img/invitations/ornaments/funde-si-dungi-divider.svg);
    --pv-divider-ratio: 300 / 40;
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-ribbon-curl.svg);
    --pv-deco-display: block;
    --pv-deco-ratio: 360 / 140;
    --pv-deco-opacity: .34;
    --pv-ribbon: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 88%, #000), color-mix(in srgb, var(--inv-primary) 60%, #fff) 46%, var(--inv-primary) 58%, color-mix(in srgb, var(--inv-primary) 86%, #000));
    --pv-satin: linear-gradient(115deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 52%, #fff) 46%, var(--inv-primary) 70%);
    --box-bg: color-mix(in srgb, var(--inv-surface) 90%, transparent);
    --box-border: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 62%, transparent);
    --box-radius: 22px;
    --box-shadow: 0 18px 36px -28px color-mix(in srgb, var(--inv-primary) 70%, transparent);
    --button-radius: 999px;
    --photo-radius: 999px 999px 28px 28px;
    --kicker-spacing: .34em;
    --amb-image: url(../../img/invitations/ornaments/funde-si-dungi-bow-mini.svg);
    --amb-ratio: 40 / 28;
    --amb-anim: inv-petal;
    --amb-size: 22px;
    --amb-duration: 16s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .85;
    --pv-dust: color-mix(in srgb, var(--inv-ornament) 55%, #fff);
    --pv-dust-opacity: .6;
}

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

.inv-c--funde-si-dungi .orn--divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: var(--pv-divider-ratio);
    --orn-width: 66%;
    --orn-max: 280px;
}

.inv-c--funde-si-dungi .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/funde-si-dungi-bow-mini.svg);
    --orn-ratio: 40 / 28;
    --orn-width: 46px;
    --orn-max: 46px;
    --orn-margin: -6px auto 22px;
    --orn-fill: var(--inv-primary);
}

/* a ribbon that curls beside the card, at two of its corners */
.inv-c--funde-si-dungi .inv-corner--tr,
.inv-c--funde-si-dungi .inv-corner--bl {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/funde-si-dungi-ribbon-curl.svg);
    --corner-size: 58%;
    --corner-max: 280px;
    --corner-ratio: 360 / 140;
    --corner-opacity: .28;
}

.inv-c--funde-si-dungi .inv-corner--tr {
    top: 110px;
    right: -14px;
}

.inv-c--funde-si-dungi .inv-corner--bl {
    bottom: 180px;
    left: -14px;
}

.inv-c--funde-si-dungi .inv-monogram {
    box-shadow: inset 0 0 0 4px var(--inv-bg), inset 0 0 0 5.5px color-mix(in srgb, var(--inv-ornament) 70%, transparent);
}

/* With a photograph the cover is the photograph: the drawings that the models put on their covers step aside. */
.inv-c--funde-si-dungi .inv-envelope:has(.inv-envelope__photo) .inv-envelope__scene::after {
    display: none;
}

.inv-c--funde-si-dungi .inv-envelope:has(.inv-envelope__photo)::after {
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    aspect-ratio: auto;
    bottom: -1px;
    opacity: 1;
    animation: none;
}

/* ================================================================================================================
   PANGLICĂ: a satin ribbon ties the cover; the bow unties, then the two halves slide apart
   ================================================================================================================ */

.inv--panglica {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Great Vibes", cursive;
    --names-weight: 400;
    --names-size: clamp(3.4rem, 18cqi, 7.2rem);
    --names-line: 1;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .34em;
    --amp-color: var(--inv-primary);
    --heading-font: "Great Vibes", cursive;
    --heading-size: 2.8rem;
    --heading-weight: 400;
    --closing-font: "Great Vibes", cursive;
    --pv-sky:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 72%, transparent), transparent 46%, color-mix(in srgb, var(--inv-accent) 72%, transparent)),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg)) 0 22px, var(--inv-bg) 22px 46px);
    --pv-near: url(../../img/invitations/ornaments/funde-si-dungi-lace.svg);
    --pv-near-fill: var(--inv-surface);
    --pv-near-h: clamp(44px, 13cqi, 70px);
    --hero-pad: clamp(110px, 32cqi, 190px) 8px calc(var(--pv-near-h) + 60px);
    --amb-size: 24px;
    --amb-duration: 17s;
    --pv-cover-anim: inv-petal;
    --pv-sheen-display: block;
    --pv-sheen-opacity: .5;
    --pv-orn-anim: inv-breathe;
    --pv-orn-time: 6s;
    --pv-in-odd: translateX(-46px) rotate(-1deg);
    --pv-in-even: translateX(46px) rotate(1deg);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 2400;
    --pv-reveal-ms: 1400;
    --pv-door-display: block;
    --pv-door-fill:
        var(--pv-ribbon) 0 18% / 100% 30px no-repeat,
        linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 80%, transparent), transparent 40%),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 82%, var(--inv-surface)) 0 22px, var(--inv-surface) 22px 46px);
}

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

/* the bow, in two halves, one on each half of the cover: it unties before the halves slide apart */
.inv--panglica .inv-envelope__door--l::after,
.inv--panglica .inv-envelope__door--r::after {
    content: "";
    position: absolute;
    top: calc(18% + 10px - min(34vw, 170px) * 160 / 130 * .35);
    right: -1px;
    width: min(34vw, 170px);
    aspect-ratio: 130 / 160;
    background: var(--pv-satin);
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-bow-half.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-bow-half.svg) center / contain no-repeat;
    transform-origin: 100% 35%;
}

.inv--panglica .inv-envelope__door--l,
.inv--panglica .inv-envelope__door--r {
    transition-delay: .75s;
}

html.inv-js .inv--panglica .inv-envelope:not(:has(.inv-envelope__photo)) {
    padding-top: 24svh;
}

.inv--panglica .inv-envelope.is-opening .inv-envelope__door--l::after,
.inv--panglica .inv-envelope.is-opening .inv-envelope__door--r::after {
    animation: funde-si-dungi-untie .95s cubic-bezier(.4, 0, .3, 1) both;
}

/* two ribbon tails hang from the top of the first screen and sway */
.inv--panglica .inv-hero__corner--tl,
.inv--panglica .inv-hero__corner--tr {
    display: block;
    top: -6px;
    width: clamp(46px, 13cqi, 88px);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-streamer.svg);
    --hero-corner-ratio: 72 / 330;
    --hero-corner-inset: 7%;
    --hero-corner-fill: linear-gradient(90deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 52%, #fff) 50%, var(--inv-primary));
    --hero-corner-opacity: .9;
    transform-origin: 50% 0;
    animation: inv-sway-soft 7s ease-in-out infinite;
}

.inv--panglica .inv-hero__corner--tr {
    animation-duration: 8.6s;
    animation-delay: -3s;
}

.inv--panglica .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/funde-si-dungi-bow.svg);
    --orn-ratio: 240 / 160;
    --orn-width: min(44cqi, 200px);
    --orn-max: 200px;
    --orn-fill: var(--pv-satin);
    --orn-margin: 0 auto 4px;
}

.inv--panglica .orn--hero-divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: 300 / 40;
    --orn-width: min(62cqi, 250px);
    --orn-max: 250px;
    --orn-fill: var(--inv-primary);
}

/* ================================================================================================================
   FUNDĂ DE MĂTASE: one big bow on the cover; its loops pull apart as the cover comes closer
   ================================================================================================================ */

.inv--funda-de-matase {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Pinyon Script", cursive;
    --names-weight: 400;
    --names-size: clamp(3rem, 16cqi, 6.4rem);
    --names-line: 1.08;
    --amp-font: "Playfair Display", Georgia, serif;
    --amp-style: italic;
    --amp-size: .36em;
    --amp-color: var(--inv-primary);
    --kicker-font: "Playfair Display", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-spacing: .04em;
    --kicker-size: 1.05rem;
    --heading-style: italic;
    --heading-weight: 400;
    --closing-font: "Pinyon Script", cursive;
    --pv-sky:
        radial-gradient(ellipse 80% 46% at 50% 34%, color-mix(in srgb, var(--inv-surface) 86%, transparent), transparent 74%),
        repeating-linear-gradient(118deg, color-mix(in srgb, var(--inv-accent) 88%, var(--inv-bg)) 0, color-mix(in srgb, var(--inv-surface) 62%, var(--inv-accent)) 7%, color-mix(in srgb, var(--inv-accent) 88%, var(--inv-bg)) 14%);
    --pv-near: url(../../img/invitations/ornaments/funde-si-dungi-scallop-up.svg);
    --pv-near-fill: var(--inv-surface);
    --pv-near-h: 28px;
    --pv-near-size: 54px 100%;
    --pv-big-bow: min(40cqi, 240px);
    --hero-pad: calc(var(--pv-big-bow) * 160 / 130 + clamp(40px, 8cqi, 64px)) 8px 96px;
    --amb-image: none;
    --amb-radius: 50%;
    --amb-anim: inv-bokeh;
    --amb-size: 10px;
    --amb-duration: 13s;
    --amb-fill: radial-gradient(circle at 34% 30%, #fff, color-mix(in srgb, var(--inv-ornament) 40%, #fff) 45%, color-mix(in srgb, var(--inv-ornament) 80%, #000));
    --amb-opacity: .95;
    --pv-cover-anim: inv-bokeh;
    --pv-sheen-display: block;
    --pv-sheen-opacity: .7;
    --pv-sheen-time: 9s;
    --pv-orn-anim: inv-breathe;
    --pv-orn-time: 7s;
    --pv-in: scale(.94);
    --pv-open-ms: 2000;
}

/* the two halves of the bow on the cover; at the opening each loop swings out and away */
.inv--funda-de-matase .inv-envelope__scene::before,
.inv--funda-de-matase .inv-envelope__scene::after {
    content: "";
    position: absolute;
    top: max(5svh, 34px);
    bottom: auto;
    left: auto;
    right: 50%;
    display: block;
    width: min(36vw, 26svh, 230px);
    height: auto;
    aspect-ratio: 130 / 160;
    margin: 0;
    border-radius: 0;
    background: var(--pv-satin);
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-bow-half.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-bow-half.svg) center / contain no-repeat;
    opacity: 1;
    transform: none;
    transform-origin: 100% 35%;
    transition: none;
}

.inv--funda-de-matase .inv-envelope__scene::after {
    scale: -1 1;
}

html.inv-js .inv--funda-de-matase .inv-envelope:not(:has(.inv-envelope__photo)) {
    padding-top: min(30svh, 260px);
}

.inv--funda-de-matase .inv-envelope.is-opening .inv-envelope__scene::before,
.inv--funda-de-matase .inv-envelope.is-opening .inv-envelope__scene::after {
    opacity: 1;
    transform: none;
    animation: funde-si-dungi-loop-apart 1.2s cubic-bezier(.5, 0, .3, 1) both;
}

/* the first screen is crowned by the same big bow, tied again: its two loops open and close slowly around the knot
   (both halves share one box left of the middle; the right one is mirrored around the knot) */
.inv--funda-de-matase .inv-hero__corner--tl,
.inv--funda-de-matase .inv-hero__corner--tr {
    display: block;
    top: clamp(14px, 4cqi, 30px);
    left: auto;
    right: 50%;
    width: var(--pv-big-bow);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-bow-half.svg);
    --hero-corner-ratio: 130 / 160;
    --hero-corner-fill: var(--pv-satin);
    --hero-corner-opacity: 1;
    transform-origin: 100% 35%;
    animation: funde-si-dungi-loop-sway 7s ease-in-out infinite;
    --pv-loop-turn: -6deg;
}

.inv--funda-de-matase .inv-hero__corner--tr {
    transform: scaleX(-1);
    --pv-loop-turn: 6deg;
    animation-delay: -.4s;
}

/* ================================================================================================================
   DUNGI DE CABANĂ: a striped beach-club awning that rolls up; huts, waves and glints on the water
   ================================================================================================================ */

.inv--dungi-de-cabana {
    --pv-sea: color-mix(in srgb, var(--inv-primary) 22%, #4f9fc0);
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-weight: 600;
    --names-style: italic;
    --names-size: clamp(2.8rem, 14.4cqi, 5.8rem);
    --names-line: 1.02;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --amp-style: normal;
    --amp-size: .44em;
    --amp-color: var(--inv-ornament);
    --heading-weight: 600;
    --heading-style: italic;
    --body-weight: 400;
    --pv-stripes: repeating-linear-gradient(90deg, var(--inv-ornament) 0 30px, var(--inv-surface) 30px 60px);
    --pv-water: clamp(118px, 36cqi, 220px);
    --pv-horizon: calc(100% - var(--pv-water));
    --pv-sky:
        radial-gradient(ellipse 40% 12% at 70% var(--pv-horizon), color-mix(in srgb, #fff 80%, transparent), transparent 80%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)) 0, var(--inv-surface) calc(var(--pv-horizon) - 30px), color-mix(in srgb, var(--pv-sea) 40%, var(--inv-surface)) var(--pv-horizon), color-mix(in srgb, var(--pv-sea) 62%, var(--inv-bg)) 100%);
    --pv-far: url(../../img/invitations/ornaments/funde-si-dungi-cabanas.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-ornament) 55%, var(--inv-primary));
    --pv-far-h: clamp(62px, 20cqi, 112px);
    --pv-far-bottom: calc(var(--pv-water) - 8px);
    --pv-near: url(../../img/invitations/ornaments/funde-si-dungi-waves.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(40px, 12cqi, 66px);
    --hero-pad: clamp(118px, 34cqi, 180px) 8px calc(var(--pv-water) + var(--pv-far-h) * .6 + 26px);
    --amb-image: none;
    --amb-radius: 2px;
    --amb-ratio: 5 / 1;
    --amb-anim: inv-twinkle;
    --amb-size: 26px;
    --amb-duration: 4.6s;
    --amb-fill: #fff;
    --amb-opacity: .95;
    --pv-cover-anim: inv-twinkle;
    --pv-in-odd: translateY(40px) rotate(-1.5deg);
    --pv-in-even: translateY(40px) rotate(1.5deg);
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-sail.svg);
    --pv-deco-ratio: 64 / 72;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1900;
    --box-radius: 6px 6px 22px 22px;
}

/* glints sit on the water and blink */
.inv--dungi-de-cabana .inv__ambient i {
    top: calc(100% - var(--pv-water) + var(--amb-y) * .3);
}

/* the cover: an awning with a scalloped edge over the beach; it rolls up to the top */
html.inv-js .inv--dungi-de-cabana .inv-envelope:not(:has(.inv-envelope__photo)) {
    padding-top: 34svh;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)) 30%, var(--inv-surface) 58%, color-mix(in srgb, var(--pv-sea) 40%, var(--inv-surface)) 70%, var(--inv-bg));
    transform-origin: 50% 0;
}

.inv--dungi-de-cabana .inv-envelope:not(:has(.inv-envelope__photo))::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), transparent 40%), var(--pv-stripes);
    -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 30svh no-repeat, url(../../img/invitations/ornaments/funde-si-dungi-scallop-down.svg) 0 calc(30svh - 1px) / 60px 32px repeat-x;
    mask: linear-gradient(#000, #000) 0 0 / 100% 30svh no-repeat, url(../../img/invitations/ornaments/funde-si-dungi-scallop-down.svg) 0 calc(30svh - 1px) / 60px 32px repeat-x;
}

.inv--dungi-de-cabana .inv-envelope__scene::before {
    display: none;
}

.inv--dungi-de-cabana .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: funde-si-dungi-roll-up 1.25s cubic-bezier(.55, 0, .35, 1) .05s both;
}

/* the same awning over the first screen, breathing in the wind */
.inv--dungi-de-cabana .inv-hero__corner--tl {
    display: block;
    top: 0;
    left: 50%;
    width: 100cqi;
    max-width: none;
    height: clamp(74px, 20cqi, 120px);
    margin-left: -50cqi;
    aspect-ratio: auto;
    background: linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 46%), var(--pv-stripes);
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 30px) no-repeat, url(../../img/invitations/ornaments/funde-si-dungi-scallop-down.svg) bottom left / 60px 32px repeat-x;
    mask: linear-gradient(#000, #000) top / 100% calc(100% - 30px) no-repeat, url(../../img/invitations/ornaments/funde-si-dungi-scallop-down.svg) bottom left / 60px 32px repeat-x;
    opacity: 1;
    transform-origin: 50% 0;
    animation: funde-si-dungi-billow 5.5s ease-in-out infinite;
}

/* the sea never stops: the waves are one tile wider than the screen and slide by one tile */
.inv--dungi-de-cabana .inv-hero::after {
    width: calc(100cqi + var(--pv-near-h) * 4);
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    --pv-tile: calc(var(--pv-near-h) * -4);
    animation: inv-slide 7s linear infinite;
}

/* ================================================================================================================
   BOMBONIERĂ: a dotted candy box; the lid rises and the sweets jump out, then tumble over the first screen
   ================================================================================================================ */

.inv--bomboniera {
    --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.8rem, 14.6cqi, 6rem);
    --names-line: 1.04;
    --names-color: var(--inv-primary);
    --names-shadow: 0 3px 0 var(--inv-surface);
    --amp-size: .46em;
    --amp-style: normal;
    --amp-color: var(--inv-ornament);
    --heading-weight: 400;
    --body-weight: 500;
    --pv-dots:
        radial-gradient(circle, var(--inv-surface) 0 8px, transparent 9px) 0 0 / 46px 46px,
        radial-gradient(circle, var(--inv-surface) 0 8px, transparent 9px) 23px 23px / 46px 46px;
    --pv-sky:
        radial-gradient(ellipse 70% 40% at 50% 46%, color-mix(in srgb, var(--inv-bg) 90%, transparent), transparent 76%),
        var(--pv-dots),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 30%, var(--inv-accent)), var(--inv-accent) 70%, var(--inv-bg));
    --pv-near: url(../../img/invitations/ornaments/funde-si-dungi-lace.svg);
    --pv-near-fill: var(--inv-surface);
    --pv-near-h: clamp(46px, 14cqi, 74px);
    --hero-pad: 70px 8px calc(var(--pv-near-h) + 60px);
    --amb-image: url(../../img/invitations/ornaments/funde-si-dungi-candy.svg);
    --amb-ratio: 64 / 32;
    --amb-anim: inv-confetti;
    --amb-size: 40px;
    --amb-duration: 15s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .9;
    --pv-cover-anim: inv-sway;
    --pv-orn-anim: inv-sway-soft;
    --pv-orn-time: 4s;
    --pv-in: scale(.9);
    --pv-in-time: .9s;
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-candy.svg);
    --pv-deco-ratio: 64 / 32;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1900;
    --box-radius: 26px;
}

.inv--bomboniera .inv__ambient i {
    top: -8%;
}

.inv--bomboniera .inv__ambient i:nth-child(3n),
.inv--bomboniera .inv-envelope__scene i:nth-child(3n) {
    background: var(--inv-ornament);
}

.inv--bomboniera .inv__ambient i:nth-child(3n + 1),
.inv--bomboniera .inv-envelope__scene i:nth-child(3n + 1) {
    background: color-mix(in srgb, var(--inv-primary) 45%, var(--inv-ornament));
}

/* the lid: a ribbon across it; it rises and tilts, the sweets inside jump out */
.inv--bomboniera .inv-envelope:not(:has(.inv-envelope__photo))::before {
    background:
        var(--pv-ribbon) 0 20% / 100% 34px no-repeat,
        var(--pv-sky);
}

.inv--bomboniera .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: funde-si-dungi-lid-rise 1.3s cubic-bezier(.5, 0, .3, 1) .05s both;
}

.inv--bomboniera .inv-envelope.is-opening .inv-envelope__scene i,
.inv--cadou .inv-envelope.is-opening .inv-envelope__scene i,
.inv--cocheta .inv-envelope.is-opening .inv-envelope__scene i {
    animation: funde-si-dungi-pop 1.15s cubic-bezier(.2, .7, .3, 1) both;
}

.inv--bomboniera .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/funde-si-dungi-candy.svg);
    --orn-ratio: 64 / 32;
    --orn-width: min(30cqi, 130px);
    --orn-max: 130px;
    --orn-fill: linear-gradient(90deg, var(--inv-ornament), var(--inv-primary) 50%, var(--inv-ornament));
    --orn-margin: 0 auto 6px;
}

/* a candy-cane bar under the names */
.inv--bomboniera .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: min(46cqi, 190px);
    --orn-max: 190px;
    --orn-ratio: 190 / 9;
    --orn-fill: repeating-linear-gradient(-45deg, var(--inv-primary) 0 7px, var(--inv-surface) 7px 14px);
    border-radius: 99px;
}

/* ================================================================================================================
   CADOU: a gift box with a ribbon; it shakes, the lid flies off, confetti fall over the wrapping paper
   ================================================================================================================ */

.inv--cadou {
    --f-display: "Poppins", "Segoe UI", sans-serif;
    --f-body: "Poppins", "Segoe UI", sans-serif;
    --f-names: "Pacifico", cursive;
    --names-weight: 400;
    --names-size: clamp(2.7rem, 14cqi, 5.6rem);
    --names-line: 1.18;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --amp-font: "Poppins", "Segoe UI", sans-serif;
    --amp-size: .4em;
    --amp-style: normal;
    --amp-color: var(--inv-text);
    --kicker-weight: 600;
    --heading-weight: 600;
    --body-weight: 400;
    --pv-paper: repeating-linear-gradient(45deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-bg)) 0 18px, color-mix(in srgb, var(--inv-surface) 80%, var(--inv-accent)) 18px 36px);
    --pv-sky:
        radial-gradient(ellipse 72% 44% at 50% 44%, color-mix(in srgb, var(--inv-bg) 92%, transparent), transparent 78%),
        var(--pv-paper);
    --hero-pad: 60px 8px 90px;
    --amb-image: none;
    --amb-radius: 1.5px;
    --amb-ratio: 1 / 2.2;
    --amb-anim: inv-confetti;
    --amb-size: 9px;
    --amb-duration: 9s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .95;
    --pv-cover-anim: inv-confetti;
    --pv-dust-display: none;
    --pv-in: translateY(30px) scale(.94);
    --pv-in-time: .9s;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 2100;
    --pv-reveal-ms: 1300;
}

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

.inv--cadou .inv__ambient i:nth-child(3n),
.inv--cadou .inv-envelope__scene i:nth-child(3n) {
    background: var(--inv-ornament);
}

.inv--cadou .inv__ambient i:nth-child(3n + 1),
.inv--cadou .inv-envelope__scene i:nth-child(3n + 1) {
    background: color-mix(in srgb, var(--inv-ornament) 50%, #ffd36b);
    --amb-radius: 50%;
}

/* the box: a ribbon across and down, a bow where they meet; it shakes, then the lid flies off */
.inv--cadou .inv-envelope:not(:has(.inv-envelope__photo))::before {
    background:
        linear-gradient(var(--inv-surface), var(--inv-surface)) center 69.6% / min(80vw, 360px) 44svh no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-primary) 40%, transparent), color-mix(in srgb, var(--inv-primary) 40%, transparent)) center 69.6% / calc(min(80vw, 360px) + 10px) calc(44svh + 10px) no-repeat,
        var(--pv-ribbon) 0 26% / 100% 34px no-repeat,
        linear-gradient(90deg, transparent calc(50% - 17px), color-mix(in srgb, var(--inv-primary) 85%, #000) calc(50% - 17px), color-mix(in srgb, var(--inv-primary) 60%, #fff) 50%, var(--inv-primary) calc(50% + 17px), transparent calc(50% + 17px)),
        var(--pv-paper);
}

.inv--cadou .inv-envelope__scene::after {
    left: 50%;
    top: calc(26% + 8px - min(46vw, 230px) * 160 / 240 * .35);
    bottom: auto;
    display: block;
    width: min(46vw, 230px);
    height: auto;
    aspect-ratio: 240 / 160;
    margin-left: calc(min(46vw, 230px) / -2);
    border-radius: 0;
    background: var(--pv-satin);
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-bow.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-bow.svg) center / contain no-repeat;
    opacity: 1;
    transform: none;
    transition: none;
}

html.inv-js .inv--cadou .inv-envelope:not(:has(.inv-envelope__photo)) {
    padding-top: 22svh;
}

.inv--cadou .inv-envelope.is-opening .inv-envelope__scene::after {
    opacity: 1;
    transform: none;
}

.inv--cadou .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: funde-si-dungi-gift 1.75s cubic-bezier(.5, 0, .4, 1) both;
}

/* the gift on the first screen hops now and then */
.inv--cadou .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/funde-si-dungi-gift.svg);
    --orn-ratio: 170 / 180;
    --orn-width: min(36cqi, 160px);
    --orn-max: 160px;
    --orn-fill: linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 70%, #fff), var(--inv-primary) 60%);
    --orn-margin: 0 auto 6px;
    transform-origin: 50% 100%;
    animation: funde-si-dungi-hop 3.2s ease-in-out infinite;
}

.inv--cadou .inv-hero__corner--bl,
.inv--cadou .inv-hero__corner--br {
    display: block;
    bottom: 16px;
    --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-ribbon-curl.svg);
    --hero-corner-ratio: 360 / 140;
    --hero-corner-size: 44%;
    --hero-corner-max: 280px;
    --hero-corner-inset: -10px;
    --hero-corner-fill: var(--inv-primary);
    --hero-corner-opacity: .7;
}

/* ================================================================================================================
   PICNIC: a gingham cloth folds in two and drops away; a meadow with daisies, a basket, petals on the wind
   ================================================================================================================ */

.inv--picnic {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Dancing Script", cursive;
    --names-weight: 700;
    --names-size: clamp(3.2rem, 17cqi, 6.8rem);
    --names-line: 1;
    --names-color: var(--inv-primary);
    --amp-font: "Lora", Georgia, serif;
    --amp-style: italic;
    --amp-size: .34em;
    --amp-color: var(--inv-text);
    --heading-font: "Dancing Script", cursive;
    --heading-size: 2.4rem;
    --heading-weight: 700;
    --body-weight: 400;
    --pv-gingham:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--inv-primary) 36%, transparent) 0 22px, transparent 22px 44px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 36%, transparent) 0 22px, transparent 22px 44px),
        var(--inv-surface);
    --pv-grass: color-mix(in srgb, var(--inv-ornament) 28%, #5f8f4a);
    --pv-sky:
        radial-gradient(circle at 82% 16%, color-mix(in srgb, #fff 90%, transparent) 0 26px, color-mix(in srgb, #ffe6a0 46%, transparent) 30px, transparent 120px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, #cfe6f2), var(--inv-surface) 62%, var(--inv-bg));
    --pv-far: url(../../img/invitations/ornaments/funde-si-dungi-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--pv-grass) 46%, var(--inv-bg));
    --pv-far-h: clamp(74px, 24cqi, 140px);
    --pv-far-bottom: calc(var(--pv-near-h) * .55);
    --pv-near: url(../../img/invitations/ornaments/funde-si-dungi-meadow.svg);
    --pv-near-fill: linear-gradient(180deg, var(--pv-grass), color-mix(in srgb, var(--pv-grass) 70%, var(--inv-bg)) 80%, var(--inv-bg));
    --pv-near-h: clamp(70px, 22cqi, 130px);
    --hero-pad: 56px 8px calc(var(--pv-near-h) + var(--pv-far-h) * .5 + 40px);
    --amb-image: url(../../img/invitations/ornaments/funde-si-dungi-daisy.svg);
    --amb-anim: inv-breeze;
    --amb-size: 22px;
    --amb-duration: 19s;
    --amb-fill: color-mix(in srgb, var(--inv-surface) 70%, var(--inv-ornament));
    --amb-opacity: .95;
    --pv-cover-anim: inv-sway;
    --pv-in-odd: translateX(-50px);
    --pv-in-even: translateX(50px);
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-daisy.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .26;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 2100;
    --pv-reveal-ms: 1300;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(var(--inv-surface), var(--inv-surface)) 100% 50% / min(40vw, 180px) 44svh no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-primary) 50%, transparent), color-mix(in srgb, var(--inv-primary) 50%, transparent)) 100% 50% / calc(min(40vw, 180px) + 5px) calc(44svh + 10px) no-repeat,
        linear-gradient(90deg, transparent calc(100% - 3px), color-mix(in srgb, var(--inv-primary) 50%, transparent) calc(100% - 3px)),
        var(--pv-gingham);
    --box-radius: 14px;
}

.inv--picnic .inv__ambient i {
    top: calc(var(--amb-y) * .6);
}

/* the left half of the cloth folds over the right one, then the folded cloth drops away; the crease is drawn in the
   cloth, outside the label */
.inv--picnic .inv-envelope__door--l {
    z-index: 2;
    box-shadow: none;
}

.inv--picnic .inv-envelope.is-opening .inv-envelope__door--l {
    transform-origin: 100% 50%;
    animation: funde-si-dungi-fold 1.8s cubic-bezier(.45, 0, .3, 1) both;
}

.inv--picnic .inv-envelope.is-opening .inv-envelope__door--r {
    animation: funde-si-dungi-drop 1.8s cubic-bezier(.45, 0, .3, 1) both;
}

.inv--picnic .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/funde-si-dungi-basket.svg);
    --orn-ratio: 230 / 180;
    --orn-width: min(40cqi, 170px);
    --orn-max: 170px;
    --orn-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, #8a5a2b), color-mix(in srgb, var(--inv-primary) 40%, #6b4423));
    --orn-margin: 0 auto 2px;
}

/* ================================================================================================================
   COCHETĂ: pink bows, strings of pearls, hearts on lace; the cover beats like a heart and leaves in a rain of hearts
   ================================================================================================================ */

.inv--cocheta {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Italianno", cursive;
    --names-weight: 400;
    --names-size: clamp(3.8rem, 21cqi, 8rem);
    --names-line: .92;
    --names-color: var(--inv-primary);
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .3em;
    --amp-color: var(--inv-text);
    --kicker-spacing: .4em;
    --heading-font: "Italianno", cursive;
    --heading-size: 3.2rem;
    --heading-weight: 400;
    --closing-font: "Italianno", cursive;
    --pv-sky:
        radial-gradient(ellipse 80% 50% at 50% 40%, color-mix(in srgb, var(--inv-surface) 90%, transparent), transparent 74%),
        linear-gradient(180deg, var(--inv-accent), var(--inv-bg) 70%);
    --pv-near: url(../../img/invitations/ornaments/funde-si-dungi-lace.svg);
    --pv-near-fill: var(--inv-surface);
    --pv-near-h: clamp(48px, 15cqi, 80px);
    --hero-pad: clamp(96px, 28cqi, 160px) 8px calc(var(--pv-near-h) + 60px);
    --amb-image: url(../../img/invitations/ornaments/funde-si-dungi-heart.svg);
    --amb-ratio: 32 / 30;
    --amb-anim: inv-bubble;
    --amb-size: 16px;
    --amb-duration: 16s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .75;
    --pv-cover-anim: inv-bokeh;
    --pv-orn-anim: inv-breathe;
    --pv-orn-time: 1.6s;
    --pv-sheen-display: block;
    --pv-sheen-opacity: .45;
    --pv-in: scale(.92);
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-heart.svg);
    --pv-deco-ratio: 32 / 30;
    --pv-deco-opacity: .18;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1900;
}

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

.inv--cocheta .inv__ambient i:nth-child(even),
.inv--cocheta .inv-envelope__scene i:nth-child(even) {
    background: var(--inv-ornament);
}

/* hearts in a pale lace pattern all over the page */
.inv--cocheta .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/ornaments/funde-si-dungi-heart.svg);
    --texture-size: 34px;
    --texture-opacity: .07;
    --texture-fill: var(--inv-primary);
}

.inv--cocheta .inv-envelope:not(:has(.inv-envelope__photo))::before {
    background:
        radial-gradient(ellipse 60% 34% at 50% 50%, color-mix(in srgb, var(--inv-surface) 92%, transparent), transparent 76%),
        var(--inv-accent);
}

/* the pearls of the cover, in the slot of the far silhouette */
.inv--cocheta .inv-envelope__scene::before {
    top: 0;
    bottom: auto;
    height: clamp(56px, 16vw, 96px);
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-ornament) 70%, #fff), #fff 50%, color-mix(in srgb, var(--inv-ornament) 70%, #fff));
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-pearls.svg) top center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-pearls.svg) top center / auto 100% repeat-x;
}

.inv--cocheta .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: funde-si-dungi-heartbeat 1.55s cubic-bezier(.4, 0, .3, 1) both;
}

/* pearls in two swags at the top, a bow, a heartbeat on the bow */
.inv--cocheta .inv-hero__corner--tl,
.inv--cocheta .inv-hero__corner--tr {
    display: block;
    top: -4px;
    left: 50%;
    right: auto;
    width: 104cqi;
    max-width: none;
    height: clamp(56px, 16cqi, 90px);
    margin-left: -52cqi;
    aspect-ratio: auto;
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-ornament) 70%, #fff), #fff 50%, color-mix(in srgb, var(--inv-ornament) 70%, #fff));
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-pearls.svg) top center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-pearls.svg) top center / auto 100% repeat-x;
    opacity: 1;
    transform: none;
    transform-origin: 50% 0;
    animation: funde-si-dungi-swing 8s ease-in-out infinite;
}

.inv--cocheta .inv-hero__corner--tr {
    top: clamp(14px, 5cqi, 26px);
    -webkit-mask-position: top left;
    mask-position: top left;
    background: var(--inv-ornament);
    opacity: .6;
    animation-duration: 10s;
    animation-direction: reverse;
}

.inv--cocheta .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/funde-si-dungi-bow.svg);
    --orn-ratio: 240 / 160;
    --orn-width: min(30cqi, 140px);
    --orn-max: 140px;
    --orn-fill: var(--pv-satin);
    --orn-margin: 0 auto 2px;
}

/* ================================================================================================================
   SERPENTINE: streamers unroll from the top, confetti fall; the cover rises like a party curtain
   ================================================================================================================ */

.inv--serpentine {
    --f-display: "Outfit", "Segoe UI", sans-serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --f-names: "Caveat", cursive;
    --names-weight: 700;
    --names-size: clamp(3.6rem, 19cqi, 7.6rem);
    --names-line: .95;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --amp-size: .46em;
    --amp-style: normal;
    --amp-color: var(--inv-ornament);
    --kicker-weight: 600;
    --heading-font: "Caveat", cursive;
    --heading-size: 2.6rem;
    --heading-weight: 700;
    --pv-sky:
        radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 34%),
        radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--inv-primary) 18%, transparent), transparent 30%),
        radial-gradient(circle at 70% 86%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 34%),
        radial-gradient(circle at 20% 90%, color-mix(in srgb, var(--inv-primary) 14%, transparent), transparent 30%),
        linear-gradient(180deg, var(--inv-accent), var(--inv-bg) 76%);
    --hero-pad: clamp(150px, 46cqi, 250px) 8px 90px;
    --hero-justify: flex-start;
    --amb-image: none;
    --amb-radius: 2px;
    --amb-ratio: 2 / 1;
    --amb-anim: inv-confetti;
    --amb-size: 11px;
    --amb-duration: 10s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .95;
    --pv-cover-anim: inv-sway;
    --pv-dust-display: none;
    --pv-in-odd: translateY(36px) rotate(-2deg);
    --pv-in-even: translateY(36px) rotate(2deg);
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-streamer.svg);
    --pv-deco-ratio: 72 / 330;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1900;
}

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

.inv--serpentine .inv__ambient i:nth-child(4n),
.inv--serpentine .inv-envelope__scene i:nth-child(4n) {
    background: var(--inv-ornament);
}

.inv--serpentine .inv__ambient i:nth-child(4n + 1),
.inv--serpentine .inv-envelope__scene i:nth-child(4n + 1) {
    background: color-mix(in srgb, var(--inv-ornament) 40%, #ffcf4a);
}

.inv--serpentine .inv__ambient i:nth-child(4n + 2),
.inv--serpentine .inv-envelope__scene i:nth-child(4n + 2) {
    background: color-mix(in srgb, var(--inv-primary) 40%, #6bc5e8);
}

/* on the cover the streamers hang from the top and swing */
.inv--serpentine .inv-envelope__scene i:nth-child(n) {
    top: -4%;
    width: 30px;
    aspect-ratio: 72 / 330;
    -webkit-mask-image: url(../../img/invitations/ornaments/funde-si-dungi-streamer.svg);
    mask-image: url(../../img/invitations/ornaments/funde-si-dungi-streamer.svg);
    transform-origin: 50% 0;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
}

.inv--serpentine .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: funde-si-dungi-party-curtain 1.3s cubic-bezier(.5, 0, .3, 1) both;
}

/* four streamers unroll from the top of the first screen, then swing */
.inv--serpentine .inv-hero__corner--tl,
.inv--serpentine .inv-hero__corner--tr,
.inv--serpentine .inv-hero__corner--bl,
.inv--serpentine .inv-hero__corner--br {
    display: block;
    top: -6px;
    bottom: auto;
    width: clamp(44px, 12cqi, 84px);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-streamer.svg);
    --hero-corner-ratio: 72 / 330;
    --hero-corner-fill: var(--inv-primary);
    --hero-corner-opacity: .92;
    transform: none;
    transform-origin: 50% 0;
    animation: inv-sway-soft 6s ease-in-out infinite;
}

.inv--serpentine .inv-hero__corner--tl { left: 4%; }
.inv--serpentine .inv-hero__corner--bl { left: 22%; --hero-corner-fill: var(--inv-ornament); width: clamp(34px, 9cqi, 64px); animation-duration: 7.4s; }
.inv--serpentine .inv-hero__corner--br { left: auto; right: 22%; --hero-corner-fill: color-mix(in srgb, var(--inv-ornament) 40%, #ffcf4a); width: clamp(34px, 9cqi, 64px); transform: scaleX(-1); animation-duration: 6.8s; }
.inv--serpentine .inv-hero__corner--tr { right: 4%; transform: scaleX(-1); --hero-corner-fill: color-mix(in srgb, var(--inv-primary) 40%, #6bc5e8); animation-duration: 8s; }

html.inv-js .inv--serpentine .inv-hero__corner--tl,
html.inv-js .inv--serpentine .inv-hero__corner--tr,
html.inv-js .inv--serpentine .inv-hero__corner--bl,
html.inv-js .inv--serpentine .inv-hero__corner--br {
    opacity: 0;
}

html.inv-js .inv--serpentine .inv-hero:has(.is-in) .inv-hero__corner--tl,
html.inv-js .inv--serpentine .inv-hero:has(.is-in) .inv-hero__corner--tr,
html.inv-js .inv--serpentine .inv-hero:has(.is-in) .inv-hero__corner--bl,
html.inv-js .inv--serpentine .inv-hero:has(.is-in) .inv-hero__corner--br {
    opacity: .92;
    animation: funde-si-dungi-unroll 1.4s cubic-bezier(.3, .7, .3, 1) both, inv-sway-soft 6s ease-in-out 1.4s infinite;
}

html.inv-js .inv--serpentine .inv-hero:has(.is-in) .inv-hero__corner--bl { animation-delay: .25s, 1.65s; }
html.inv-js .inv--serpentine .inv-hero:has(.is-in) .inv-hero__corner--br { animation-delay: .5s, 1.9s; }
html.inv-js .inv--serpentine .inv-hero:has(.is-in) .inv-hero__corner--tr { animation-delay: .75s, 2.15s; }

/* ================================================================================================================
   BATISTĂ: an embroidered handkerchief with lace edges; the cover is pulled up by its middle, like a handkerchief
   ================================================================================================================ */

.inv--batista {
    --f-display: "EB Garamond", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Petit Formal Script", cursive;
    --names-weight: 400;
    --names-size: clamp(2.6rem, 13.4cqi, 5.4rem);
    --names-line: 1.18;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --amp-font: "EB Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .44em;
    --amp-color: var(--inv-text);
    --kicker-font: "EB Garamond", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-spacing: .06em;
    --kicker-size: 1.1rem;
    --heading-style: italic;
    --heading-weight: 400;
    --pv-linen:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--inv-text) 4%, transparent) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 4%, transparent) 0 1px, transparent 1px 4px);
    --pv-sky:
        var(--pv-linen),
        radial-gradient(ellipse 80% 60% at 50% 45%, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 60%, var(--inv-bg)) 100%);
    --pv-near: url(../../img/invitations/ornaments/funde-si-dungi-lace.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-surface) 85%, var(--inv-ornament));
    --pv-near-h: clamp(40px, 12cqi, 64px);
    --hero-pad: clamp(90px, 26cqi, 150px) 8px calc(var(--pv-near-h) + 70px);
    --amb-image: url(../../img/invitations/ornaments/funde-si-dungi-daisy.svg);
    --amb-anim: inv-petal;
    --amb-size: 14px;
    --amb-duration: 22s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .7;
    --pv-cover-anim: inv-bokeh;
    --pv-sheen-display: block;
    --pv-sheen-opacity: .32;
    --pv-sheen-time: 14s;
    --pv-orn-anim: inv-breathe;
    --pv-in-time: 1.4s;
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-corner-embroidery.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .3;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1800;
}

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

/* the cover: linen with a hem, embroidered corners; it is pulled up from the middle and gathers as it goes */
html.inv-js .inv--batista .inv-envelope:not(:has(.inv-envelope__photo)) {
    transform-origin: 50% 0;
}

.inv--batista .inv-envelope:not(:has(.inv-envelope__photo))::before {
    box-shadow: inset 0 0 0 14px color-mix(in srgb, var(--inv-surface) 90%, var(--inv-accent)), inset 0 0 0 15.5px color-mix(in srgb, var(--inv-ornament) 70%, transparent);
}

.inv--batista .inv-envelope__scene::before,
.inv--batista .inv-envelope__scene::after {
    top: 18px;
    bottom: auto;
    left: 18px;
    right: auto;
    display: block;
    width: min(46vw, 260px);
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-primary));
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-corner-embroidery.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-corner-embroidery.svg) center / contain no-repeat;
    opacity: .85;
    transform: none;
    transition: none;
}

.inv--batista .inv-envelope__scene::after {
    top: auto;
    left: auto;
    bottom: 18px;
    right: 18px;
    scale: -1 -1;
}

.inv--batista .inv-envelope.is-opening .inv-envelope__scene::after {
    opacity: .85;
    transform: none;
}

.inv--batista .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: funde-si-dungi-pull 1.45s cubic-bezier(.55, 0, .3, 1) both;
}

/* the four corners of the first screen are embroidered like the corners of a handkerchief */
.inv--batista .inv-hero__corner--tl,
.inv--batista .inv-hero__corner--tr,
.inv--batista .inv-hero__corner--bl,
.inv--batista .inv-hero__corner--br {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-corner-embroidery.svg);
    --hero-corner-size: 40%;
    --hero-corner-max: 220px;
    --hero-corner-inset: 12px;
    --hero-corner-fill: color-mix(in srgb, var(--inv-ornament) 76%, var(--inv-primary));
    --hero-corner-opacity: .8;
}

.inv--batista .inv-hero__corner--bl,
.inv--batista .inv-hero__corner--br {
    bottom: calc(var(--pv-near-h) + 6px);
}

.inv--batista .inv-hero__content {
    padding: 28px 22px 26px;
    border: 1.5px dashed color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--inv-surface) 58%, transparent);
}

.inv--batista .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/funde-si-dungi-bow-mini.svg);
    --orn-ratio: 40 / 28;
    --orn-width: 58px;
    --orn-max: 58px;
    --orn-fill: var(--inv-primary);
    --orn-margin: -2px auto 2px;
}

/* ================================================================================================================
   SCRISOARE LEGATĂ: a letter tied with a ribbon; the knot slips, the ribbon falls, the sheet folds away
   ================================================================================================================ */

.inv--scrisoare-legata {
    --f-display: "Libre Baskerville", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Alex Brush", cursive;
    --names-weight: 400;
    --names-size: clamp(3.2rem, 17cqi, 6.8rem);
    --names-line: 1.02;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --amp-font: "Libre Baskerville", Georgia, serif;
    --amp-style: italic;
    --amp-size: .3em;
    --amp-color: var(--inv-text);
    --kicker-font: "Libre Baskerville", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-spacing: .02em;
    --kicker-size: .98rem;
    --heading-style: italic;
    --heading-weight: 400;
    --closing-font: "Alex Brush", cursive;
    --pv-ruled: repeating-linear-gradient(180deg, transparent 0 33px, color-mix(in srgb, var(--inv-primary) 13%, transparent) 33px 34px);
    --pv-sky:
        linear-gradient(90deg, transparent 0 32px, color-mix(in srgb, var(--inv-ornament) 40%, transparent) 32px 33px, transparent 33px),
        var(--pv-ruled),
        linear-gradient(180deg, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 50%, var(--inv-surface)) 80%, var(--inv-bg));
    --hero-pad: clamp(100px, 30cqi, 170px) 8px 100px;
    --amb-image: url(../../img/invitations/ornaments/funde-si-dungi-envelope.svg);
    --amb-ratio: 40 / 28;
    --amb-anim: inv-breeze;
    --amb-size: 26px;
    --amb-duration: 21s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .75;
    --pv-cover-anim: inv-bokeh;
    --pv-dust-display: none;
    --pv-orn-anim: inv-breathe;
    --pv-in-odd: translateX(-30px) rotate(-1.4deg);
    --pv-in-even: translateX(30px) rotate(1.4deg);
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-knot.svg);
    --pv-deco-ratio: 180 / 150;
    --pv-deco-opacity: .26;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 2300;
    --pv-reveal-ms: 1500;
}

.inv--scrisoare-legata .inv__ambient i {
    top: calc(var(--amb-y) * .8);
}

/* the cover: a sheet of paper tied with a ribbon; the knot slips and falls, the band slides off, the sheet folds back */
html.inv-js .inv--scrisoare-legata .inv-envelope:not(:has(.inv-envelope__photo)) {
    padding-top: 18svh;
    transform-origin: 50% 100%;
}

.inv--scrisoare-legata .inv-envelope__scene::before {
    top: calc(26% - 15px);
    bottom: auto;
    left: 0;
    right: 0;
    height: 30px;
    display: block;
    background: var(--pv-ribbon);
    -webkit-mask: none;
    mask: none;
}

/* the band over the top edge of the sheet, down to the knot: the words below it stay clear */
.inv--scrisoare-legata .inv-envelope__scene::after {
    top: 0;
    bottom: auto;
    left: 50%;
    display: block;
    width: 30px;
    height: 26%;
    margin-left: -15px;
    border-radius: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 86%, #000), color-mix(in srgb, var(--inv-primary) 60%, #fff) 46%, var(--inv-primary) 58%, color-mix(in srgb, var(--inv-primary) 86%, #000));
    opacity: 1;
    transform: none;
    transition: none;
}

/* the knot, above both bands */
.inv--scrisoare-legata .inv-envelope:not(:has(.inv-envelope__photo))::after {
    top: calc(26% - min(54vw, 260px) * 150 / 180 * .29);
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(54vw, 260px);
    height: auto;
    aspect-ratio: 180 / 150;
    margin-left: calc(min(54vw, 260px) / -2);
    background: var(--pv-satin);
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-knot.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-knot.svg) center / contain no-repeat;
}

.inv--scrisoare-legata .inv-envelope.is-opening .inv-envelope__scene::after {
    opacity: 1;
    transform: none;
    animation: funde-si-dungi-slip 1.05s cubic-bezier(.5, 0, .7, .4) .05s both;
}

.inv--scrisoare-legata .inv-envelope.is-opening:not(:has(.inv-envelope__photo))::after {
    animation: funde-si-dungi-slip 1s cubic-bezier(.5, 0, .7, .4) both;
}

.inv--scrisoare-legata .inv-envelope.is-opening .inv-envelope__scene::before {
    animation: funde-si-dungi-slide-off .9s cubic-bezier(.5, 0, .3, 1) .2s both;
}

.inv--scrisoare-legata .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: funde-si-dungi-fold-back 2.1s cubic-bezier(.5, 0, .3, 1) both;
}

/* the ribbon, untied, hangs at the top of the first screen */
.inv--scrisoare-legata .inv-hero__corner--tl {
    display: block;
    top: 6px;
    left: 50%;
    width: min(44cqi, 220px);
    max-width: none;
    margin-left: calc(min(44cqi, 220px) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-knot.svg);
    --hero-corner-ratio: 180 / 150;
    --hero-corner-fill: var(--pv-satin);
    --hero-corner-opacity: .95;
    transform-origin: 50% 20%;
    animation: inv-sway-soft 6s ease-in-out infinite;
}

.inv--scrisoare-legata .orn--hero-divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: 300 / 40;
    --orn-width: min(62cqi, 250px);
    --orn-max: 250px;
    --orn-fill: var(--inv-primary);
}

.inv--scrisoare-legata .orn--hero-bottom {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/funde-si-dungi-heart.svg);
    --orn-ratio: 32 / 30;
    --orn-width: 26px;
    --orn-max: 26px;
    --orn-fill: var(--inv-primary);
    --orn-margin: 22px auto 0;
}

/* ================================================================================================================
   TORT: a tiered cake with ribbons; the candles light one after the other, sprinkles fall over pastel stripes
   ================================================================================================================ */

.inv--tort {
    --f-display: "DM Serif Display", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "DM Serif Display", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.8rem, 14.8cqi, 6rem);
    --names-line: 1.02;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --amp-style: italic;
    --amp-size: .46em;
    --amp-color: var(--inv-ornament);
    --heading-weight: 400;
    --body-weight: 500;
    --pv-cake: min(62cqi, 300px);
    --pv-flame: linear-gradient(180deg, #fff, color-mix(in srgb, var(--inv-ornament) 40%, #ffd36b) 55%, color-mix(in srgb, var(--inv-ornament) 50%, #ff9a3c));
    --pv-sky:
        radial-gradient(ellipse 60% 30% at 50% calc(100% - var(--pv-cake) * .9), color-mix(in srgb, #ffe2a0 40%, transparent), transparent 80%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 70%, transparent), transparent 60%),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 75%, var(--inv-bg)) 0 14px, var(--inv-bg) 14px 40px);
    --hero-pad: 56px 8px calc(var(--pv-cake) * 280 / 260 + 36px);
    --hero-justify: flex-start;
    --amb-image: none;
    --amb-radius: 4px;
    --amb-ratio: 1 / 3;
    --amb-anim: inv-confetti;
    --amb-size: 6px;
    --amb-duration: 11s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .9;
    --pv-cover-anim: inv-twinkle;
    --pv-dust-display: none;
    --pv-in: scale(.9);
    --pv-in-time: .9s;
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-bow-mini.svg);
    --pv-deco-ratio: 40 / 28;
    --pv-open: none;
    --pv-bloom-display: block;
    --pv-bloom: color-mix(in srgb, #ffe7a8 70%, #fff);
    --box-radius: 24px;
}

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

.inv--tort .inv__ambient i:nth-child(3n) { background: var(--inv-ornament); }
.inv--tort .inv__ambient i:nth-child(3n + 1) { background: color-mix(in srgb, var(--inv-ornament) 40%, #8fd3e8); }

/* the cover: the cake at the foot of the screen; at the opening its middle candle floods the screen with light */
html.inv-js .inv--tort .inv-envelope:not(:has(.inv-envelope__photo)) {
    padding-bottom: min(40svh, 380px);
}

.inv--tort .inv-envelope:not(:has(.inv-envelope__photo))::after {
    left: 50%;
    right: auto;
    bottom: 10px;
    width: calc(min(40svh, 380px) * 260 / 280);
    height: min(40svh, 380px);
    margin-left: calc(min(40svh, 380px) * 260 / 280 / -2);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-ornament)), var(--inv-primary));
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-cake.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-cake.svg) center / contain no-repeat;
}

.inv--tort .inv-envelope__scene::after {
    bottom: calc(10px + min(40svh, 380px) * .86 - 22px);
}

/* on the first screen: the cake and its three candles (three drawings of the same size, laid over the cake) */
.inv--tort .inv-hero__corner--tl,
.inv--tort .inv-hero__corner--tr,
.inv--tort .inv-hero__corner--bl,
.inv--tort .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: 22px;
    left: 50%;
    right: auto;
    width: var(--pv-cake);
    max-width: none;
    margin-left: calc(var(--pv-cake) / -2);
    --hero-corner-ratio: 260 / 280;
    --hero-corner-opacity: 1;
    transform: none;
}

.inv--tort .inv-hero__corner--tl {
    --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-cake.svg);
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament)), var(--inv-primary) 80%);
}

.inv--tort .inv-hero__corner--tr,
.inv--tort .inv-hero__corner--bl,
.inv--tort .inv-hero__corner--br {
    --hero-corner-fill: var(--pv-flame);
    animation: funde-si-dungi-flicker 1.3s ease-in-out infinite;
}

.inv--tort .inv-hero__corner--tr { --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-flame-1.svg); transform-origin: 40.8% 15%; }
.inv--tort .inv-hero__corner--bl { --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-flame-2.svg); transform-origin: 50% 15%; animation-delay: -.4s; }
.inv--tort .inv-hero__corner--br { --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-flame-3.svg); transform-origin: 59.2% 15%; animation-delay: -.8s; }

html.inv-js .inv--tort .inv-hero__corner--tr,
html.inv-js .inv--tort .inv-hero__corner--bl,
html.inv-js .inv--tort .inv-hero__corner--br {
    opacity: 0;
}

html.inv-js .inv--tort .inv-hero:has(.is-in) .inv-hero__corner--tr,
html.inv-js .inv--tort .inv-hero:has(.is-in) .inv-hero__corner--bl,
html.inv-js .inv--tort .inv-hero:has(.is-in) .inv-hero__corner--br {
    animation: funde-si-dungi-light .7s ease-out 1.4s both, funde-si-dungi-flicker 1.3s ease-in-out 2.1s infinite;
}

html.inv-js .inv--tort .inv-hero:has(.is-in) .inv-hero__corner--bl { animation-delay: 2s, 2.7s; }
html.inv-js .inv--tort .inv-hero:has(.is-in) .inv-hero__corner--br { animation-delay: 2.6s, 3.3s; }

.inv--tort .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: min(40cqi, 170px);
    --orn-max: 170px;
    --orn-ratio: 170 / 8;
    --orn-fill: repeating-linear-gradient(90deg, var(--inv-primary) 0 10px, var(--inv-ornament) 10px 20px, color-mix(in srgb, var(--inv-ornament) 40%, #8fd3e8) 20px 30px);
    border-radius: 99px;
}

/* ================================================================================================================
   REGATĂ: nautical stripes, pennants fluttering on a line, waves that never stop; the cover sails away
   ================================================================================================================ */

.inv--regata {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --f-names: "Playfair Display", Georgia, serif;
    --names-weight: 600;
    --names-size: clamp(2.4rem, 12.4cqi, 5rem);
    --names-transform: uppercase;
    --names-spacing: .06em;
    --names-line: 1.1;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --amp-font: "Playfair Display", Georgia, serif;
    --amp-style: italic;
    --amp-transform: none;
    --amp-size: .56em;
    --amp-color: var(--inv-ornament);
    --kicker-spacing: .44em;
    --heading-weight: 600;
    --heading-transform: uppercase;
    --heading-spacing: .1em;
    --heading-size: 1.7rem;
    --body-weight: 400;
    --pv-water: clamp(120px, 38cqi, 230px);
    --pv-horizon: calc(100% - var(--pv-water));
    --pv-sky:
        repeating-linear-gradient(180deg, transparent 0 22px, color-mix(in srgb, var(--inv-primary) 7%, transparent) 22px 34px),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface)) 0, var(--inv-surface) var(--pv-horizon), color-mix(in srgb, var(--inv-primary) 40%, var(--inv-bg)) calc(var(--pv-horizon) + 1px), color-mix(in srgb, var(--inv-primary) 22%, var(--inv-bg)) 100%);
    --pv-far: url(../../img/invitations/ornaments/funde-si-dungi-waves.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-primary) 30%, var(--inv-bg));
    --pv-far-h: clamp(32px, 10cqi, 58px);
    --pv-far-bottom: clamp(40px, 13cqi, 76px);
    --pv-near: url(../../img/invitations/ornaments/funde-si-dungi-waves.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(44px, 14cqi, 80px);
    --hero-pad: clamp(110px, 32cqi, 170px) 8px calc(var(--pv-water) + 40px);
    --amb-image: url(../../img/invitations/ornaments/funde-si-dungi-sail.svg);
    --amb-ratio: 64 / 72;
    --amb-anim: inv-glide;
    --amb-size: 34px;
    --amb-duration: 34s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .85;
    --pv-cover-anim: inv-glide;
    --pv-dust-display: none;
    --pv-in-odd: translateX(-56px);
    --pv-in-even: translateX(56px);
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-sail.svg);
    --pv-deco-ratio: 64 / 72;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1900;
    --box-radius: 4px;
}

/* the sails keep to the horizon */
.inv--regata .inv__ambient i {
    top: calc(100% - var(--pv-water) - 30px + var(--amb-y) * .08);
}

.inv--regata .inv__ambient i:nth-child(n + 8) {
    display: none;
}

/* on the cover too: the sails glide along the horizon, under the words */
.inv--regata .inv-envelope__scene i:nth-child(n) {
    top: calc(100% - var(--pv-water) - 34px);
}

.inv--regata .inv-envelope__scene i:nth-child(n + 7) {
    display: none;
}

/* the pennants of the cover, in the slot of the far silhouette */
.inv--regata .inv-envelope__scene::before {
    top: 0;
    bottom: auto;
    height: clamp(54px, 15vw, 84px);
    background: linear-gradient(90deg, var(--inv-primary) 0 33%, var(--inv-ornament) 33% 66%, var(--inv-primary) 66%);
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-pennants.svg) top center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-pennants.svg) top center / auto 100% repeat-x;
}

.inv--regata .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: funde-si-dungi-sail-away 1.5s cubic-bezier(.5, 0, .3, 1) both;
}

/* the pennants across the top, fluttering */
.inv--regata .inv-hero__corner--tl {
    display: block;
    top: 6px;
    left: 50%;
    width: 104cqi;
    max-width: none;
    height: clamp(54px, 17cqi, 92px);
    margin-left: -52cqi;
    aspect-ratio: auto;
    background: linear-gradient(90deg, var(--inv-primary) 0 33%, var(--inv-ornament) 33% 66%, var(--inv-primary) 66%);
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-pennants.svg) top center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-pennants.svg) top center / auto 100% repeat-x;
    opacity: 1;
    transform-origin: 50% 0;
    animation: funde-si-dungi-flutter 3.2s ease-in-out infinite;
}

/* two strips of waves, each one tile wider than the screen, sliding against each other */
.inv--regata .inv-hero__frame {
    width: calc(100cqi + var(--pv-far-h) * 4);
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    --pv-tile: calc(var(--pv-far-h) * -4);
    animation: inv-slide 9s linear infinite;
}

.inv--regata .inv-hero::after {
    width: calc(100cqi + var(--pv-near-h) * 4);
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    --pv-tile: calc(var(--pv-near-h) * -4);
    animation: inv-slide 6.2s linear infinite reverse;
}

.inv--regata .orn--hero-divider {
    display: block;
    -webkit-mask: none;
    mask: none;
    --orn-width: min(44cqi, 180px);
    --orn-max: 180px;
    --orn-ratio: 180 / 10;
    --orn-fill: repeating-linear-gradient(180deg, var(--inv-primary) 0 2px, transparent 2px 4px);
}

/* ================================================================================================================
   TEATRU: red velvet curtains with golden cords gather to the sides; the stage lights up with beams and sparkles
   ================================================================================================================ */

.inv--teatru {
    --f-display: "Bodoni Moda", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Bodoni Moda", Georgia, serif;
    --names-weight: 500;
    --names-style: italic;
    --names-size: clamp(2.7rem, 14cqi, 5.8rem);
    --names-line: 1.06;
    --names-color: var(--inv-primary);
    --amp-style: normal;
    --amp-size: .44em;
    --amp-color: var(--inv-text);
    --kicker-spacing: .2em;
    --heading-weight: 500;
    --heading-style: italic;
    --body-weight: 400;
    --pv-velvet: color-mix(in srgb, var(--inv-accent) 45%, #8f0d26);
    --pv-folds: repeating-linear-gradient(90deg, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, .06) 3.2vw, rgba(255, 255, 255, .1) 5.6vw, rgba(0, 0, 0, .1) 8vw, rgba(0, 0, 0, .34) 11vw);
    --pv-sky:
        radial-gradient(ellipse 46% 56% at 50% 44%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--pv-velvet) 30%, var(--inv-bg)), var(--inv-bg) 80%);
    --pv-far-h: clamp(46px, 13cqi, 80px);
    --pv-near: none;
    --pv-near-fill: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pv-velvet) 40%, var(--inv-bg)) 30%, var(--inv-bg));
    --pv-near-h: clamp(40px, 10cqi, 70px);
    --hero-pad: calc(var(--pv-far-h) + 60px) 8px calc(var(--pv-near-h) + 60px);
    --amb-image: none;
    --amb-radius: 50%;
    --amb-anim: inv-sparkle;
    --amb-size: 6px;
    --amb-duration: 4.2s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: 1;
    --pv-cover-anim: inv-twinkle;
    --pv-rays-display: block;
    --pv-rays: color-mix(in srgb, var(--inv-primary) 70%, #fff);
    --pv-rays-opacity: .14;
    --pv-rays-time: 90s;
    --pv-in: scale(.92);
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-tassel.svg);
    --pv-deco-ratio: 60 / 220;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 2000;
    --pv-reveal-ms: 1000;
    --pv-door-display: block;
    --pv-door-fill: var(--pv-folds), linear-gradient(180deg, color-mix(in srgb, var(--pv-velvet) 80%, #fff 6%), var(--pv-velvet) 30%, color-mix(in srgb, var(--pv-velvet) 70%, #000));
    --box-radius: 2px;
}

html.inv-js .inv--teatru .inv-envelope:not(:has(.inv-envelope__photo)) {
    background: var(--inv-bg);
}

/* a valance across the top of each curtain and a golden cord with a tassel low on its inner edge, under the words */
.inv--teatru .inv-envelope__door--l::before,
.inv--teatru .inv-envelope__door--r::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(52px, 12vh, 96px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pv-velvet) 70%, #000), var(--pv-velvet) 60%, color-mix(in srgb, var(--inv-primary) 50%, var(--pv-velvet)));
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-valance.svg) top left / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-valance.svg) top left / auto 100% repeat-x;
}

.inv--teatru .inv-envelope__door--l::after,
.inv--teatru .inv-envelope__door--r::after {
    content: "";
    position: absolute;
    bottom: 9%;
    right: 9%;
    width: clamp(26px, 7vw, 44px);
    aspect-ratio: 60 / 220;
    background: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 50%, #fff) 50%, color-mix(in srgb, var(--inv-primary) 80%, #000));
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-tassel.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-tassel.svg) center / contain no-repeat;
    transform-origin: 50% 0;
    animation: inv-sway-soft 4s ease-in-out infinite;
}

.inv--teatru .inv-envelope.is-opening .inv-envelope__door--l,
.inv--teatru .inv-envelope.is-opening .inv-envelope__door--r {
    animation: funde-si-dungi-gather 1.6s cubic-bezier(.6, 0, .25, 1) .1s both;
}

/* the stage: a valance on top, drapes tied back at both sides */
.inv--teatru .inv-hero__frame {
    top: 0;
    bottom: auto;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pv-velvet) 70%, #000), var(--pv-velvet));
    -webkit-mask: url(../../img/invitations/ornaments/funde-si-dungi-valance.svg) top center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/funde-si-dungi-valance.svg) top center / auto 100% repeat-x;
}

.inv--teatru .inv-hero__corner--tl,
.inv--teatru .inv-hero__corner--tr {
    display: block;
    top: calc(var(--pv-far-h) * .4);
    width: clamp(60px, 18cqi, 190px);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-curtain-drape.svg);
    --hero-corner-ratio: 150 / 480;
    --hero-corner-inset: 0;
    --hero-corner-fill: linear-gradient(90deg, color-mix(in srgb, var(--pv-velvet) 70%, #000), var(--pv-velvet) 60%, color-mix(in srgb, var(--pv-velvet) 80%, #fff 10%));
    --hero-corner-opacity: 1;
}

.inv--teatru .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/funde-si-dungi-tassel.svg);
    --orn-ratio: 60 / 220;
    --orn-width: 22px;
    --orn-max: 22px;
    --orn-fill: var(--inv-primary);
    --orn-margin: 14px auto 0;
    transform-origin: 50% 0;
}

/* ================================================================================================================
   CUTIE MUZICALĂ: the lid of a music box swings open; the dancer turns on the box, notes rise
   ================================================================================================================ */

.inv--cutie-muzicala {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Allura", cursive;
    --names-weight: 400;
    --names-size: clamp(3.2rem, 16.5cqi, 7rem);
    --names-line: 1;
    --names-color: var(--inv-primary);
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .34em;
    --amp-color: var(--inv-text);
    --heading-font: "Allura", cursive;
    --heading-size: 2.8rem;
    --heading-weight: 400;
    --closing-font: "Allura", cursive;
    --pv-box: min(46cqi, 300px);
    --pv-box-h: calc(var(--pv-box) * 166 / 300);
    --pv-dancer: calc(var(--pv-box) * .42);
    --pv-sky:
        radial-gradient(ellipse 40% 34% at 50% calc(100% - var(--pv-box-h) - 40px), color-mix(in srgb, #fff 80%, transparent), transparent 80%),
        radial-gradient(ellipse 80% 50% at 50% 30%, color-mix(in srgb, var(--inv-surface) 80%, transparent), transparent 74%),
        linear-gradient(180deg, var(--inv-accent), var(--inv-bg) 80%);
    --hero-pad: 40px 8px calc(var(--pv-box-h) + var(--pv-dancer) * 186 / 120 + 18px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/funde-si-dungi-note.svg);
    --amb-ratio: 28 / 40;
    --amb-anim: inv-bubble;
    --amb-size: 18px;
    --amb-duration: 15s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .7;
    --pv-cover-anim: inv-bokeh;
    --pv-sheen-display: block;
    --pv-sheen-opacity: .4;
    --pv-in-odd: translateX(-40px) rotate(-1deg);
    --pv-in-even: translateX(40px) rotate(1deg);
    --pv-deco: url(../../img/invitations/ornaments/funde-si-dungi-notes.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .22;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1900;
}

.inv--cutie-muzicala .inv__ambient i {
    top: 0;
}

.inv--cutie-muzicala .inv__ambient i:nth-child(even),
.inv--cutie-muzicala .inv-envelope__scene i:nth-child(even) {
    --amb-image: url(../../img/invitations/ornaments/funde-si-dungi-notes.svg);
    --amb-ratio: 1;
    background: var(--inv-ornament);
}

/* the lid: an oval cartouche framed in a scalloped edge; it swings open, away from the guest */
html.inv-js .inv--cutie-muzicala .inv-envelope:not(:has(.inv-envelope__photo)) {
    transform-origin: 50% 0;
}

.inv--cutie-muzicala .inv-envelope:not(:has(.inv-envelope__photo))::before {
    background:
        radial-gradient(ellipse min(46vw, 260px) min(34svh, 270px) at 50% 50%, var(--inv-surface) 0 calc(100% - 3px), var(--inv-ornament) calc(100% - 3px) 100%, transparent 100%),
        radial-gradient(ellipse calc(min(46vw, 260px) + 14px) calc(min(34svh, 270px) + 14px) at 50% 50%, color-mix(in srgb, var(--inv-ornament) 50%, transparent) 0 calc(100% - 1px), transparent 100%),
        linear-gradient(180deg, var(--inv-accent), color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)));
    box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-accent)), inset 0 0 0 12px var(--inv-surface);
}

.inv--cutie-muzicala .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: funde-si-dungi-lid-swing 1.5s cubic-bezier(.55, 0, .3, 1) both;
}

/* the music box at the foot of the first screen and the dancer turning on it */
.inv--cutie-muzicala .inv-hero__corner--bl,
.inv--cutie-muzicala .inv-hero__corner--br {
    display: block;
    top: auto;
    left: 50%;
    right: auto;
    max-width: none;
    --hero-corner-opacity: 1;
    transform: none;
}

.inv--cutie-muzicala .inv-hero__corner--bl {
    bottom: 18px;
    width: var(--pv-box);
    margin-left: calc(var(--pv-box) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-music-box.svg);
    --hero-corner-ratio: 300 / 166;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary) 70%);
}

.inv--cutie-muzicala .inv-hero__corner--br {
    bottom: calc(18px + var(--pv-box-h) * 122 / 166 - var(--pv-dancer) * 186 / 120 * 4 / 186);
    width: var(--pv-dancer);
    margin-left: calc(var(--pv-dancer) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/funde-si-dungi-ballerina.svg);
    --hero-corner-ratio: 120 / 186;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-text), color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text)));
    animation: funde-si-dungi-pirouette 3.6s linear infinite;
}

.inv--cutie-muzicala .orn--hero-divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: 300 / 40;
    --orn-width: min(60cqi, 240px);
    --orn-max: 240px;
    --orn-fill: var(--inv-primary);
}

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

/* a half of the bow: it tightens, then slips loose and falls away from the knot */
@keyframes funde-si-dungi-untie {
    0% { transform: none; opacity: 1; }
    24% { transform: rotate(-7deg) scale(1.05); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translate(-18%, 34%) rotate(34deg) scale(.55); opacity: 0; }
}

/* a loop of the big bow swings out and away */
@keyframes funde-si-dungi-loop-apart {
    0% { transform: none; opacity: 1; }
    26% { transform: rotate(-8deg) scale(1.06); opacity: 1; }
    100% { transform: translateX(-62vw) rotate(-34deg) scale(.82); opacity: 0; }
}

/* a loop of the bow on the first screen opens a little and closes again, around the knot */
@keyframes funde-si-dungi-loop-sway {
    0%, 100% { rotate: 0deg; }
    50% { rotate: var(--pv-loop-turn, -6deg); }
}

/* the awning rolls up to the top edge */
@keyframes funde-si-dungi-roll-up {
    0% { transform: none; }
    16% { transform: scaleY(1.025); }
    100% { transform: translateY(-4%) scaleY(0); }
}

/* the awning of the first screen breathes in the wind */
@keyframes funde-si-dungi-billow {
    0%, 100% { scale: 1 1; }
    50% { scale: 1 1.07; }
}

/* a lid: it sinks a little, then rises and tilts away */
@keyframes funde-si-dungi-lid-rise {
    0% { transform: none; }
    18% { transform: translateY(1.6%) scale(.99); }
    100% { transform: translateY(-114%) rotate(-7deg); }
}

/* sweets, confetti or hearts burst out of the cover, each its own way (--pop-x, --pop-y) */
@keyframes funde-si-dungi-pop {
    0% { transform: none; opacity: 1; }
    20% { transform: translate(calc(var(--pop-x) * .2), -6vh) scale(1.2); opacity: 1; }
    100% { transform: translate(var(--pop-x), var(--pop-y)) rotate(400deg) scale(.9); opacity: 0; }
}

/* a gift: it shakes, swells, then the lid flies off turning */
@keyframes funde-si-dungi-gift {
    0% { transform: none; }
    9% { transform: rotate(-2.4deg) scale(1.01); }
    18% { transform: rotate(2.4deg) scale(1.02); }
    27% { transform: rotate(-1.6deg) scale(1.03); }
    38% { transform: scale(1.05); }
    100% { transform: translateY(-128%) rotate(16deg) scale(.92); }
}

/* the gift of the first screen hops and lands */
@keyframes funde-si-dungi-hop {
    0%, 62%, 100% { transform: none; }
    68% { transform: scale(1.06, .92); }
    78% { transform: translateY(-16%) scale(.96, 1.05); }
    88% { transform: scale(1.04, .95); }
}

/* the left half of the cloth folds over the right one, then the folded cloth drops */
@keyframes funde-si-dungi-fold {
    0% { transform: perspective(1600px) rotateY(0deg); }
    46% { transform: perspective(1600px) rotateY(-178deg); }
    100% { transform: perspective(1600px) rotateY(-178deg) translateY(112%); }
}

@keyframes funde-si-dungi-drop {
    0%, 46% { transform: none; }
    100% { transform: translateY(112%); }
}

/* two beats, then the cover shrinks to nothing */
@keyframes funde-si-dungi-heartbeat {
    0% { transform: none; opacity: 1; }
    13% { transform: scale(1.05); }
    26% { transform: scale(1); }
    40% { transform: scale(1.08); }
    100% { transform: scale(.06) rotate(-10deg); opacity: 0; }
}

/* a party curtain: a little dip, then up */
@keyframes funde-si-dungi-party-curtain {
    0% { transform: none; }
    20% { transform: translateY(4%); }
    100% { transform: translateY(-106%); }
}

/* a streamer unrolls from the top */
@keyframes funde-si-dungi-unroll {
    from { transform: scaleY(0); opacity: 0; }
    20% { opacity: 1; }
    to { transform: none; opacity: .92; }
}

/* a handkerchief pulled up by its middle: it stretches, then gathers as it goes */
@keyframes funde-si-dungi-pull {
    0% { transform: none; }
    24% { transform: translateY(1.4%) scaleY(1.03); }
    100% { transform: translateY(-112%) scale(.34, 1.1); }
}

/* the knot of the letter slips and falls with its ribbon */
@keyframes funde-si-dungi-slip {
    0% { transform: none; opacity: 1; }
    22% { transform: translateY(2.4%) rotate(-2deg); opacity: 1; }
    100% { transform: translateY(104%) rotate(7deg); opacity: 0; }
}

@keyframes funde-si-dungi-slide-off {
    from { transform: none; opacity: 1; }
    to { transform: translateX(104%); opacity: 0; }
}

/* the sheet, untied, folds back away from the guest */
@keyframes funde-si-dungi-fold-back {
    0%, 42% { transform: perspective(1400px) rotateX(0deg); }
    100% { transform: perspective(1400px) rotateX(92deg); }
}

/* a candle catches its flame */
@keyframes funde-si-dungi-light {
    from { transform: scale(.2); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    to { transform: none; opacity: 1; }
}

@keyframes funde-si-dungi-flicker {
    0%, 100% { transform: none; opacity: 1; }
    30% { transform: scale(.96, 1.06) rotate(-2deg); opacity: .9; }
    60% { transform: scale(1.04, .96) rotate(2deg); opacity: 1; }
}

/* the cover leaves like a sail in the wind */
@keyframes funde-si-dungi-sail-away {
    0% { transform: none; }
    18% { transform: translate(-2%, .6%) rotate(-1.2deg); }
    60% { transform: translate(46%, -1.2%) rotate(2deg); }
    100% { transform: translate(116%, -3%) rotate(4deg); }
}

/* pennants on a line in the wind */
@keyframes funde-si-dungi-flutter {
    0%, 100% { transform: none; }
    25% { transform: skewX(-3deg) scaleY(1.04); }
    75% { transform: skewX(3deg) scaleY(.97); }
}

/* a swag of pearls swinging */
@keyframes funde-si-dungi-swing {
    0%, 100% { transform: none; }
    50% { transform: translateY(5px) scaleY(1.05); }
}

/* a velvet curtain gathers towards its side */
@keyframes funde-si-dungi-gather {
    0% { transform: none; }
    100% { transform: translateX(-44%) scaleX(.12); }
}

/* the lid of the music box swings open, away from the guest */
@keyframes funde-si-dungi-lid-swing {
    0% { transform: perspective(1200px) rotateX(0deg); }
    18% { transform: perspective(1200px) rotateX(5deg); }
    100% { transform: perspective(1200px) rotateX(-92deg); }
}

/* the dancer turns on her pin */
@keyframes funde-si-dungi-pirouette {
    0% { transform: scaleX(1); }
    25% { transform: scaleX(.12); }
    50% { transform: scaleX(-1); }
    75% { transform: scaleX(-.12); }
    100% { transform: scaleX(1); }
}

/* where each particle of a cover flies when it bursts (bombonieră, cadou, cochetă) */
.inv--bomboniera .inv-envelope__scene i:nth-child(1),
.inv--cadou .inv-envelope__scene i:nth-child(1),
.inv--cocheta .inv-envelope__scene i:nth-child(1) { --pop-x: -34vw; --pop-y: 52vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(2),
.inv--cadou .inv-envelope__scene i:nth-child(2),
.inv--cocheta .inv-envelope__scene i:nth-child(2) { --pop-x: -18vw; --pop-y: 70vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(3),
.inv--cadou .inv-envelope__scene i:nth-child(3),
.inv--cocheta .inv-envelope__scene i:nth-child(3) { --pop-x: 22vw; --pop-y: 60vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(4),
.inv--cadou .inv-envelope__scene i:nth-child(4),
.inv--cocheta .inv-envelope__scene i:nth-child(4) { --pop-x: 36vw; --pop-y: 44vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(5),
.inv--cadou .inv-envelope__scene i:nth-child(5),
.inv--cocheta .inv-envelope__scene i:nth-child(5) { --pop-x: -40vw; --pop-y: 30vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(6),
.inv--cadou .inv-envelope__scene i:nth-child(6),
.inv--cocheta .inv-envelope__scene i:nth-child(6) { --pop-x: 44vw; --pop-y: 76vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(7),
.inv--cadou .inv-envelope__scene i:nth-child(7),
.inv--cocheta .inv-envelope__scene i:nth-child(7) { --pop-x: -8vw; --pop-y: 84vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(8),
.inv--cadou .inv-envelope__scene i:nth-child(8),
.inv--cocheta .inv-envelope__scene i:nth-child(8) { --pop-x: 12vw; --pop-y: 92vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(9),
.inv--cadou .inv-envelope__scene i:nth-child(9),
.inv--cocheta .inv-envelope__scene i:nth-child(9) { --pop-x: -26vw; --pop-y: 40vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(10),
.inv--cadou .inv-envelope__scene i:nth-child(10),
.inv--cocheta .inv-envelope__scene i:nth-child(10) { --pop-x: 28vw; --pop-y: 34vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(11),
.inv--cadou .inv-envelope__scene i:nth-child(11),
.inv--cocheta .inv-envelope__scene i:nth-child(11) { --pop-x: -46vw; --pop-y: 64vh; }
.inv--bomboniera .inv-envelope__scene i:nth-child(12),
.inv--cadou .inv-envelope__scene i:nth-child(12),
.inv--cocheta .inv-envelope__scene i:nth-child(12) { --pop-x: 40vw; --pop-y: 58vh; }