/* Collection "Copilărie" (ADR-0069): drawn animals and toys for baptisms, first birthdays and children's parties.
   - 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 has a little scene that keeps moving on the first screen (a chick that wobbles in its shell, a whale
     that blows, a train that crosses, toy blocks that fall into the name) and an opening of its own (an egg that
     cracks, ice that splits, a rocket that lifts off, a drawbridge that lowers). The scenes are placed with one size
     variable per model, so the pieces stay together on a phone and on a wide screen. Entrances wait for the first
     screen to come in (.inv-hero__content.is-in) and run only with the script.
   - The drawings (copilarie-*.svg) are made by tools/invitations/copilarie-svg.pl: stickers, black on transparent,
     used as masks, coloured from the palette. Own keyframes are copilarie-* and move only transform, opacity,
     translate, rotate and scale. */

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

.inv-c--copilarie {
    --pv-divider: url(../../img/invitations/ornaments/copilarie-divider.svg);
    --pv-divider-ratio: 300 / 30;
    --pv-deco: url(../../img/invitations/ornaments/copilarie-deco.svg);
    --pv-deco-display: block;
    --pv-deco-ratio: 360 / 130;
    --pv-deco-opacity: .3;
    --pv-dust: var(--inv-ornament);
    --pv-dust-opacity: .3;
    --pv-band: color-mix(in srgb, var(--inv-accent) 46%, var(--inv-bg));
    --box-bg: color-mix(in srgb, var(--inv-surface) 92%, transparent);
    --box-border: 2px solid color-mix(in srgb, var(--inv-ornament) 40%, transparent);
    --box-radius: 24px;
    --box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .35);
    --button-radius: 999px;
    --photo-radius: 34px;
    --photo-shadow: 0 0 0 7px var(--inv-surface), 0 0 0 10px color-mix(in srgb, var(--inv-ornament) 60%, transparent), 0 24px 44px -24px rgba(0, 0, 0, .45);
    --names-shadow: none;
    --amb-image: url(../../img/invitations/ornaments/copilarie-star.svg);
    --amb-anim: inv-twinkle;
    --amb-size: 13px;
    --amb-duration: 6s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .85;
    --pv-cover-anim: inv-bokeh;
    --pv-in-time: .95s;
    --hero-corner-opacity: 1;
}

.inv-c--copilarie.inv--dark {
    --pv-dust-opacity: .6;
    --box-bg: color-mix(in srgb, var(--inv-surface) 82%, 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));
}

.inv-c--copilarie .orn--divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: var(--pv-divider-ratio);
    --orn-width: 66%;
    --orn-max: 270px;
    --orn-fill: var(--inv-ornament);
}

.inv-c--copilarie .orn--heading {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: var(--pv-divider-ratio);
    --orn-width: 42%;
    --orn-max: 170px;
    --orn-margin: -8px auto 24px;
    --orn-fill: var(--inv-ornament);
}

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

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

/* ================================================================================================================
   FARMYARD AND MEADOW
   ================================================================================================================ */

/* ========== Puișor: an egg that cracks on the cover, a chick that peeks out of its shell ========== */

.inv--puisor {
    --f-display: "Comfortaa", "Segoe UI", sans-serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Comfortaa", "Segoe UI", sans-serif;
    --names-weight: 700;
    --names-size: clamp(2.8rem, 14.6cqi, 5.8rem);
    --names-line: 1.04;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --amp-style: normal;
    --kicker-font: "Caveat", cursive;
    --kicker-size: 1.5rem;
    --kicker-weight: 600;
    --kicker-spacing: 0;
    --kicker-transform: none;
    --heading-weight: 700;
    --heading-size: 1.8rem;
    --body-weight: 400;
    --pv-sky:
        radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--inv-ornament) 70%, #fff) 0 min(7cqi, 42px), color-mix(in srgb, var(--inv-ornament) 30%, transparent) min(7.4cqi, 44px), transparent min(22cqi, 130px)),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 86%, var(--inv-surface)), var(--inv-bg) 72%);
    --pv-far: url(../../img/invitations/ornaments/copilarie-clouds.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-surface) 92%, transparent);
    --pv-far-h: clamp(70px, 22cqi, 130px);
    --pv-far-bottom: calc(100% - var(--pv-far-h) - 26px);
    --pv-near: url(../../img/invitations/ornaments/copilarie-daisies.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-surface)), var(--inv-primary) 48%, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-text)));
    --pv-near-h: clamp(70px, 22cqi, 130px);
    --hero-pad: clamp(200px, 60cqi, 320px) 8px calc(var(--pv-near-h) + 40px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/copilarie-heart.svg);
    --amb-ratio: 30 / 28;
    --amb-anim: inv-bubble;
    --amb-size: 12px;
    --amb-duration: 16s;
    --amb-fill: color-mix(in srgb, var(--inv-primary) 50%, var(--inv-ornament));
    --amb-opacity: .7;
    --pv-in: scale(.9);
    --pv-open: none;
    --pv-door-display: block;
    --pv-door-fill:
        radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--inv-surface) 90%, #fff) 0 18%, transparent 46%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament)), color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-accent)));
}

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

/* the big egg of the cover: the two doors are its halves; it wobbles, then cracks and the halves fall apart */
.inv--puisor .inv-envelope__door--l,
.inv--puisor .inv-envelope__door--r {
    -webkit-mask: url(../../img/invitations/ornaments/copilarie-egg-half.svg) right center / auto min(66vh, 104vw) no-repeat;
    mask: url(../../img/invitations/ornaments/copilarie-egg-half.svg) right center / auto min(66vh, 104vw) no-repeat;
    animation: copilarie-wobble 2.6s ease-in-out infinite;
}

.inv--puisor .inv-envelope.is-opening .inv-envelope__door--l,
.inv--puisor .inv-envelope.is-opening .inv-envelope__door--r {
    animation: none;
}

.inv--puisor .inv-envelope.is-opening .inv-envelope__door--l,
.inv--puisor .inv-envelope.is-opening .inv-envelope__door--r {
    transform: translate(-46%, 24%) rotate(-34deg);
}

/* the chick in its shell above the name: it comes up and wobbles */
.inv--puisor .inv-hero__corner--tl {
    display: block;
    top: clamp(24px, 7cqi, 50px);
    left: calc(50% - var(--pv-chick) / 2);
    width: var(--pv-chick);
    --pv-chick: min(58cqi, 290px);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-chick.svg);
    --hero-corner-ratio: 204 / 196;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-ornament) 0 58%, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-accent)) 59%);
    transform-origin: 50% 90%;
    animation: copilarie-wobble 3s ease-in-out infinite;
}

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

html.inv-js .inv--puisor .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tl {
    animation: copilarie-peek 1.4s cubic-bezier(.3, 1.5, .5, 1) .1s both, copilarie-wobble 3s ease-in-out 1.5s infinite;
}

/* ========== Oiță: a lamb in a meadow of daisies, soft clouds sliding across the sky ========== */

.inv--oita {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Dancing Script", cursive;
    --names-weight: 600;
    --names-size: clamp(3.4rem, 18cqi, 7rem);
    --names-line: 1;
    --names-color: var(--inv-primary);
    --amp-size: .44em;
    --kicker-spacing: .4em;
    --heading-font: "Dancing Script", cursive;
    --heading-weight: 600;
    --heading-size: 2.6rem;
    --body-weight: 400;
    --closing-font: "Dancing Script", cursive;
    --pv-lamb: min(46cqi, 250px);
    --pv-sky:
        radial-gradient(ellipse 60% 30% at 50% 38%, color-mix(in srgb, var(--inv-surface) 94%, transparent), transparent 74%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 88%, var(--inv-ornament)), var(--inv-bg) 70%);
    --pv-far: url(../../img/invitations/ornaments/copilarie-clouds.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-surface) 94%, transparent);
    --pv-far-h: clamp(80px, 24cqi, 140px);
    --pv-far-bottom: calc(100% - var(--pv-far-h) - 26px);
    --pv-near: url(../../img/invitations/ornaments/copilarie-daisies.svg);
    --pv-near-fill: linear-gradient(180deg, var(--inv-surface) 0 22%, color-mix(in srgb, var(--inv-primary) 54%, var(--inv-ornament)) 46%, var(--inv-primary));
    --pv-near-h: clamp(80px, 24cqi, 140px);
    --hero-pad: 64px 8px calc(var(--pv-near-h) * .5 + var(--pv-lamb) * .79 + 30px);
    --amb-image: url(../../img/invitations/ornaments/copilarie-heart.svg);
    --amb-ratio: 30 / 28;
    --amb-anim: inv-bubble;
    --amb-size: 11px;
    --amb-duration: 18s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .7;
    --pv-in: scale(.92);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        radial-gradient(circle at calc(100% - 20px) 50%, var(--inv-surface) 0 52px, transparent 53px) 0 0 / 100% 84px,
        radial-gradient(circle at calc(100% - 70px) 50%, var(--inv-surface) 0 44px, transparent 45px) 0 42px / 100% 84px,
        linear-gradient(90deg, transparent calc(100% - 92px), var(--inv-surface) calc(100% - 92px)),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-ornament)), color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface)));
}

/* the cover: two banks of cloud that part */
html.inv-js .inv--oita .inv-envelope:not(:has(.inv-envelope__photo)) {
    background: transparent;
}

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

.inv--oita .inv-envelope.is-opening .inv-envelope__door--l,
.inv--oita .inv-envelope.is-opening .inv-envelope__door--r {
    transform: translateX(-104%) scale(1.1);
}

/* the clouds drift across the sky: one tile wider than the screen, moved by exactly one tile */
.inv--oita .inv-hero__frame {
    width: calc(100cqi + var(--pv-far-h) * 4.01);
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    --pv-tile: calc(var(--pv-far-h) * -4);
    animation: inv-slide 40s linear infinite;
}

/* the lamb stands in the meadow and hops */
.inv--oita .inv-hero__corner--bl {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .42);
    left: calc(50% - var(--pv-lamb) / 2);
    width: var(--pv-lamb);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-lamb.svg);
    --hero-corner-ratio: 222 / 176;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text)), color-mix(in srgb, var(--inv-primary) 80%, var(--inv-text)));
    transform-origin: 50% 100%;
    animation: copilarie-hop 3.4s ease-in-out infinite;
}

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

html.inv-js .inv--oita .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl {
    animation: copilarie-come 1.3s cubic-bezier(.2, .7, .2, 1) .1s both, copilarie-hop 3.4s ease-in-out 1.4s infinite;
}

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

/* ========== Albinuță: bees flying over honeycomb and wild flowers ========== */

.inv--albinuta {
    --f-display: "Caveat", cursive;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Caveat", cursive;
    --names-weight: 600;
    --names-size: clamp(3.6rem, 19cqi, 7.6rem);
    --names-line: .96;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --amp-style: normal;
    --kicker-font: "Nunito", "Segoe UI", sans-serif;
    --kicker-weight: 700;
    --heading-weight: 600;
    --heading-size: 2.6rem;
    --body-weight: 400;
    --text-display-font: "Lora", Georgia, serif;
    --pv-sky:
        radial-gradient(ellipse 60% 34% at 50% 44%, color-mix(in srgb, var(--inv-surface) 94%, transparent), transparent 74%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)), var(--inv-bg) 66%);
    --pv-far: none;
    --pv-near: url(../../img/invitations/ornaments/copilarie-flowers.svg);
    --pv-near-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament)) 40%, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-text)));
    --pv-near-h: clamp(80px, 24cqi, 140px);
    --hero-pad: clamp(130px, 38cqi, 210px) 8px calc(var(--pv-near-h) + 40px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/copilarie-bee.svg);
    --amb-ratio: 46 / 34;
    --amb-size: 26px;
    --amb-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-text)), var(--inv-primary));
    --amb-opacity: 1;
    --pv-cover-anim: inv-firefly;
    --pv-in-odd: translateX(-50px) rotate(-2deg);
    --pv-in-even: translateX(50px) rotate(2deg);
    --pv-open: translateX(104%);
    --pv-open-opacity: 1;
    --pv-deco: url(../../img/invitations/ornaments/copilarie-comb.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .22;
}

.inv--albinuta .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/copilarie-honeycomb.svg);
    --texture-size: 52px auto;
    --texture-opacity: .12;
    --texture-fill: var(--inv-ornament);
}

/* the bees wander on their own paths and beat their wings, only over the top of the page */
.inv--albinuta .inv__ambient i {
    top: calc(var(--amb-y) * .6);
    animation: inv-flutter 14s ease-in-out infinite, inv-flap .3s ease-in-out infinite;
}

.inv--albinuta .inv__ambient i:nth-child(2n) {
    display: none;
}

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

/* honeycombs hang at the top corners, honey dripping */
.inv--albinuta .inv-hero__corner--tl,
.inv--albinuta .inv-hero__corner--tr {
    display: block;
    top: -10px;
    width: min(40cqi, 220px);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-comb.svg);
    --hero-corner-ratio: 1;
    --hero-corner-fill: linear-gradient(160deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-primary)));
}

.inv--albinuta .inv-hero__corner--tl {
    left: -6%;
}

.inv--albinuta .inv-hero__corner--tr {
    right: -8%;
    width: min(30cqi, 170px);
    transform: rotate(90deg);
}

/* a bee above the name, hovering */
.inv--albinuta .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/copilarie-bee.svg);
    --orn-ratio: 46 / 34;
    --orn-width: min(20cqi, 96px);
    --orn-max: 96px;
    --orn-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, var(--inv-text)), var(--inv-primary));
    --orn-margin: 0 auto 8px;
    --pv-orn-anim: copilarie-hover;
    --pv-orn-time: 2.6s;
}

/* ========== Broscuță: a frog on a lily pad, rings spreading on the water ========== */

.inv--broscuta {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-weight: 600;
    --names-size: clamp(2.8rem, 14.6cqi, 5.8rem);
    --names-line: 1.04;
    --names-color: var(--inv-primary);
    --amp-size: .44em;
    --amp-style: italic;
    --kicker-weight: 700;
    --heading-weight: 600;
    --heading-size: 2rem;
    --body-weight: 500;
    --pv-frog: min(54cqi, 290px);
    --pv-sky:
        radial-gradient(ellipse 70% 30% at 50% 36%, color-mix(in srgb, var(--inv-surface) 92%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-surface)) 0, var(--inv-bg) 46%, color-mix(in srgb, var(--inv-ornament) 30%, var(--inv-bg)) 70%, color-mix(in srgb, var(--inv-ornament) 40%, var(--inv-bg)));
    --pv-far: none;
    --pv-near: url(../../img/invitations/ornaments/copilarie-lilypads.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, var(--inv-text)), var(--inv-primary) 60%, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-bg)) 84%);
    --pv-near-h: clamp(70px, 22cqi, 130px);
    --hero-pad: 64px 8px calc(var(--pv-near-h) * .62 + var(--pv-frog) * .73 + 40px);
    --amb-image: none;
    --amb-radius: 50%;
    --amb-anim: inv-firefly;
    --amb-size: 7px;
    --amb-duration: 10s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .9;
    --pv-in: scale(.9);
    --pv-open: scale(.04);
    --pv-open-opacity: 0;
}

.inv--broscuta .inv__ambient i {
    top: calc(40% + var(--amb-y) * .4);
}

/* the frog sits on its lily pad and bobs on the water */
.inv--broscuta .inv-hero__corner--bl {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .62);
    left: calc(50% - var(--pv-frog) / 2);
    width: var(--pv-frog);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-frog.svg);
    --hero-corner-ratio: 220 / 160;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-primary) 0 74%, color-mix(in srgb, var(--inv-primary) 50%, var(--inv-ornament)) 75%);
    animation: copilarie-bob 3.2s ease-in-out infinite;
}

/* two rings spread from the pad, one after the other */
.inv--broscuta .inv-hero__corner--tl,
.inv--broscuta .inv-hero__corner--tr {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .62 - var(--pv-frog) * .06);
    left: calc(50% - var(--pv-frog) * .65);
    right: auto;
    width: calc(var(--pv-frog) * 1.3);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-ripple.svg);
    --hero-corner-ratio: 200 / 60;
    --hero-corner-fill: color-mix(in srgb, var(--inv-primary) 80%, var(--inv-surface));
    animation: copilarie-ripple 3.6s ease-out infinite;
}

.inv--broscuta .inv-hero__corner--tr {
    animation-delay: -1.8s;
}

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

html.inv-js .inv--broscuta .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl {
    animation: copilarie-jump 1.2s cubic-bezier(.3, 1.4, .5, 1) .15s both, copilarie-bob 3.2s ease-in-out 1.35s infinite;
}

/* ================================================================================================================
   WOODS, SAVANNA, SEA AND ICE
   ================================================================================================================ */

/* ========== Elefănțel: a little elephant blowing soap bubbles from its trunk ========== */

.inv--elefantel {
    --f-display: "Nunito", "Segoe UI", sans-serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Nunito", "Segoe UI", sans-serif;
    --names-weight: 700;
    --names-size: clamp(2.8rem, 15cqi, 6rem);
    --names-line: 1.02;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --amp-style: normal;
    --kicker-font: "Caveat", cursive;
    --kicker-size: 1.5rem;
    --kicker-weight: 600;
    --kicker-spacing: 0;
    --kicker-transform: none;
    --heading-weight: 700;
    --heading-size: 1.9rem;
    --body-weight: 400;
    --pv-el: min(56cqi, 300px);
    --pv-sky:
        radial-gradient(ellipse 60% 30% at 50% 34%, color-mix(in srgb, var(--inv-surface) 94%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-ornament)), var(--inv-bg) 74%);
    --pv-far: url(../../img/invitations/ornaments/copilarie-clouds.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-surface) 92%, transparent);
    --pv-far-h: clamp(70px, 22cqi, 130px);
    --pv-far-bottom: calc(100% - var(--pv-far-h) - 26px);
    --pv-near: url(../../img/invitations/ornaments/copilarie-hills.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-accent)), var(--inv-bg));
    --pv-near-h: clamp(50px, 16cqi, 96px);
    --hero-pad: 60px 8px calc(var(--pv-near-h) * .55 + var(--pv-el) * .742 + 34px);
    --amb-image: url(../../img/invitations/ornaments/copilarie-bubble.svg);
    --amb-anim: inv-bubble;
    --amb-size: 26px;
    --amb-duration: 15s;
    --amb-fill: linear-gradient(135deg, var(--inv-primary), var(--inv-ornament) 60%, var(--inv-surface));
    --amb-opacity: .8;
    --pv-cover-anim: inv-bubble;
    --pv-in: scale(.9);
    --pv-open: none;
    --pv-bloom-display: block;
    --pv-bloom: color-mix(in srgb, var(--inv-surface) 80%, #fff);
    --pv-deco: url(../../img/invitations/ornaments/copilarie-bubble.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .2;
}

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

/* the elephant on the hill, trunk up; two bubbles leave its trunk again and again */
.inv--elefantel .inv-hero__corner--bl {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .55);
    left: calc(50% - var(--pv-el) * .82);
    width: var(--pv-el);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-elephant.svg);
    --hero-corner-ratio: 264 / 196;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-text)));
    transform-origin: 50% 100%;
    animation: copilarie-breathe 3s ease-in-out infinite;
}

.inv--elefantel .inv-hero__corner--tr,
.inv--elefantel .inv-hero__corner--br {
    display: block;
    top: auto;
    right: auto;
    bottom: calc(var(--pv-near-h) * .55 + var(--pv-el) * .465);
    left: calc(50% + var(--pv-el) * .047);
    width: calc(var(--pv-el) * .16);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-bubble.svg);
    --hero-corner-ratio: 1;
    --hero-corner-fill: linear-gradient(135deg, var(--inv-primary), var(--inv-ornament));
    animation: copilarie-blow 3.4s ease-out infinite;
}

.inv--elefantel .inv-hero__corner--br {
    animation-delay: -1.7s;
    animation-duration: 3.8s;
}

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

html.inv-js .inv--elefantel .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl {
    animation: copilarie-come 1.4s cubic-bezier(.2, .7, .2, 1) .1s both, copilarie-breathe 3s ease-in-out 1.5s infinite;
}

/* ========== Girafă: a giraffe that peeks in at the edge of the screen; acacias of the savanna ========== */

.inv--girafa {
    --f-display: "Yeseva One", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Yeseva One", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.6rem, 13.8cqi, 5.6rem);
    --names-line: 1.06;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --amp-style: normal;
    --kicker-weight: 700;
    --heading-weight: 400;
    --heading-size: 2rem;
    --body-weight: 400;
    --pv-gir: min(38cqi, 210px);
    --pv-sky:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--inv-ornament) 70%, #fff) 0 min(8cqi, 46px), color-mix(in srgb, var(--inv-ornament) 28%, transparent) min(8.4cqi, 48px), transparent min(26cqi, 150px)),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)), var(--inv-bg) 70%);
    --pv-far: url(../../img/invitations/ornaments/copilarie-acacia.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-primary) 40%, var(--inv-accent));
    --pv-far-h: clamp(90px, 28cqi, 170px);
    --pv-near: url(../../img/invitations/ornaments/copilarie-hills.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(46px, 14cqi, 86px);
    --hero-pad: clamp(170px, 46cqi, 240px) 8px calc(var(--pv-far-h) * .6 + 50px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/copilarie-oak-leaf.svg);
    --amb-ratio: 30 / 40;
    --amb-anim: inv-breeze;
    --amb-size: 13px;
    --amb-duration: 15s;
    --amb-fill: color-mix(in srgb, var(--inv-primary) 50%, var(--inv-ornament));
    --amb-opacity: .7;
    --pv-in-odd: translateX(-56px);
    --pv-in-even: translateX(56px);
    --pv-open: translateY(-104%);
    --pv-open-opacity: 1;
}

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

/* the giraffe leans in from the right and nods */
.inv--girafa .inv-hero__corner--tr {
    display: block;
    top: 14px;
    right: calc(var(--pv-gir) * -.08);
    width: var(--pv-gir);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-giraffe.svg);
    --hero-corner-ratio: 200 / 424;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary)));
    transform-origin: 70% 100%;
    animation: copilarie-nod 5s ease-in-out infinite;
}

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

html.inv-js .inv--girafa .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tr {
    animation: copilarie-peek-side 1.6s cubic-bezier(.3, 1.3, .5, 1) .2s both, copilarie-nod 5s ease-in-out 1.8s infinite;
}

/* ========== Vulpiță: a little fox in the woods, leaves falling; the cover parts like a curtain of leaves ========== */

.inv--vulpita {
    --f-display: "Fraunces", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Fraunces", Georgia, serif;
    --names-weight: 600;
    --names-style: italic;
    --names-size: clamp(2.8rem, 14.4cqi, 5.8rem);
    --names-line: 1.04;
    --names-color: var(--inv-primary);
    --amp-size: .44em;
    --kicker-font: "Caveat", cursive;
    --kicker-size: 1.5rem;
    --kicker-weight: 600;
    --kicker-spacing: 0;
    --kicker-transform: none;
    --heading-style: italic;
    --heading-weight: 600;
    --body-weight: 400;
    --pv-fox: min(40cqi, 220px);
    --pv-sky:
        radial-gradient(ellipse 60% 30% at 50% 34%, color-mix(in srgb, var(--inv-surface) 90%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)), var(--inv-bg) 68%);
    --pv-far: url(../../img/invitations/ornaments/copilarie-forest.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-primary) 36%, var(--inv-accent));
    --pv-far-h: clamp(110px, 34cqi, 200px);
    --pv-near: url(../../img/invitations/ornaments/copilarie-hills.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(50px, 16cqi, 96px);
    --hero-pad: 64px 8px calc(var(--pv-near-h) * .5 + var(--pv-fox) * .85 + 30px);
    --amb-image: url(../../img/invitations/ornaments/copilarie-oak-leaf.svg);
    --amb-ratio: 30 / 40;
    --amb-anim: inv-petal;
    --amb-size: 17px;
    --amb-duration: 14s;
    --amb-fill: linear-gradient(160deg, var(--inv-ornament), var(--inv-primary));
    --amb-opacity: .85;
    --pv-in-odd: translateX(-50px) rotate(-2deg);
    --pv-in-even: translateX(50px) rotate(2deg);
    --pv-open: none;
    --pv-door-display: block;
    --pv-door-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 46%, var(--inv-accent)), color-mix(in srgb, var(--inv-ornament) 72%, var(--inv-accent)));
}

/* the cover: a curtain of leaves in two halves, which part and fall away while the cover fades */
.inv--vulpita .inv-envelope__door--l,
.inv--vulpita .inv-envelope__door--r {
    -webkit-mask: url(../../img/invitations/ornaments/copilarie-oak-leaf.svg) 0 0 / 30px 38px, url(../../img/invitations/ornaments/copilarie-oak-leaf.svg) 15px 19px / 30px 38px;
    mask: url(../../img/invitations/ornaments/copilarie-oak-leaf.svg) 0 0 / 30px 38px, url(../../img/invitations/ornaments/copilarie-oak-leaf.svg) 15px 19px / 30px 38px;
}

.inv--vulpita .inv-envelope.is-opening .inv-envelope__door--l,
.inv--vulpita .inv-envelope.is-opening .inv-envelope__door--r {
    transform: translate(-104%, 14%) rotate(-7deg);
}

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

/* the fox sits on the hill to the side of the name, breathing */
.inv--vulpita .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .5);
    right: auto;
    left: calc(50% - var(--pv-fox) * .56);
    width: var(--pv-fox);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-fox.svg);
    --hero-corner-ratio: 248 / 210;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-ornament), var(--inv-primary) 70%);
    transform-origin: 50% 100%;
    animation: copilarie-breathe 3.6s ease-in-out infinite;
}

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

html.inv-js .inv--vulpita .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--br {
    animation: copilarie-come 1.4s cubic-bezier(.2, .7, .2, 1) .1s both, copilarie-breathe 3.6s ease-in-out 1.5s infinite;
}

/* ========== Balenă: a whale blowing a spout of water between waves that move; the cover goes down like a wave ========== */

.inv--balena {
    --f-display: "Quicksand", "Segoe UI", sans-serif;
    --f-body: "Quicksand", "Segoe UI", sans-serif;
    --f-names: "Quicksand", "Segoe UI", sans-serif;
    --names-weight: 700;
    --names-size: clamp(2.8rem, 15cqi, 6rem);
    --names-line: 1.02;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --amp-style: normal;
    --kicker-weight: 700;
    --heading-weight: 700;
    --heading-size: 1.9rem;
    --body-weight: 500;
    --pv-wh: min(62cqi, 330px);
    --pv-sky:
        radial-gradient(ellipse 60% 30% at 50% 30%, color-mix(in srgb, var(--inv-surface) 92%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 84%, var(--inv-surface)), var(--inv-bg) 56%, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-bg)) 80%);
    --pv-far: url(../../img/invitations/ornaments/copilarie-waves.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-bg));
    --pv-far-h: clamp(34px, 11cqi, 64px);
    --pv-far-bottom: calc(var(--pv-near-h) * .7);
    --pv-near: url(../../img/invitations/ornaments/copilarie-waves.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament)), var(--inv-primary));
    --pv-near-h: clamp(50px, 16cqi, 96px);
    --hero-pad: 60px 8px calc(var(--pv-near-h) * .4 + var(--pv-wh) * .88 + 34px);
    --amb-image: url(../../img/invitations/ornaments/copilarie-bubble.svg);
    --amb-anim: inv-bubble;
    --amb-size: 14px;
    --amb-duration: 16s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .6;
    --pv-in: translateY(40px);
    --pv-open: translateY(104%);
    --pv-open-opacity: 1;
    --pv-deco: url(../../img/invitations/ornaments/copilarie-drop.svg);
    --pv-deco-ratio: 24 / 32;
    --pv-deco-opacity: .2;
}

.inv--balena.inv--dark {
    --pv-sky:
        radial-gradient(circle at 80% 14%, color-mix(in srgb, var(--inv-primary) 80%, #fff) 0 min(6cqi, 34px), transparent min(6.4cqi, 36px)),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 56%, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-bg)));
    --pv-near-fill: linear-gradient(180deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-bg)));
}

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

/* the sea: both rows of waves slide, each one tile wider than the screen, the near row the other way */
.inv--balena .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: inv-slide 11s linear infinite;
}

.inv--balena .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: inv-slide 7s linear infinite reverse;
}

/* the whale rides the waves, its spout rises and falls with it */
.inv--balena .inv-hero__corner--bl {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .4);
    left: calc(50% - var(--pv-wh) / 2);
    width: var(--pv-wh);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-whale.svg);
    --hero-corner-ratio: 284 / 156;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-text)));
    animation: copilarie-bob 4s ease-in-out infinite;
}

.inv--balena .inv-hero__corner--tl {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .4 + var(--pv-wh) * .4);
    left: calc(50% - var(--pv-wh) * .4);
    width: calc(var(--pv-wh) * .3);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-spout.svg);
    --hero-corner-ratio: 100 / 110;
    --hero-corner-fill: color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary));
    transform-origin: 50% 100%;
    animation: copilarie-bob 4s ease-in-out infinite, copilarie-spurt 4s ease-out infinite;
}

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

html.inv-js .inv--balena .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl {
    animation: copilarie-surface 1.6s cubic-bezier(.2, .7, .2, 1) .1s both, copilarie-bob 4s ease-in-out 1.7s infinite;
}

html.inv-js .inv--balena .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--tl {
    animation: copilarie-bob 4s ease-in-out 1.7s infinite, copilarie-spurt 4s ease-out 1.7s infinite;
}

/* ========== Pinguin: penguins on the ice, one sliding across on its belly; the ice of the cover splits ========== */

.inv--pinguin {
    --f-display: "Poppins", "Segoe UI", sans-serif;
    --f-body: "Poppins", "Segoe UI", sans-serif;
    --f-names: "Poppins", "Segoe UI", sans-serif;
    --names-weight: 600;
    --names-size: clamp(2.6rem, 14cqi, 5.6rem);
    --names-line: 1.04;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --amp-style: normal;
    --kicker-weight: 600;
    --heading-weight: 600;
    --heading-size: 1.8rem;
    --body-weight: 400;
    --pv-peng: min(30cqi, 160px);
    --pv-sky:
        radial-gradient(ellipse 80% 30% at 50% 10%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-ornament)), var(--inv-surface) 60%, var(--inv-bg));
    --pv-far: url(../../img/invitations/ornaments/copilarie-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-surface) 80%, var(--inv-accent));
    --pv-far-h: clamp(80px, 26cqi, 150px);
    --pv-near: url(../../img/invitations/ornaments/copilarie-ice.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-surface)), color-mix(in srgb, var(--inv-ornament) 80%, var(--inv-primary)));
    --pv-near-h: clamp(60px, 18cqi, 110px);
    --hero-pad: 60px 8px calc(var(--pv-near-h) * .6 + var(--pv-peng) * 1.3 + 30px);
    --amb-image: url(../../img/invitations/ornaments/copilarie-snowflake.svg);
    --amb-anim: inv-snow;
    --amb-size: 14px;
    --amb-duration: 15s;
    --amb-fill: color-mix(in srgb, var(--inv-ornament) 70%, var(--inv-primary));
    --amb-opacity: .75;
    --pv-in: scale(.92);
    --pv-open: none;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(115deg, transparent 30%, color-mix(in srgb, #fff 50%, transparent) 40%, transparent 48%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, #fff), color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-accent)));
}

/* the two halves of the ice keep a jagged edge where they split; the cover fades as they drift apart */
.inv--pinguin .inv-envelope__door--l,
.inv--pinguin .inv-envelope__door--r {
    width: 51.5%;
    -webkit-mask: url(../../img/invitations/ornaments/copilarie-crack.svg) right center / auto 100% no-repeat, linear-gradient(#000, #000) left / calc(100% - 20px) 100% no-repeat;
    mask: url(../../img/invitations/ornaments/copilarie-crack.svg) right center / auto 100% no-repeat, linear-gradient(#000, #000) left / calc(100% - 20px) 100% no-repeat;
}

.inv--pinguin .inv-envelope.is-opening .inv-envelope__door--l,
.inv--pinguin .inv-envelope.is-opening .inv-envelope__door--r {
    transform: translate(-104%, 6%) rotate(-6deg);
}

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

/* a penguin stands on the ice and waddles; another slides across on its belly now and then */
.inv--pinguin .inv-hero__corner--bl {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .62);
    left: calc(50% - var(--pv-peng) / 2);
    width: var(--pv-peng);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-penguin.svg);
    --hero-corner-ratio: 140 / 180;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text)), var(--inv-text));
    transform-origin: 50% 100%;
    animation: copilarie-waddle 1.6s ease-in-out infinite;
}

.inv--pinguin .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .66);
    right: auto;
    left: 50%;
    margin-left: -50cqi;
    width: calc(var(--pv-peng) * 1.2);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-penguin-slide.svg);
    --hero-corner-ratio: 182 / 80;
    --hero-corner-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text)), var(--inv-text));
    animation: copilarie-slide 10s linear infinite;
}

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

html.inv-js .inv--pinguin .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl {
    animation: copilarie-come 1.2s cubic-bezier(.2, .7, .2, 1) .1s both, copilarie-waddle 1.6s ease-in-out 1.3s infinite;
}

/* ================================================================================================================
   ADVENTURES
   ================================================================================================================ */

/* ========== Dinozaur: a friendly dinosaur beside its egg, ferns and volcanoes far away ========== */

.inv--dinozaur {
    --f-display: "Amatic SC", "Segoe UI", sans-serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Amatic SC", "Segoe UI", sans-serif;
    --names-weight: 700;
    --names-size: clamp(3.6rem, 20cqi, 8rem);
    --names-line: .96;
    --names-spacing: .04em;
    --names-color: var(--inv-primary);
    --amp-size: .5em;
    --amp-style: normal;
    --kicker-font: "Amatic SC", "Segoe UI", sans-serif;
    --kicker-size: 1.5rem;
    --kicker-weight: 700;
    --kicker-spacing: .14em;
    --heading-weight: 700;
    --heading-size: 2.8rem;
    --body-weight: 400;
    --text-display-font: "Nunito", "Segoe UI", sans-serif;
    --message-style: normal;
    --family-font: "Nunito", "Segoe UI", sans-serif;
    --pv-dino: min(62cqi, 330px);
    --pv-sky:
        radial-gradient(ellipse 60% 30% at 50% 34%, color-mix(in srgb, var(--inv-surface) 90%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 80%, var(--inv-ornament)), var(--inv-bg) 66%);
    --pv-far: url(../../img/invitations/ornaments/copilarie-volcano.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-primary) 34%, var(--inv-accent));
    --pv-far-h: clamp(100px, 30cqi, 180px);
    --pv-near: url(../../img/invitations/ornaments/copilarie-ferns.svg);
    --pv-near-fill: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 80%, var(--inv-ornament)), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-text)));
    --pv-near-h: clamp(70px, 22cqi, 130px);
    --hero-pad: 60px 8px calc(var(--pv-near-h) * .42 + var(--pv-dino) * .7 + 34px);
    --amb-image: none;
    --amb-radius: 50%;
    --amb-anim: inv-bokeh;
    --amb-size: 8px;
    --amb-duration: 12s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .7;
    --pv-in-odd: translateX(-50px);
    --pv-in-even: translateX(50px);
    --pv-open: scale(1.3);
    --pv-open-opacity: 0;
    --pv-deco: url(../../img/invitations/ornaments/copilarie-dino-egg.svg);
    --pv-deco-ratio: 90 / 112;
    --pv-deco-opacity: .18;
}

/* the dinosaur walks in among the ferns; its egg rocks beside it */
.inv--dinozaur .inv-hero__corner--bl {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .42);
    left: calc(50% - var(--pv-dino) * .66);
    width: var(--pv-dino);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-dino.svg);
    --hero-corner-ratio: 284 / 200;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-text)));
    transform-origin: 50% 100%;
    animation: copilarie-stomp 2.4s ease-in-out infinite;
}

.inv--dinozaur .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .42);
    right: auto;
    left: calc(50% + var(--pv-dino) * .36);
    width: calc(var(--pv-dino) * .24);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-dino-egg.svg);
    --hero-corner-ratio: 90 / 112;
    --hero-corner-fill: linear-gradient(160deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 60%, var(--inv-primary)));
    transform-origin: 50% 100%;
    animation: copilarie-rock 2.2s ease-in-out infinite;
}

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

html.inv-js .inv--dinozaur .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--bl {
    animation: copilarie-walk-in 1.8s cubic-bezier(.2, .7, .2, 1) .1s both, copilarie-stomp 2.4s ease-in-out 1.9s infinite;
}

/* ========== Rachetă: a rocket that lifts off the cover; stars and planets on the first screen ========== */

.inv--racheta {
    --f-display: "Outfit", "Segoe UI", sans-serif;
    --f-body: "Outfit", "Segoe UI", sans-serif;
    --f-names: "Outfit", "Segoe UI", sans-serif;
    --names-weight: 600;
    --names-size: clamp(2.4rem, 13cqi, 5.4rem);
    --names-transform: uppercase;
    --names-spacing: .06em;
    --names-line: 1.06;
    --names-color: var(--inv-primary);
    --amp-size: .44em;
    --amp-style: normal;
    --kicker-weight: 600;
    --kicker-spacing: .5em;
    --heading-weight: 600;
    --heading-size: 1.7rem;
    --heading-transform: uppercase;
    --heading-spacing: .12em;
    --body-weight: 400;
    --pv-rocket: min(22cqi, 120px);
    --pv-sky:
        radial-gradient(ellipse 70% 36% at 50% 100%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 92%, var(--inv-primary)), var(--inv-bg) 78%);
    --pv-far: url(../../img/invitations/ornaments/copilarie-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-ornament));
    --pv-far-h: clamp(60px, 18cqi, 110px);
    --pv-near: none;
    --hero-pad: clamp(220px, 60cqi, 330px) 8px calc(var(--pv-far-h) * .6 + 50px);
    --hero-justify: flex-start;
    --amb-image: url(../../img/invitations/ornaments/copilarie-star.svg);
    --amb-anim: inv-twinkle;
    --amb-size: 12px;
    --amb-duration: 5s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .95;
    --pv-cover-anim: inv-twinkle;
    --pv-in: scale(.88);
    --pv-open: none;
    --pv-open-opacity: 0;
    --pv-deco: url(../../img/invitations/ornaments/copilarie-planet.svg);
    --pv-deco-ratio: 140 / 90;
    --pv-deco-opacity: .2;
}

.inv--racheta.inv--dark {
    --pv-sky:
        radial-gradient(ellipse 70% 36% at 50% 100%, color-mix(in srgb, var(--inv-ornament) 26%, transparent), transparent 76%),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 70%);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 80%, var(--inv-bg));
}

.inv--racheta .inv__ambient i:nth-child(7n) {
    animation-name: inv-shoot;
    animation-duration: 9s;
}

/* the cover: the rocket stands at the foot of the screen; at the tap it lifts off and the cover goes dark */
.inv--racheta .inv-envelope__scene::after {
    left: 50%;
    bottom: 3%;
    display: block;
    width: min(15vh, 26vw);
    height: auto;
    aspect-ratio: 120 / 216;
    margin-left: calc(min(15vh, 26vw) / -2);
    border-radius: 0;
    background: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament)));
    -webkit-mask: url(../../img/invitations/ornaments/copilarie-rocket.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/copilarie-rocket.svg) center / contain no-repeat;
    opacity: 1;
    transform: none;
    transition: transform 1.5s cubic-bezier(.55, 0, .9, .45) .1s;
    animation: copilarie-rumble .18s linear infinite;
}

.inv--racheta .inv-envelope.is-opening .inv-envelope__scene::after {
    opacity: 1;
    transform: translateY(-130vh);
}

/* the rocket hovers at the side of the first screen, its flame flickering; a planet floats at the other side */
.inv--racheta .inv-hero__corner--tr {
    display: block;
    top: clamp(20px, 6cqi, 46px);
    right: auto;
    left: calc(50% + min(18cqi, 200px));
    width: var(--pv-rocket);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-rocket.svg);
    --hero-corner-ratio: 120 / 216;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, var(--inv-ornament)));
    animation: copilarie-hover 3s ease-in-out infinite;
}

.inv--racheta .inv-hero__corner--br {
    display: block;
    top: calc(clamp(20px, 6cqi, 46px) + var(--pv-rocket) * 1.7);
    bottom: auto;
    right: auto;
    left: calc(50% + min(18cqi, 200px) + var(--pv-rocket) * .25);
    width: calc(var(--pv-rocket) * .5);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-flame.svg);
    --hero-corner-ratio: 60 / 100;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 50%, #f06a3a));
    transform-origin: 50% 0;
    animation: copilarie-hover 3s ease-in-out infinite, copilarie-flicker .22s ease-in-out infinite alternate;
}

.inv--racheta .inv-hero__corner--tl {
    display: block;
    top: clamp(40px, 14cqi, 110px);
    left: max(2%, calc(50% - min(44cqi, 330px)));
    width: min(36cqi, 190px);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-planet.svg);
    --hero-corner-ratio: 140 / 90;
    --hero-corner-fill: linear-gradient(160deg, var(--inv-ornament), color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-primary)));
    animation: copilarie-float 7s ease-in-out infinite;
}

/* ========== Trenuleț: a toy train that crosses the screen on the hills, puffing; the cover leaves like a wagon ========== */

.inv--trenulet {
    --f-display: "Nunito", "Segoe UI", sans-serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Pacifico", cursive;
    --names-weight: 400;
    --names-size: clamp(2.8rem, 14.4cqi, 5.8rem);
    --names-line: 1.2;
    --names-color: var(--inv-primary);
    --amp-font: "Nunito", "Segoe UI", sans-serif;
    --amp-size: .36em;
    --amp-style: normal;
    --kicker-weight: 700;
    --heading-font: "Pacifico", cursive;
    --heading-weight: 400;
    --heading-size: 2rem;
    --body-weight: 400;
    --closing-font: "Pacifico", cursive;
    --pv-train: min(112cqi, 640px);
    --pv-sky:
        radial-gradient(ellipse 60% 30% at 50% 34%, color-mix(in srgb, var(--inv-surface) 92%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-ornament)), var(--inv-bg) 70%);
    --pv-far: url(../../img/invitations/ornaments/copilarie-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-ornament) 40%, var(--inv-accent));
    --pv-far-h: clamp(90px, 28cqi, 170px);
    --pv-near: url(../../img/invitations/ornaments/copilarie-track.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text));
    --pv-near-h: clamp(22px, 6cqi, 34px);
    --pv-near-size: auto 100%;
    --hero-pad: 60px 8px calc(var(--pv-near-h) * .5 + var(--pv-train) * .42 + 30px);
    --amb-image: url(../../img/invitations/ornaments/copilarie-cloud.svg);
    --amb-ratio: 64 / 40;
    --amb-anim: inv-glide;
    --amb-size: 46px;
    --amb-duration: 40s;
    --amb-fill: var(--inv-surface);
    --amb-opacity: .9;
    --pv-in-odd: translateX(-70px);
    --pv-in-even: translateX(70px);
    --pv-open: translateX(-104%);
    --pv-open-opacity: 1;
    --pv-deco: url(../../img/invitations/ornaments/copilarie-puff.svg);
    --pv-deco-ratio: 60 / 44;
    --pv-deco-opacity: .22;
}

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

.inv--trenulet .inv__ambient i:nth-child(2n) {
    display: none;
}

/* the train runs from one side of the page to the other; its puffs of smoke ride with the chimney */
.inv--trenulet .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .5 - var(--pv-train) * .027);
    right: auto;
    left: 50%;
    margin-left: -50cqi;
    width: var(--pv-train);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-train.svg);
    --hero-corner-ratio: 520 / 150;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-text)));
    animation: copilarie-train 14s linear -2s infinite;
}

.inv--trenulet .inv-hero__corner--tr {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .5 + var(--pv-train) * .2);
    right: auto;
    left: 50%;
    margin-left: calc(-50cqi + var(--pv-train) * .68);
    width: calc(var(--pv-train) * .12);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-puff.svg);
    --hero-corner-ratio: 60 / 44;
    --hero-corner-fill: color-mix(in srgb, var(--inv-surface) 70%, var(--inv-ornament));
    animation: copilarie-train 14s linear -2s infinite, copilarie-puff 1.4s ease-out infinite;
}

/* ========== Jucării: toy blocks fall one by one and spell the child's name ========== */

.inv--jucarii {
    --f-display: "Josefin Sans", "Segoe UI", sans-serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Josefin Sans", "Segoe UI", sans-serif;
    --names-weight: 600;
    --names-size: clamp(2rem, 9.4cqi, 4.2rem);
    --names-transform: uppercase;
    --names-line: 1.5;
    --names-color: var(--inv-on-primary);
    --names-gap: .1em .3em;
    --amp-size: .8em;
    --amp-style: normal;
    --amp-color: var(--inv-primary);
    --kicker-weight: 600;
    --heading-weight: 600;
    --heading-size: 1.8rem;
    --body-weight: 400;
    --pv-sky:
        radial-gradient(circle, color-mix(in srgb, var(--inv-ornament) 30%, transparent) 0 3px, transparent 3.5px) 0 0 / 34px 34px,
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 60%, var(--inv-surface)), var(--inv-bg) 80%);
    --pv-far: none;
    --pv-near: none;
    --hero-pad: clamp(170px, 46cqi, 240px) 8px 90px;
    --hero-justify: flex-start;
    --amb-image: none;
    --amb-radius: 3px;
    --amb-anim: inv-confetti;
    --amb-size: 9px;
    --amb-duration: 12s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .85;
    --pv-letter-anim: copilarie-block;
    --pv-letter-step: 120ms;
    --pv-in: scale(.9);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(var(--inv-surface), var(--inv-surface)) 50% 46% / min(84%, 420px) 46% no-repeat,
        linear-gradient(var(--inv-ornament), var(--inv-ornament)) 50% 46% / calc(min(84%, 420px) + 14px) calc(46% + 14px) no-repeat,
        linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, #000) 0 14px, transparent 14px),
        repeating-linear-gradient(90deg, var(--inv-primary) 0 34px, color-mix(in srgb, var(--inv-primary) 82%, #fff) 34px 68px);
    --pv-deco: url(../../img/invitations/ornaments/copilarie-toys.svg);
    --pv-deco-ratio: 270 / 166;
    --pv-deco-opacity: .2;
}

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

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

/* the lid of the toy box: one panel that flips up on its top edge */
html.inv-js .inv--jucarii .inv-envelope:not(:has(.inv-envelope__photo)) {
    background: transparent;
}

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

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

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

.inv--jucarii .inv-envelope.is-opening .inv-envelope__door--l {
    transform: perspective(1400px) rotateX(-115deg);
}

/* every letter of the name is a toy block; the colours take turns */
.inv--jucarii .inv-letter {
    margin: .04em;
    padding: .08em .2em .02em;
    border-radius: .14em;
    background: var(--inv-primary);
    box-shadow: inset 0 -.08em 0 color-mix(in srgb, #000 22%, transparent), 0 .06em .12em color-mix(in srgb, #000 18%, transparent);
    color: var(--inv-on-primary);
}

.inv--jucarii .inv-letter:nth-child(3n + 2) {
    background: var(--inv-ornament);
    color: var(--inv-text);
}

.inv--jucarii .inv-letter:nth-child(3n) {
    background: var(--inv-accent);
    color: var(--inv-text);
}

/* toys above the name, bouncing */
.inv--jucarii .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/copilarie-toys.svg);
    --orn-ratio: 270 / 166;
    --orn-width: min(46cqi, 230px);
    --orn-max: 230px;
    --orn-fill: linear-gradient(160deg, var(--inv-primary), var(--inv-ornament) 70%);
    --orn-margin: 0 auto 14px;
    --pv-orn-anim: copilarie-bounce;
    --pv-orn-time: 2.4s;
}

.inv--jucarii .inv-hero__corner--tl {
    display: block;
    top: clamp(24px, 7cqi, 50px);
    left: 50%;
    width: min(70cqi, 380px);
    margin-left: calc(min(70cqi, 380px) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-deco.svg);
    --hero-corner-ratio: 360 / 130;
    --hero-corner-fill: var(--inv-ornament);
    --hero-corner-opacity: .7;
}

/* ========== Castel: a castle of a fairy tale with bunting; the drawbridge of the cover lowers ========== */

.inv--castel {
    --f-display: "Cinzel", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Cinzel Decorative", Georgia, serif;
    --names-weight: 700;
    --names-size: clamp(2.4rem, 12.4cqi, 5rem);
    --names-line: 1.1;
    --names-color: var(--inv-primary);
    --amp-font: "Great Vibes", cursive;
    --amp-size: .8em;
    --amp-style: normal;
    --amp-color: var(--inv-ornament);
    --kicker-font: "Cinzel", Georgia, serif;
    --kicker-spacing: .3em;
    --heading-font: "Cinzel Decorative", Georgia, serif;
    --heading-weight: 700;
    --heading-size: 1.7rem;
    --body-weight: 400;
    --text-display-font: "Lora", Georgia, serif;
    --family-font: "Lora", Georgia, serif;
    --pv-castle: min(84cqi, 460px);
    --pv-sky:
        radial-gradient(ellipse 60% 30% at 50% 30%, color-mix(in srgb, var(--inv-surface) 90%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 90%, var(--inv-ornament)), var(--inv-bg) 70%);
    --pv-far: url(../../img/invitations/ornaments/copilarie-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-ornament) 40%, var(--inv-accent));
    --pv-far-h: clamp(70px, 22cqi, 130px);
    --pv-near: url(../../img/invitations/ornaments/copilarie-hills.svg);
    --pv-near-fill: var(--inv-bg);
    --pv-near-h: clamp(40px, 12cqi, 76px);
    --hero-pad: 80px 8px calc(var(--pv-near-h) * .35 + var(--pv-castle) * .82 + 24px);
    --amb-image: url(../../img/invitations/ornaments/copilarie-star.svg);
    --amb-anim: inv-sparkle;
    --amb-size: 12px;
    --amb-duration: 4.4s;
    --amb-fill: var(--inv-ornament);
    --amb-opacity: .95;
    --pv-cover-anim: inv-twinkle;
    --pv-open: none;
    --pv-open-opacity: 0;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 70%, var(--inv-primary)) 0 3px, transparent 3px calc(100% - 3px), color-mix(in srgb, var(--inv-text) 70%, var(--inv-primary)) calc(100% - 3px)),
        linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--inv-text) 60%, transparent) 18% calc(18% + 4px), transparent calc(18% + 4px) 80%, color-mix(in srgb, var(--inv-text) 60%, transparent) 80% calc(80% + 4px), transparent calc(80% + 4px)),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-primary) 60%, #6b4a2b) 0 11px, color-mix(in srgb, var(--inv-primary) 50%, #4f3520) 11px 13px);
}

.inv--castel.inv--dark {
    --pv-sky:
        radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--inv-primary) 80%, #fff) 0 min(6cqi, 34px), transparent min(6.4cqi, 36px)),
        linear-gradient(180deg, var(--pv-night), var(--inv-bg) 70%);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 80%, var(--inv-bg));
}

/* the cover: the castle stands behind the names; its drawbridge closes the gate and lowers at the tap */
.inv--castel .inv-envelope__scene::before {
    left: 50%;
    right: auto;
    bottom: 0;
    width: min(100vw, 640px);
    height: auto;
    aspect-ratio: 360 / 294;
    margin-left: calc(min(100vw, 640px) / -2);
    background: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text)));
    opacity: .3;
    -webkit-mask: url(../../img/invitations/ornaments/copilarie-castle.svg) center bottom / contain no-repeat;
    mask: url(../../img/invitations/ornaments/copilarie-castle.svg) center bottom / contain no-repeat;
}

.inv--castel .inv-envelope__door--l {
    top: auto;
    bottom: calc(min(100vw, 640px) * .0136);
    left: 50%;
    width: calc(min(100vw, 640px) * .17);
    height: calc(min(100vw, 640px) * .22);
    margin-left: calc(min(100vw, 640px) * -.085);
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    box-shadow: none;
    transform-origin: 50% 100%;
}

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

.inv--castel .inv-envelope.is-opening .inv-envelope__door--l {
    transform: perspective(700px) rotateX(-84deg);
}

/* bunting across the top that swings; the castle at the foot of the screen */
.inv--castel .inv-hero__corner--tl {
    display: block;
    top: 0;
    left: 50%;
    width: min(100cqi, 1100px);
    margin-left: calc(min(100cqi, 1100px) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-bunting.svg);
    --hero-corner-ratio: 400 / 50;
    --hero-corner-fill: linear-gradient(90deg, var(--inv-primary), var(--inv-ornament) 50%, var(--inv-primary));
    transform-origin: 50% 0;
    animation: copilarie-swing 4s ease-in-out infinite;
}

.inv--castel .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: calc(var(--pv-near-h) * .35);
    right: auto;
    left: calc(50% - var(--pv-castle) / 2);
    width: var(--pv-castle);
    --hero-corner-image: url(../../img/invitations/ornaments/copilarie-castle.svg);
    --hero-corner-ratio: 360 / 294;
    --hero-corner-fill: linear-gradient(180deg, var(--inv-primary), color-mix(in srgb, var(--inv-primary) 60%, var(--inv-text)));
}

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

html.inv-js .inv--castel .inv-hero:has(.inv-hero__content.is-in) .inv-hero__corner--br {
    animation: copilarie-rise 1.8s cubic-bezier(.2, .7, .2, 1) .1s both;
}

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

/* An egg (or a chick in its shell) that wobbles on the spot. */
@keyframes copilarie-wobble {
    0%, 100% { rotate: 0deg; }
    20% { rotate: -3deg; }
    40% { rotate: 3deg; }
    55% { rotate: -1.5deg; }
    70% { rotate: 0deg; }
}

/* The chick comes up out of its shell. */
@keyframes copilarie-peek {
    from { translate: 0 30%; scale: .8; opacity: 0; }
    to { translate: 0 0; scale: 1; opacity: var(--hero-corner-opacity, 1); }
}

/* The giraffe leans in from the side. */
@keyframes copilarie-peek-side {
    from { translate: 70% 10%; opacity: 0; }
    to { translate: 0 0; opacity: var(--hero-corner-opacity, 1); }
}

@keyframes copilarie-nod {
    0%, 100% { rotate: 0deg; }
    30% { rotate: -4deg; }
    45% { rotate: -1deg; }
    60% { rotate: -3deg; }
}

/* An animal comes onto the scene: up from the grass. */
@keyframes copilarie-come {
    from { translate: 0 30%; scale: .85; opacity: 0; }
    to { translate: 0 0; scale: 1; opacity: var(--hero-corner-opacity, 1); }
}

@keyframes copilarie-rise {
    from { translate: 0 18%; opacity: 0; }
    to { translate: 0 0; opacity: var(--hero-corner-opacity, 1); }
}

/* The whale surfaces. */
@keyframes copilarie-surface {
    from { translate: 0 40%; opacity: 0; }
    to { translate: 0 0; opacity: var(--hero-corner-opacity, 1); }
}

/* The frog jumps onto its pad. */
@keyframes copilarie-jump {
    from { translate: 0 -60%; scale: .7; opacity: 0; }
    60% { translate: 0 4%; scale: 1.04 .94; opacity: var(--hero-corner-opacity, 1); }
    to { translate: 0 0; scale: 1; opacity: var(--hero-corner-opacity, 1); }
}

/* The dinosaur walks in from the side. */
@keyframes copilarie-walk-in {
    from { translate: -40% 0; opacity: 0; }
    to { translate: 0 0; opacity: var(--hero-corner-opacity, 1); }
}

/* Breathing, hopping, bobbing on the water, stomping, waddling. */
@keyframes copilarie-breathe {
    0%, 100% { scale: 1 1; }
    50% { scale: 1.02 1.04; }
}

@keyframes copilarie-hop {
    0%, 60%, 100% { translate: 0 0; scale: 1 1; }
    70% { translate: 0 0; scale: 1.04 .95; }
    80% { translate: 0 -12%; scale: .98 1.03; }
    90% { translate: 0 0; scale: 1.03 .97; }
}

@keyframes copilarie-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 6%; }
}

@keyframes copilarie-stomp {
    0%, 100% { rotate: 0deg; translate: 0 0; }
    25% { rotate: -1.5deg; translate: 0 -2%; }
    50% { rotate: 0deg; translate: 0 0; }
    75% { rotate: 1.5deg; translate: 0 -2%; }
}

@keyframes copilarie-waddle {
    0%, 100% { rotate: -6deg; }
    50% { rotate: 6deg; }
}

@keyframes copilarie-rock {
    0%, 100% { rotate: -7deg; }
    50% { rotate: 7deg; }
}

/* A penguin slides across on its belly, then the ice is empty for a while. */
@keyframes copilarie-slide {
    0% { translate: -110% 0; }
    55% { translate: 100cqi 0; }
    100% { translate: 100cqi 0; }
}

/* The train crosses the whole page, then the line is empty for a moment. */
@keyframes copilarie-train {
    0% { translate: -100% 0; }
    80% { translate: 100cqi 0; }
    100% { translate: 100cqi 0; }
}

/* A puff of smoke leaves the chimney and fades. */
@keyframes copilarie-puff {
    from { transform: translateY(0) scale(.4); opacity: 0; }
    25% { opacity: .9; }
    to { transform: translateY(-150%) scale(1.3); opacity: 0; }
}

/* A soap bubble leaves the trunk, floats up and pops. */
@keyframes copilarie-blow {
    0% { transform: translate(0, 0) scale(.2); opacity: 0; }
    15% { opacity: .95; }
    85% { opacity: .9; }
    100% { transform: translate(140%, -520%) scale(1.15); opacity: 0; }
}

/* The spout of the whale: up, held, then down. */
@keyframes copilarie-spurt {
    0%, 40% { scale: 1 0; opacity: 0; }
    52% { scale: 1 1.1; opacity: 1; }
    72% { scale: 1 1; opacity: .9; }
    86%, 100% { scale: 1 .2; opacity: 0; }
}

/* A ring on the water spreads and fades. */
@keyframes copilarie-ripple {
    from { scale: .35; opacity: .9; }
    to { scale: 1.25; opacity: 0; }
}

@keyframes copilarie-hover {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@keyframes copilarie-float {
    0%, 100% { translate: 0 0; rotate: -4deg; }
    50% { translate: 0 8px; rotate: 4deg; }
}

@keyframes copilarie-flicker {
    from { scale: .9 .8; opacity: .85; }
    to { scale: 1.05 1.08; opacity: 1; }
}

/* The rocket shakes before it lifts off. */
@keyframes copilarie-rumble {
    0%, 100% { translate: 0 0; }
    25% { translate: -1px 1px; }
    75% { translate: 1px 0; }
}

@keyframes copilarie-bounce {
    0%, 100% { translate: 0 0; scale: 1 1; }
    40% { translate: 0 -8px; scale: .98 1.02; }
    60% { translate: 0 0; scale: 1.03 .97; }
}

@keyframes copilarie-swing {
    0%, 100% { rotate: -1deg; }
    50% { rotate: 1deg; }
}

/* A toy block falls into its place in the name and settles with a bounce. */
@keyframes copilarie-block {
    0% { opacity: 0; transform: translateY(-180%) rotate(-14deg); }
    55% { opacity: 1; transform: translateY(8%) rotate(3deg); }
    75% { transform: translateY(-6%) rotate(-1deg); }
    100% { opacity: 1; transform: none; }
}