/* Collection "Poveste" (ADR-0058): invitations that open like a film.
   - A cover fills the screen (the photograph of the invitation when it has one, otherwise the scene of the template)
     with the names, the date and "Deschide invitația"; it leaves in one of four ways: a slow zoom, a curtain that
     rises, two doors that part, a bloom of light.
   - The first screen is a drawn scene in layers: a sky, a far silhouette, a near one standing on the page colour,
     particles of light. With scroll-driven animations (where the browser has them) the layers move at different
     speeds and the names fade as the guest scrolls.
   - The sections come in from below or from the sides, one after another.
   Templates set the variables below and switch slots on; the drawings are made by tools/invitations/poveste-svg.pl.
   Contract: docs/invitation-templates.md. */

/* ================= the collection: variables ================= */

.inv-c--poveste {
    /* the scene */
    --pv-sky: linear-gradient(180deg, var(--inv-accent), var(--inv-bg));
    --pv-far: none;
    --pv-far-fill: transparent;
    --pv-far-h: clamp(120px, 40cqi, 250px);
    --pv-far-size: auto 100%;
    --pv-far-bottom: 0px;
    --pv-near: none;
    --pv-near-fill: transparent;
    --pv-near-h: clamp(70px, 22cqi, 140px);
    --pv-near-size: auto 100%;
    --pv-horizon: calc(100% - var(--pv-far-h) * .6);
    --pv-ink: var(--inv-text);
    --pv-night: color-mix(in srgb, var(--inv-bg) 68%, #000);

    /* the sections, as they come in */
    --pv-in: translateY(46px);
    --pv-in-odd: var(--pv-in);
    --pv-in-even: var(--pv-in);
    --pv-in-time: 1.1s;

    /* the cover, as it leaves */
    --pv-open: scale(1.16);
    --pv-open-opacity: 0;
    --pv-door-display: none;
    --pv-door-fill: var(--inv-bg);
    --pv-bloom-display: none;
    --pv-bloom: color-mix(in srgb, var(--inv-primary) 70%, #fff);
    --pv-cover-ink: var(--pv-ink);
    --pv-cover-accent: var(--inv-primary);
    --pv-cover-anim: poveste-drift;

    /* decoration between sections */
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider.svg);
    --pv-divider-ratio: 300 / 30;
    --pv-swirl-opacity: .34;

    /* the dust of light over the first screen: tiny glowing points that rise (or fall, from -50% to 0%) */
    --pv-dust: var(--inv-primary);
    --pv-dust-display: block;
    --pv-dust-opacity: .55;
    --pv-dust-from: 0%;
    --pv-dust-to: -50%;
    --pv-dust-time: 38s;

    /* a wide screen: every other section lies on a band of colour as wide as the page */
    --pv-band: color-mix(in srgb, var(--inv-surface) 55%, var(--inv-bg));
    --pv-in-wide-time: calc(var(--pv-in-time) + .5s);
    --pv-deco-opacity: .3;

    --hero-halo: none;
    --hero-pad: 64px 8px calc(var(--pv-far-h) * .58 + 58px);
    --names-color: var(--pv-ink);
    --names-shadow: 0 2px 30px color-mix(in srgb, var(--inv-bg) 72%, transparent);
    --kicker-color: var(--inv-primary);
    --date-short-display: none;
    --date-long-display: block;
    --card-bg: transparent;
    --card-shadow: none;
    --card-border: 0 solid transparent;
    --card-radius: 0;
    --card-pad: 30px 6px 36px;
    --card-pad-wide: 40px 24px 52px;
    --box-bg: color-mix(in srgb, var(--inv-surface) 88%, transparent);
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 30%, transparent);
    --box-radius: 14px;
    --box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .45);
    --divider-rule-display: none;
    --button-radius: 999px;
    --amb-image: url(../../img/invitations/ornaments/poveste-bokeh.svg);
    --amb-anim: poveste-drift;
    --amb-size: 30px;
    --amb-duration: 14s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .5;
}

.inv-c--poveste.inv--dark {
    --names-shadow: 0 2px 34px color-mix(in srgb, #000 55%, transparent);
    --box-bg: color-mix(in srgb, var(--inv-surface) 78%, transparent);
    --box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8);
    --pv-dust: color-mix(in srgb, var(--inv-primary) 45%, #fff);
    --pv-dust-opacity: .8;
    --pv-band: color-mix(in srgb, var(--inv-surface) 65%, var(--inv-bg));
}

/* ================= the scene of the first screen ================= */

/* The layers are as wide as the invitation (the page, or the phone of the preview), not as the column. */
.inv-c--poveste .inv-hero::before,
.inv-c--poveste .inv-hero::after,
.inv-c--poveste .inv-hero__frame,
.inv-c--poveste .inv__ambient {
    left: 50%;
    right: auto;
    width: 100cqi;
    margin-left: -50cqi;
}

.inv-c--poveste .inv-hero::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--pv-sky);
    pointer-events: none;
}

.inv-c--poveste .inv-hero__frame {
    display: block;
    top: auto;
    bottom: var(--pv-far-bottom);
    height: var(--pv-far-h);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--pv-far-fill);
    -webkit-mask: var(--pv-far) bottom center / var(--pv-far-size) repeat-x;
    mask: var(--pv-far) bottom center / var(--pv-far-size) repeat-x;
}

.inv-c--poveste .inv-hero::after {
    content: "";
    position: absolute;
    bottom: -1px;
    height: var(--pv-near-h);
    background: var(--pv-near-fill);
    -webkit-mask: var(--pv-near) bottom center / var(--pv-near-size) repeat-x;
    mask: var(--pv-near) bottom center / var(--pv-near-size) repeat-x;
    pointer-events: none;
}

.inv-c--poveste .inv__ambient {
    display: block;
}

/* Particles live all over the first screen; a template that lets them fall or rise puts them back at an edge. */
.inv-c--poveste .inv__ambient i {
    top: var(--amb-y);
}

/* Dust of light over the whole first screen, in two depths: fine points that drift slowly, larger ones closer to the
   eye that move faster and twinkle. Each layer is two screens tall and its points repeat every screen, so moving it
   by one screen (half its height) loops without a seam. */
.inv-c--poveste .inv__ambient::before,
.inv-c--poveste .inv__ambient::after {
    --dot: var(--pv-dust) 0 1.2px, color-mix(in srgb, var(--pv-dust) 45%, transparent) 2px, transparent 3px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200%;
    display: var(--pv-dust-display);
    background:
        radial-gradient(circle at 4% 9%, var(--dot)), radial-gradient(circle at 13% 63%, var(--dot)),
        radial-gradient(circle at 21% 31%, var(--dot)), radial-gradient(circle at 27% 84%, var(--dot)),
        radial-gradient(circle at 36% 18%, var(--dot)), radial-gradient(circle at 44% 52%, var(--dot)),
        radial-gradient(circle at 51% 7%, var(--dot)), radial-gradient(circle at 58% 71%, var(--dot)),
        radial-gradient(circle at 66% 38%, var(--dot)), radial-gradient(circle at 73% 92%, var(--dot)),
        radial-gradient(circle at 81% 24%, var(--dot)), radial-gradient(circle at 88% 58%, var(--dot)),
        radial-gradient(circle at 94% 12%, var(--dot)), radial-gradient(circle at 97% 77%, var(--dot)),
        radial-gradient(circle at 8% 47%, var(--dot)), radial-gradient(circle at 17% 4%, var(--dot)),
        radial-gradient(circle at 31% 57%, var(--dot)), radial-gradient(circle at 40% 96%, var(--dot)),
        radial-gradient(circle at 55% 33%, var(--dot)), radial-gradient(circle at 69% 64%, var(--dot)),
        radial-gradient(circle at 77% 3%, var(--dot)), radial-gradient(circle at 91% 42%, var(--dot));
    background-size: 100% 50%;
    opacity: var(--pv-dust-opacity);
    pointer-events: none;
    animation: poveste-dust var(--pv-dust-time) linear infinite;
}

.inv-c--poveste .inv__ambient::after {
    --dot: var(--pv-dust) 0 1.8px, color-mix(in srgb, var(--pv-dust) 40%, transparent) 3px, transparent 7px;
    background:
        radial-gradient(circle at 9% 41%, var(--dot)), radial-gradient(circle at 23% 12%, var(--dot)),
        radial-gradient(circle at 34% 68%, var(--dot)), radial-gradient(circle at 47% 29%, var(--dot)),
        radial-gradient(circle at 62% 86%, var(--dot)), radial-gradient(circle at 71% 55%, var(--dot)),
        radial-gradient(circle at 86% 33%, var(--dot)), radial-gradient(circle at 92% 79%, var(--dot));
    background-size: 100% 50%;
    animation:
        poveste-dust calc(var(--pv-dust-time) * .62) linear infinite,
        poveste-twinkle 3.4s ease-in-out infinite;
}

.inv-c--poveste .inv-hero__scroll span {
    border-color: var(--pv-ink);
}

/* ================= sections ================= */

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

.inv-c--poveste .orn--heading {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: var(--pv-divider-ratio);
    --orn-width: 38%;
    --orn-max: 150px;
    --orn-margin: -8px auto 24px;
    --orn-opacity: .8;
}

/* Two thin flourishes beside the card, like pen strokes on the page. */
.inv-c--poveste .inv-corner--tr,
.inv-c--poveste .inv-corner--bl {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/poveste-swirl.svg);
    --corner-size: 64%;
    --corner-max: 300px;
    --corner-ratio: 360 / 130;
    --corner-opacity: var(--pv-swirl-opacity);
}

.inv-c--poveste .inv-corner--tr {
    top: 120px;
    right: -12px;
}

.inv-c--poveste .inv-corner--bl {
    bottom: 190px;
    left: -12px;
}

.inv-c--poveste .inv-countdown > div {
    min-width: 0;
}

.inv-c--poveste .inv-monogram {
    box-shadow: inset 0 0 0 4px var(--inv-bg), inset 0 0 0 5px var(--inv-line);
}

/* ================= the cover ================= */

html.inv-js .inv-c--poveste .inv-envelope {
    gap: 0;
    padding: 0 22px;
    overflow: hidden;
    background: var(--inv-bg);
    color: var(--pv-cover-ink);
    text-align: center;
    transition: transform 1.3s cubic-bezier(.65, 0, .2, 1) .3s, opacity .9s ease .75s;
}

.inv-c--poveste .inv-envelope::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pv-sky);
}

.inv-c--poveste .inv-envelope::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: var(--pv-near-h);
    background: var(--pv-near-fill);
    -webkit-mask: var(--pv-near) bottom center / var(--pv-near-size) repeat-x;
    mask: var(--pv-near) bottom center / var(--pv-near-size) repeat-x;
    pointer-events: none;
}

.inv-c--poveste .inv-envelope__body {
    display: none;
}

.inv-c--poveste .inv-envelope__scene {
    container-type: size;
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.inv-c--poveste .inv-envelope__scene::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--pv-far-bottom);
    height: var(--pv-far-h);
    background: var(--pv-far-fill);
    -webkit-mask: var(--pv-far) bottom center / var(--pv-far-size) repeat-x;
    mask: var(--pv-far) bottom center / var(--pv-far-size) repeat-x;
}

/* The light that floods the screen when the cover blooms. */
.inv-c--poveste .inv-envelope__scene::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 13%;
    z-index: 3;
    display: var(--pv-bloom-display);
    width: 44px;
    height: 44px;
    margin-left: -22px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--pv-bloom) 0 34%, color-mix(in srgb, var(--pv-bloom) 60%, transparent) 60%, transparent 72%);
    opacity: 0;
    transform: scale(0);
    transition: transform 1.25s cubic-bezier(.5, 0, .8, .4) .15s, opacity .35s ease .15s;
}

.inv-c--poveste .inv-envelope__scene i {
    position: absolute;
    width: var(--amb-size);
    aspect-ratio: var(--amb-ratio, 1);
    background: var(--amb-fill);
    -webkit-mask: var(--amb-image) center / contain no-repeat;
    mask: var(--amb-image) center / contain no-repeat;
    opacity: var(--amb-opacity);
    animation: var(--pv-cover-anim) var(--amb-duration) linear infinite;
}

.inv-c--poveste .inv-envelope__scene i:nth-child(1) { left: 8%; top: 16%; animation-delay: 0s; scale: .9; }
.inv-c--poveste .inv-envelope__scene i:nth-child(2) { left: 24%; top: 58%; animation-delay: -4s; scale: .6; }
.inv-c--poveste .inv-envelope__scene i:nth-child(3) { left: 39%; top: 30%; animation-delay: -9s; scale: 1.15; }
.inv-c--poveste .inv-envelope__scene i:nth-child(4) { left: 55%; top: 76%; animation-delay: -2s; scale: .7; }
.inv-c--poveste .inv-envelope__scene i:nth-child(5) { left: 68%; top: 12%; animation-delay: -6s; scale: 1; }
.inv-c--poveste .inv-envelope__scene i:nth-child(6) { left: 82%; top: 44%; animation-delay: -11s; scale: .8; }
.inv-c--poveste .inv-envelope__scene i:nth-child(7) { left: 91%; top: 68%; animation-delay: -7s; scale: 1.2; }
.inv-c--poveste .inv-envelope__scene i:nth-child(8) { left: 15%; top: 84%; animation-delay: -12s; scale: .75; }

/* With a photograph the cover is the photograph, under a veil that keeps the words readable. */
.inv-c--poveste .inv-envelope__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inv-c--poveste .inv-envelope:has(.inv-envelope__photo) {
    --pv-cover-ink: #fff;
    --pv-cover-accent: #fff;
}

.inv-c--poveste .inv-envelope:has(.inv-envelope__photo)::before,
.inv-c--poveste .inv-envelope:has(.inv-envelope__photo) .inv-envelope__scene::before {
    display: none;
}

.inv-c--poveste .inv-envelope:has(.inv-envelope__photo)::after {
    top: 0;
    height: auto;
    -webkit-mask: none;
    mask: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .16) 34%, rgba(0, 0, 0, .5) 62%, rgba(0, 0, 0, .78));
}

.inv-c--poveste .inv-envelope__door {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: var(--pv-door-display);
    width: 50.2%;
    background: var(--pv-door-fill);
    transition: transform 1.25s cubic-bezier(.7, 0, .2, 1) .35s;
}

.inv-c--poveste .inv-envelope__door--l {
    left: 0;
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--inv-ornament) 60%, transparent);
}

.inv-c--poveste .inv-envelope__door--r {
    right: 0;
    scale: -1 1;
}

.inv-c--poveste .inv-envelope__kicker,
.inv-c--poveste .inv-envelope__names,
.inv-c--poveste .inv-envelope__date,
.inv-c--poveste .inv-envelope .inv-button {
    position: relative;
    z-index: 2;
    transition: opacity .5s ease, transform .5s ease;
}

.inv-c--poveste .inv-envelope__kicker {
    margin: 0 0 20px;
    font: 500 .66rem/1.5 var(--f-body);
    letter-spacing: .42em;
    color: var(--pv-cover-accent);
}

.inv-c--poveste .inv-envelope__names {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-family: var(--names-font);
    font-weight: var(--names-weight);
    font-style: var(--names-style);
    font-size: var(--pv-cover-names, clamp(2.6rem, 13.5cqi, 5rem));
    line-height: 1.06;
    letter-spacing: var(--names-spacing);
    text-transform: var(--names-transform);
    color: var(--pv-cover-ink);
    text-shadow: 0 2px 26px rgba(0, 0, 0, .28);
    overflow-wrap: anywhere;
}

.inv-c--poveste .inv-envelope__amp {
    margin: .12em 0;
    font-family: var(--amp-font);
    font-size: .5em;
    font-style: var(--amp-style);
    color: var(--pv-cover-accent);
}

.inv-c--poveste .inv-envelope__date {
    display: block;
    margin: 0 0 30px;
    padding-top: 58px;
    font: 400 .68rem/1.5 var(--f-body);
    letter-spacing: .34em;
    text-transform: uppercase;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pv-cover-ink) 60%, transparent), color-mix(in srgb, var(--pv-cover-ink) 60%, transparent)) 50% 18px / 1px 26px no-repeat;
}

.inv-c--poveste .inv-envelope .inv-button {
    min-height: 50px;
    padding: 14px 26px;
    border: 1px solid color-mix(in srgb, var(--pv-cover-ink) 56%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, #000 12%, transparent);
    color: var(--pv-cover-ink);
    font-size: .66rem;
    letter-spacing: .3em;
}

.inv-c--poveste .inv-envelope .inv-button::before,
.inv-c--poveste .inv-envelope .inv-button::after {
    content: "";
    width: 18px;
    height: 1px;
    margin: 0 14px;
    background: currentColor;
    opacity: .7;
    animation: poveste-hint 2.6s ease-in-out infinite;
}

/* The words of the cover come in one after another when the page opens. "backwards" hands them back to their own
   style once in, so the opening can still move them away. */
html.inv-js .inv-c--poveste .inv-envelope__kicker,
html.inv-js .inv-c--poveste .inv-envelope__names,
html.inv-js .inv-c--poveste .inv-envelope__date,
html.inv-js .inv-c--poveste .inv-envelope .inv-button {
    animation: poveste-cover-in 1.4s cubic-bezier(.2, .7, .2, 1) backwards;
}

html.inv-js .inv-c--poveste .inv-envelope__kicker { animation-delay: .25s; }
html.inv-js .inv-c--poveste .inv-envelope__names { animation-delay: .55s; animation-duration: 1.9s; }
html.inv-js .inv-c--poveste .inv-envelope__date { animation-delay: 1.2s; }
html.inv-js .inv-c--poveste .inv-envelope .inv-button { animation-delay: 1.55s; }

/* A short screen (a phone held sideways): the cover is pressed together, so the button stays within reach. */
@media (max-height: 620px) {
    .inv-c--poveste .inv-envelope__names {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 .3em;
        font-size: clamp(1.7rem, 9svh, 3rem);
    }

    .inv-c--poveste .inv-envelope__kicker {
        margin-bottom: 10px;
    }

    .inv-c--poveste .inv-envelope__date {
        margin-bottom: 16px;
        padding-top: 30px;
        background-position: 50% 8px;
        background-size: 1px 16px;
    }

    .inv-c--poveste .inv-envelope .inv-button {
        min-height: 44px;
        padding: 10px 22px;
    }
}

.inv-c--poveste .inv-envelope.is-opening {
    transform: var(--pv-open);
    opacity: var(--pv-open-opacity);
}

.inv-c--poveste .inv-envelope.is-opening .inv-envelope__kicker,
.inv-c--poveste .inv-envelope.is-opening .inv-envelope__names,
.inv-c--poveste .inv-envelope.is-opening .inv-envelope__date,
.inv-c--poveste .inv-envelope.is-opening .inv-button {
    opacity: 0;
    transform: translateY(-18px);
}

.inv-c--poveste .inv-envelope.is-opening .inv-envelope__door--l {
    transform: translateX(-101%);
}

.inv-c--poveste .inv-envelope.is-opening .inv-envelope__door--r {
    transform: translateX(-101%);
}

.inv-c--poveste .inv-envelope.is-opening .inv-envelope__scene::after {
    opacity: 1;
    transform: scale(64);
}

/* ================= motion ================= */

html.inv-js .inv-c--poveste [data-reveal] {
    transform: var(--pv-in);
    transition: opacity var(--pv-in-time) ease, transform var(--pv-in-time) cubic-bezier(.2, .7, .2, 1);
}

html.inv-js .inv-c--poveste .inv-card > .inv-section:nth-of-type(odd) {
    transform: var(--pv-in-odd);
}

html.inv-js .inv-c--poveste .inv-card > .inv-section:nth-of-type(even) {
    transform: var(--pv-in-even);
}

html.inv-js .inv-c--poveste .inv-hero__content[data-reveal] {
    transform: translateY(26px) scale(.97);
    transition-duration: 1.6s;
}

html.inv-js .inv-c--poveste .inv-program__item[data-reveal] {
    transform: translateY(34px);
}

html.inv-js .inv-c--poveste .inv-program__item:nth-child(2) { transition-delay: .12s; }
html.inv-js .inv-c--poveste .inv-program__item:nth-child(3) { transition-delay: .24s; }
html.inv-js .inv-c--poveste .inv-program__item:nth-child(4) { transition-delay: .36s; }

html.inv-js .inv-c--poveste .inv-card > .inv-section.is-in,
html.inv-js .inv-c--poveste .inv-hero__content[data-reveal].is-in,
html.inv-js .inv-c--poveste .inv-program__item[data-reveal].is-in,
html.inv-js .inv-c--poveste [data-reveal].is-in {
    transform: none;
}

/* What is inside a section follows it in, a step behind. */
html.inv-js .inv-c--poveste .is-in .inv-hero__kicker,
html.inv-js .inv-c--poveste .is-in .inv-hero__names,
html.inv-js .inv-c--poveste .is-in .inv-hero__date,
html.inv-js .inv-c--poveste .is-in .inv-hero__place,
html.inv-js .inv-c--poveste .is-in .inv-family__item,
html.inv-js .inv-c--poveste .is-in .inv-countdown > div {
    animation: poveste-rise 1s cubic-bezier(.2, .7, .2, 1) both;
}

html.inv-js .inv-c--poveste .is-in .inv-hero__kicker { animation-delay: .15s; }
html.inv-js .inv-c--poveste .is-in .inv-hero__names { animation-delay: .4s; animation-duration: 1.4s; }
html.inv-js .inv-c--poveste .is-in .inv-hero__date { animation-delay: .95s; }
html.inv-js .inv-c--poveste .is-in .inv-hero__place { animation-delay: 1.15s; }
html.inv-js .inv-c--poveste .is-in .inv-family__item:nth-child(2) { animation-delay: .14s; }
html.inv-js .inv-c--poveste .is-in .inv-family__item:nth-child(3) { animation-delay: .28s; }
html.inv-js .inv-c--poveste .is-in .inv-family__item:nth-child(4) { animation-delay: .42s; }
html.inv-js .inv-c--poveste .is-in .inv-countdown > div:nth-child(2) { animation-delay: .1s; }
html.inv-js .inv-c--poveste .is-in .inv-countdown > div:nth-child(3) { animation-delay: .2s; }
html.inv-js .inv-c--poveste .is-in .inv-countdown > div:nth-child(4) { animation-delay: .3s; }

/* Where the browser can tie an animation to scrolling: the names fade and the layers of the scene part. */
@supports (animation-timeline: scroll()) {
    .inv-c--poveste .inv-hero__content {
        animation: poveste-hero-out linear both;
        animation-timeline: scroll(nearest block);
        animation-range: 40px 640px;
    }

    .inv-c--poveste .inv-hero::before {
        animation: poveste-sky-out linear both;
        animation-timeline: scroll(nearest block);
        animation-range: 0px 900px;
    }

    .inv-c--poveste .inv-hero__frame {
        animation: poveste-far-out linear both;
        animation-timeline: scroll(nearest block);
        animation-range: 0px 900px;
    }

    /* The photograph drifts inside its frame while it crosses the screen. */
    .inv-c--poveste .inv-photo__frame img {
        animation: poveste-photo-drift linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
    }
}

/* ================= a wide screen (a computer) ================= */

/* From 900 px the invitation is as wide as the page, like a site: the sections lie across it, every other one on a band
   of colour, and what they hold is set out side by side (the families, the programme) up to 1120 px. A section's band
   stays still while what is inside comes in, one piece after another, and a flourish turns in at one of its corners. */
@container (min-width: 900px) {
    .inv-c--poveste .inv__column {
        max-width: none;
        padding: 0;
    }

    .inv-c--poveste .inv-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding: 0 0 72px;
    }

    .inv-c--poveste .inv-card > * {
        grid-column: 1 / -1;
    }

    .inv-c--poveste .inv-card > .inv-section {
        isolation: isolate;
        padding: clamp(72px, 8cqi, 116px) max(48px, calc(50cqi - 560px));
    }

    .inv-c--poveste .inv-card > .inv-section:nth-of-type(even) {
        background: var(--pv-band);
    }

    /* The message and the photograph side by side, like a page of a story. */
    .inv-c--poveste .inv-card > .inv-message:has(+ .inv-photo) {
        grid-column: 1;
        align-self: center;
        padding-right: 40px;
    }

    .inv-c--poveste .inv-card > .inv-message:has(+ .inv-photo) p {
        font-size: calc(var(--message-size) * 1.5);
    }

    .inv-c--poveste .inv-card > .inv-message + .inv-photo {
        grid-column: 2;
        padding-left: 40px;
        background: none;
    }

    .inv-c--poveste .inv-card > .inv-divider {
        padding: 18px 0;
    }

    .inv-c--poveste .inv-heading {
        font-size: calc(var(--heading-size) * 1.3);
    }

    .inv-c--poveste .orn--heading {
        --orn-max: 190px;
    }

    .inv-c--poveste .inv-message p {
        max-width: 34em;
        font-size: calc(var(--message-size) * 1.25);
    }

    .inv-c--poveste .inv-photo__frame {
        width: min(100%, 440px);
    }

    .inv-c--poveste .inv-family__grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
        justify-content: center;
        gap: 28px;
    }

    .inv-c--poveste .inv-family__item {
        padding: 30px 22px;
    }

    .inv-c--poveste .inv-family__names {
        font-size: calc(var(--family-size, 1.22rem) * 1.25);
    }

    .inv-c--poveste .inv-when__date {
        font-size: 3.2rem;
    }

    .inv-c--poveste .inv-countdown {
        max-width: 760px;
        gap: 22px;
        margin-top: 40px;
    }

    .inv-c--poveste .inv-countdown > div {
        padding: 28px 8px 20px;
    }

    .inv-c--poveste .inv-countdown span {
        font-size: 3.8rem;
    }

    .inv-c--poveste .inv-countdown small {
        font-size: .72rem;
    }

    .inv-c--poveste .inv-program__list {
        grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
        justify-content: center;
        gap: 40px 28px;
        padding-top: 28px;
    }

    .inv-c--poveste .inv-program__item {
        padding: 42px 24px 30px;
    }

    .inv-c--poveste .inv-dress__text {
        font-size: 1.8rem;
    }

    .inv-c--poveste .rsvp > * {
        max-width: 680px;
        margin-inline: auto;
    }

    .inv-c--poveste .inv-closing__names {
        font-size: calc(var(--closing-size, 2.5rem) * 1.45);
    }

    .inv-c--poveste .inv-card > .inv-section:not(.inv-photo)::after {
        content: "";
        position: absolute;
        top: 30px;
        left: max(20px, calc(50% - 700px));
        z-index: -1;
        width: clamp(170px, 19cqi, 270px);
        aspect-ratio: 360 / 130;
        background: var(--inv-ornament);
        -webkit-mask: url(../../img/invitations/ornaments/poveste-swirl.svg) center / contain no-repeat;
        mask: url(../../img/invitations/ornaments/poveste-swirl.svg) center / contain no-repeat;
        opacity: var(--pv-deco-opacity);
        pointer-events: none;
    }

    .inv-c--poveste .inv-card > .inv-section:nth-of-type(even):not(.inv-photo)::after {
        top: auto;
        left: auto;
        right: max(20px, calc(50% - 700px));
        bottom: 30px;
        scale: -1 -1;
    }

    .inv-c--poveste .inv-card > .inv-section:nth-of-type(odd) > * { --pv-enter: var(--pv-in-odd); }
    .inv-c--poveste .inv-card > .inv-section:nth-of-type(even) > * { --pv-enter: var(--pv-in-even); }
    .inv-c--poveste .inv-family__item:nth-child(odd) { --pv-enter: translateX(-90px); }
    .inv-c--poveste .inv-family__item:nth-child(even) { --pv-enter: translateX(90px); }

    html.inv-js .inv-c--poveste .inv-card > .inv-section[data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html.inv-js .inv-c--poveste .inv-card > .inv-section > :not(.inv-family__grid, .inv-countdown, .inv-program__list),
    html.inv-js .inv-c--poveste .inv-card > .inv-section:not(.inv-photo)::after {
        opacity: 0;
    }

    html.inv-js .inv-c--poveste .inv-card > .inv-section.is-in > :not(.inv-family__grid, .inv-countdown, .inv-program__list) {
        animation: poveste-enter var(--pv-in-wide-time) cubic-bezier(.16, .8, .24, 1) both;
    }

    html.inv-js .inv-c--poveste .inv-card > .inv-section.is-in > :nth-child(2) { animation-delay: .14s; }
    html.inv-js .inv-c--poveste .inv-card > .inv-section.is-in > :nth-child(3) { animation-delay: .28s; }
    html.inv-js .inv-c--poveste .inv-card > .inv-section.is-in > :nth-child(4) { animation-delay: .42s; }
    html.inv-js .inv-c--poveste .inv-card > .inv-section.is-in > :nth-child(5) { animation-delay: .56s; }
    html.inv-js .inv-c--poveste .inv-card > .inv-section.is-in > :nth-child(n+6) { animation-delay: .7s; }

    html.inv-js .inv-c--poveste .inv-card > .inv-section.is-in:not(.inv-photo)::after {
        animation: poveste-deco-in 2.6s cubic-bezier(.2, .8, .2, 1) .25s both;
    }

    html.inv-js .inv-c--poveste .is-in .inv-family__item {
        animation-name: poveste-enter;
        animation-duration: var(--pv-in-wide-time);
        animation-delay: .3s;
    }

    html.inv-js .inv-c--poveste .is-in .inv-family__item:nth-child(2) { animation-delay: .5s; }
    html.inv-js .inv-c--poveste .is-in .inv-family__item:nth-child(3) { animation-delay: .7s; }
    html.inv-js .inv-c--poveste .is-in .inv-family__item:nth-child(4) { animation-delay: .9s; }

    html.inv-js .inv-c--poveste .is-in .inv-countdown > div {
        animation-name: poveste-pop;
        animation-duration: 1.3s;
    }

    html.inv-js .inv-c--poveste .is-in .inv-countdown > div:nth-child(1) { animation-delay: .4s; }
    html.inv-js .inv-c--poveste .is-in .inv-countdown > div:nth-child(2) { animation-delay: .55s; }
    html.inv-js .inv-c--poveste .is-in .inv-countdown > div:nth-child(3) { animation-delay: .7s; }
    html.inv-js .inv-c--poveste .is-in .inv-countdown > div:nth-child(4) { animation-delay: .85s; }

    html.inv-js .inv-c--poveste .inv-program__item[data-reveal] {
        transform: translateY(80px) scale(.95);
        transition-duration: 1.5s;
    }

    html.inv-js .inv-c--poveste .inv-program__item[data-reveal].is-in {
        transform: none;
    }
}

@keyframes poveste-hero-out {
    to { opacity: 0; transform: translateY(-64px) scale(.96); }
}

@keyframes poveste-sky-out {
    to { transform: translateY(110px) scale(1.07); }
}

@keyframes poveste-far-out {
    to { transform: translateY(54px); }
}

@keyframes poveste-rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}

@keyframes poveste-hint {
    0%, 100% { transform: scaleX(1); opacity: .7; }
    50% { transform: scaleX(1.7); opacity: 1; }
}

/* A light that drifts up and fades: bokeh, dust, sparks. */
@keyframes poveste-drift {
    0% { transform: translate(0, 0) scale(.9); opacity: 0; }
    14% { opacity: var(--amb-opacity); }
    50% { transform: translate(16px, -9cqh) scale(1.12); }
    86% { opacity: var(--amb-opacity); }
    100% { transform: translate(-10px, -19cqh) scale(.92); opacity: 0; }
}

/* A firefly: it wanders, goes dark, lights up somewhere else. */
@keyframes poveste-wander {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: var(--amb-opacity); }
    24% { transform: translate(22px, -16px); opacity: .25; }
    38% { transform: translate(40px, 6px); opacity: var(--amb-opacity); }
    55% { transform: translate(12px, 26px); opacity: .2; }
    70% { transform: translate(-22px, 8px); opacity: var(--amb-opacity); }
    86% { transform: translate(-30px, -20px); opacity: .3; }
    100% { transform: translate(0, 0); opacity: 0; }
}

/* Snow: it falls and swings. */
@keyframes poveste-snow {
    0% { transform: translate(0, -6cqh); }
    25% { transform: translate(16px, 24cqh); }
    50% { transform: translate(-10px, 56cqh); }
    75% { transform: translate(14px, 88cqh); }
    100% { transform: translate(0, 122cqh); }
}

/* Lanterns, bubbles and sparks: they rise from below and swing. */
@keyframes poveste-lift {
    0% { transform: translate(0, 112cqh); opacity: 0; }
    10% { opacity: var(--amb-opacity); }
    35% { transform: translate(14px, 70cqh); }
    65% { transform: translate(-12px, 30cqh); }
    90% { opacity: var(--amb-opacity); }
    100% { transform: translate(8px, -14cqh); opacity: 0; }
}

/* Birds: they cross the sky. */
@keyframes poveste-glide {
    0% { transform: translate(-60cqw, 0); }
    50% { transform: translate(10cqw, -3cqh); }
    100% { transform: translate(110cqw, 2cqh); }
}

/* Petals and seeds on the wind: sideways, a little down, turning. */
@keyframes poveste-breeze {
    0% { transform: translate(-30cqw, 0) rotate(0deg); opacity: 0; }
    12% { opacity: var(--amb-opacity); }
    50% { transform: translate(30cqw, 9cqh) rotate(190deg); }
    88% { opacity: var(--amb-opacity); }
    100% { transform: translate(96cqw, -4cqh) rotate(380deg); opacity: 0; }
}

/* Fireworks: they open and fade. */
@keyframes poveste-burst {
    0% { transform: scale(.08); opacity: 0; }
    10% { opacity: 1; }
    45% { transform: scale(1); opacity: .9; }
    100% { transform: scale(1.14); opacity: 0; }
}

/* A shooting star: a fast streak, then a long dark. */
@keyframes poveste-shoot {
    0% { transform: translate(0, 0) rotate(152deg) scaleX(.2); opacity: 0; }
    3% { opacity: 1; }
    16% { transform: translate(-64cqw, 34cqh) rotate(152deg) scaleX(1); opacity: 0; }
    100% { transform: translate(-64cqw, 34cqh) rotate(152deg) scaleX(1); opacity: 0; }
}

/* A butterfly's path: it never goes dark, and it leaves "scale" to the beating of the wings. */
@keyframes poveste-flutter {
    0%, 100% { translate: 0 0; rotate: -8deg; }
    20% { translate: 9cqw -6cqh; rotate: 10deg; }
    40% { translate: 21cqw 2cqh; rotate: -4deg; }
    60% { translate: 9cqw 9cqh; rotate: 12deg; }
    80% { translate: -8cqw 3cqh; rotate: -12deg; }
}

@keyframes poveste-flap {
    0%, 100% { scale: 1 1; }
    50% { scale: .25 1; }
}

@keyframes poveste-pulse {
    0%, 100% { opacity: .62; }
    50% { opacity: 1; }
}

@keyframes poveste-spin {
    to { transform: rotate(360deg); }
}

/* A strip of waves or clouds that tiles: it slides by the width of one tile and starts again. */
@keyframes poveste-slide {
    to { transform: translateX(var(--pv-tile)); }
}

@keyframes poveste-shine {
    0%, 55% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@keyframes poveste-aurora {
    0%, 100% { transform: translateX(-6%) skewX(-8deg); opacity: .55; }
    50% { transform: translateX(6%) skewX(6deg); opacity: 1; }
}

/* The dust layer moves by one screen (half its height) and starts again. */
@keyframes poveste-dust {
    from { transform: translateY(var(--pv-dust-from)); }
    to { transform: translateY(var(--pv-dust-to)); }
}

@keyframes poveste-twinkle {
    0%, 100% { opacity: var(--pv-dust-opacity); }
    50% { opacity: calc(var(--pv-dust-opacity) * .3); }
}

@keyframes poveste-cover-in {
    from { opacity: 0; transform: translateY(34px) scale(.94); }
    to { opacity: 1; transform: none; }
}

/* A piece of a section comes in from where the template says (--pv-in-odd / --pv-in-even, a family from its side). */
@keyframes poveste-enter {
    from { opacity: 0; transform: var(--pv-enter, translateY(46px)); }
    to { opacity: 1; transform: none; }
}

/* A flourish slides in from its side, turning. */
@keyframes poveste-deco-in {
    from { opacity: 0; transform: translateX(-110px) rotate(-45deg); }
    to { opacity: var(--pv-deco-opacity); transform: none; }
}

@keyframes poveste-pop {
    from { opacity: 0; transform: translateY(36px) scale(.7); }
    60% { opacity: 1; transform: translateY(-4px) scale(1.04); }
    to { opacity: 1; transform: none; }
}

@keyframes poveste-photo-drift {
    from { transform: scale(1.16) translateY(-3%); }
    to { transform: scale(1.04) translateY(3%); }
}

/* With a photograph the cover never splits into doors: it is the photograph, and it leaves with the slow zoom. */
.inv-c--poveste .inv-envelope:has(.inv-envelope__photo) {
    --pv-open: scale(1.16);
    --pv-open-opacity: 0;
    --pv-bloom-display: none;
}

.inv-c--poveste .inv-envelope:has(.inv-envelope__photo) .inv-envelope__door {
    display: none;
}

/* ================================================================================================================
   EVENING AND NIGHT
   ================================================================================================================ */

/* ========== Apus auriu: the sun goes down behind a field; golden lights drift up ========== */

.inv--apus-auriu {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Cormorant Garamond", Georgia, serif;
    --names-style: italic;
    --names-weight: 500;
    --names-size: clamp(3rem, 15.5cqi, 6.2rem);
    --amp-font: "Pinyon Script", cursive;
    --amp-style: normal;
    --amp-size: .62em;
    --amp-color: var(--inv-primary);
    --heading-style: italic;
    --heading-weight: 500;
    --closing-font: "Pinyon Script", cursive;
    --pv-sky:
        radial-gradient(ellipse 58% 24% at 50% var(--pv-horizon), color-mix(in srgb, var(--inv-primary) 94%, #fff) 0, color-mix(in srgb, var(--inv-primary) 62%, transparent) 26%, color-mix(in srgb, var(--inv-ornament) 26%, transparent) 60%, transparent 82%),
        linear-gradient(180deg, var(--pv-night) 0, var(--inv-bg) 28%, color-mix(in srgb, var(--inv-accent) 76%, var(--inv-ornament)) 62%, color-mix(in srgb, var(--inv-ornament) 74%, var(--inv-bg)) 84%);
    --pv-far: url(../../img/invitations/ornaments/poveste-hills-far.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-bg) 58%, var(--inv-accent));
    --pv-near: url(../../img/invitations/ornaments/poveste-grass.svg);
    --pv-near-fill: var(--inv-bg);
    --amb-size: 36px;
    --amb-duration: 15s;
}

/* ========== Licurici: a clearing at night; fireflies wander between the trees ========== */

.inv--licurici {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Allura", cursive;
    --names-weight: 400;
    --names-size: clamp(3.6rem, 19cqi, 7.4rem);
    --names-line: .96;
    --amp-font: "Lora", Georgia, serif;
    --amp-size: .34em;
    --amp-color: var(--inv-primary);
    --kicker-spacing: .36em;
    --heading-font: "Allura", cursive;
    --heading-size: 3rem;
    --heading-weight: 400;
    --body-weight: 400;
    --closing-font: "Allura", cursive;
    --pv-sky:
        radial-gradient(ellipse 54% 30% at 80% 10%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 72%),
        linear-gradient(180deg, var(--pv-night) 0, var(--inv-bg) 52%, color-mix(in srgb, var(--inv-accent) 82%, var(--inv-bg)) 88%);
    --pv-far: url(../../img/invitations/ornaments/poveste-treeline.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-bg) 64%, #000);
    --pv-far-h: clamp(130px, 44cqi, 270px);
    --pv-near: url(../../img/invitations/ornaments/poveste-grass.svg);
    --pv-near-fill: var(--inv-bg);
    --amb-anim: poveste-wander;
    --pv-cover-anim: poveste-wander;
    --amb-size: 15px;
    --amb-duration: 11s;
    --amb-opacity: 1;
    --pv-in-time: 1.5s;
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-leaf.svg);
    --pv-divider-ratio: 300 / 34;
}

/* fireflies keep to the trees and the grass, under the names */
.inv--licurici .inv__ambient i {
    top: calc(52% + var(--amb-y) * .42);
}

/* ========== Aurora: northern lights over the ridges; the cover rises like a curtain ========== */

.inv--aurora {
    --f-display: "Cinzel", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Cinzel", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.1rem, 10.6cqi, 4.4rem);
    --names-transform: uppercase;
    --names-spacing: .16em;
    --names-line: 1.16;
    --amp-font: "Allura", cursive;
    --amp-style: normal;
    --amp-size: 1em;
    --amp-color: var(--inv-primary);
    --kicker-spacing: .5em;
    --date-spacing: .3em;
    --heading-size: 1.6rem;
    --heading-weight: 400;
    --heading-transform: uppercase;
    --heading-spacing: .16em;
    --body-weight: 400;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --family-font: "Cormorant Garamond", Georgia, serif;
    --pv-sky: linear-gradient(180deg, color-mix(in srgb, #000 30%, transparent) 0, transparent 46%, color-mix(in srgb, var(--inv-primary) 20%, var(--inv-bg)) 84%);
    --pv-far: url(../../img/invitations/ornaments/poveste-ridges-far.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-bg));
    --pv-near: url(../../img/invitations/ornaments/poveste-ridges.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(90px, 28cqi, 170px);
    --amb-image: url(../../img/invitations/ornaments/poveste-sparkle.svg);
    --amb-anim: inv-twinkle;
    --pv-cover-anim: inv-twinkle;
    --amb-size: 12px;
    --amb-duration: 7s;
    --amb-fill: var(--inv-text);
    --amb-opacity: .9;
    --pv-in-odd: translateX(-54px);
    --pv-in-even: translateX(54px);
    --pv-open: translateY(-104%);
    --pv-open-opacity: 1;
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-stars.svg);
}

.inv--aurora .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/poveste-stars.svg);
    --texture-size: 260px;
    --texture-opacity: .5;
    --texture-fill: var(--inv-text);
}

/* two ribbons of light, each as wide as the sky, swaying against each other */
.inv--aurora .inv-hero__corner--tl,
.inv--aurora .inv-hero__corner--tr {
    display: block;
    top: 4%;
    left: 50%;
    right: auto;
    width: 130cqi;
    max-width: none;
    height: 46%;
    margin-left: -65cqi;
    aspect-ratio: auto;
    -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 20%, transparent 72%);
    mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 20%, transparent 72%);
    background: linear-gradient(100deg, transparent 8%, color-mix(in srgb, var(--inv-primary) 48%, transparent) 34%, color-mix(in srgb, var(--inv-ornament) 40%, transparent) 56%, transparent 84%);
    opacity: 1;
    animation: poveste-aurora 13s ease-in-out infinite;
}

.inv--aurora .inv-hero__corner--tr {
    top: 16%;
    background: linear-gradient(80deg, transparent 12%, color-mix(in srgb, var(--inv-ornament) 36%, transparent) 40%, color-mix(in srgb, var(--inv-primary) 40%, transparent) 62%, transparent 88%);
    animation-duration: 17s;
    animation-direction: reverse;
}

/* ========== Lună plină: a full moon over the water; the cover opens in a flood of light ========== */

.inv--luna-plina {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Playfair Display", Georgia, serif;
    --names-style: italic;
    --names-weight: 400;
    --names-size: clamp(2.7rem, 13.6cqi, 5.6rem);
    --names-line: 1.08;
    --amp-size: .5em;
    --amp-color: var(--inv-ornament);
    --kicker-color: var(--inv-ornament);
    --heading-style: italic;
    --heading-weight: 400;
    --pv-moon: min(17cqi, 96px);
    --pv-sky:
        radial-gradient(circle at 50% 21%, #fff 0, color-mix(in srgb, var(--inv-ornament) 82%, #fff) calc(var(--pv-moon) - 1px), transparent var(--pv-moon)),
        radial-gradient(circle at 50% 21%, color-mix(in srgb, var(--inv-ornament) 34%, transparent) 0, transparent min(58cqi, 330px)),
        linear-gradient(180deg, var(--pv-night) 0, var(--inv-bg) 56%, color-mix(in srgb, var(--inv-accent) 86%, var(--inv-bg)) 82%);
    --pv-far: url(../../img/invitations/textures/poveste-water.svg);
    --pv-far-fill: linear-gradient(90deg, transparent 6%, color-mix(in srgb, var(--inv-ornament) 80%, transparent) 50%, transparent 94%);
    --pv-far-h: clamp(92px, 30cqi, 190px);
    --pv-near: url(../../img/invitations/ornaments/poveste-hills.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(46px, 14cqi, 90px);
    --hero-pad: calc(var(--pv-moon) * 2 + 40px) 8px calc(var(--pv-far-h) * .7 + 50px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/poveste-sparkle.svg);
    --amb-anim: inv-twinkle;
    --pv-cover-anim: inv-twinkle;
    --amb-size: 11px;
    --amb-duration: 8s;
    --amb-fill: var(--inv-text);
    --amb-opacity: .9;
    --pv-in: scale(.9);
    --pv-open: none;
    --pv-bloom-display: block;
    --pv-bloom: color-mix(in srgb, var(--inv-ornament) 40%, #fff);
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-wave.svg);
    --pv-divider-ratio: 300 / 24;
}

/* ========== Felinare: sky lanterns rise at dusk over the hills ========== */

.inv--felinare {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Great Vibes", cursive;
    --names-weight: 400;
    --names-size: clamp(3.4rem, 18cqi, 7rem);
    --names-line: 1;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-size: .36em;
    --amp-color: var(--inv-primary);
    --heading-style: italic;
    --closing-font: "Great Vibes", cursive;
    --pv-sky:
        radial-gradient(ellipse 80% 26% at 50% var(--pv-horizon), color-mix(in srgb, var(--inv-primary) 60%, transparent), color-mix(in srgb, var(--inv-ornament) 26%, transparent) 55%, transparent 80%),
        linear-gradient(180deg, var(--pv-night) 0, var(--inv-bg) 34%, color-mix(in srgb, var(--inv-accent) 84%, var(--inv-ornament)) 78%);
    --pv-far: url(../../img/invitations/ornaments/poveste-hills-far.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-bg) 55%, var(--inv-accent));
    --pv-near: url(../../img/invitations/ornaments/poveste-hills.svg);
    --pv-near-fill: var(--inv-bg);
    --amb-image: url(../../img/invitations/ornaments/poveste-lantern.svg);
    --amb-ratio: 44 / 62;
    --amb-anim: poveste-lift;
    --pv-cover-anim: poveste-drift;
    --amb-size: 30px;
    --amb-duration: 21s;
    --amb-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament)), color-mix(in srgb, var(--inv-primary) 90%, #fff) 70%);
    --amb-opacity: .9;
    --pv-open: translateY(-104%);
    --pv-open-opacity: 1;
}

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

/* ========== Ghirlande: strings of bulbs above the names, warm lights around ========== */

.inv--ghirlande {
    --f-display: "DM Serif Display", Georgia, serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --f-names: "DM Serif Display", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.8rem, 14cqi, 5.6rem);
    --names-line: 1.04;
    --amp-font: "Alex Brush", cursive;
    --amp-style: normal;
    --amp-size: .7em;
    --amp-color: var(--inv-primary);
    --heading-weight: 400;
    --pv-sky:
        radial-gradient(ellipse 46% 26% at 18% 30%, color-mix(in srgb, var(--inv-primary) 16%, transparent), transparent 70%),
        radial-gradient(ellipse 50% 28% at 84% 46%, color-mix(in srgb, var(--inv-primary) 13%, transparent), transparent 70%),
        linear-gradient(180deg, var(--pv-night) 0, var(--inv-bg) 60%, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-bg)));
    --pv-near: url(../../img/invitations/ornaments/poveste-treeline.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 60%, #000), var(--inv-bg) 82%);
    --pv-near-h: clamp(84px, 27cqi, 170px);
    --hero-pad: clamp(120px, 34cqi, 190px) 8px calc(var(--pv-near-h) + 46px);
    --amb-image: url(../../img/invitations/ornaments/poveste-bokeh-ring.svg);
    --amb-size: 34px;
    --amb-opacity: .42;
    --pv-in-odd: translateX(-52px) rotate(-1.2deg);
    --pv-in-even: translateX(52px) rotate(1.2deg);
}

.inv--ghirlande .inv-hero__corner--tl,
.inv--ghirlande .inv-hero__corner--tr {
    display: block;
    top: 0;
    left: 50%;
    right: auto;
    width: 100cqi;
    max-width: none;
    height: clamp(64px, 22cqi, 118px);
    margin-left: -50cqi;
    aspect-ratio: auto;
    transform: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-text) 50%, transparent) 0 18%, color-mix(in srgb, var(--inv-primary) 88%, #fff) 30%);
    -webkit-mask: url(../../img/invitations/ornaments/poveste-garland.svg) top left / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/poveste-garland.svg) top left / auto 100% repeat-x;
    opacity: 1;
    animation: poveste-pulse 3.4s ease-in-out infinite;
}

.inv--ghirlande .inv-hero__corner--tr {
    top: clamp(22px, 8cqi, 44px);
    -webkit-mask-position: top center;
    mask-position: top center;
    animation-delay: -1.7s;
}

/* ========== Lumânări: candles at the foot of the screen, sparks that rise ========== */

.inv--lumanari {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Cormorant Garamond", Georgia, serif;
    --names-weight: 300;
    --names-size: clamp(3rem, 15cqi, 6rem);
    --names-transform: uppercase;
    --names-spacing: .08em;
    --names-line: 1.06;
    --amp-font: "Pinyon Script", cursive;
    --amp-style: normal;
    --amp-size: .8em;
    --amp-color: var(--inv-primary);
    --heading-style: italic;
    --pv-sky:
        radial-gradient(ellipse 90% 40% at 50% 100%, color-mix(in srgb, var(--inv-primary) 46%, transparent), color-mix(in srgb, var(--inv-ornament) 18%, transparent) 50%, transparent 78%),
        linear-gradient(180deg, var(--pv-night) 0, var(--inv-bg) 70%);
    --pv-near: url(../../img/invitations/ornaments/poveste-candles.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, #fff) 0 22%, color-mix(in srgb, var(--inv-text) 80%, var(--inv-primary)) 34%, color-mix(in srgb, var(--inv-text) 34%, var(--inv-bg)) 78%, var(--inv-bg) 99%);
    --pv-near-h: clamp(120px, 38cqi, 230px);
    --hero-pad: 60px 8px calc(var(--pv-near-h) + 34px);
    --amb-anim: poveste-lift;
    --amb-size: 7px;
    --amb-duration: 10s;
    --amb-opacity: .9;
    --pv-in: scale(.92);
    --pv-open: none;
    --pv-bloom-display: block;
}

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

/* ========== Artificii: fireworks open over the city ========== */

.inv--artificii {
    --f-display: "Bodoni Moda", Georgia, serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --f-names: "Bodoni Moda", Georgia, serif;
    --names-weight: 500;
    --names-size: clamp(2.5rem, 12.6cqi, 5.2rem);
    --names-transform: uppercase;
    --names-spacing: .06em;
    --names-line: 1.1;
    --amp-style: italic;
    --amp-size: .6em;
    --amp-color: var(--inv-primary);
    --kicker-spacing: .46em;
    --heading-weight: 500;
    --heading-size: 2rem;
    --body-weight: 400;
    --pv-sky:
        radial-gradient(ellipse 100% 22% at 50% 100%, color-mix(in srgb, var(--inv-primary) 30%, transparent), transparent 80%),
        linear-gradient(180deg, var(--pv-night) 0, var(--inv-bg) 62%, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-bg)));
    --pv-near: url(../../img/invitations/ornaments/poveste-skyline.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 55%, #000), var(--inv-bg) 85%);
    --pv-near-h: clamp(84px, 27cqi, 170px);
    --hero-pad: clamp(190px, 54cqi, 300px) 8px calc(var(--pv-near-h) + 30px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/poveste-firework.svg);
    --amb-anim: poveste-burst;
    --pv-cover-anim: poveste-burst;
    --amb-size: 104px;
    --amb-duration: 5.4s;
    --amb-opacity: 1;
    --pv-in: scale(.88);
    --pv-in-time: .9s;
    --pv-open: none;
    --pv-bloom-display: block;
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-stars.svg);
}

.inv--artificii .inv__ambient i {
    top: calc(var(--amb-y) * .3 - 5%);
    margin-left: -50px;
    animation-timing-function: cubic-bezier(.1, .7, .3, 1);
}

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

/* ========== Candelabru: a ballroom, a crystal chandelier; the cover is a pair of doors ========== */

.inv--candelabru {
    --f-display: "Gilda Display", Georgia, serif;
    --f-body: "Tenor Sans", "Segoe UI", sans-serif;
    --f-names: "Gilda Display", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.5rem, 12.4cqi, 5rem);
    --names-transform: uppercase;
    --names-spacing: .1em;
    --names-line: 1.12;
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: 1em;
    --amp-color: var(--inv-primary);
    --kicker-spacing: .5em;
    --heading-weight: 400;
    --heading-size: 2rem;
    --body-weight: 400;
    --pv-sky:
        radial-gradient(ellipse 60% 34% at 50% 16%, color-mix(in srgb, var(--inv-primary) 34%, transparent), transparent 74%),
        repeating-linear-gradient(90deg, transparent 0 21cqi, color-mix(in srgb, var(--inv-ornament) 12%, transparent) 21cqi calc(21cqi + 1px), transparent calc(21cqi + 1px) 25cqi),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 76%);
    --hero-pad: 34px 8px 96px;
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/poveste-sparkle.svg);
    --amb-anim: inv-twinkle;
    --pv-cover-anim: inv-twinkle;
    --amb-size: 13px;
    --amb-duration: 6s;
    --amb-opacity: .95;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(var(--inv-ornament), var(--inv-ornament)) 88% 80% / 3px 54px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-ornament) 55%, transparent), color-mix(in srgb, var(--inv-ornament) 55%, transparent)) 50% 9% / 64% 1px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-ornament) 55%, transparent), color-mix(in srgb, var(--inv-ornament) 55%, transparent)) 50% 91% / 64% 1px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-ornament) 55%, transparent), color-mix(in srgb, var(--inv-ornament) 55%, transparent)) 18% 50% / 1px 82% no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-ornament) 55%, transparent), color-mix(in srgb, var(--inv-ornament) 55%, transparent)) 82% 50% / 1px 82% no-repeat,
        linear-gradient(100deg, color-mix(in srgb, var(--inv-surface) 80%, #000), var(--inv-surface) 46%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)));
}

html.inv-js .inv--candelabru .inv-envelope {
    background: transparent;
}

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

.inv--candelabru .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/poveste-chandelier.svg);
    --orn-ratio: 260 / 200;
    --orn-width: min(66cqi, 330px);
    --orn-max: 330px;
    --orn-fill: linear-gradient(180deg, var(--inv-ornament), color-mix(in srgb, var(--inv-primary) 80%, #fff) 60%, var(--inv-ornament));
    --orn-margin: 0 auto 10px;
}

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

/* ========== Ploaie de stele: shooting stars over a line of firs ========== */

.inv--ploaie-de-stele {
    --f-display: "Josefin Sans", "Segoe UI", sans-serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Josefin Sans", "Segoe UI", sans-serif;
    --names-weight: 300;
    --names-size: clamp(2.3rem, 11.6cqi, 4.8rem);
    --names-transform: uppercase;
    --names-spacing: .2em;
    --names-line: 1.2;
    --amp-font: "Alex Brush", cursive;
    --amp-style: normal;
    --amp-size: 1.1em;
    --amp-color: var(--inv-primary);
    --kicker-spacing: .5em;
    --heading-size: 1.5rem;
    --heading-weight: 300;
    --heading-transform: uppercase;
    --heading-spacing: .22em;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --pv-sky: linear-gradient(180deg, color-mix(in srgb, #000 30%, transparent) 0, transparent 50%, color-mix(in srgb, var(--inv-accent) 92%, var(--inv-primary)) 96%);
    --pv-far: url(../../img/invitations/ornaments/poveste-ridges-far.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 55%, var(--inv-bg));
    --pv-near: url(../../img/invitations/ornaments/poveste-pines.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 55%, #000), var(--inv-bg) 90%);
    --pv-near-h: clamp(96px, 31cqi, 190px);
    --amb-image: url(../../img/invitations/ornaments/poveste-trail.svg);
    --amb-ratio: 140 / 20;
    --amb-anim: poveste-shoot;
    --amb-size: 120px;
    --amb-duration: 9s;
    --amb-fill: var(--inv-text);
    --amb-opacity: 1;
    --pv-cover-anim: poveste-shoot;
    --pv-in-odd: translateX(-54px);
    --pv-in-even: translateX(54px);
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-stars.svg);
}

.inv--ploaie-de-stele .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/poveste-stars.svg);
    --texture-size: 260px;
    --texture-opacity: .6;
    --texture-fill: var(--inv-text);
}

/* the streaks start in the upper right and cross the sky; the scale of each particle is its own speed here */
.inv--ploaie-de-stele .inv__ambient i {
    top: calc(var(--amb-y) * .4);
    margin-left: 30cqi;
    scale: 1;
}

.inv--ploaie-de-stele .inv__ambient i:nth-child(3n) {
    animation-duration: 13s;
}

.inv--ploaie-de-stele .inv__ambient i:nth-child(3n + 1) {
    animation-duration: 17s;
}

/* ================================================================================================================
   DAYLIGHT
   ================================================================================================================ */

/* ========== Vene aurii: marble with golden veins that catch the light, gold dust in the air ========== */

.inv--vene-aurii {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Playfair Display", Georgia, serif;
    --names-weight: 500;
    --names-size: clamp(2.6rem, 13cqi, 5.2rem);
    --names-line: 1.1;
    --amp-style: italic;
    --amp-size: .56em;
    --amp-color: var(--inv-ornament);
    --kicker-font: "Petit Formal Script", cursive;
    --kicker-size: 1.02rem;
    --kicker-spacing: 0;
    --kicker-transform: none;
    --kicker-weight: 400;
    --heading-weight: 500;
    --pv-sky: radial-gradient(ellipse 86% 56% at 50% 40%, color-mix(in srgb, var(--inv-surface) 82%, transparent), transparent 78%);
    --hero-pad: 70px 8px 96px;
    --amb-image: url(../../img/invitations/ornaments/poveste-sparkle.svg);
    --amb-size: 12px;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .85;
    --amb-duration: 16s;
    --pv-open: translateY(-104%);
    --pv-open-opacity: 1;
}

.inv--vene-aurii .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/poveste-veins.svg);
    --texture-size: 420px;
    --texture-opacity: .6;
    --texture-fill: linear-gradient(120deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 45%, #fff) 45%, var(--inv-ornament) 72%);
}

/* a band of light that crosses the slab now and then */
.inv--vene-aurii .inv-hero::after {
    top: 0;
    height: auto;
    -webkit-mask: none;
    mask: none;
    background: linear-gradient(105deg, transparent 41%, color-mix(in srgb, #fff 58%, transparent) 50%, transparent 59%);
    animation: poveste-shine 9s ease-in-out infinite;
}

.inv--vene-aurii.inv--dark .inv-hero::after {
    opacity: .22;
}

.inv--vene-aurii .inv-hero__content {
    padding: 36px 22px 32px;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 70%, transparent);
    outline: 1px solid color-mix(in srgb, var(--inv-ornament) 34%, transparent);
    outline-offset: 7px;
    background: color-mix(in srgb, var(--inv-surface) 74%, transparent);
}

.inv--vene-aurii .inv-envelope::after {
    top: 0;
    height: auto;
    background: var(--inv-ornament);
    -webkit-mask: url(../../img/invitations/textures/poveste-veins.svg) 0 0 / 420px repeat;
    mask: url(../../img/invitations/textures/poveste-veins.svg) 0 0 / 420px repeat;
    opacity: .55;
}

/* ========== Fildeș: an ivory card with flowering branches in the corners, soft lights behind ========== */

.inv--fildes {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Cormorant Garamond", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.8rem, 14cqi, 5.6rem);
    --names-color: var(--inv-text);
    --names-shadow: none;
    --amp-font: "Great Vibes", cursive;
    --amp-style: normal;
    --amp-size: .7em;
    --amp-color: var(--inv-primary);
    --kicker-font: "Great Vibes", cursive;
    --kicker-size: 1.5rem;
    --kicker-spacing: 0;
    --kicker-transform: none;
    --kicker-weight: 400;
    --heading-style: italic;
    --closing-font: "Great Vibes", cursive;
    --pv-sky:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--inv-ornament) 34%, transparent), transparent 36%),
        radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--inv-primary) 20%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-ornament)), var(--inv-bg) 92%);
    --hero-pad: 58px 8px 88px;
    --amb-size: 64px;
    --amb-fill: color-mix(in srgb, var(--inv-ornament) 60%, #fff);
    --amb-opacity: .4;
    --amb-duration: 18s;
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-leaf.svg);
    --pv-divider-ratio: 300 / 34;
}

.inv--fildes .inv-hero__content {
    padding: 50px 24px 42px;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 46%, transparent);
    background: var(--inv-surface);
    box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .4), inset 0 0 0 6px var(--inv-surface), inset 0 0 0 7px color-mix(in srgb, var(--inv-ornament) 36%, transparent);
}

.inv--fildes .inv-hero__corner--tl,
.inv--fildes .inv-hero__corner--br {
    z-index: 2;
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/poveste-corner-floral.svg);
    --hero-corner-size: 44%;
    --hero-corner-max: 200px;
    --hero-corner-ratio: 210 / 180;
    --hero-corner-inset: 16px;
    --hero-corner-fill: color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-primary));
}

/* ========== Dimineață: sun through an arched window, dust floating in the light ========== */

.inv--dimineata {
    --f-display: "EB Garamond", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "EB Garamond", Georgia, serif;
    --names-style: italic;
    --names-weight: 400;
    --names-size: clamp(3rem, 15.4cqi, 6.2rem);
    --amp-size: .5em;
    --amp-color: var(--inv-primary);
    --heading-style: italic;
    --heading-weight: 400;
    --body-weight: 400;
    --pv-sky:
        conic-gradient(from 118deg at 6% -6%, transparent 0deg, color-mix(in srgb, #fff 64%, transparent) 6deg, transparent 13deg, color-mix(in srgb, #fff 44%, transparent) 20deg, transparent 28deg, color-mix(in srgb, #fff 54%, transparent) 37deg, transparent 47deg, transparent 360deg),
        radial-gradient(ellipse 74% 52% at 8% 0%, color-mix(in srgb, var(--inv-ornament) 52%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 84%, var(--inv-bg)), var(--inv-bg) 84%);
    --hero-pad: 84px 8px 96px;
    --amb-size: 7px;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .85;
    --amb-duration: 19s;
    --pv-in-time: 1.5s;
    --pv-open: none;
    --pv-bloom-display: block;
    --pv-bloom: color-mix(in srgb, var(--inv-ornament) 30%, #fff);
}

.inv--dimineata .inv-hero__corner--tl {
    display: block;
    top: 30px;
    left: 50%;
    width: min(80cqi, 420px);
    max-width: none;
    margin-left: calc(min(80cqi, 420px) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/poveste-window.svg);
    --hero-corner-ratio: 300 / 400;
    --hero-corner-opacity: .3;
}

/* ========== Grădină albă: an arch of flowers around the names, leaves falling slowly ========== */

.inv--gradina-alba {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Allura", cursive;
    --names-weight: 400;
    --names-size: clamp(3rem, 15.4cqi, 6rem);
    --names-line: 1;
    --names-color: var(--inv-primary);
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-size: .36em;
    --kicker-size: .6rem;
    --kicker-spacing: .34em;
    --heading-font: "Allura", cursive;
    --heading-size: 3rem;
    --heading-weight: 400;
    --closing-font: "Allura", cursive;
    --place-display: none;
    --pv-arch: min(88cqi, 460px);
    --pv-sky: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 72%, var(--inv-surface)), var(--inv-bg) 78%);
    --pv-near: url(../../img/invitations/ornaments/poveste-grass.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-primary)), var(--inv-bg) 92%);
    --pv-near-h: clamp(56px, 18cqi, 110px);
    --hero-pad: calc(var(--pv-arch) * .34 + 20px) 8px calc(var(--pv-near-h) + 40px);
    --hero-justify: flex-start;
    --hero-content-pad: 0 calc((100cqi - var(--pv-arch) * .66) / 2 - 24px);
    --amb-image: url(../../img/invitations/ornaments/poveste-leaf.svg);
    --amb-ratio: 28 / 44;
    --amb-anim: inv-fall;
    --pv-cover-anim: poveste-drift;
    --amb-size: 15px;
    --amb-duration: 17s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .75;
    --pv-in-odd: translateX(-50px);
    --pv-in-even: translateX(50px);
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-leaf.svg);
    --pv-divider-ratio: 300 / 34;
}

.inv--gradina-alba .inv-hero__corner--tl {
    display: block;
    top: 24px;
    left: 50%;
    width: var(--pv-arch);
    max-width: none;
    margin-left: calc(var(--pv-arch) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/poveste-arch.svg);
    --hero-corner-ratio: 320 / 400;
    --hero-corner-fill: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-ornament));
    --hero-corner-opacity: .95;
}

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

/* ========== Lac în zori: a lake in the mist, hills in layers, reeds, the sun coming up ========== */

.inv--lac-in-zori {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Lora", Georgia, serif;
    --names-style: italic;
    --names-weight: 400;
    --names-size: clamp(2.7rem, 13.6cqi, 5.4rem);
    --names-line: 1.08;
    --amp-size: .5em;
    --amp-color: var(--inv-primary);
    --heading-style: italic;
    --heading-weight: 400;
    --body-weight: 400;
    --pv-water: clamp(110px, 36cqi, 220px);
    --pv-horizon: calc(100% - var(--pv-water));
    --pv-sun: min(8.6cqi, 50px);
    --pv-sky:
        radial-gradient(circle at 64% calc(var(--pv-horizon) - 9cqi), #fff 0, color-mix(in srgb, #fff 70%, var(--inv-ornament)) calc(var(--pv-sun) - 1px), transparent var(--pv-sun)),
        radial-gradient(circle at 64% calc(var(--pv-horizon) - 9cqi), color-mix(in srgb, var(--inv-ornament) 55%, transparent), transparent min(48cqi, 270px)),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 62%, var(--inv-surface)) 0, color-mix(in srgb, var(--inv-ornament) 34%, var(--inv-bg)) var(--pv-horizon), color-mix(in srgb, var(--inv-accent) 92%, var(--inv-primary)) calc(var(--pv-horizon) + 1px), color-mix(in srgb, var(--inv-accent) 60%, var(--inv-bg)) 100%);
    --pv-far: url(../../img/invitations/ornaments/poveste-hills-far.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-primary) 30%, var(--inv-accent));
    --pv-far-h: clamp(62px, 20cqi, 124px);
    --pv-far-bottom: var(--pv-water);
    --pv-near: url(../../img/invitations/ornaments/poveste-reeds.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 72%, var(--inv-text)) 0, color-mix(in srgb, var(--inv-primary) 46%, var(--inv-bg)) 62%, var(--inv-bg) 99%);
    --pv-near-h: clamp(104px, 34cqi, 210px);
    --hero-pad: 56px 8px calc(var(--pv-water) + 76px);
    --amb-size: 120px;
    --amb-fill: #fff;
    --amb-opacity: .34;
    --amb-duration: 24s;
    --pv-in-time: 1.4s;
    --pv-open: translateY(-104%);
    --pv-open-opacity: 1;
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-wave.svg);
    --pv-divider-ratio: 300 / 24;
}

/* light on the water, between the far shore and the reeds */
.inv--lac-in-zori .inv-hero__corner--bl,
.inv--stuf .inv-hero__corner--bl {
    display: block;
    bottom: 0;
    left: 50%;
    width: 100cqi;
    max-width: none;
    height: var(--pv-water);
    margin-left: -50cqi;
    aspect-ratio: auto;
    transform: none;
    background: color-mix(in srgb, #fff 82%, var(--inv-ornament));
    -webkit-mask: url(../../img/invitations/textures/poveste-water.svg) top center / auto 100% repeat-x;
    mask: url(../../img/invitations/textures/poveste-water.svg) top center / auto 100% repeat-x;
    opacity: .7;
}

/* ========== Toscana: hills with cypresses in the golden light of the evening, birds gliding ========== */

.inv--toscana {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-style: italic;
    --names-weight: 400;
    --names-size: clamp(2.8rem, 14.2cqi, 5.6rem);
    --names-line: 1.04;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --heading-style: italic;
    --heading-weight: 400;
    --pv-sun: min(11cqi, 62px);
    --pv-sky:
        radial-gradient(circle at 72% calc(var(--pv-horizon) - 7cqi), color-mix(in srgb, #fff 76%, var(--inv-ornament)) 0 calc(var(--pv-sun) - 1px), transparent var(--pv-sun)),
        radial-gradient(circle at 72% calc(var(--pv-horizon) - 7cqi), color-mix(in srgb, var(--inv-ornament) 62%, transparent), transparent min(54cqi, 300px)),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 52%, var(--inv-surface)), color-mix(in srgb, var(--inv-ornament) 36%, var(--inv-bg)) 80%);
    --pv-far: url(../../img/invitations/ornaments/poveste-hills-far.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-bg));
    --pv-near: url(../../img/invitations/ornaments/poveste-cypress.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 66%, var(--inv-text)) 0, color-mix(in srgb, var(--inv-primary) 44%, var(--inv-bg)) 64%, var(--inv-bg) 99%);
    --pv-near-h: clamp(108px, 35cqi, 216px);
    --amb-image: url(../../img/invitations/ornaments/poveste-bird.svg);
    --amb-ratio: 40 / 16;
    --amb-anim: poveste-glide;
    --pv-cover-anim: poveste-glide;
    --amb-size: 22px;
    --amb-duration: 30s;
    --amb-fill: color-mix(in srgb, var(--inv-text) 55%, var(--inv-primary));
    --amb-opacity: .5;
    --pv-in-odd: translateX(-52px) rotate(-1.2deg);
    --pv-in-even: translateX(52px) rotate(1.2deg);
}

.inv--toscana .inv__ambient i,
.inv--faleza .inv__ambient i,
.inv--rasarit .inv__ambient i {
    top: calc(var(--amb-y) * .3 + 5%);
    left: 0;
}

/* ========== Maci în lan: a wheat field, poppies at the foot of the screen, petals on the wind ========== */

.inv--maci-in-lan {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Dancing Script", cursive;
    --names-weight: 600;
    --names-size: clamp(3.2rem, 16.6cqi, 6.6rem);
    --names-line: 1;
    --amp-font: "Lora", Georgia, serif;
    --amp-size: .36em;
    --amp-color: var(--pv-poppy);
    --kicker-weight: 600;
    --heading-font: "Dancing Script", cursive;
    --heading-size: 2.8rem;
    --heading-weight: 600;
    --body-weight: 500;
    --closing-font: "Dancing Script", cursive;
    --pv-poppy: color-mix(in srgb, #D5402E 80%, var(--inv-primary));
    --pv-sky:
        radial-gradient(ellipse 60% 40% at 86% 4%, color-mix(in srgb, #fff 70%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 58%, var(--inv-surface)), var(--inv-bg) 74%);
    --pv-far: url(../../img/invitations/ornaments/poveste-wheat.svg);
    --pv-far-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 86%, var(--inv-primary)), color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-bg)));
    --pv-far-h: clamp(116px, 38cqi, 230px);
    --pv-near: url(../../img/invitations/ornaments/poveste-poppies.svg);
    --pv-near-fill: linear-gradient(180deg, var(--pv-poppy) 0 46%, color-mix(in srgb, var(--inv-primary) 50%, var(--inv-bg)) 72%, var(--inv-bg) 99%);
    --pv-near-h: clamp(96px, 31cqi, 190px);
    --amb-image: url(../../img/invitations/ornaments/poveste-petal.svg);
    --amb-ratio: 30 / 38;
    --amb-anim: poveste-breeze;
    --pv-cover-anim: poveste-drift;
    --amb-size: 13px;
    --amb-duration: 15s;
    --amb-fill: var(--pv-poppy);
    --amb-opacity: .8;
}

.inv--maci-in-lan .inv__ambient i,
.inv--papadie .inv__ambient i {
    top: calc(var(--amb-y) * .6 + 12%);
    left: 0;
}

/* ========== Faleză: waves that move in layers, gulls and a lot of sky ========== */

.inv--faleza {
    --f-display: "Tenor Sans", "Segoe UI", sans-serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Tenor Sans", "Segoe UI", sans-serif;
    --names-weight: 400;
    --names-size: clamp(2.3rem, 11.8cqi, 4.8rem);
    --names-transform: uppercase;
    --names-spacing: .16em;
    --names-line: 1.18;
    --amp-font: "Pinyon Script", cursive;
    --amp-style: normal;
    --amp-size: 1em;
    --amp-color: var(--inv-primary);
    --kicker-spacing: .5em;
    --heading-size: 1.6rem;
    --heading-weight: 400;
    --heading-transform: uppercase;
    --heading-spacing: .18em;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --pv-water: clamp(120px, 38cqi, 230px);
    --pv-horizon: calc(100% - var(--pv-water));
    --pv-sky:
        radial-gradient(ellipse 46% 9% at 50% var(--pv-horizon), color-mix(in srgb, #fff 84%, transparent), transparent 82%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 46%, var(--inv-surface)) 0, color-mix(in srgb, var(--inv-ornament) 36%, var(--inv-bg)) var(--pv-horizon), color-mix(in srgb, var(--inv-primary) 44%, var(--inv-bg)) calc(var(--pv-horizon) + 1px), color-mix(in srgb, var(--inv-primary) 24%, var(--inv-bg)) 100%);
    --pv-far: url(../../img/invitations/ornaments/poveste-waves.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-primary) 26%, var(--inv-bg));
    --pv-far-h: clamp(40px, 13cqi, 78px);
    --pv-far-bottom: clamp(34px, 11cqi, 66px);
    --pv-near: url(../../img/invitations/ornaments/poveste-waves.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(46px, 15cqi, 90px);
    --hero-pad: 56px 8px calc(var(--pv-water) + 44px);
    --amb-image: url(../../img/invitations/ornaments/poveste-bird.svg);
    --amb-ratio: 40 / 16;
    --amb-anim: poveste-glide;
    --pv-cover-anim: poveste-glide;
    --amb-size: 22px;
    --amb-duration: 28s;
    --amb-fill: color-mix(in srgb, var(--inv-text) 60%, var(--inv-primary));
    --amb-opacity: .5;
    --pv-in-odd: translateX(-54px);
    --pv-in-even: translateX(54px);
    --pv-open: translateY(-104%);
    --pv-open-opacity: 1;
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-wave.svg);
    --pv-divider-ratio: 300 / 24;
}

/* each strip is one tile wider than the screen and slides by exactly one tile: the sea never stops */
.inv--faleza .inv-hero__frame {
    width: calc(100cqi + var(--pv-far-h) * 5.46);
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    --pv-tile: calc(var(--pv-far-h) * -5.4545);
    animation: poveste-slide 9s linear infinite;
}

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

/* ========== Seră: a glasshouse behind the names; the cover is a pair of glass doors ========== */

.inv--sera {
    --f-display: "Forum", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Forum", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.5rem, 12.6cqi, 5rem);
    --names-transform: uppercase;
    --names-spacing: .1em;
    --names-line: 1.12;
    --names-color: var(--inv-primary);
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: 1em;
    --kicker-spacing: .46em;
    --heading-weight: 400;
    --heading-size: 2rem;
    --place-display: none;
    --pv-house: min(88cqi, 450px);
    --pv-sky:
        radial-gradient(ellipse 80% 44% at 50% 22%, color-mix(in srgb, var(--inv-surface) 90%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 86%, var(--inv-ornament)), var(--inv-bg) 82%);
    --pv-near: url(../../img/invitations/ornaments/poveste-grass.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 62%, var(--inv-ornament)), var(--inv-bg) 92%);
    --pv-near-h: clamp(56px, 18cqi, 110px);
    --hero-pad: calc(var(--pv-house) * .3 + 26px) 8px calc(var(--pv-near-h) + 44px);
    --hero-justify: flex-start;
    --amb-size: 44px;
    --amb-fill: color-mix(in srgb, var(--inv-surface) 60%, var(--inv-ornament));
    --amb-opacity: .5;
    --pv-in: scale(.92);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(var(--inv-primary), var(--inv-primary)) 90% 82% / 3px 46px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-primary) 60%, transparent), color-mix(in srgb, var(--inv-primary) 60%, transparent)) 50% 0 / 100% 6px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-primary) 40%, transparent), color-mix(in srgb, var(--inv-primary) 40%, transparent)) 50% 33% / 100% 1px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-primary) 40%, transparent), color-mix(in srgb, var(--inv-primary) 40%, transparent)) 50% 66% / 100% 1px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-primary) 40%, transparent), color-mix(in srgb, var(--inv-primary) 40%, transparent)) 50% 50% / 1px 100% no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-primary) 60%, transparent), color-mix(in srgb, var(--inv-primary) 60%, transparent)) 100% 50% / 5px 100% no-repeat,
        linear-gradient(120deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)), var(--inv-surface) 40%, color-mix(in srgb, var(--inv-accent) 50%, var(--inv-surface)) 70%, var(--inv-surface));
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-leaf.svg);
    --pv-divider-ratio: 300 / 34;
}

html.inv-js .inv--sera .inv-envelope,
html.inv-js .inv--carusel .inv-envelope {
    background: transparent;
}

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

.inv--sera .inv-hero__corner--tl {
    display: block;
    top: 28px;
    left: 50%;
    width: var(--pv-house);
    max-width: none;
    margin-left: calc(var(--pv-house) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/poveste-glasshouse.svg);
    --hero-corner-ratio: 340 / 320;
    --hero-corner-fill: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-ornament));
    --hero-corner-opacity: .36;
}

/* ========== Păpădie: a dandelion at the edge of the screen, its seeds flying over the names ========== */

.inv--papadie {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Birthstone", cursive;
    --names-weight: 400;
    --names-size: clamp(3.8rem, 20cqi, 7.8rem);
    --names-line: .92;
    --names-color: var(--inv-primary);
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-size: .3em;
    --heading-font: "Birthstone", cursive;
    --heading-size: 3.2rem;
    --heading-weight: 400;
    --body-weight: 400;
    --closing-font: "Birthstone", cursive;
    --pv-sky:
        radial-gradient(ellipse 70% 46% at 78% 14%, color-mix(in srgb, var(--inv-surface) 92%, transparent), transparent 74%),
        linear-gradient(170deg, color-mix(in srgb, var(--inv-accent) 82%, var(--inv-ornament)), var(--inv-bg) 78%);
    --pv-near: url(../../img/invitations/ornaments/poveste-grass.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(50px, 16cqi, 96px);
    --hero-pad: 56px 8px clamp(190px, 58cqi, 330px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/poveste-seed.svg);
    --amb-ratio: 30 / 44;
    --amb-anim: poveste-breeze;
    --pv-cover-anim: poveste-drift;
    --amb-size: 20px;
    --amb-duration: 18s;
    --amb-fill: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-ornament));
    --amb-opacity: .75;
    --pv-in-time: 1.5s;
    --pv-open: none;
    --pv-bloom-display: block;
    --pv-bloom: #fff;
}

.inv--papadie .inv-hero__corner--bl {
    display: block;
    bottom: 0;
    left: -8px;
    width: min(50cqi, 270px);
    max-width: none;
    transform: none;
    --hero-corner-image: url(../../img/invitations/ornaments/poveste-dandelion.svg);
    --hero-corner-ratio: 220 / 300;
    --hero-corner-fill: color-mix(in srgb, var(--inv-primary) 72%, var(--inv-ornament));
    --hero-corner-opacity: .8;
}

/* ========== Răsărit: a pastel sky in bands, the sun behind the hill, clouds that slide ========== */

.inv--rasarit {
    --f-display: "Gilda Display", Georgia, serif;
    --f-body: "Poppins", "Segoe UI", sans-serif;
    --f-names: "Gilda Display", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.8rem, 14.2cqi, 5.6rem);
    --names-line: 1.06;
    --amp-font: "Alex Brush", cursive;
    --amp-style: normal;
    --amp-size: .8em;
    --amp-color: var(--inv-primary);
    --heading-weight: 400;
    --body-weight: 300;
    --pv-sun: min(15cqi, 84px);
    --pv-sky:
        radial-gradient(circle at 50% calc(var(--pv-horizon) + 3cqi), color-mix(in srgb, #fff 82%, var(--inv-ornament)) 0 calc(var(--pv-sun) - 1px), transparent var(--pv-sun)),
        radial-gradient(circle at 50% var(--pv-horizon), color-mix(in srgb, var(--inv-ornament) 72%, transparent), transparent min(62cqi, 350px)),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 40%, var(--inv-surface)) 0, color-mix(in srgb, var(--inv-accent) 88%, var(--inv-surface)) 42%, color-mix(in srgb, var(--inv-ornament) 56%, var(--inv-bg)) 80%, color-mix(in srgb, var(--inv-ornament) 76%, var(--inv-bg)) 100%);
    --pv-far: url(../../img/invitations/ornaments/poveste-clouds.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-surface) 88%, transparent);
    --pv-far-h: clamp(64px, 21cqi, 124px);
    --pv-far-bottom: calc(var(--pv-near-h) * 1.5);
    --pv-horizon: calc(100% - var(--pv-near-h) * .7);
    --pv-near: url(../../img/invitations/ornaments/poveste-hills.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(76px, 25cqi, 150px);
    --hero-pad: 56px 8px calc(var(--pv-near-h) * 2.5 + 30px);
    --amb-image: url(../../img/invitations/ornaments/poveste-bird.svg);
    --amb-ratio: 40 / 16;
    --amb-anim: poveste-glide;
    --pv-cover-anim: poveste-glide;
    --amb-size: 20px;
    --amb-duration: 32s;
    --amb-fill: color-mix(in srgb, var(--inv-text) 50%, var(--inv-primary));
    --amb-opacity: .45;
    --pv-open: translateY(-104%);
    --pv-open-opacity: 1;
}

.inv--rasarit .inv-hero__frame,
.inv--barza .inv-hero__frame {
    width: calc(100cqi + var(--pv-far-h) * 4.02);
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    --pv-tile: calc(var(--pv-far-h) * -4);
    animation: poveste-slide 70s linear infinite;
}

/* ========== Ninsoare: a village under snow, lit windows, firs, flakes that fall and swing ========== */

.inv--ninsoare {
    --f-display: "Libre Baskerville", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Libre Baskerville", Georgia, serif;
    --names-style: italic;
    --names-weight: 400;
    --names-size: clamp(2.4rem, 12.2cqi, 4.9rem);
    --names-line: 1.14;
    --amp-size: .5em;
    --amp-color: var(--inv-ornament);
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2rem;
    --pv-sky: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 64%, var(--inv-bg)) 0, var(--inv-bg) 52%, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-bg)) 80%, color-mix(in srgb, var(--inv-ornament) 86%, #fff) 100%);
    --pv-far: url(../../img/invitations/ornaments/poveste-pines.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 74%, var(--inv-bg));
    --pv-far-h: clamp(108px, 35cqi, 214px);
    --pv-near: url(../../img/invitations/ornaments/poveste-village.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(96px, 31cqi, 190px);
    --amb-anim: poveste-snow;
    --pv-cover-anim: poveste-drift;
    --amb-size: 10px;
    --amb-duration: 13s;
    --amb-fill: color-mix(in srgb, #fff 88%, var(--inv-ornament));
    --amb-opacity: .95;
    --pv-in-time: 1.4s;
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-stars.svg);
}

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

/* on a light palette white snow would not show: the flakes take the colour of the firs */
.inv--ninsoare:not(.inv--dark) {
    --amb-fill: color-mix(in srgb, var(--inv-primary) 40%, #fff);
}

/* ========== Stuf: sunset on the pond: reeds, cattails, glints on the water ========== */

.inv--stuf {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Cormorant Garamond", Georgia, serif;
    --names-style: italic;
    --names-weight: 600;
    --names-size: clamp(3rem, 15.6cqi, 6.2rem);
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: .8em;
    --amp-color: var(--inv-primary);
    --heading-style: italic;
    --heading-weight: 600;
    --pv-water: clamp(126px, 41cqi, 250px);
    --pv-horizon: calc(100% - var(--pv-water));
    --pv-sun: min(10cqi, 58px);
    --pv-sky:
        radial-gradient(circle at 32% calc(var(--pv-horizon) - 9.5cqi), color-mix(in srgb, #fff 70%, var(--inv-ornament)) 0 calc(var(--pv-sun) - 1px), transparent var(--pv-sun)),
        radial-gradient(ellipse 86% 30% at 32% var(--pv-horizon), color-mix(in srgb, var(--inv-ornament) 74%, transparent), transparent 82%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 62%, var(--inv-bg)) 0, color-mix(in srgb, var(--inv-ornament) 52%, var(--inv-bg)) var(--pv-horizon), color-mix(in srgb, var(--inv-ornament) 40%, var(--inv-bg)) calc(var(--pv-horizon) + 1px), color-mix(in srgb, var(--inv-ornament) 18%, var(--inv-bg)) 100%);
    --pv-far: url(../../img/invitations/ornaments/poveste-hills-far.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-primary) 40%, var(--inv-bg));
    --pv-far-h: clamp(56px, 18cqi, 110px);
    --pv-far-bottom: var(--pv-water);
    --pv-near: url(../../img/invitations/ornaments/poveste-reeds.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-text) 70%, var(--inv-primary)) 0, color-mix(in srgb, var(--inv-primary) 42%, var(--inv-bg)) 66%, var(--inv-bg) 99%);
    --pv-near-h: clamp(120px, 39cqi, 240px);
    --hero-pad: 54px 8px calc(var(--pv-water) + 70px);
    --amb-image: url(../../img/invitations/ornaments/poveste-sparkle.svg);
    --amb-anim: inv-twinkle;
    --pv-cover-anim: inv-twinkle;
    --amb-size: 12px;
    --amb-duration: 5s;
    --amb-fill: color-mix(in srgb, #fff 80%, var(--inv-ornament));
    --amb-opacity: .95;
    --pv-in-odd: translateX(-50px);
    --pv-in-even: translateX(50px);
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-wave.svg);
    --pv-divider-ratio: 300 / 24;
}

.inv--stuf.inv--dark {
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg) 50%, #000) 0, var(--inv-bg) 90%);
    --pv-far-fill: color-mix(in srgb, var(--inv-bg) 70%, var(--inv-accent));
}

/* the glints stay on the water */
.inv--stuf .inv__ambient i {
    top: calc(100% - var(--pv-water) + var(--amb-y) * .2);
}

/* ========== Foișor: a garden gazebo with garlands, bunting above, petals falling ========== */

.inv--foisor {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Petit Formal Script", cursive;
    --names-weight: 400;
    --names-size: clamp(2.2rem, 11.2cqi, 4.5rem);
    --names-line: 1.3;
    --names-color: var(--inv-primary);
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-size: .6em;
    --heading-style: italic;
    --body-weight: 400;
    --pv-sky:
        radial-gradient(ellipse 80% 40% at 50% 30%, color-mix(in srgb, var(--inv-surface) 88%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)), var(--inv-bg) 80%);
    --pv-near: url(../../img/invitations/ornaments/poveste-grass.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary)), var(--inv-bg) 92%);
    --pv-near-h: clamp(54px, 17cqi, 104px);
    --hero-pad: clamp(64px, 20cqi, 110px) 8px calc(var(--pv-near-h) + 44px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/poveste-petal.svg);
    --amb-ratio: 30 / 38;
    --amb-anim: inv-fall;
    --pv-cover-anim: poveste-drift;
    --amb-size: 13px;
    --amb-duration: 15s;
    --amb-fill: color-mix(in srgb, var(--inv-ornament) 78%, #fff);
    --amb-opacity: .85;
    --pv-in-odd: translateX(-50px) rotate(-1deg);
    --pv-in-even: translateX(50px) rotate(1deg);
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-heart.svg);
}

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

.inv--foisor .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/poveste-gazebo.svg);
    --orn-ratio: 300 / 260;
    --orn-width: min(50cqi, 260px);
    --orn-max: 260px;
    --orn-fill: color-mix(in srgb, var(--inv-primary) 62%, var(--inv-ornament));
    --orn-margin: 0 auto 6px;
}

.inv--foisor .inv-hero__corner--tl,
.inv--carusel .inv-hero__corner--tl {
    display: block;
    top: 0;
    left: 50%;
    width: 100cqi;
    max-width: none;
    height: clamp(44px, 15cqi, 82px);
    margin-left: -50cqi;
    aspect-ratio: auto;
    background: linear-gradient(90deg, var(--inv-primary), var(--inv-ornament) 50%, var(--inv-primary));
    -webkit-mask: url(../../img/invitations/ornaments/poveste-bunting.svg) top center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/poveste-bunting.svg) top center / auto 100% repeat-x;
    opacity: .9;
}

/* ================================================================================================================
   FOR THE LITTLE ONES
   ================================================================================================================ */

/* ========== Barză: the stork with its bundle flies between clouds that slide across the sky ========== */

.inv--barza {
    --f-display: "Nunito", "Segoe UI", sans-serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Nunito", "Segoe UI", sans-serif;
    --names-weight: 800;
    --names-size: clamp(2.8rem, 14.6cqi, 5.8rem);
    --names-line: 1.02;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --amp-size: .5em;
    --amp-style: normal;
    --kicker-font: "Caveat", cursive;
    --kicker-size: 1.4rem;
    --kicker-spacing: 0;
    --kicker-transform: none;
    --kicker-weight: 700;
    --heading-weight: 800;
    --heading-size: 1.9rem;
    --body-weight: 500;
    --pv-sky: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 92%, var(--inv-ornament)) 0, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface)) 60%, var(--inv-bg));
    --pv-far: url(../../img/invitations/ornaments/poveste-clouds.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-surface) 92%, transparent);
    --pv-far-h: clamp(70px, 23cqi, 136px);
    --pv-far-bottom: calc(var(--pv-near-h) * .7);
    --pv-near: url(../../img/invitations/ornaments/poveste-hills.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(60px, 19cqi, 116px);
    --hero-pad: 40px 8px calc(var(--pv-near-h) * 2.2 + 30px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/poveste-heart.svg);
    --amb-ratio: 30 / 28;
    --amb-anim: poveste-lift;
    --pv-cover-anim: poveste-drift;
    --amb-size: 13px;
    --amb-duration: 17s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .75;
    --pv-in: scale(.9);
    --pv-in-time: .9s;
    --box-radius: 22px;
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-heart.svg);
}

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

.inv--barza .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/poveste-stork.svg);
    --orn-ratio: 220 / 130;
    --orn-width: min(50cqi, 260px);
    --orn-max: 260px;
    --orn-fill: color-mix(in srgb, var(--inv-text) 60%, var(--inv-primary));
    --orn-margin: 0 auto 4px;
    animation: inv-float 4.6s ease-in-out infinite;
}

/* ========== Carusel: a merry-go-round, bunting, sparkles; the cover is a pair of tent curtains ========== */

.inv--carusel {
    --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.7rem, 13.8cqi, 5.5rem);
    --names-line: 1.06;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --amp-size: .5em;
    --amp-style: normal;
    --heading-weight: 400;
    --heading-size: 2rem;
    --body-weight: 500;
    --pv-sky:
        radial-gradient(ellipse 70% 40% at 50% 26%, color-mix(in srgb, var(--inv-surface) 92%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 94%, var(--inv-ornament)), var(--inv-bg) 84%);
    --pv-near: url(../../img/invitations/ornaments/poveste-hills.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(50px, 16cqi, 96px);
    --hero-pad: clamp(54px, 17cqi, 96px) 8px calc(var(--pv-near-h) + 48px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/poveste-sparkle.svg);
    --amb-anim: inv-twinkle;
    --pv-cover-anim: inv-twinkle;
    --amb-size: 14px;
    --amb-duration: 5s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .95;
    --pv-in: scale(.9);
    --pv-in-time: .9s;
    --box-radius: 22px;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(90deg, color-mix(in srgb, #000 10%, transparent), transparent 24%, transparent 76%, color-mix(in srgb, #000 14%, transparent)),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 76%, var(--inv-bg)) 0 8cqi, var(--inv-surface) 8cqi 16cqi);
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-stars.svg);
}

.inv--carusel .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/poveste-carousel.svg);
    --orn-ratio: 300 / 280;
    --orn-width: min(54cqi, 280px);
    --orn-max: 280px;
    --orn-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 50%, var(--inv-ornament)));
    --orn-margin: 0 auto 4px;
}

/* ========== Leagăn: a moon, stars and a little cloud hung above the name, swinging slowly ========== */

.inv--leagan {
    --f-display: "Comfortaa", "Segoe UI", sans-serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Comfortaa", "Segoe UI", sans-serif;
    --names-weight: 600;
    --names-size: clamp(2.5rem, 12.8cqi, 5rem);
    --names-line: 1.1;
    --amp-size: .5em;
    --amp-style: normal;
    --amp-color: var(--inv-ornament);
    --kicker-color: var(--inv-ornament);
    --heading-weight: 600;
    --heading-size: 1.7rem;
    --body-weight: 500;
    --pv-mobile: min(76cqi, 400px);
    --pv-sky:
        radial-gradient(ellipse 70% 40% at 50% 8%, color-mix(in srgb, var(--inv-ornament) 20%, transparent), transparent 76%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 44%, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-bg)) 80%, var(--inv-bg));
    --pv-near: url(../../img/invitations/ornaments/poveste-clouds.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-accent) 74%, var(--inv-surface));
    --pv-near-h: clamp(76px, 25cqi, 148px);
    --hero-pad: calc(var(--pv-mobile) * .72 + 14px) 8px calc(var(--pv-near-h) + 44px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/poveste-sparkle.svg);
    --amb-anim: inv-twinkle;
    --pv-cover-anim: inv-twinkle;
    --amb-size: 11px;
    --amb-duration: 7s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .9;
    --pv-in-time: 1.4s;
    --box-radius: 22px;
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-stars.svg);
}

.inv--leagan:not(.inv--dark) {
    --pv-sky: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 94%, var(--inv-ornament)), var(--inv-bg) 78%);
    --pv-near-fill: color-mix(in srgb, var(--inv-surface) 92%, transparent);
    --amb-fill: color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary));
}

.inv--leagan .inv-hero__corner--tl {
    display: block;
    top: 0;
    left: 50%;
    width: var(--pv-mobile);
    max-width: none;
    margin-left: calc(var(--pv-mobile) / -2);
    transform-origin: 50% 0;
    --hero-corner-image: url(../../img/invitations/ornaments/poveste-mobile.svg);
    --hero-corner-ratio: 280 / 200;
    --hero-corner-fill: color-mix(in srgb, var(--inv-ornament) 82%, var(--inv-primary));
    --hero-corner-opacity: 1;
    animation: inv-sway 8s ease-in-out infinite;
}

/* ========== Baloane de săpun: soap bubbles rising into a clear sky, over the grass ========== */

.inv--baloane-de-sapun {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-weight: 500;
    --names-size: clamp(2.8rem, 14.4cqi, 5.8rem);
    --names-line: 1.04;
    --names-color: var(--inv-primary);
    --names-shadow: none;
    --amp-style: italic;
    --amp-size: .5em;
    --kicker-weight: 600;
    --heading-weight: 500;
    --body-weight: 500;
    --pv-sky:
        radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 34%),
        radial-gradient(circle at 86% 46%, color-mix(in srgb, var(--inv-primary) 16%, transparent), transparent 38%),
        radial-gradient(circle at 40% 80%, color-mix(in srgb, var(--inv-surface) 90%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-ornament)), var(--inv-bg) 84%);
    --pv-near: url(../../img/invitations/ornaments/poveste-grass.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 76%, var(--inv-primary)), var(--inv-bg) 92%);
    --pv-near-h: clamp(54px, 17cqi, 104px);
    --hero-pad: 60px 8px calc(var(--pv-near-h) + 60px);
    --amb-image: url(../../img/invitations/ornaments/poveste-bubble.svg);
    --amb-anim: poveste-lift;
    --pv-cover-anim: poveste-drift;
    --amb-size: 40px;
    --amb-duration: 18s;
    --amb-fill: linear-gradient(135deg, var(--inv-primary), var(--inv-ornament) 55%, #fff);
    --amb-opacity: .85;
    --pv-in: scale(.9);
    --pv-in-time: .9s;
    --box-radius: 22px;
    --pv-open: none;
    --pv-bloom-display: block;
    --pv-bloom: #fff;
}

.inv--baloane-de-sapun .inv__ambient i {
    top: 0;
}

/* ========== Fluturi: butterflies over a meadow in flower ========== */

.inv--fluturi {
    --f-display: "Caveat", cursive;
    --f-body: "Poppins", "Segoe UI", sans-serif;
    --f-names: "Caveat", cursive;
    --names-weight: 700;
    --names-size: clamp(3.4rem, 17.6cqi, 7rem);
    --names-line: .98;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --amp-style: normal;
    --heading-weight: 700;
    --heading-size: 2.6rem;
    --text-display-font: "Lora", Georgia, serif;
    --pv-sky:
        radial-gradient(ellipse 70% 44% at 24% 10%, color-mix(in srgb, var(--inv-surface) 92%, transparent), transparent 74%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 84%, var(--inv-ornament)), var(--inv-bg) 76%);
    --pv-far: url(../../img/invitations/ornaments/poveste-hills-far.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-ornament) 44%, var(--inv-bg));
    --pv-far-h: clamp(110px, 36cqi, 220px);
    --pv-near: url(../../img/invitations/ornaments/poveste-poppies.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 82%, var(--inv-ornament)) 0 44%, color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-bg)) 74%, var(--inv-bg) 99%);
    --pv-near-h: clamp(92px, 30cqi, 184px);
    --amb-image: url(../../img/invitations/ornaments/poveste-butterfly.svg);
    --amb-ratio: 48 / 36;
    --pv-cover-anim: poveste-drift;
    --amb-size: 30px;
    --amb-fill: linear-gradient(135deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 40%, var(--inv-ornament)));
    --amb-opacity: .9;
    --pv-in-odd: translateX(-50px);
    --pv-in-even: translateX(50px);
    --box-radius: 22px;
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-heart.svg);
}

/* each butterfly wanders on its own path and beats its wings: two animations on two properties */
.inv--fluturi .inv__ambient i {
    animation: poveste-flutter 15s ease-in-out infinite, poveste-flap .46s ease-in-out infinite;
}

.inv--fluturi .inv__ambient i:nth-child(3n) {
    animation-duration: 11s, .38s;
}

.inv--fluturi .inv__ambient i:nth-child(3n + 1) {
    animation-duration: 19s, .54s;
}

/* ================================================================================================================
   PARTY
   ================================================================================================================ */

/* ========== Disco: a mirror ball, beams of light turning slowly, coloured sparkles ========== */

.inv--disco {
    --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.8rem, 14.4cqi, 5.8rem);
    --names-line: 1.04;
    --names-color: var(--inv-text);
    --amp-size: .5em;
    --amp-style: normal;
    --amp-color: var(--inv-ornament);
    --kicker-spacing: .46em;
    --heading-weight: 400;
    --heading-size: 2.1rem;
    --text-display-font: "Outfit", "Segoe UI", sans-serif;
    --message-style: normal;
    --pv-ball: min(38cqi, 200px);
    --pv-sky:
        radial-gradient(ellipse 70% 30% at 50% 100%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 76%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 70%);
    --hero-pad: 0 8px 96px;
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/poveste-sparkle.svg);
    --amb-anim: inv-twinkle;
    --pv-cover-anim: inv-twinkle;
    --amb-size: 15px;
    --amb-duration: 3.4s;
    --amb-opacity: 1;
    --pv-in: scale(.88);
    --pv-in-time: .8s;
    --pv-open: none;
    --pv-bloom-display: block;
    --pv-bloom: color-mix(in srgb, var(--inv-ornament) 60%, #fff);
    --pv-divider: url(../../img/invitations/ornaments/poveste-divider-stars.svg);
}

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

.inv--disco .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/poveste-disco-ball.svg);
    --orn-ratio: 180 / 210;
    --orn-width: var(--pv-ball);
    --orn-max: 200px;
    --orn-fill: linear-gradient(135deg, var(--inv-text), var(--inv-primary) 34%, var(--inv-ornament) 66%, var(--inv-text));
    --orn-margin: 0 auto 14px;
}

/* beams of light around the ball: a wheel of thin rays that turns once in a minute and a half */
.inv--disco .inv-hero__corner--tl {
    display: block;
    top: calc(var(--pv-ball) * .7 - 90cqi);
    left: 50%;
    width: 180cqi;
    max-width: none;
    margin-left: -90cqi;
    --hero-corner-ratio: 1;
    -webkit-mask: radial-gradient(circle, #000 5%, transparent 64%);
    mask: radial-gradient(circle, #000 5%, transparent 64%);
    background: repeating-conic-gradient(from 0deg, transparent 0 9deg, color-mix(in srgb, var(--inv-primary) 24%, transparent) 9deg 12deg, transparent 12deg 24deg, color-mix(in srgb, var(--inv-ornament) 22%, transparent) 24deg 27deg, transparent 27deg 36deg);
    opacity: 1;
    animation: poveste-spin 90s linear infinite;
}