/* Collection "Grădina pictată" (ADR-0069): a garden painted in watercolour and drawn in fine ink.
   - A cover collection (inv-k--cover): the cover, its openings, the scene layers, the dust, the parallax, the
     entrances of the sections and the wide layout are the shared engine of css/invitation-motion.css. This file
     keeps the taste of the collection and its 14 models, each a block of --pv-* variables and the slots it turns on
     (contract: docs/invitation-templates.md §9–10).
   - Every model opens in a way of its own (a page that turns, shutters, a linen wrap, a bloom of light, a sheet
     pulled aside) and brings its garden to life after the opening: strokes that paint themselves, flowers that
     bloom, branches that sway, a teapot that pours, a sketch drawn by the pen. Those entrances wait for the first
     screen to come in (.inv-hero__content.is-in) and run only with the script; without it the garden is still.
   - The drawings (gradina-pictata-*.svg) are made by tools/invitations/gradina-pictata-svg.pl: black on transparent,
     used as masks, coloured from the palette. Own keyframes are gradina-pictata-* and move only transform, opacity,
     translate, rotate and scale. */

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

.inv-c--gradina-pictata {
    --pv-divider: url(../../img/invitations/ornaments/gradina-pictata-divider.svg);
    --pv-divider-ratio: 300 / 34;
    --pv-deco: url(../../img/invitations/ornaments/gradina-pictata-vine.svg);
    --pv-deco-display: block;
    --pv-deco-ratio: 360 / 130;
    --pv-deco-opacity: .36;
    --pv-dust: var(--inv-ornament);
    --pv-dust-opacity: .34;
    --pv-band: color-mix(in srgb, var(--inv-accent) 40%, var(--inv-bg));
    --box-bg: color-mix(in srgb, var(--inv-surface) 90%, transparent);
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 36%, transparent);
    --box-radius: 6px 24px 6px 24px;
    --box-shadow: 0 16px 36px -28px rgba(0, 0, 0, .4);
    --button-radius: 999px;
    --photo-radius: 46% 54% 48% 52% / 54% 48% 52% 46%;
    --photo-shadow: 0 0 0 8px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 26px 50px -26px rgba(0, 0, 0, .45);
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-petal.svg);
    --amb-ratio: 30 / 40;
    --amb-anim: inv-petal;
    --amb-size: 18px;
    --amb-duration: 17s;
    --amb-fill: color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-primary));
    --amb-opacity: .72;
    --pv-cover-anim: inv-bokeh;
    --hero-corner-opacity: 1;
}

.inv-c--gradina-pictata.inv--dark {
    --pv-dust-opacity: .6;
    --box-bg: color-mix(in srgb, var(--inv-surface) 80%, transparent);
    --box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8);
    --pv-band: color-mix(in srgb, var(--inv-surface) 62%, var(--inv-bg));
}

/* Watercolour paper under the whole invitation. */
.inv-c--gradina-pictata .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/gradina-pictata-paper.svg);
    --texture-size: 230px;
    --texture-opacity: .2;
    --texture-fill: var(--inv-ornament);
}

.inv-c--gradina-pictata .orn--divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: var(--pv-divider-ratio);
    --orn-width: 64%;
    --orn-max: 270px;
}

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

/* A drawing used in a hero corner is placed by the model; it neither mirrors nor keeps the base inset. */
.inv-c--gradina-pictata .inv-hero__corner {
    max-width: none;
    transform: none;
}

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

/* ================================================================================================================
   PAINT AND PAPER
   ================================================================================================================ */

/* ========== Pensulă: strokes of watercolour spread across the screen and bloom into flowers ========== */

.inv--pensula {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Alex Brush", cursive;
    --names-weight: 400;
    --names-size: clamp(3.8rem, 20cqi, 7.8rem);
    --names-line: .96;
    --names-color: var(--inv-primary);
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .32em;
    --amp-color: var(--inv-ornament);
    --heading-font: "Alex Brush", cursive;
    --heading-size: 3.1rem;
    --heading-weight: 400;
    --closing-font: "Alex Brush", cursive;
    --pv-sky:
        radial-gradient(ellipse 34% 22% at 14% 18%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 72%),
        radial-gradient(ellipse 40% 26% at 88% 30%, color-mix(in srgb, var(--inv-primary) 14%, transparent), transparent 74%),
        radial-gradient(ellipse 56% 30% at 30% 80%, color-mix(in srgb, var(--inv-accent) 90%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-surface), var(--inv-bg) 70%);
    --pv-far: url(../../img/invitations/ornaments/gradina-pictata-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 80%, var(--inv-bg));
    --pv-far-h: clamp(80px, 26cqi, 160px);
    --pv-near: url(../../img/invitations/ornaments/gradina-pictata-brush.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-ornament) 46%, var(--inv-bg));
    --pv-near-h: clamp(52px, 16cqi, 96px);
    --hero-pad: clamp(150px, 42cqi, 230px) 8px calc(var(--pv-far-h) * .6 + 54px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-blossom.svg);
    --amb-ratio: 1;
    --amb-size: 20px;
    --amb-fill: linear-gradient(135deg, var(--inv-primary), var(--inv-ornament));
    --pv-in-odd: translateX(-60px) rotate(-1.5deg);
    --pv-in-even: translateX(60px) rotate(1.5deg);
    --pv-open: none;
    --pv-bloom-display: block;
    --pv-bloom: color-mix(in srgb, var(--inv-ornament) 45%, #fff);
}

.inv--pensula.inv--dark {
    --pv-sky:
        radial-gradient(ellipse 34% 22% at 14% 18%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 72%),
        radial-gradient(ellipse 56% 30% at 30% 80%, color-mix(in srgb, var(--inv-accent) 90%, transparent), transparent 72%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 70%);
}

/* the flower the strokes open into, above the names */
.inv--pensula .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/gradina-pictata-bloom.svg);
    --orn-ratio: 220 / 210;
    --orn-width: min(30cqi, 150px);
    --orn-max: 150px;
    --orn-fill: linear-gradient(135deg, var(--inv-primary), var(--inv-ornament) 70%);
    --orn-margin: 0 auto 6px;
    --pv-orn-anim: inv-breathe;
}

/* two wide strokes of the brush: one across the top, one across the lower half */
.inv--pensula .inv-hero__corner--tl,
.inv--pensula .inv-hero__corner--br {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-brush.svg);
    --hero-corner-ratio: 410 / 90;
    --hero-corner-fill: linear-gradient(90deg, color-mix(in srgb, var(--inv-ornament) 92%, transparent), color-mix(in srgb, var(--inv-primary) 62%, transparent));
    width: min(86cqi, 640px);
}

.inv--pensula .inv-hero__corner--tl {
    top: clamp(34px, 10cqi, 70px);
    left: -2%;
    transform: rotate(-7deg);
    transform-origin: 0 50%;
}

.inv--pensula .inv-hero__corner--br {
    top: auto;
    bottom: calc(var(--pv-far-h) * .7 + 10px);
    right: -4%;
    width: min(70cqi, 520px);
    transform: rotate(-4deg);
    transform-origin: 100% 50%;
    --hero-corner-fill: linear-gradient(270deg, color-mix(in srgb, var(--inv-primary) 34%, transparent), color-mix(in srgb, var(--inv-ornament) 60%, transparent));
}

/* small flowers that open where the strokes end */
.inv--pensula .inv-hero__corner--tr,
.inv--pensula .inv-hero__corner--bl {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-bloom.svg);
    --hero-corner-ratio: 220 / 210;
    --hero-corner-fill: linear-gradient(135deg, var(--inv-ornament), var(--inv-primary));
    width: min(24cqi, 140px);
}

.inv--pensula .inv-hero__corner--tr {
    top: clamp(10px, 4cqi, 40px);
    right: 4%;
}

.inv--pensula .inv-hero__corner--bl {
    top: auto;
    bottom: calc(var(--pv-far-h) * .7 + 40px);
    left: 3%;
    width: min(18cqi, 110px);
}

html.inv-js .inv--pensula .inv-hero__corner {
    opacity: 0;
}

html.inv-js .inv--pensula .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tl {
    animation: gradina-pictata-paint 1.5s cubic-bezier(.3, .6, .2, 1) .1s both;
}

html.inv-js .inv--pensula .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--br {
    animation: gradina-pictata-paint 1.5s cubic-bezier(.3, .6, .2, 1) .7s both;
}

html.inv-js .inv--pensula .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation: gradina-pictata-bloom 1.6s cubic-bezier(.2, .7, .2, 1) 1.2s both, gradina-pictata-sway 11s ease-in-out 2.8s infinite;
}

html.inv-js .inv--pensula .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl {
    animation: gradina-pictata-bloom 1.6s cubic-bezier(.2, .7, .2, 1) 1.8s both, gradina-pictata-sway 9s ease-in-out 3.4s infinite reverse;
}

html.inv-js .inv--pensula .inv-hero:has(.inv-hero__content.is-in) .orn--hero {
    animation: gradina-pictata-bloom 1.8s cubic-bezier(.2, .7, .2, 1) .4s both, inv-breathe 9s ease-in-out 2.2s infinite;
}

/* ========== Ierbar: pressed flowers on a sheet of a herbarium; the cover turns like a page ========== */

.inv--ierbar {
    --f-display: "EB Garamond", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Pinyon Script", cursive;
    --names-weight: 400;
    --names-size: clamp(3rem, 15.4cqi, 6.2rem);
    --names-line: 1.05;
    --names-color: var(--inv-primary);
    --amp-font: "EB Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .36em;
    --kicker-font: "EB Garamond", Georgia, serif;
    --kicker-size: 1.05rem;
    --kicker-style: italic;
    --kicker-spacing: .06em;
    --kicker-transform: none;
    --heading-style: italic;
    --heading-weight: 400;
    --text-display-font: "EB Garamond", Georgia, serif;
    --pv-sky:
        radial-gradient(ellipse 70% 50% at 50% 46%, var(--inv-surface), transparent 80%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 40%, var(--inv-bg)), var(--inv-bg) 76%);
    --pv-far: none;
    --hero-pad: clamp(96px, 28cqi, 150px) 8px clamp(120px, 34cqi, 200px);
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-petal.svg);
    --amb-anim: inv-fall;
    --amb-size: 15px;
    --amb-duration: 22s;
    --amb-fill: color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-text));
    --amb-opacity: .5;
    --pv-dust-display: none;
    --pv-in: translateY(30px) rotate(-1deg);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(color-mix(in srgb, var(--inv-ornament) 70%, transparent), color-mix(in srgb, var(--inv-ornament) 70%, transparent)) 50% 6% / 80% 1px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-ornament) 70%, transparent), color-mix(in srgb, var(--inv-ornament) 70%, transparent)) 50% 94% / 80% 1px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-ornament) 40%, transparent), color-mix(in srgb, var(--inv-ornament) 40%, transparent)) 50% 8% / 76% 1px no-repeat,
        linear-gradient(90deg, color-mix(in srgb, #000 14%, transparent), transparent 5%, transparent 92%, color-mix(in srgb, #000 6%, transparent)),
        radial-gradient(ellipse 60% 44% at 50% 48%, var(--inv-surface), color-mix(in srgb, var(--inv-accent) 46%, var(--inv-surface)));
    --pv-kb-photo: none;
    --photo-pad: 10px 10px 34px;
    --photo-bg: var(--inv-surface);
    --photo-radius: 2px;
    --photo-rotate: -2deg;
    --photo-shadow: 0 18px 34px -20px rgba(0, 0, 0, .5);
}

/* the cover is one sheet as wide as the screen; it turns over its left edge and shows the page below */
html.inv-js .inv--ierbar .inv-envelope:not(:has(.inv-envelope__photo)) {
    background: transparent;
}

.inv--ierbar .inv-envelope:not(:has(.inv-envelope__photo))::before,
.inv--ierbar .inv-envelope:not(:has(.inv-envelope__photo))::after,
.inv--ierbar .inv-envelope:not(:has(.inv-envelope__photo)) .inv-envelope__scene::before {
    display: none;
}

.inv--ierbar .inv-envelope__door--l {
    width: 100%;
    transform-origin: 0 50%;
    backface-visibility: hidden;
}

.inv--ierbar .inv-envelope__door--r {
    display: none;
}

.inv--ierbar .inv-envelope.is-opening .inv-envelope__door--l {
    transform: perspective(1800px) rotateY(-120deg);
}

/* the sheet of the herbarium behind the names: a thin double border */
.inv--ierbar .inv-hero__frame {
    top: clamp(70px, 20cqi, 110px);
    bottom: clamp(70px, 20cqi, 120px);
    left: 50%;
    width: min(88cqi, 620px);
    height: auto;
    margin-left: calc(min(88cqi, 620px) / -2);
    background: color-mix(in srgb, var(--inv-surface) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-ornament) 60%, transparent), inset 0 0 0 7px color-mix(in srgb, var(--inv-surface) 72%, transparent), inset 0 0 0 8px color-mix(in srgb, var(--inv-ornament) 40%, transparent), 0 30px 60px -40px rgba(0, 0, 0, .45);
    -webkit-mask: none;
    mask: none;
}

/* pressed sprigs taped to the sheet */
.inv--ierbar .inv-hero__corner--tl,
.inv--ierbar .inv-hero__corner--br {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-sprig.svg);
    --hero-corner-ratio: 160 / 262;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-primary)), var(--inv-primary));
    width: min(28cqi, 170px);
}

.inv--ierbar .inv-hero__corner--tl {
    top: clamp(40px, 12cqi, 90px);
    left: max(2%, calc(50% - 340px));
    transform: rotate(-16deg);
}

.inv--ierbar .inv-hero__corner--br {
    top: auto;
    bottom: clamp(40px, 12cqi, 90px);
    right: max(2%, calc(50% - 340px));
    transform: rotate(164deg);
}

.inv--ierbar .inv-hero__corner--tr {
    display: block;
    top: clamp(54px, 16cqi, 104px);
    right: max(6%, calc(50% - 300px));
    width: min(14cqi, 80px);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-blossom.svg);
    --hero-corner-ratio: 1;
    --hero-corner-fill: var(--inv-ornament);
    transform: rotate(18deg);
}

.inv--ierbar .orn--hero-divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: var(--pv-divider-ratio);
    --orn-width: min(52cqi, 230px);
}

html.inv-js .inv--ierbar .inv-hero__corner {
    opacity: 0;
}

html.inv-js .inv--ierbar .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tl {
    animation: gradina-pictata-place 1.4s cubic-bezier(.2, .7, .2, 1) .2s both;
}

html.inv-js .inv--ierbar .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--br {
    animation: gradina-pictata-place 1.4s cubic-bezier(.2, .7, .2, 1) .7s both;
}

html.inv-js .inv--ierbar .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation: gradina-pictata-place 1.2s cubic-bezier(.2, .7, .2, 1) 1.2s both;
}

/* the dried petals drift down past the sheet */
.inv--ierbar .inv__ambient i {
    top: -8%;
}

/* ========== Caiet de schițe: a botanical sketchbook; the lines come as if drawn by the pen ========== */

.inv--caiet-de-schite {
    --f-display: "EB Garamond", Georgia, serif;
    --f-body: "Lora", Georgia, serif;
    --f-names: "Caveat", cursive;
    --names-weight: 600;
    --names-size: clamp(3.4rem, 17.6cqi, 7rem);
    --names-line: .98;
    --names-color: var(--inv-primary);
    --amp-font: "EB Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .34em;
    --kicker-font: "Caveat", cursive;
    --kicker-size: 1.5rem;
    --kicker-weight: 600;
    --kicker-spacing: 0;
    --kicker-transform: none;
    --heading-font: "Caveat", cursive;
    --heading-size: 2.6rem;
    --heading-weight: 600;
    --body-weight: 400;
    --text-display-font: "EB Garamond", Georgia, serif;
    --closing-font: "Caveat", cursive;
    --pv-sky:
        repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--inv-ornament) 26%, transparent) 31px 32px),
        linear-gradient(90deg, transparent 0 calc(10cqi - 1px), color-mix(in srgb, var(--inv-primary) 26%, transparent) calc(10cqi - 1px) 10cqi, transparent 10cqi),
        linear-gradient(180deg, var(--inv-surface), var(--inv-bg));
    --pv-far: none;
    --hero-pad: clamp(240px, 62cqi, 330px) 8px clamp(80px, 24cqi, 130px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-leaf.svg);
    --amb-ratio: 28 / 44;
    --amb-anim: inv-fall;
    --amb-size: 13px;
    --amb-duration: 24s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .35;
    --pv-dust-display: none;
    --pv-letter-step: 70ms;
    --pv-in: translateY(24px);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        radial-gradient(circle at 50% 50%, var(--inv-bg) 0 5px, color-mix(in srgb, var(--inv-text) 60%, transparent) 5.5px 7px, transparent 7.5px) 0 18px / 30px 30px repeat-x,
        linear-gradient(color-mix(in srgb, var(--inv-surface) 94%, transparent), color-mix(in srgb, var(--inv-surface) 94%, transparent)) 50% 44% / calc(min(78%, 360px) - 4px) 156px no-repeat,
        linear-gradient(color-mix(in srgb, var(--inv-text) 40%, transparent), color-mix(in srgb, var(--inv-text) 40%, transparent)) 50% 44% / min(78%, 360px) 160px no-repeat,
        repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, #000 3%, transparent) 6px 7px),
        linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 34%, var(--inv-accent)), color-mix(in srgb, var(--inv-primary) 52%, var(--inv-accent)));
}

/* the cover of the sketchbook flips up over its spiral */
html.inv-js .inv--caiet-de-schite .inv-envelope:not(:has(.inv-envelope__photo)) {
    background: transparent;
}

.inv--caiet-de-schite .inv-envelope:not(:has(.inv-envelope__photo))::before,
.inv--caiet-de-schite .inv-envelope:not(:has(.inv-envelope__photo))::after,
.inv--caiet-de-schite .inv-envelope:not(:has(.inv-envelope__photo)) .inv-envelope__scene::before {
    display: none;
}

.inv--caiet-de-schite .inv-envelope__door--l {
    width: 100%;
    transform-origin: 50% 0;
    backface-visibility: hidden;
}

.inv--caiet-de-schite .inv-envelope__door--r {
    display: none;
}

.inv--caiet-de-schite .inv-envelope.is-opening .inv-envelope__door--l {
    transform: perspective(1600px) rotateX(-120deg);
}

/* a study of a branch, a seed pod and notes; then ferns at the edges of the page */
.inv--caiet-de-schite .inv-hero__corner--tl {
    display: block;
    top: clamp(26px, 8cqi, 54px);
    left: 50%;
    width: min(70cqi, 320px);
    margin-left: calc(min(70cqi, 320px) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-sketch.svg);
    --hero-corner-ratio: 290 / 320;
    --hero-corner-fill: var(--inv-text);
    --hero-corner-opacity: .82;
    overflow: hidden;
}

.inv--caiet-de-schite .inv-hero__corner--bl,
.inv--caiet-de-schite .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: 10px;
    width: min(22cqi, 150px);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-fern.svg);
    --hero-corner-ratio: 140 / 364;
    --hero-corner-fill: var(--inv-primary);
    --hero-corner-opacity: .6;
    overflow: hidden;
    transform-origin: 50% 100%;
}

.inv--caiet-de-schite .inv-hero__corner--bl {
    left: 1%;
    transform: rotate(-12deg);
}

.inv--caiet-de-schite .inv-hero__corner--br {
    right: 1%;
    transform: rotate(14deg);
}

/* the paper laid over a drawing slides away from it, so the lines appear as the pen draws them */
html.inv-js .inv--caiet-de-schite .inv-hero__corner--tl::after,
html.inv-js .inv--caiet-de-schite .inv-hero__corner--bl::after,
html.inv-js .inv--caiet-de-schite .inv-hero__corner--br::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--inv-surface);
    transform-origin: 100% 50%;
}

html.inv-js .inv--caiet-de-schite .inv-hero__corner--bl::after,
html.inv-js .inv--caiet-de-schite .inv-hero__corner--br::after {
    transform-origin: 50% 0;
}

html.inv-js .inv--caiet-de-schite .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tl::after {
    animation: gradina-pictata-draw 3.2s cubic-bezier(.45, .05, .55, .95) .2s both;
}

html.inv-js .inv--caiet-de-schite .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl::after {
    animation: gradina-pictata-draw-up 2.4s ease-in-out 1.6s both;
}

html.inv-js .inv--caiet-de-schite .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--br::after {
    animation: gradina-pictata-draw-up 2.4s ease-in-out 2.2s both;
}

.inv--caiet-de-schite .inv-hero__corner--bl,
.inv--caiet-de-schite .inv-hero__corner--br {
    animation: gradina-pictata-sway 12s ease-in-out infinite;
}

.inv--caiet-de-schite .inv-hero__corner--br {
    animation-duration: 15s;
    animation-direction: reverse;
}

.inv--caiet-de-schite .inv__ambient i {
    top: -8%;
}

/* ================================================================================================================
   MEDITERRANEAN LIGHT
   ================================================================================================================ */

/* ========== Lămâi: lemons on a tiled wall; the cover is a pair of shutters that swing open ========== */

.inv--lamai {
    --f-display: "DM Serif Display", Georgia, serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "DM Serif Display", Georgia, serif;
    --names-weight: 400;
    --names-style: italic;
    --names-size: clamp(2.9rem, 14.8cqi, 6rem);
    --names-line: 1.04;
    --names-color: var(--inv-primary);
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: .9em;
    --amp-color: var(--inv-ornament);
    --kicker-spacing: .44em;
    --heading-style: italic;
    --heading-weight: 400;
    --heading-size: 2.2rem;
    --body-weight: 400;
    --pv-sky:
        radial-gradient(ellipse 60% 36% at 50% 40%, color-mix(in srgb, var(--inv-surface) 96%, transparent), transparent 76%),
        radial-gradient(ellipse 30% 22% at 84% 12%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 74%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface)), var(--inv-bg) 64%);
    --pv-far: url(../../img/invitations/textures/gradina-pictata-tiles.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-primary) 74%, var(--inv-bg));
    --pv-far-h: clamp(88px, 26cqi, 150px);
    --pv-far-size: auto 50%;
    --pv-near: none;
    --hero-pad: clamp(150px, 44cqi, 230px) 8px calc(var(--pv-far-h) + 44px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-blossom.svg);
    --amb-ratio: 1;
    --amb-size: 16px;
    --amb-duration: 19s;
    --amb-fill: color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-surface));
    --amb-opacity: .9;
    --pv-sheen-display: block;
    --pv-sheen: color-mix(in srgb, var(--inv-ornament) 50%, #fff);
    --pv-sheen-opacity: .5;
    --pv-sheen-time: 14s;
    --pv-in-odd: translateX(-50px);
    --pv-in-even: translateX(50px);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-cover-ink: var(--inv-on-primary);
    --pv-cover-accent: var(--inv-on-primary);
    --pv-door-fill:
        linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 70%, #000) 0 10px, transparent 10px calc(100% - 10px), color-mix(in srgb, var(--inv-primary) 70%, #000) calc(100% - 10px)),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, #000) 0 12px, transparent 12px calc(50% - 4px), color-mix(in srgb, var(--inv-primary) 70%, #000) calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px) calc(100% - 12px), color-mix(in srgb, var(--inv-primary) 70%, #000) calc(100% - 12px)),
        repeating-linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 82%, #000) 0 2px, var(--inv-primary) 2px 13px, color-mix(in srgb, var(--inv-primary) 72%, #fff) 13px 16px);
    --box-radius: 4px;
}

/* the shutters open outwards on their hinges; the page shows between them */
html.inv-js .inv--lamai .inv-envelope:not(:has(.inv-envelope__photo)) {
    background: transparent;
}

.inv--lamai .inv-envelope:not(:has(.inv-envelope__photo))::before,
.inv--lamai .inv-envelope:not(:has(.inv-envelope__photo))::after,
.inv--lamai .inv-envelope:not(:has(.inv-envelope__photo)) .inv-envelope__scene::before {
    display: none;
}

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

.inv--lamai .inv-envelope__door--r {
    scale: none;
    transform-origin: 100% 50%;
}

.inv--lamai .inv-envelope.is-opening .inv-envelope__door--l {
    transform: perspective(1400px) rotateY(100deg);
}

.inv--lamai .inv-envelope.is-opening .inv-envelope__door--r {
    transform: perspective(1400px) rotateY(-100deg);
}

/* branches of lemons hanging into the screen from both top corners, moving in the breeze */
.inv--lamai .inv-hero__corner--tl,
.inv--lamai .inv-hero__corner--tr {
    display: block;
    top: -6px;
    width: min(58cqi, 340px);
    --hero-corner-ratio: 320 / 246;
    --hero-corner-fill: linear-gradient(160deg, color-mix(in srgb, var(--inv-text) 55%, var(--inv-ornament)), var(--inv-ornament) 60%);
    animation: gradina-pictata-sway 9s ease-in-out infinite;
}

.inv--lamai .inv-hero__corner--tl {
    left: -3%;
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-lemons.svg);
    transform-origin: 0 0;
}

.inv--lamai .inv-hero__corner--tr {
    right: -3%;
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-lemons-r.svg);
    transform-origin: 100% 0;
    animation-duration: 11s;
    animation-direction: reverse;
}

.inv--lamai .orn--hero-divider {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/gradina-pictata-blossom.svg);
    --orn-ratio: 1;
    --orn-width: 28px;
    --orn-fill: var(--inv-ornament);
    --pv-orn-anim: inv-breathe;
}

html.inv-js .inv--lamai .inv-hero__corner--tl,
html.inv-js .inv--lamai .inv-hero__corner--tr {
    opacity: 0;
}

html.inv-js .inv--lamai .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tl,
html.inv-js .inv--lamai .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation: gradina-pictata-drop-in 1.6s cubic-bezier(.2, .7, .2, 1) .2s both, gradina-pictata-sway 9s ease-in-out 1.8s infinite;
}

html.inv-js .inv--lamai .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation-delay: .5s, 2.1s;
    animation-duration: 1.6s, 11s;
}

/* ========== Smochin: fig leaves and ripe figs in warm Mediterranean light ========== */

.inv--smochin {
    --f-display: "Forum", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Forum", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.6rem, 13cqi, 5.4rem);
    --names-transform: uppercase;
    --names-spacing: .12em;
    --names-line: 1.14;
    --names-color: var(--inv-primary);
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: 1em;
    --amp-color: var(--inv-ornament);
    --kicker-spacing: .5em;
    --date-spacing: .32em;
    --heading-weight: 400;
    --heading-transform: uppercase;
    --heading-spacing: .14em;
    --heading-size: 1.7rem;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --family-font: "Cormorant Garamond", Georgia, serif;
    --pv-sky:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--inv-primary) 40%, transparent) 0, transparent min(46cqi, 300px)),
        radial-gradient(ellipse 80% 40% at 50% 100%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 74%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg)), var(--inv-bg) 70%);
    --pv-far: url(../../img/invitations/ornaments/gradina-pictata-olives.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 60%, var(--inv-ornament));
    --pv-far-h: clamp(90px, 28cqi, 170px);
    --pv-near: url(../../img/invitations/ornaments/gradina-pictata-hills.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(40px, 12cqi, 76px);
    --hero-pad: clamp(170px, 48cqi, 250px) 8px calc(var(--pv-far-h) * .7 + 50px);
    --hero-justify: flex-start;
    --amb-image: none;
    --amb-radius: 50%;
    --amb-anim: inv-bokeh;
    --amb-size: 9px;
    --amb-duration: 12s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .55;
    --pv-rays-display: block;
    --pv-rays: var(--inv-primary);
    --pv-rays-opacity: .22;
    --pv-rays-time: 90s;
    --pv-in-odd: translateX(-46px);
    --pv-in-even: translateX(46px);
    --pv-open: translateX(104%);
    --pv-open-opacity: 1;
    --pv-deco: url(../../img/invitations/ornaments/gradina-pictata-fig.svg);
    --pv-deco-ratio: 260 / 204;
}

/* the light falls from the top: the rays turn behind the leaves */
.inv--smochin .inv__backdrop::before {
    top: calc(var(--hero-min-height) * .14);
}

.inv--smochin .inv-hero__corner--tl,
.inv--smochin .inv-hero__corner--tr {
    display: block;
    top: -2%;
    width: min(56cqi, 340px);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-fig.svg);
    --hero-corner-ratio: 260 / 204;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-text)), color-mix(in srgb, var(--inv-ornament) 80%, transparent));
    --hero-corner-opacity: .9;
}

.inv--smochin .inv-hero__corner--tl {
    left: -14%;
    transform: rotate(150deg);
    animation: gradina-pictata-sway 10s ease-in-out infinite;
}

.inv--smochin .inv-hero__corner--tr {
    right: -14%;
    transform: rotate(-150deg);
    animation: gradina-pictata-sway 13s ease-in-out infinite reverse;
}

.inv--smochin .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/gradina-pictata-figs.svg);
    --orn-ratio: 210 / 170;
    --orn-width: min(34cqi, 170px);
    --orn-max: 170px;
    --orn-fill: linear-gradient(160deg, var(--inv-ornament), var(--inv-primary) 70%);
    --orn-margin: 0 auto 4px;
    --pv-orn-anim: gradina-pictata-sway;
    --pv-orn-time: 8s;
    transform-origin: 10% 10%;
}

html.inv-js .inv--smochin .inv-hero__corner--tl,
html.inv-js .inv--smochin .inv-hero__corner--tr {
    opacity: 0;
}

html.inv-js .inv--smochin .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tl,
html.inv-js .inv--smochin .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation: gradina-pictata-unfold 1.8s cubic-bezier(.2, .7, .2, 1) .1s both, gradina-pictata-sway 10s ease-in-out 1.9s infinite;
}

/* ================================================================================================================
   FIELDS AND FLOWERS
   ================================================================================================================ */

/* ========== Lavandă: a field of lavender swaying in the wind; the cover is linen tied with a ribbon ========== */

.inv--lavanda {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Italianno", cursive;
    --names-weight: 400;
    --names-size: clamp(4rem, 22cqi, 8.4rem);
    --names-line: .9;
    --names-color: var(--inv-primary);
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .3em;
    --amp-color: var(--inv-ornament);
    --kicker-spacing: .46em;
    --heading-font: "Italianno", cursive;
    --heading-size: 3.4rem;
    --heading-weight: 400;
    --closing-font: "Italianno", cursive;
    --pv-sky:
        radial-gradient(ellipse 50% 22% at 50% var(--pv-horizon), color-mix(in srgb, var(--inv-surface) 94%, transparent), transparent 80%),
        radial-gradient(ellipse 34% 20% at 20% 18%, color-mix(in srgb, var(--inv-ornament) 22%, transparent), transparent 74%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 82%, var(--inv-surface)), var(--inv-bg) 60%, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-bg)));
    --pv-far: url(../../img/invitations/ornaments/gradina-pictata-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-ornament) 30%, var(--inv-bg));
    --pv-far-h: clamp(110px, 34cqi, 200px);
    --pv-near: url(../../img/invitations/ornaments/gradina-pictata-lavender-field.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 72%, var(--inv-ornament)), var(--inv-primary) 40%, color-mix(in srgb, var(--inv-primary) 50%, var(--inv-text)));
    --pv-near-h: clamp(110px, 34cqi, 200px);
    --pv-near-size: auto 100%;
    --hero-pad: clamp(130px, 36cqi, 200px) 8px calc(var(--pv-near-h) + 46px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-bud.svg);
    --amb-ratio: 16 / 30;
    --amb-anim: inv-breeze;
    --amb-size: 9px;
    --amb-duration: 16s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: .8;
    --pv-rays-display: block;
    --pv-rays: color-mix(in srgb, var(--inv-ornament) 60%, #fff);
    --pv-rays-opacity: .16;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(90deg, transparent calc(100% - 26px), color-mix(in srgb, var(--inv-primary) 82%, #000) calc(100% - 26px) calc(100% - 23px), var(--inv-primary) calc(100% - 23px)),
        linear-gradient(180deg, transparent calc(50% - 14px), var(--inv-primary) calc(50% - 14px) calc(50% + 14px), transparent calc(50% + 14px)),
        radial-gradient(ellipse 40px 30px at 100% 50%, color-mix(in srgb, var(--inv-primary) 70%, #000) 0 60%, transparent 62%),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)) 0 2px, color-mix(in srgb, var(--inv-accent) 40%, var(--inv-surface)) 2px 4px),
        var(--inv-surface);
}

.inv--lavanda.inv--dark {
    --pv-sky:
        radial-gradient(ellipse 50% 22% at 50% var(--pv-horizon), color-mix(in srgb, var(--inv-primary) 26%, transparent), transparent 80%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 60%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg)));
    --pv-near-fill: linear-gradient(180deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-bg)));
    --amb-fill: var(--inv-ornament);
}

/* the cover: linen tied crosswise with a ribbon; at the tap the ribbon parts and the two halves slide away */
html.inv-js .inv--lavanda .inv-envelope:not(:has(.inv-envelope__photo)) {
    background: transparent;
}

.inv--lavanda .inv-envelope:not(:has(.inv-envelope__photo))::before,
.inv--lavanda .inv-envelope:not(:has(.inv-envelope__photo))::after,
.inv--lavanda .inv-envelope:not(:has(.inv-envelope__photo)) .inv-envelope__scene::before {
    display: none;
}

.inv--lavanda .inv-envelope.is-opening .inv-envelope__door--l,
.inv--lavanda .inv-envelope.is-opening .inv-envelope__door--r {
    transform: translateX(-104%) rotate(-5deg);
}

/* the field moves in the wind, the far rows a little later */
.inv--lavanda .inv-hero::after {
    transform-origin: 50% 100%;
    animation: gradina-pictata-wind 7s ease-in-out infinite;
}

/* a bundle of lavender tied with a bow above the names */
.inv--lavanda .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/gradina-pictata-lavender.svg);
    --orn-ratio: 220 / 254;
    --orn-width: min(34cqi, 170px);
    --orn-max: 170px;
    --orn-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament)) 64%, var(--inv-ornament));
    --orn-margin: 0 auto 6px;
    --pv-orn-anim: gradina-pictata-sway;
    --pv-orn-time: 7s;
    transform-origin: 50% 70%;
}

html.inv-js .inv--lavanda .inv-hero:has(.inv-hero__content.is-in) .orn--hero {
    animation: gradina-pictata-bloom 1.6s cubic-bezier(.2, .7, .2, 1) .3s both, gradina-pictata-sway 7s ease-in-out 1.9s infinite;
}

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

/* ========== Floarea-soarelui: a field of sunflowers that turn towards the light ========== */

.inv--floarea-soarelui {
    --f-display: "Montserrat", "Segoe UI", sans-serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --f-names: "Dancing Script", cursive;
    --names-weight: 600;
    --names-size: clamp(3.4rem, 18cqi, 7.2rem);
    --names-line: .98;
    --names-color: var(--inv-primary);
    --amp-font: "Montserrat", "Segoe UI", sans-serif;
    --amp-style: normal;
    --amp-size: .26em;
    --amp-color: var(--inv-ornament);
    --kicker-weight: 600;
    --heading-font: "Dancing Script", cursive;
    --heading-weight: 600;
    --heading-size: 2.6rem;
    --body-weight: 400;
    --closing-font: "Dancing Script", cursive;
    --pv-sun: min(30cqi, 180px);
    --pv-sky:
        radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--inv-ornament) 92%, #fff) 0, var(--inv-ornament) calc(var(--pv-sun) / 2 - 1px), color-mix(in srgb, var(--inv-ornament) 40%, transparent) calc(var(--pv-sun) / 2), transparent var(--pv-sun)),
        radial-gradient(ellipse 70% 40% at 50% 15%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-surface)), var(--inv-bg) 60%);
    --pv-far: url(../../img/invitations/ornaments/gradina-pictata-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-ornament) 30%, var(--inv-accent));
    --pv-far-h: clamp(100px, 30cqi, 180px);
    --pv-near: url(../../img/invitations/ornaments/gradina-pictata-sunflowers.svg);
    --pv-near-fill: linear-gradient(180deg, var(--inv-ornament) 0 34%, color-mix(in srgb, var(--inv-primary) 50%, #4f6b2a) 52%, color-mix(in srgb, var(--inv-primary) 40%, #3c5523));
    --pv-near-h: clamp(120px, 38cqi, 220px);
    --hero-pad: calc(var(--pv-sun) + 60px) 8px calc(var(--pv-near-h) + 40px);
    --hero-justify: flex-start;
    --amb-image: none;
    --amb-radius: 50%;
    --amb-anim: inv-bokeh;
    --amb-size: 7px;
    --amb-duration: 11s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .9;
    --pv-dust: var(--inv-ornament);
    --pv-dust-opacity: .5;
    --pv-rays-display: block;
    --pv-rays: var(--inv-ornament);
    --pv-rays-opacity: .3;
    --pv-rays-time: 60s;
    --pv-open: translateY(104%);
    --pv-open-opacity: 1;
    --pv-deco: url(../../img/invitations/ornaments/gradina-pictata-sunflower.svg);
    --pv-deco-ratio: 1;
}

/* the rays turn around the sun */
.inv--floarea-soarelui .inv__backdrop::before {
    top: calc(var(--hero-min-height) * .15);
}

/* two sunflower heads at the sides follow the sun across the sky */
.inv--floarea-soarelui .inv-hero__corner--bl,
.inv--floarea-soarelui .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .55);
    width: min(36cqi, 220px);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-sunflower.svg);
    --hero-corner-ratio: 1;
    --hero-corner-fill: radial-gradient(circle, color-mix(in srgb, var(--inv-text) 70%, var(--inv-primary)) 0 22%, var(--inv-ornament) 23%);
    animation: gradina-pictata-turn 9s ease-in-out infinite;
}

.inv--floarea-soarelui .inv-hero__corner--bl {
    left: -9%;
}

.inv--floarea-soarelui .inv-hero__corner--br {
    right: -9%;
    width: min(30cqi, 180px);
    animation-delay: -3s;
}

html.inv-js .inv--floarea-soarelui .inv-hero__corner--bl,
html.inv-js .inv--floarea-soarelui .inv-hero__corner--br {
    opacity: 0;
}

html.inv-js .inv--floarea-soarelui .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl,
html.inv-js .inv--floarea-soarelui .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--br {
    animation: gradina-pictata-rise 1.6s cubic-bezier(.2, .7, .2, 1) .2s both, gradina-pictata-turn 9s ease-in-out 1.8s infinite;
}

html.inv-js .inv--floarea-soarelui .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--br {
    animation-delay: .6s, -1.2s;
}

/* ========== Margarete: a meadow of daisies, a flower turning above the name, petals that settle ========== */

.inv--margarete {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-weight: 600;
    --names-size: clamp(3rem, 15.6cqi, 6.2rem);
    --names-line: 1.02;
    --names-color: var(--inv-primary);
    --amp-style: italic;
    --amp-size: .44em;
    --amp-color: var(--inv-ornament);
    --kicker-weight: 700;
    --heading-weight: 600;
    --heading-size: 2.1rem;
    --body-weight: 500;
    --pv-sky:
        radial-gradient(ellipse 60% 36% at 50% 34%, color-mix(in srgb, var(--inv-surface) 92%, transparent), transparent 74%),
        radial-gradient(ellipse 30% 20% at 86% 16%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 74%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 74%, var(--inv-surface)), var(--inv-bg) 66%);
    --pv-far: url(../../img/invitations/ornaments/gradina-pictata-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-primary) 26%, var(--inv-accent));
    --pv-far-h: clamp(90px, 28cqi, 170px);
    --pv-near: url(../../img/invitations/ornaments/gradina-pictata-meadow.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-surface)) 0 30%, var(--inv-primary) 62%);
    --pv-near-h: clamp(80px, 24cqi, 140px);
    --pv-settle: calc(100cqh - var(--pv-near-h) * .5 - 30px + var(--amb-y) * .2);
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-petal.svg);
    --amb-ratio: 30 / 40;
    --amb-size: 14px;
    --amb-duration: 18s;
    --amb-fill: color-mix(in srgb, var(--inv-ornament) 40%, var(--inv-surface));
    --amb-opacity: .95;
    --pv-open: scale(.5) rotate(24deg);
    --pv-open-opacity: 0;
    --pv-deco: url(../../img/invitations/ornaments/gradina-pictata-daisy.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .26;
}

.inv--margarete:not(.inv--dark) .inv__ambient i:nth-child(odd) {
    background: color-mix(in srgb, var(--inv-primary) 30%, var(--inv-surface));
}

/* petals drift down and settle in the grass for a while before they fade */
.inv--margarete .inv__ambient i {
    top: -6%;
    animation-name: gradina-pictata-settle;
    animation-timing-function: ease-in-out;
}

/* the daisy above the name: it spins in, then turns slowly */
.inv--margarete .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/gradina-pictata-daisy.svg);
    --orn-ratio: 1;
    --orn-width: min(30cqi, 150px);
    --orn-max: 150px;
    --orn-fill: radial-gradient(circle, var(--inv-ornament) 0 24%, color-mix(in srgb, var(--inv-primary) 74%, var(--inv-text)) 25%);
    --orn-margin: 0 auto 10px;
    --pv-orn-anim: gradina-pictata-spin;
    --pv-orn-time: 40s;
}

.inv--margarete .inv-hero .orn--hero {
    animation-timing-function: linear;
}

html.inv-js .inv--margarete .inv-hero:has(.inv-hero__content.is-in) .orn--hero {
    animation: gradina-pictata-bloom 1.8s cubic-bezier(.2, .7, .2, 1) .2s both, gradina-pictata-spin 40s linear 2s infinite;
}

/* ========== Livadă: an orchard in blossom on the hills; petals on the wind; the cover rises like a curtain ========== */

.inv--livada {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Allura", cursive;
    --names-weight: 400;
    --names-size: clamp(3.8rem, 20cqi, 7.8rem);
    --names-line: .94;
    --names-color: var(--inv-primary);
    --amp-font: "Lora", Georgia, serif;
    --amp-style: italic;
    --amp-size: .3em;
    --amp-color: var(--inv-ornament);
    --heading-font: "Allura", cursive;
    --heading-size: 3.2rem;
    --heading-weight: 400;
    --closing-font: "Allura", cursive;
    --pv-sky:
        radial-gradient(ellipse 30% 18% at 22% 24%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 74%),
        radial-gradient(ellipse 26% 16% at 80% 14%, color-mix(in srgb, var(--inv-ornament) 24%, transparent), transparent 74%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)), var(--inv-surface) 40%, var(--inv-bg) 76%);
    --pv-far: url(../../img/invitations/ornaments/gradina-pictata-orchard.svg);
    --pv-far-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-surface)) 0 50%, color-mix(in srgb, var(--inv-primary) 40%, var(--inv-accent)) 80%);
    --pv-far-h: clamp(120px, 38cqi, 230px);
    --pv-near: url(../../img/invitations/ornaments/gradina-pictata-hills.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(50px, 16cqi, 96px);
    --hero-pad: clamp(80px, 22cqi, 130px) 8px calc(var(--pv-far-h) * .74 + 46px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-blossom.svg);
    --amb-ratio: 1;
    --amb-anim: inv-breeze;
    --amb-size: 15px;
    --amb-duration: 15s;
    --amb-fill: color-mix(in srgb, var(--inv-ornament) 76%, var(--inv-surface));
    --amb-opacity: .95;
    --pv-sheen-display: block;
    --pv-sheen-opacity: .35;
    --pv-open: translateY(-104%);
    --pv-open-opacity: 1;
    --pv-deco: url(../../img/invitations/ornaments/gradina-pictata-blossom.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .3;
}

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

.inv--livada .inv__ambient i:nth-child(3n) {
    background: var(--inv-primary);
    opacity: .5;
}

.inv--livada .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/gradina-pictata-bloom.svg);
    --orn-ratio: 220 / 210;
    --orn-width: min(22cqi, 110px);
    --orn-max: 110px;
    --orn-fill: linear-gradient(135deg, var(--inv-ornament), var(--inv-primary));
    --orn-margin: 0 auto 6px;
    --pv-orn-anim: inv-breathe;
}

.inv--livada .orn--hero-divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: var(--pv-divider-ratio);
    --orn-width: min(50cqi, 220px);
}

/* ========== Hortensie: clusters of hydrangea in blue and lilac watercolour, florets floating over the names ========== */

.inv--hortensie {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Cormorant Garamond", Georgia, serif;
    --names-weight: 300;
    --names-style: italic;
    --names-size: clamp(3.2rem, 16.6cqi, 6.6rem);
    --names-line: 1;
    --names-color: var(--inv-primary);
    --amp-font: "Great Vibes", cursive;
    --amp-style: normal;
    --amp-size: .66em;
    --amp-color: var(--inv-ornament);
    --kicker-font: "Josefin Sans", "Segoe UI", sans-serif;
    --kicker-spacing: .5em;
    --heading-style: italic;
    --heading-weight: 400;
    --pv-sky:
        radial-gradient(ellipse 36% 24% at 18% 76%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 74%),
        radial-gradient(ellipse 40% 26% at 86% 70%, color-mix(in srgb, var(--inv-primary) 16%, transparent), transparent 74%),
        radial-gradient(ellipse 34% 20% at 70% 14%, color-mix(in srgb, var(--inv-accent) 96%, transparent), transparent 70%),
        linear-gradient(180deg, var(--inv-surface), var(--inv-bg) 76%);
    --pv-far: none;
    --hero-pad: 76px 8px clamp(190px, 56cqi, 320px);
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-floret.svg);
    --amb-ratio: 1;
    --amb-anim: inv-bokeh;
    --amb-size: 18px;
    --amb-duration: 13s;
    --amb-fill: linear-gradient(135deg, var(--inv-primary), var(--inv-ornament));
    --amb-opacity: .75;
    --pv-in-odd: translateY(40px) scale(.96);
    --pv-in-even: translateY(40px) scale(.96);
    --pv-open: translateX(-104%);
    --pv-open-opacity: 1;
    --pv-deco: url(../../img/invitations/ornaments/gradina-pictata-hydrangea.svg);
    --pv-deco-ratio: 260 / 250;
    --pv-deco-opacity: .26;
}

/* clusters of hydrangea grow at the foot of the screen and at the top corner, then breathe */
.inv--hortensie .inv-hero__corner--bl,
.inv--hortensie .inv-hero__corner--br,
.inv--hortensie .inv-hero__corner--tr {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-hydrangea.svg);
    --hero-corner-ratio: 260 / 250;
    --hero-corner-fill: linear-gradient(160deg, var(--inv-ornament), var(--inv-primary) 60%, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text)));
    transform-origin: 50% 100%;
    animation: gradina-pictata-breathe 8s ease-in-out infinite;
}

.inv--hortensie .inv-hero__corner--bl {
    top: auto;
    bottom: 4px;
    left: -6%;
    width: min(62cqi, 380px);
}

.inv--hortensie .inv-hero__corner--br {
    top: auto;
    bottom: -10px;
    right: -8%;
    width: min(54cqi, 330px);
    animation-delay: -3s;
    --hero-corner-fill: linear-gradient(160deg, var(--inv-primary), var(--inv-ornament) 70%);
}

.inv--hortensie .inv-hero__corner--tr {
    top: -4%;
    right: -10%;
    width: min(40cqi, 240px);
    transform: rotate(200deg);
    transform-origin: 50% 50%;
    --hero-corner-opacity: .7;
    animation-delay: -5s;
}

html.inv-js .inv--hortensie .inv-hero__corner {
    opacity: 0;
}

html.inv-js .inv--hortensie .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl {
    animation: gradina-pictata-rise 1.6s cubic-bezier(.2, .7, .2, 1) .1s both, gradina-pictata-breathe 8s ease-in-out 1.7s infinite;
}

html.inv-js .inv--hortensie .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--br {
    animation: gradina-pictata-rise 1.6s cubic-bezier(.2, .7, .2, 1) .45s both, gradina-pictata-breathe 8s ease-in-out 2s infinite;
}

html.inv-js .inv--hortensie .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation: gradina-pictata-fade 1.6s ease .8s both, gradina-pictata-breathe 8s ease-in-out 2.4s infinite;
}

/* ========== Magnolie: branches of magnolia; a bud above the names opens into a flower ========== */

.inv--magnolie {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Playfair Display", Georgia, serif;
    --names-weight: 400;
    --names-style: italic;
    --names-size: clamp(2.8rem, 14.2cqi, 5.8rem);
    --names-line: 1.06;
    --names-color: var(--inv-primary);
    --amp-font: "Pinyon Script", cursive;
    --amp-style: normal;
    --amp-size: .66em;
    --amp-color: var(--inv-ornament);
    --heading-style: italic;
    --heading-weight: 400;
    --pv-sky:
        radial-gradient(ellipse 40% 26% at 78% 22%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 74%),
        radial-gradient(ellipse 44% 28% at 20% 78%, color-mix(in srgb, var(--inv-accent) 92%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-surface), var(--inv-bg) 72%);
    --pv-far: none;
    --pv-near: url(../../img/invitations/ornaments/gradina-pictata-hills.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg));
    --pv-near-h: clamp(40px, 12cqi, 80px);
    --hero-pad: clamp(130px, 36cqi, 190px) 8px clamp(130px, 36cqi, 200px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-petal.svg);
    --amb-size: 24px;
    --amb-duration: 21s;
    --amb-fill: linear-gradient(160deg, color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-surface)), var(--inv-ornament));
    --amb-opacity: .85;
    --pv-in-time: 1.4s;
    --pv-open: scale(1.24) rotate(4deg);
    --pv-open-opacity: 0;
    --pv-deco: url(../../img/invitations/ornaments/gradina-pictata-magnolia-branch.svg);
    --pv-deco-ratio: 260 / 220;
}

.inv--magnolie.inv--dark {
    --pv-sky:
        radial-gradient(ellipse 40% 26% at 78% 22%, color-mix(in srgb, var(--inv-ornament) 22%, transparent), transparent 74%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 72%);
}

.inv--magnolie .inv-hero__corner--tl,
.inv--magnolie .inv-hero__corner--br {
    display: block;
    width: min(64cqi, 400px);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-magnolia-branch.svg);
    --hero-corner-ratio: 260 / 220;
    --hero-corner-fill: linear-gradient(135deg, color-mix(in srgb, var(--inv-text) 60%, var(--inv-ornament)), var(--inv-ornament) 50%, color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-surface)));
}

.inv--magnolie .inv-hero__corner--tl {
    top: -8px;
    left: -8%;
    transform-origin: 0 0;
    animation: gradina-pictata-sway 12s ease-in-out infinite;
}

.inv--magnolie .inv-hero__corner--br {
    top: auto;
    bottom: 6px;
    right: -8%;
    transform: rotate(180deg);
    animation: gradina-pictata-sway 14s ease-in-out infinite reverse;
}

/* the flower above the names opens from a bud */
.inv--magnolie .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/gradina-pictata-magnolia.svg);
    --orn-ratio: 240 / 220;
    --orn-width: min(34cqi, 170px);
    --orn-max: 170px;
    --orn-fill: linear-gradient(180deg, var(--inv-ornament), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-ornament)));
    --orn-margin: 0 auto 6px;
    --pv-orn-anim: inv-breathe;
    transform-origin: 50% 80%;
}

html.inv-js .inv--magnolie .inv-hero:has(.inv-hero__content.is-in) .orn--hero {
    animation: gradina-pictata-open 2.2s cubic-bezier(.2, .7, .2, 1) .2s both, inv-breathe 9s ease-in-out 2.4s infinite;
}

/* ========== Eucalipt: eucalyptus drawn in fine line, branches swaying at the edges, round leaves falling ========== */

.inv--eucalipt {
    --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.2rem, 11.4cqi, 4.6rem);
    --names-transform: uppercase;
    --names-spacing: .14em;
    --names-line: 1.2;
    --names-color: var(--inv-primary);
    --amp-font: "Pinyon Script", cursive;
    --amp-style: normal;
    --amp-size: 1.1em;
    --amp-color: var(--inv-ornament);
    --kicker-spacing: .5em;
    --date-spacing: .36em;
    --heading-size: 1.6rem;
    --heading-weight: 400;
    --heading-transform: uppercase;
    --heading-spacing: .18em;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --family-font: "Cormorant Garamond", Georgia, serif;
    --pv-sky:
        radial-gradient(ellipse 50% 36% at 50% 46%, color-mix(in srgb, var(--inv-surface) 90%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 50%, var(--inv-bg)), var(--inv-bg) 70%);
    --pv-far: none;
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-round-leaf.svg);
    --amb-ratio: 34 / 38;
    --amb-anim: inv-fall;
    --amb-size: 16px;
    --amb-duration: 20s;
    --amb-fill: color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament));
    --amb-opacity: .55;
    --pv-in-odd: translateY(36px);
    --pv-in-even: translateY(36px);
    --pv-letter-step: 60ms;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        radial-gradient(ellipse 70% 50% at 100% 50%, color-mix(in srgb, var(--inv-surface) 90%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface)), var(--inv-accent));
    --pv-deco: url(../../img/invitations/ornaments/gradina-pictata-round-leaf.svg);
    --pv-deco-ratio: 34 / 38;
    --pv-deco-opacity: .2;
}

.inv--eucalipt.inv--dark {
    --pv-sky: linear-gradient(180deg, var(--pv-night), var(--inv-bg) 70%);
    --pv-door-fill: linear-gradient(180deg, var(--inv-surface), var(--inv-accent));
}

/* the two halves of the cover part upwards and downwards */
html.inv-js .inv--eucalipt .inv-envelope:not(:has(.inv-envelope__photo)) {
    background: transparent;
}

.inv--eucalipt .inv-envelope:not(:has(.inv-envelope__photo))::before,
.inv--eucalipt .inv-envelope:not(:has(.inv-envelope__photo))::after,
.inv--eucalipt .inv-envelope:not(:has(.inv-envelope__photo)) .inv-envelope__scene::before {
    display: none;
}

.inv--eucalipt .inv-envelope.is-opening .inv-envelope__door--l {
    transform: translateY(-102%);
}

.inv--eucalipt .inv-envelope.is-opening .inv-envelope__door--r {
    transform: translateY(102%);
}

/* long branches hang from the top at both sides and sway; a shorter one rises at the foot */
.inv--eucalipt .inv-hero__corner--tl,
.inv--eucalipt .inv-hero__corner--tr {
    display: block;
    top: -20px;
    width: min(19cqi, 120px);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-eucalyptus.svg);
    --hero-corner-ratio: 160 / 420;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, var(--inv-text)), var(--inv-ornament));
    transform-origin: 50% 0;
    animation: gradina-pictata-sway 8s ease-in-out infinite;
}

.inv--eucalipt .inv-hero__corner--tl {
    left: -3%;
}

.inv--eucalipt .inv-hero__corner--tr {
    right: -3%;
    width: min(16cqi, 104px);
    animation-duration: 10s;
    animation-delay: -4s;
}

.inv--eucalipt .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: -30px;
    right: 18%;
    width: min(18cqi, 110px);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-eucalyptus.svg);
    --hero-corner-ratio: 160 / 420;
    --hero-corner-fill: var(--inv-ornament);
    --hero-corner-opacity: .6;
    transform: rotate(180deg);
    animation: gradina-pictata-sway 9s ease-in-out infinite reverse;
}

html.inv-js .inv--eucalipt .inv-hero__corner--tl,
html.inv-js .inv--eucalipt .inv-hero__corner--tr {
    opacity: 0;
}

html.inv-js .inv--eucalipt .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tl,
html.inv-js .inv--eucalipt .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation: gradina-pictata-drop-in 2s cubic-bezier(.2, .7, .2, 1) .1s both, gradina-pictata-sway 8s ease-in-out 2.1s infinite;
}

html.inv-js .inv--eucalipt .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation-delay: .5s, 2.5s;
    animation-duration: 2s, 10s;
}

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

/* ========== Ceai în grădină: a tea table in the garden; the teapot pours into a cup, steam rises ========== */

.inv--ceai-in-gradina {
    --f-display: "Playfair Display", Georgia, serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Petit Formal Script", cursive;
    --names-weight: 400;
    --names-size: clamp(2.6rem, 13.6cqi, 5.6rem);
    --names-line: 1.1;
    --names-color: var(--inv-primary);
    --amp-font: "Playfair Display", Georgia, serif;
    --amp-style: italic;
    --amp-size: .44em;
    --amp-color: var(--inv-ornament);
    --kicker-weight: 700;
    --heading-style: italic;
    --heading-weight: 400;
    --body-weight: 500;
    --pv-pot: min(40cqi, 200px);
    --pv-tea-top: calc(var(--pv-far-h) * .7 + 8px);
    --pv-sky:
        radial-gradient(ellipse 50% 30% at 50% 30%, color-mix(in srgb, var(--inv-surface) 92%, transparent), transparent 76%),
        radial-gradient(ellipse 30% 18% at 12% 60%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 74%),
        radial-gradient(ellipse 30% 18% at 90% 66%, color-mix(in srgb, var(--inv-ornament) 22%, transparent), transparent 74%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)), var(--inv-bg) 70%);
    /* a garland of flowers along the top of the first screen (the far slot, lifted to the top) */
    --pv-far: url(../../img/invitations/ornaments/gradina-pictata-garland.svg);
    --pv-far-fill: linear-gradient(180deg, var(--inv-primary), var(--inv-ornament));
    --pv-far-h: clamp(54px, 17cqi, 92px);
    --pv-far-bottom: calc(100% - var(--pv-far-h));
    --pv-near: url(../../img/invitations/ornaments/gradina-pictata-hedge.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 22%, #557a3c), color-mix(in srgb, var(--inv-primary) 18%, #36552a));
    --pv-near-h: clamp(70px, 22cqi, 130px);
    --hero-pad: calc(var(--pv-tea-top) + var(--pv-pot) * 1.46 + 30px) 8px calc(var(--pv-near-h) + 40px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-blossom.svg);
    --amb-ratio: 1;
    --amb-size: 13px;
    --amb-duration: 18s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .8;
    --pv-in-odd: translateY(40px) rotate(-1deg);
    --pv-in-even: translateY(40px) rotate(1deg);
    --box-radius: 18px;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(90deg, transparent calc(100% - 3px), color-mix(in srgb, var(--inv-primary) 50%, transparent) calc(100% - 3px)),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 26%, transparent) 0 22px, transparent 22px 44px),
        repeating-linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 26%, transparent) 0 22px, transparent 22px 44px),
        var(--inv-surface);
    --pv-deco: url(../../img/invitations/ornaments/gradina-pictata-teacup.svg);
    --pv-deco-ratio: 140 / 80;
    --pv-deco-opacity: .3;
}

html.inv-js .inv--ceai-in-gradina .inv-envelope:not(:has(.inv-envelope__photo)) {
    background: transparent;
}

.inv--ceai-in-gradina .inv-envelope:not(:has(.inv-envelope__photo))::before,
.inv--ceai-in-gradina .inv-envelope:not(:has(.inv-envelope__photo))::after,
.inv--ceai-in-gradina .inv-envelope:not(:has(.inv-envelope__photo)) .inv-envelope__scene::before {
    display: none;
}

/* the teapot, the stream and the cup: placed together above the names, sized from --pv-pot */
.inv--ceai-in-gradina .inv-hero__corner--tl {
    display: block;
    top: var(--pv-tea-top);
    left: calc(50% - var(--pv-pot) * .25);
    width: var(--pv-pot);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-teapot.svg);
    --hero-corner-ratio: 220 / 182;
    --hero-corner-fill: linear-gradient(160deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-ornament)));
    transform-origin: 80% 90%;
    animation: gradina-pictata-pour 7s ease-in-out infinite;
}

.inv--ceai-in-gradina .inv-hero__corner--tr {
    display: block;
    top: calc(var(--pv-tea-top) + var(--pv-pot) * .655);
    right: auto;
    left: calc(50% - var(--pv-pot) * .479);
    width: calc(var(--pv-pot) * .18);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-stream.svg);
    --hero-corner-ratio: 40 / 120;
    --hero-corner-fill: color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-primary));
    transform-origin: 80% 0;
    animation: gradina-pictata-stream 7s ease-in-out infinite;
}

.inv--ceai-in-gradina .inv-hero__corner--bl {
    display: block;
    top: calc(var(--pv-tea-top) + var(--pv-pot) * 1.106);
    bottom: auto;
    left: calc(50% - var(--pv-pot) * .639);
    width: calc(var(--pv-pot) * .5);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-teacup.svg);
    --hero-corner-ratio: 140 / 80;
    --hero-corner-fill: linear-gradient(160deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament)));
}

.inv--ceai-in-gradina .inv-hero__corner--br {
    display: block;
    top: calc(var(--pv-tea-top) + var(--pv-pot) * .82);
    bottom: auto;
    right: auto;
    left: calc(50% - var(--pv-pot) * .36);
    width: calc(var(--pv-pot) * .2);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-steam.svg);
    --hero-corner-ratio: 60 / 90;
    --hero-corner-fill: color-mix(in srgb, var(--inv-text) 40%, var(--inv-ornament));
    animation: gradina-pictata-steam 4.2s ease-out infinite;
}

/* ========== Iris: irises in ink and wash; blots of colour spread on the paper ========== */

.inv--iris {
    --f-display: "Bodoni Moda", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Bodoni Moda", Georgia, serif;
    --names-weight: 400;
    --names-style: italic;
    --names-size: clamp(2.7rem, 13.8cqi, 5.6rem);
    --names-line: 1.06;
    --names-color: var(--inv-primary);
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: .9em;
    --amp-color: var(--inv-ornament);
    --kicker-spacing: .5em;
    --heading-style: italic;
    --heading-weight: 400;
    --pv-sky: linear-gradient(180deg, var(--inv-surface), var(--inv-bg) 80%);
    --pv-far: none;
    --hero-pad: 70px 8px clamp(200px, 60cqi, 330px);
    --amb-image: url(../../img/invitations/ornaments/gradina-pictata-petal.svg);
    --amb-size: 16px;
    --amb-duration: 23s;
    --amb-fill: linear-gradient(160deg, var(--inv-primary), var(--inv-ornament));
    --amb-opacity: .55;
    --pv-dust-display: none;
    --pv-letter-step: 55ms;
    --pv-open: scale(.86);
    --pv-open-opacity: 0;
    --pv-deco: url(../../img/invitations/ornaments/gradina-pictata-blot.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .18;
}

/* blots of watercolour behind the names (in the hero: the sky covers the backdrop), which spread when the page
   opens and keep breathing */
.inv--iris .inv-hero__corner--tl,
.inv--iris .inv-hero__corner--tr {
    display: block;
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-blot.svg);
    --hero-corner-ratio: 1;
    --hero-corner-fill: linear-gradient(135deg, var(--inv-ornament), var(--inv-primary));
    --hero-corner-opacity: .3;
    animation: gradina-pictata-breathe 12s ease-in-out infinite;
}

.inv--iris .inv-hero__corner--tl {
    top: 2%;
    left: -16%;
    width: min(78cqi, 540px);
}

.inv--iris .inv-hero__corner--tr {
    top: 30%;
    right: -18%;
    width: min(64cqi, 440px);
    transform: rotate(140deg);
    --hero-corner-fill: linear-gradient(135deg, var(--inv-primary), var(--inv-accent));
    animation-duration: 15s;
}

html.inv-js .inv--iris .inv-hero__corner--tl,
html.inv-js .inv--iris .inv-hero__corner--tr {
    opacity: 0;
}

html.inv-js .inv--iris .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tl,
html.inv-js .inv--iris .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation: gradina-pictata-spread 3s cubic-bezier(.2, .7, .2, 1) .1s both, gradina-pictata-breathe 12s ease-in-out 3.1s infinite;
}

html.inv-js .inv--iris .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation-delay: .7s, 3.7s;
}

/* tall irises rise from the foot of the screen */
.inv--iris .inv-hero__corner--bl,
.inv--iris .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: -14px;
    width: min(38cqi, 230px);
    --hero-corner-image: url(../../img/invitations/ornaments/gradina-pictata-iris.svg);
    --hero-corner-ratio: 200 / 420;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament)) 34%, color-mix(in srgb, var(--inv-text) 50%, var(--inv-ornament)) 46%);
    transform-origin: 50% 100%;
    animation: gradina-pictata-sway 10s ease-in-out infinite;
}

.inv--iris .inv-hero__corner--bl {
    left: 0;
}

.inv--iris .inv-hero__corner--br {
    right: 2%;
    width: min(30cqi, 180px);
    animation-duration: 12s;
    animation-delay: -5s;
}

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

html.inv-js .inv--iris .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl,
html.inv-js .inv--iris .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--br {
    animation: gradina-pictata-rise 1.8s cubic-bezier(.2, .7, .2, 1) .3s both, gradina-pictata-sway 10s ease-in-out 2.1s infinite;
}

html.inv-js .inv--iris .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--br {
    animation-delay: .8s, -3s;
}

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

/* ================================================================================================================
   KEYFRAMES OF THE COLLECTION (transform, opacity, translate, rotate, scale only)
   ================================================================================================================ */

/* A stroke of the brush spreads from where it starts. */
@keyframes gradina-pictata-paint {
    from { scale: 0 1; opacity: 0; }
    20% { opacity: var(--hero-corner-opacity, 1); }
    to { scale: 1 1; opacity: var(--hero-corner-opacity, 1); }
}

/* A flower opens: from a small bud, turning. */
@keyframes gradina-pictata-bloom {
    from { scale: .15; rotate: -70deg; opacity: 0; }
    55% { opacity: var(--hero-corner-opacity, 1); }
    78% { scale: 1.08; rotate: 6deg; }
    to { scale: 1; rotate: 0deg; opacity: var(--hero-corner-opacity, 1); }
}

/* A magnolia opens slowly from a closed bud. */
@keyframes gradina-pictata-open {
    from { scale: .3 .5; opacity: 0; }
    35% { scale: .5 .8; opacity: var(--hero-corner-opacity, 1); }
    80% { scale: 1.05 1.04; }
    to { scale: 1; opacity: var(--hero-corner-opacity, 1); }
}

/* A pressed flower is laid on the sheet. */
@keyframes gradina-pictata-place {
    from { translate: 0 -36px; scale: 1.14; opacity: 0; }
    to { translate: 0 0; scale: 1; opacity: var(--hero-corner-opacity, 1); }
}

/* A hanging branch comes down into the screen. */
@keyframes gradina-pictata-drop-in {
    from { translate: 0 -60%; opacity: 0; }
    to { translate: 0 0; opacity: var(--hero-corner-opacity, 1); }
}

/* A leaf unfolds from the edge. */
@keyframes gradina-pictata-unfold {
    from { scale: .5; translate: 0 -30%; opacity: 0; }
    to { scale: 1; translate: 0 0; opacity: var(--hero-corner-opacity, 1); }
}

/* Flowers grow from the foot of the screen. */
@keyframes gradina-pictata-rise {
    from { translate: 0 40%; scale: .7; opacity: 0; }
    to { translate: 0 0; scale: 1; opacity: var(--hero-corner-opacity, 1); }
}

@keyframes gradina-pictata-fade {
    from { opacity: 0; }
    to { opacity: var(--hero-corner-opacity, 1); }
}

/* A blot of colour spreads on the paper. */
@keyframes gradina-pictata-spread {
    from { scale: .2; opacity: 0; }
    to { scale: 1; opacity: var(--hero-corner-opacity, 1); }
}

@keyframes gradina-pictata-breathe {
    0%, 100% { scale: 1; }
    50% { scale: 1.05; }
}

@keyframes gradina-pictata-sway {
    0%, 100% { rotate: -2.6deg; }
    50% { rotate: 2.6deg; }
}

@keyframes gradina-pictata-spin {
    to { rotate: 360deg; }
}

/* The field bends in the wind from its foot. */
@keyframes gradina-pictata-wind {
    0%, 100% { transform: skewX(-3deg); }
    50% { transform: skewX(4deg); }
}

/* A sunflower head turns to follow the light. */
@keyframes gradina-pictata-turn {
    0%, 100% { transform: perspective(700px) rotateY(-34deg) rotate(-5deg); }
    50% { transform: perspective(700px) rotateY(16deg) rotate(4deg); }
}

/* Petals fall, lie in the grass a while, then fade. */
@keyframes gradina-pictata-settle {
    0% { transform: translate(0, -4cqh) rotate(0deg); opacity: 0; }
    6% { opacity: var(--amb-opacity, .8); }
    56% { transform: translate(20px, var(--pv-settle)) rotate(250deg); }
    90% { transform: translate(20px, var(--pv-settle)) rotate(250deg); opacity: var(--amb-opacity, .8); }
    100% { transform: translate(20px, var(--pv-settle)) rotate(250deg); opacity: 0; }
}

/* The teapot tilts, pours and rights itself; the stream runs only while it is tilted. */
@keyframes gradina-pictata-pour {
    0%, 16% { rotate: 0deg; }
    32%, 64% { rotate: -24deg; }
    80%, 100% { rotate: 0deg; }
}

@keyframes gradina-pictata-stream {
    0%, 31% { scale: 1 0; opacity: 0; }
    37%, 62% { scale: 1 1; opacity: 1; }
    68%, 100% { scale: 1 1; opacity: 0; }
}

@keyframes gradina-pictata-steam {
    0% { translate: 0 14px; scale: .8; opacity: 0; }
    40% { opacity: .85; }
    100% { translate: 0 -30px; scale: 1.1; opacity: 0; }
}

/* The paper over a drawing slides off it: the pen draws from left to right, or from the foot up. */
@keyframes gradina-pictata-draw {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@keyframes gradina-pictata-draw-up {
    from { transform: scaleY(1); }
    to { transform: scaleY(0); }
}