/* Collection "Cer înstelat": the night sky (stars, constellations, the moon and its phases, a comet, the Milky Way)
   and the black-tie evening (midnight blue, chocolate and gold, a dinner jacket, champagne, the opera), as a cover
   collection on the shared motion engine (css/invitation-motion.css, ADR-0069). The engine draws the cover, the scene,
   the particles, the entrances, the parallax and the wide layout; this file keeps the taste of the collection and its
   14 models, each a block of --pv-* variables plus the slots it switches on (docs/invitation-templates.md §9).
   The page is a sky: a field of stars lies on the backdrop and the first screen keeps its upper sky transparent, so
   the stars show through; the cover has its own field of stars. Every cover leaves in its own way, with the
   collection's own keyframes (cer-instelat-*): a flight into the stars, the night falling, a dome opening, an eclipse,
   a comet, a wheel closing like an iris, a foil wrapper peeling, lapels and a bow tie, a cork, lanterns drifting
   apart, a galaxy turning, a chandelier dimming before the curtain, a window opening, an orbit.
   With a photograph the cover is the photograph and leaves with the engine's slow zoom: the drawn decorations and the
   cover's own exits stay off then. The drawings come from tools/invitations/cer-instelat-svg.pl. */

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

.inv-c--cer-instelat {
    --pv-divider: url(../../img/invitations/ornaments/cer-instelat-divider.svg);
    --pv-divider-ratio: 300 / 30;
    --pv-deco: url(../../img/invitations/ornaments/cer-instelat-swirl.svg);
    --pv-deco-display: block;
    --pv-deco-ratio: 360 / 130;
    --pv-deco-opacity: .42;
    --pv-gold: linear-gradient(120deg, color-mix(in srgb, var(--inv-primary) 80%, #000), color-mix(in srgb, var(--inv-primary) 50%, #fff) 44%, var(--inv-primary) 62%, color-mix(in srgb, var(--inv-primary) 85%, #000));
    --box-bg: color-mix(in srgb, var(--inv-surface) 84%, transparent);
    --box-border: 1px solid color-mix(in srgb, var(--inv-ornament) 42%, transparent);
    --box-radius: 4px;
    --box-shadow: 0 0 0 5px color-mix(in srgb, var(--inv-surface) 36%, transparent), 0 24px 50px -30px rgba(0, 0, 0, .8);
    --button-radius: 2px;
    --kicker-spacing: .3em;
    --date-spacing: .3em;
    --amb-image: url(../../img/invitations/ornaments/cer-instelat-star4.svg);
    --amb-anim: inv-twinkle;
    --amb-size: 12px;
    --amb-duration: 6s;
    --amb-fill: var(--inv-text);
    --amb-opacity: .9;
    --pv-cover-anim: inv-twinkle;
    --pv-dust: color-mix(in srgb, var(--inv-text) 70%, var(--inv-ornament));
}

.inv-c--cer-instelat:not(.inv--dark) {
    --amb-fill: var(--inv-ornament);
    --pv-dust: var(--inv-ornament);
    --box-shadow: 0 0 0 5px color-mix(in srgb, var(--inv-accent) 50%, transparent), 0 24px 50px -32px rgba(0, 0, 0, .3);
}

/* stars all over the page, behind everything: the skies of the first screens leave their upper part transparent */
.inv-c--cer-instelat .inv__texture {
    display: block;
    --texture-image: url(../../img/invitations/textures/cer-instelat-stars.svg);
    --texture-size: 320px;
    --texture-opacity: .55;
    --texture-fill: var(--inv-text);
}

.inv-c--cer-instelat:not(.inv--dark) .inv__texture {
    --texture-opacity: .3;
    --texture-fill: var(--inv-ornament);
}

/* the cover has its own field of stars (the slot of the far silhouette, which the covers of this collection do not need) */
.inv-c--cer-instelat .inv-envelope__scene::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    background: var(--inv-text);
    -webkit-mask: url(../../img/invitations/textures/cer-instelat-stars.svg) 0 0 / 320px repeat;
    mask: url(../../img/invitations/textures/cer-instelat-stars.svg) 0 0 / 320px repeat;
    opacity: .6;
}

.inv-c--cer-instelat:not(.inv--dark) .inv-envelope__scene::before {
    background: var(--inv-ornament);
    opacity: .4;
}

.inv-c--cer-instelat .orn--divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: var(--pv-divider-ratio);
    --orn-width: 64%;
    --orn-max: 280px;
}

.inv-c--cer-instelat .orn--heading {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/cer-instelat-star4.svg);
    --orn-ratio: 1;
    --orn-width: 22px;
    --orn-max: 22px;
    --orn-margin: -4px auto 22px;
    --orn-fill: var(--inv-primary);
}

/* a thread of stars beside the card, at two of its corners */
.inv-c--cer-instelat .inv-corner--tr,
.inv-c--cer-instelat .inv-corner--bl {
    display: block;
    --corner-image: url(../../img/invitations/ornaments/cer-instelat-swirl.svg);
    --corner-size: 60%;
    --corner-max: 290px;
    --corner-ratio: 360 / 130;
    --corner-opacity: .34;
}

.inv-c--cer-instelat .inv-corner--tr {
    top: 120px;
    right: -14px;
}

.inv-c--cer-instelat .inv-corner--bl {
    bottom: 190px;
    left: -14px;
}

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

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

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

/* ================================================================================================================
   CONSTELAȚIE: stars around the names join into constellations, line after line; the cover flies into the stars
   ================================================================================================================ */

.inv--constelatie {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Cormorant Garamond", Georgia, serif;
    --names-weight: 300;
    --names-size: clamp(2.4rem, 12.4cqi, 5.2rem);
    --names-transform: uppercase;
    --names-spacing: .14em;
    --names-line: 1.14;
    --amp-font: "Pinyon Script", cursive;
    --amp-style: normal;
    --amp-size: .9em;
    --amp-color: var(--inv-primary);
    --heading-weight: 300;
    --heading-transform: uppercase;
    --heading-spacing: .16em;
    --heading-size: 1.6rem;
    --body-weight: 400;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --pv-const: min(96cqi, 520px);
    --pv-sky:
        radial-gradient(ellipse 90% 36% at 50% 100%, color-mix(in srgb, var(--inv-accent) 80%, transparent), transparent 76%),
        radial-gradient(ellipse 50% 40% at 50% 48%, color-mix(in srgb, var(--inv-ornament) 9%, transparent), transparent 72%);
    --hero-pad: 70px 8px 90px;
    --amb-size: 9px;
    --amb-duration: 5s;
    --pv-letter-step: 70ms;
    --pv-in: scale(.94);
    --pv-in-time: 1.4s;
    --pv-open: scale(2.6);
    --pv-open-opacity: 0;
}

/* four drawings of the same size laid on each other, around the names: the stars, then three groups of lines */
.inv--constelatie .inv-hero__corner--tl,
.inv--constelatie .inv-hero__corner--tr,
.inv--constelatie .inv-hero__corner--bl,
.inv--constelatie .inv-hero__corner--br {
    display: block;
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: var(--pv-const);
    max-width: none;
    margin: calc(var(--pv-const) * 440 / 360 / -2) 0 0 calc(var(--pv-const) / -2);
    --hero-corner-ratio: 360 / 440;
    --hero-corner-fill: var(--inv-ornament);
    --hero-corner-opacity: .75;
    transform: none;
}

.inv--constelatie .inv-hero__corner--tl {
    --hero-corner-image: url(../../img/invitations/ornaments/cer-instelat-constellation-stars.svg);
    --hero-corner-fill: var(--inv-text);
    --hero-corner-opacity: 1;
    animation: inv-pulse 5s ease-in-out infinite;
}

.inv--constelatie:not(.inv--dark) .inv-hero__corner--tl {
    --hero-corner-fill: var(--inv-primary);
}

.inv--constelatie .inv-hero__corner--tr { --hero-corner-image: url(../../img/invitations/ornaments/cer-instelat-constellation-a.svg); }
.inv--constelatie .inv-hero__corner--bl { --hero-corner-image: url(../../img/invitations/ornaments/cer-instelat-constellation-b.svg); }
.inv--constelatie .inv-hero__corner--br { --hero-corner-image: url(../../img/invitations/ornaments/cer-instelat-constellation-c.svg); }

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

html.inv-js .inv--constelatie .inv-hero:has(.is-in) .inv-hero__corner--tr,
html.inv-js .inv--constelatie .inv-hero:has(.is-in) .inv-hero__corner--bl,
html.inv-js .inv--constelatie .inv-hero:has(.is-in) .inv-hero__corner--br {
    animation: cer-instelat-trace 1.8s ease-out 1.3s both, cer-instelat-glimmer 7s ease-in-out 3.1s infinite;
}

html.inv-js .inv--constelatie .inv-hero:has(.is-in) .inv-hero__corner--bl { animation-delay: 2.3s, 4.1s; }
html.inv-js .inv--constelatie .inv-hero:has(.is-in) .inv-hero__corner--br { animation-delay: 3.3s, 5.1s; }

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

/* ================================================================================================================
   MIEZUL NOPȚII: deep blue, roofs with lit windows, a golden moon that rises; the cover falls like the night
   ================================================================================================================ */

.inv--miezul-noptii {
    --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.4cqi, 6rem);
    --names-line: 1.06;
    --amp-style: normal;
    --amp-size: .44em;
    --amp-color: var(--inv-primary);
    --heading-style: italic;
    --heading-weight: 400;
    --pv-moon: clamp(76px, 22cqi, 150px);
    --pv-sky:
        radial-gradient(ellipse 70% 26% at 50% 100%, color-mix(in srgb, var(--inv-primary) 18%, transparent), transparent 80%),
        linear-gradient(180deg, transparent 0 34%, color-mix(in srgb, var(--inv-accent) 74%, transparent) 100%);
    --pv-far: url(../../img/invitations/ornaments/cer-instelat-rooftops.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 64%, var(--inv-bg));
    --pv-far-h: clamp(84px, 27cqi, 150px);
    --pv-near: url(../../img/invitations/ornaments/cer-instelat-rooftops.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-bg) 66%, #000);
    --pv-near-h: clamp(110px, 33cqi, 200px);
    --pv-near-size: auto 100%;
    --hero-pad: calc(var(--pv-moon) + 70px) 8px calc(var(--pv-near-h) + 44px);
    --amb-size: 10px;
    --pv-open: translateY(104%);
    --pv-open-opacity: 1;
    --pv-in-odd: translateY(40px);
    --pv-in-even: translateY(40px);
}

/* every third star of the sky is drawn with five points */
.inv--miezul-noptii .inv__ambient i:nth-child(3n),
.inv--miezul-noptii .inv-envelope__scene i:nth-child(3n) {
    --amb-image: url(../../img/invitations/ornaments/cer-instelat-star5.svg);
}

.inv--miezul-noptii .inv-hero__frame {
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
    opacity: .9;
}

/* the moon: it rises once the invitation opens, then glows */
.inv--miezul-noptii .inv-hero__corner--tl {
    display: block;
    top: clamp(36px, 10cqi, 70px);
    left: auto;
    right: 13%;
    width: var(--pv-moon);
    max-width: none;
    -webkit-mask: none;
    mask: none;
    border-radius: 50%;
    background:
        radial-gradient(circle at 64% 38%, color-mix(in srgb, var(--inv-primary) 70%, #000) 0 6%, transparent 7%),
        radial-gradient(circle at 36% 62%, color-mix(in srgb, var(--inv-primary) 74%, #000) 0 9%, transparent 10%),
        radial-gradient(circle at 58% 72%, color-mix(in srgb, var(--inv-primary) 80%, #000) 0 4%, transparent 5%),
        radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--inv-primary) 30%, #fff), var(--inv-primary) 56%, color-mix(in srgb, var(--inv-primary) 74%, var(--inv-ornament)));
    box-shadow: 0 0 40px 12px color-mix(in srgb, var(--inv-primary) 30%, transparent), 0 0 120px 40px color-mix(in srgb, var(--inv-primary) 12%, transparent);
    opacity: 1;
    animation: inv-breathe 9s ease-in-out infinite;
}

html.inv-js .inv--miezul-noptii .inv-hero:has(.is-in) .inv-hero__corner--tl {
    animation: cer-instelat-moonrise 4.6s cubic-bezier(.2, .6, .2, 1) .3s both, inv-breathe 9s ease-in-out 5s infinite;
}

/* the windows of the near roofs: lit behind the holes of the drawing, they glow and dim */
.inv--miezul-noptii .inv-hero__corner--br {
    display: block;
    top: auto;
    bottom: -1px;
    left: 50%;
    right: auto;
    width: 100cqi;
    max-width: none;
    height: var(--pv-near-h);
    margin-left: -50cqi;
    aspect-ratio: auto;
    background: color-mix(in srgb, var(--inv-primary) 80%, #fff);
    -webkit-mask: url(../../img/invitations/ornaments/cer-instelat-rooftops-windows.svg) bottom center / auto 100% repeat-x;
    mask: url(../../img/invitations/ornaments/cer-instelat-rooftops-windows.svg) bottom center / auto 100% repeat-x;
    opacity: 1;
    transform: none;
    animation: inv-pulse 6s ease-in-out infinite;
}

.inv--miezul-noptii .orn--hero-divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: 300 / 30;
    --orn-width: min(58cqi, 240px);
    --orn-max: 240px;
    --orn-fill: var(--inv-primary);
}

/* ================================================================================================================
   OBSERVATOR: the dome of an observatory opens in two; planets turn on their orbits around the names
   ================================================================================================================ */

.inv--observator {
    --f-display: "Josefin Sans", "Segoe UI", sans-serif;
    --f-body: "Josefin Sans", "Segoe UI", sans-serif;
    --f-names: "Josefin Sans", "Segoe UI", sans-serif;
    --names-weight: 300;
    --names-size: clamp(2.2rem, 11cqi, 4.6rem);
    --names-transform: uppercase;
    --names-spacing: .2em;
    --names-line: 1.2;
    --amp-font: "Pinyon Script", cursive;
    --amp-style: normal;
    --amp-size: 1.1em;
    --amp-color: var(--inv-primary);
    --heading-weight: 300;
    --heading-transform: uppercase;
    --heading-spacing: .2em;
    --heading-size: 1.5rem;
    --text-display-font: "Lora", Georgia, serif;
    --pv-orbit: min(78cqi, 460px);
    --pv-planet: radial-gradient(circle at 50% 8px, var(--inv-primary) 0 6px, color-mix(in srgb, var(--inv-primary) 30%, transparent) 7px 9px, transparent 10px);
    --pv-sky: radial-gradient(ellipse 80% 34% at 50% 100%, color-mix(in srgb, var(--inv-accent) 80%, transparent), transparent 80%);
    --pv-near: url(../../img/invitations/ornaments/cer-instelat-dome.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-bg) 64%, #000);
    --pv-near-h: clamp(92px, 28cqi, 160px);
    --hero-pad: 80px 8px calc(var(--pv-near-h) + 50px);
    --pv-orn-anim: inv-breathe;
    --pv-in: scale(.92);
    --pv-deco: url(../../img/invitations/ornaments/cer-instelat-planet.svg);
    --pv-deco-ratio: 140 / 90;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1900;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(90deg, transparent calc(100% - 9px), color-mix(in srgb, var(--inv-bg) 60%, #000) calc(100% - 9px)),
        radial-gradient(circle, color-mix(in srgb, var(--inv-text) 34%, transparent) 0 1.4px, transparent 2.4px) 6px 10px / 9vw 42px,
        repeating-linear-gradient(90deg, transparent 0 calc(9vw - 1px), color-mix(in srgb, var(--inv-text) 16%, transparent) calc(9vw - 1px) 9vw),
        radial-gradient(ellipse 90% 60% at 24% 14%, color-mix(in srgb, var(--inv-text) 16%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 72%, var(--inv-muted)), var(--inv-surface) 70%, color-mix(in srgb, var(--inv-surface) 70%, #000));
}

/* three orbits around the names, each with its planet, turning at their own pace */
.inv--observator .inv-hero__corner--tl,
.inv--observator .inv-hero__corner--tr,
.inv--observator .inv-hero__corner--bl {
    display: block;
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    max-width: none;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--inv-ornament) 42%, transparent);
    border-radius: 50%;
    -webkit-mask: none;
    mask: none;
    background: var(--pv-planet) no-repeat;
    opacity: 1;
    animation: inv-spin 34s linear infinite;
}

.inv--observator .inv-hero__corner--tl { width: calc(var(--pv-orbit) * .64); margin: calc(var(--pv-orbit) * -.32) 0 0 calc(var(--pv-orbit) * -.32); }
.inv--observator .inv-hero__corner--tr { width: var(--pv-orbit); margin: calc(var(--pv-orbit) * -.5) 0 0 calc(var(--pv-orbit) * -.5); animation-duration: 56s; animation-direction: reverse; }
.inv--observator .inv-hero__corner--bl { width: calc(var(--pv-orbit) * 1.36); margin: calc(var(--pv-orbit) * -.68) 0 0 calc(var(--pv-orbit) * -.68); animation-duration: 84s; border-style: dashed; }

.inv--observator .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/cer-instelat-planet.svg);
    --orn-ratio: 140 / 90;
    --orn-width: min(30cqi, 140px);
    --orn-max: 140px;
    --orn-fill: var(--pv-gold);
    --orn-margin: 0 auto 4px;
}

/* ================================================================================================================
   ECLIPSĂ: a ring of light around a dark disc; at the opening the disc slides away and the light floods the screen
   ================================================================================================================ */

.inv--eclipsa {
    --f-display: "Forum", Georgia, serif;
    --f-body: "Tenor Sans", "Segoe UI", sans-serif;
    --f-names: "Forum", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.4rem, 12cqi, 5rem);
    --names-transform: uppercase;
    --names-spacing: .14em;
    --names-line: 1.14;
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: 1em;
    --amp-color: var(--inv-primary);
    --heading-weight: 400;
    --heading-transform: uppercase;
    --heading-spacing: .14em;
    --heading-size: 1.7rem;
    --pv-eclipse: min(52cqi, 280px);
    --pv-corona: color-mix(in srgb, #fff 88%, var(--inv-primary));
    --pv-glow: var(--inv-primary);
    --pv-sky: radial-gradient(circle at 50% calc(48px + var(--pv-eclipse) / 2), color-mix(in srgb, var(--pv-glow) 16%, transparent), transparent calc(var(--pv-eclipse) * 1.3));
    --hero-pad: calc(var(--pv-eclipse) + 84px) 8px 96px;
    --hero-justify: flex-start;
    --amb-size: 9px;
    --pv-in: scale(.94);
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 2100;
    --pv-reveal-ms: 1400;
    --pv-bloom-display: block;
    --pv-bloom: color-mix(in srgb, var(--pv-corona) 80%, #fff);
}

.inv--eclipsa:not(.inv--dark) {
    --pv-corona: var(--inv-primary);
    --pv-glow: var(--inv-ornament);
}

/* the cover: the ring of light on the sky, the dark disc over it; the disc slides off and the light blooms */
html.inv-js .inv--eclipsa .inv-envelope:not(:has(.inv-envelope__photo)) {
    padding-top: calc(30svh + min(20vw, 15svh, 130px) + 10px);
}

.inv--eclipsa .inv-envelope:not(:has(.inv-envelope__photo))::before {
    background:
        radial-gradient(circle at 50% 30%, var(--pv-corona) 0 calc(min(20vw, 15svh, 130px) + 2px), color-mix(in srgb, var(--pv-glow) 60%, transparent) calc(min(20vw, 15svh, 130px) + 8px), color-mix(in srgb, var(--pv-glow) 18%, transparent) calc(min(20vw, 15svh, 130px) + 44px), transparent calc(min(20vw, 15svh, 130px) + 140px)),
        var(--inv-bg);
}

.inv--eclipsa .inv-envelope__scene::before {
    top: calc(30% - min(20vw, 15svh, 130px));
    bottom: auto;
    left: 50%;
    right: auto;
    width: calc(min(20vw, 15svh, 130px) * 2);
    height: auto;
    aspect-ratio: 1;
    margin-left: calc(min(20vw, 15svh, 130px) * -1);
    border-radius: 50%;
    background: var(--inv-bg);
    -webkit-mask: none;
    mask: none;
    opacity: 1;
}

.inv--eclipsa .inv-envelope__scene::after {
    top: calc(30% - 22px);
    bottom: auto;
    transition-delay: .55s;
}

.inv--eclipsa .inv-envelope.is-opening .inv-envelope__scene::before {
    animation: cer-instelat-disc-away 1.1s cubic-bezier(.5, 0, .3, 1) both;
}

/* on the first screen: the corona above the names, breathing; its rays turning; the "diamond" flashing on its rim */
.inv--eclipsa .inv-hero__corner--tl,
.inv--eclipsa .inv-hero__corner--bl {
    display: block;
    top: 48px;
    left: 50%;
    right: auto;
    bottom: auto;
    width: var(--pv-eclipse);
    max-width: none;
    aspect-ratio: 1;
    margin-left: calc(var(--pv-eclipse) / -2);
    -webkit-mask: none;
    mask: none;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, var(--inv-bg) 0 80%, var(--pv-corona) 82.5%, color-mix(in srgb, var(--pv-glow) 55%, transparent) 86%, color-mix(in srgb, var(--pv-glow) 16%, transparent) 93%, transparent 100%);
    opacity: 1;
    transform: none;
    animation: cer-instelat-corona 7s ease-in-out infinite;
}

.inv--eclipsa .inv-hero__corner--bl {
    top: calc(48px - var(--pv-eclipse) * .5);
    width: calc(var(--pv-eclipse) * 2);
    margin-left: calc(var(--pv-eclipse) * -1);
    background: repeating-conic-gradient(from 0deg, transparent 0deg 7deg, color-mix(in srgb, var(--pv-glow) 40%, transparent) 9deg 11deg, transparent 13deg 20deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 38%, #000 42%, transparent 100%);
    mask: radial-gradient(circle closest-side, transparent 0 38%, #000 42%, transparent 100%);
    opacity: .5;
    animation: inv-spin 120s linear infinite;
}

.inv--eclipsa .inv-hero__corner--tr {
    display: block;
    top: calc(48px + var(--pv-eclipse) * .5 - var(--pv-eclipse) * .41 * .707 - 16px);
    left: calc(50% + var(--pv-eclipse) * .41 * .707 - 16px);
    right: auto;
    width: 32px;
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/cer-instelat-star4.svg);
    --hero-corner-fill: var(--pv-corona);
    --hero-corner-opacity: 1;
    transform: none;
    animation: inv-sparkle 6s ease-in-out infinite;
}

/* the corona comes before the rays in the page, so the rays are laid under it */
.inv--eclipsa .inv-hero__corner--tl {
    z-index: 1;
}

.inv--eclipsa .inv-hero__corner--tr {
    z-index: 2;
}

/* ================================================================================================================
   COMETĂ: a comet crosses the cover and the cover leaves in its wake; a long comet keeps crossing the first screen
   ================================================================================================================ */

.inv--cometa {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --f-names: "Great Vibes", cursive;
    --names-weight: 400;
    --names-size: clamp(3.4rem, 18cqi, 7.2rem);
    --names-line: 1;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .34em;
    --amp-color: var(--inv-primary);
    --heading-font: "Great Vibes", cursive;
    --heading-size: 2.8rem;
    --heading-weight: 400;
    --closing-font: "Great Vibes", cursive;
    --pv-comet: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-ornament) 70%, #fff) 70%, #fff);
    --pv-sky: radial-gradient(ellipse 90% 40% at 50% 100%, color-mix(in srgb, var(--inv-accent) 80%, transparent), transparent 80%);
    --pv-far: url(../../img/invitations/ornaments/cer-instelat-ridges.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg));
    --pv-far-h: clamp(90px, 30cqi, 170px);
    --pv-near: url(../../img/invitations/ornaments/cer-instelat-hills.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-bg) 66%, #000);
    --pv-near-h: clamp(60px, 18cqi, 110px);
    --amb-size: 10px;
    --pv-in-odd: translate(-50px, 20px);
    --pv-in-even: translate(50px, 20px);
    --pv-open: translate(108%, 36%) rotate(9deg);
    --pv-open-opacity: 1;
}

/* the comet of the cover passes again and again; at the opening it streaks through and the cover follows it */
.inv--cometa .inv-envelope__scene::after {
    top: 16%;
    bottom: auto;
    left: 0;
    display: block;
    width: min(90vw, 560px);
    height: auto;
    aspect-ratio: 320 / 60;
    margin-left: 0;
    border-radius: 0;
    background: var(--pv-comet);
    -webkit-mask: url(../../img/invitations/ornaments/cer-instelat-comet.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/cer-instelat-comet.svg) center / contain no-repeat;
    opacity: 1;
    transform: none;
    transition: none;
    animation: cer-instelat-comet-pass 9s linear infinite;
}

.inv--cometa .inv-envelope.is-opening .inv-envelope__scene::after {
    opacity: 1;
    animation: cer-instelat-comet-pass 1s cubic-bezier(.6, 0, .4, 1) both;
}

.inv--cometa .inv-hero__corner--tl {
    display: block;
    top: 12%;
    left: 0;
    width: min(110cqi, 680px);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/cer-instelat-comet.svg);
    --hero-corner-ratio: 320 / 60;
    --hero-corner-fill: var(--pv-comet);
    --hero-corner-opacity: 1;
    animation: cer-instelat-comet-arc 18s linear .4s infinite;
}

.inv--cometa .inv__ambient i:nth-child(6n) {
    --amb-image: url(../../img/invitations/ornaments/cer-instelat-comet.svg);
    --amb-ratio: 320 / 60;
    width: 90px;
    top: calc(var(--amb-y) * .5);
    margin-left: 20cqi;
    animation: inv-shoot 11s linear infinite;
}

/* ================================================================================================================
   ZODIAC: a wheel of the zodiac turning slowly behind the names; the cover closes towards its centre like an iris
   ================================================================================================================ */

.inv--zodiac {
    --f-display: "Cinzel", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Cinzel Decorative", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2rem, 10.4cqi, 4.4rem);
    --names-spacing: .06em;
    --names-line: 1.2;
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: 1.2em;
    --amp-color: var(--inv-primary);
    --heading-weight: 400;
    --heading-size: 1.7rem;
    --body-weight: 400;
    --pv-wheel: min(118cqi, 760px);
    --pv-sky: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--inv-ornament) 18%, transparent), transparent calc(var(--pv-wheel) * .62));
    --hero-pad: 80px 8px 100px;
    --amb-size: 10px;
    --pv-in: rotate(-4deg) scale(.94);
    --pv-deco: url(../../img/invitations/ornaments/cer-instelat-zodiac.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .2;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1800;
}

.inv--zodiac .inv-envelope__scene::before {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(124vw, 112svh);
    height: auto;
    aspect-ratio: 1;
    margin: calc(min(124vw, 112svh) / -2) 0 0 calc(min(124vw, 112svh) / -2);
    background: var(--inv-ornament);
    -webkit-mask: url(../../img/invitations/ornaments/cer-instelat-zodiac.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/cer-instelat-zodiac.svg) center / contain no-repeat;
    opacity: .34;
    animation: inv-spin 90s linear infinite;
}

.inv--zodiac .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: cer-instelat-iris 1.5s cubic-bezier(.55, 0, .35, 1) both;
}

/* the wheel and a smaller one inside it, turning the other way */
.inv--zodiac .inv-hero__corner--tl,
.inv--zodiac .inv-hero__corner--tr {
    display: block;
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: var(--pv-wheel);
    max-width: none;
    margin: calc(var(--pv-wheel) / -2) 0 0 calc(var(--pv-wheel) / -2);
    --hero-corner-image: url(../../img/invitations/ornaments/cer-instelat-zodiac.svg);
    --hero-corner-ratio: 1;
    --hero-corner-fill: var(--inv-ornament);
    --hero-corner-opacity: .32;
    animation: inv-spin 160s linear infinite;
}

.inv--zodiac .inv-hero__corner--tr {
    width: calc(var(--pv-wheel) * .5);
    margin: calc(var(--pv-wheel) * -.25) 0 0 calc(var(--pv-wheel) * -.25);
    --hero-corner-fill: var(--inv-primary);
    --hero-corner-opacity: .16;
    animation-duration: 90s;
    animation-direction: reverse;
}

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

/* ================================================================================================================
   CIOCOLATĂ: chocolate and gold foil; the wrapper peels away from its corners; the names under a laurel wreath
   ================================================================================================================ */

.inv--ciocolata {
    --f-display: "Gilda Display", Georgia, serif;
    --f-body: "Tenor Sans", "Segoe UI", sans-serif;
    --f-names: "Gilda Display", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.4rem, 12cqi, 5rem);
    --names-transform: uppercase;
    --names-spacing: .12em;
    --names-line: 1.14;
    --amp-font: "Pinyon Script", cursive;
    --amp-style: normal;
    --amp-size: .9em;
    --amp-color: var(--inv-primary);
    --heading-weight: 400;
    --heading-size: 1.9rem;
    --pv-foil:
        linear-gradient(115deg, transparent 0 16%, rgba(255, 255, 255, .34) 21%, transparent 27% 46%, rgba(255, 255, 255, .2) 51%, transparent 57% 72%, rgba(255, 255, 255, .26) 78%, transparent 83%),
        linear-gradient(64deg, rgba(0, 0, 0, .2) 0 10%, transparent 15% 38%, rgba(0, 0, 0, .14) 45%, transparent 51% 76%, rgba(0, 0, 0, .22) 86%, transparent 92%),
        linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 82%, #fff), var(--inv-primary) 40%, color-mix(in srgb, var(--inv-primary) 70%, #000) 70%, color-mix(in srgb, var(--inv-primary) 88%, #fff));
    --pv-sky:
        radial-gradient(ellipse 70% 40% at 50% 44%, color-mix(in srgb, var(--inv-primary) 14%, transparent), transparent 74%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .24) 0 2px, rgba(255, 255, 255, .05) 2px 4px, transparent 4px 25%),
        repeating-linear-gradient(180deg, rgba(0, 0, 0, .24) 0 2px, rgba(255, 255, 255, .05) 2px 4px, transparent 4px 20%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-surface) 80%, #000), var(--inv-bg) 90%);
    --pv-near: none;
    --pv-near-fill: var(--pv-foil);
    --pv-near-h: 16px;
    --hero-pad: 64px 8px 96px;
    --amb-anim: inv-sparkle;
    --amb-size: 14px;
    --amb-duration: 4.4s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: 1;
    --pv-sheen-display: block;
    --pv-sheen: color-mix(in srgb, var(--inv-primary) 60%, #fff);
    --pv-sheen-opacity: .3;
    --pv-orn-anim: inv-breathe;
    --pv-orn-time: 8s;
    --pv-in: scale(.94);
    --pv-deco: url(../../img/invitations/ornaments/cer-instelat-laurel.svg);
    --pv-deco-ratio: 260 / 200;
    --pv-deco-opacity: .22;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1900;
    --pv-door-display: block;
    --pv-door-fill: var(--pv-foil);
    --pv-cover-ink: var(--inv-on-primary);
    --pv-cover-accent: var(--inv-on-primary);
    --box-radius: 2px;
}

/* the gold foil peels away from its outer top corners, one side after the other */
.inv--ciocolata .inv-envelope__door--r {
    scale: none;
}

.inv--ciocolata .inv-envelope.is-opening .inv-envelope__door--l {
    transform-origin: 0 0;
    animation: cer-instelat-peel-l 1.45s cubic-bezier(.5, 0, .3, 1) both;
}

.inv--ciocolata .inv-envelope.is-opening .inv-envelope__door--r {
    transform-origin: 100% 0;
    animation: cer-instelat-peel-r 1.45s cubic-bezier(.5, 0, .3, 1) .12s both;
}

.inv--ciocolata .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/cer-instelat-laurel.svg);
    --orn-ratio: 260 / 200;
    --orn-width: min(52cqi, 230px);
    --orn-max: 230px;
    --orn-fill: var(--pv-gold);
    --orn-margin: 0 auto -4px;
}

.inv--ciocolata .orn--hero-divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: 300 / 30;
    --orn-width: min(58cqi, 240px);
    --orn-max: 240px;
    --orn-fill: var(--pv-gold);
}

/* ================================================================================================================
   SMOCHING: black tie; the bow tie comes undone, the lapels swing aside, silver lights float underneath
   ================================================================================================================ */

.inv--smoching {
    --f-display: "Bodoni Moda", Georgia, serif;
    --f-body: "Montserrat", "Segoe UI", sans-serif;
    --f-names: "Bodoni Moda", Georgia, serif;
    --names-weight: 500;
    --names-size: clamp(2.4rem, 12.4cqi, 5.2rem);
    --names-transform: uppercase;
    --names-spacing: .08em;
    --names-line: 1.12;
    --amp-style: italic;
    --amp-size: .56em;
    --amp-color: var(--inv-primary);
    --heading-weight: 500;
    --heading-transform: uppercase;
    --heading-spacing: .12em;
    --heading-size: 1.6rem;
    --body-weight: 400;
    --pv-shirt: color-mix(in srgb, var(--inv-text) 94%, var(--inv-surface));
    --pv-lapel: color-mix(in srgb, var(--inv-surface) 70%, #fff 10%);
    --pv-sky:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 5%, transparent) 0 1px, transparent 1px 16px),
        radial-gradient(ellipse 70% 40% at 50% 42%, color-mix(in srgb, var(--inv-primary) 10%, transparent), transparent 74%),
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--inv-accent) 70%, transparent));
    --hero-pad: 70px 8px 96px;
    --amb-image: none;
    --amb-radius: 50%;
    --amb-anim: inv-bokeh;
    --amb-size: 40px;
    --amb-duration: 14s;
    --amb-fill: radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 70%, #fff), color-mix(in srgb, var(--inv-primary) 30%, transparent) 50%, transparent 70%);
    --amb-opacity: .5;
    --pv-cover-anim: inv-bokeh;
    --pv-rays-display: block;
    --pv-rays: var(--inv-primary);
    --pv-rays-opacity: .07;
    --pv-sheen-display: block;
    --pv-sheen-opacity: .2;
    --pv-orn-anim: inv-sway-soft;
    --pv-orn-time: 6s;
    --pv-in-odd: translateX(-40px);
    --pv-in-even: translateX(40px);
    --pv-deco: url(../../img/invitations/ornaments/cer-instelat-bowtie.svg);
    --pv-deco-ratio: 160 / 80;
    --pv-deco-opacity: .2;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 2100;
    --pv-reveal-ms: 1200;
    --pv-door-display: block;
    --pv-door-fill:
        linear-gradient(to bottom right, transparent 50%, var(--pv-shirt) 50%) 100% 100% / 30% 44% no-repeat,
        linear-gradient(to bottom right, transparent 38%, var(--pv-lapel) 38% 50%, transparent 50%) 100% 100% / 30% 44% no-repeat,
        linear-gradient(180deg, transparent 0 56%, var(--pv-lapel) 56%) calc(100% - 30%) 0 / 3px 100% no-repeat,
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-text) 4%, transparent) 0 1px, transparent 1px 12px),
        linear-gradient(160deg, color-mix(in srgb, var(--inv-surface) 92%, #fff), var(--inv-bg) 70%);
}

html.inv-js .inv--smoching .inv-envelope:not(:has(.inv-envelope__photo)) {
    padding-bottom: 36svh;
}

/* a half of the bow tie on each lapel, at the top of the shirt */
.inv--smoching .inv-envelope__door--l::after,
.inv--smoching .inv-envelope__door--r::after {
    content: "";
    position: absolute;
    top: calc(56% - min(14vw, 70px) * 80 / 82 / 2);
    right: -1px;
    width: min(14vw, 70px);
    aspect-ratio: 82 / 80;
    background: linear-gradient(120deg, var(--inv-bg), color-mix(in srgb, var(--inv-surface) 60%, #fff 14%) 50%, var(--inv-bg));
    -webkit-mask: url(../../img/invitations/ornaments/cer-instelat-bowtie-half.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/cer-instelat-bowtie-half.svg) center / contain no-repeat;
    transform-origin: 100% 50%;
}

.inv--smoching .inv-envelope.is-opening .inv-envelope__door--l::after,
.inv--smoching .inv-envelope.is-opening .inv-envelope__door--r::after {
    animation: cer-instelat-bow-drop .9s cubic-bezier(.5, 0, .7, .4) both;
}

.inv--smoching .inv-envelope.is-opening .inv-envelope__door--l,
.inv--smoching .inv-envelope.is-opening .inv-envelope__door--r {
    animation: cer-instelat-lapel 1.7s cubic-bezier(.5, 0, .3, 1) .25s both;
}

.inv--smoching .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/cer-instelat-bowtie.svg);
    --orn-ratio: 160 / 80;
    --orn-width: min(30cqi, 130px);
    --orn-max: 130px;
    --orn-fill: linear-gradient(120deg, color-mix(in srgb, var(--inv-primary) 60%, #000), var(--inv-primary) 45%, #fff 55%, var(--inv-primary) 65%);
    --orn-margin: 0 auto 8px;
}

/* ================================================================================================================
   ȘAMPANIE: golden bubbles rise, the cork pops; two glasses touch in a rain of bubbles
   ================================================================================================================ */

.inv--sampanie {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Jost", "Segoe UI", sans-serif;
    --f-names: "Italianno", cursive;
    --names-weight: 400;
    --names-size: clamp(3.8rem, 21cqi, 8.4rem);
    --names-line: .94;
    --names-color: var(--inv-primary);
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .3em;
    --amp-color: var(--inv-text);
    --heading-font: "Italianno", cursive;
    --heading-size: 3.2rem;
    --heading-weight: 400;
    --closing-font: "Italianno", cursive;
    --pv-bottle: min(44svh, 420px);
    --pv-sky:
        radial-gradient(ellipse 60% 40% at 50% 40%, color-mix(in srgb, var(--inv-primary) 16%, transparent), transparent 74%),
        linear-gradient(180deg, transparent 0 40%, color-mix(in srgb, var(--inv-accent) 70%, transparent));
    --hero-pad: 64px 8px 96px;
    --amb-image: url(../../img/invitations/ornaments/cer-instelat-bubble.svg);
    --amb-anim: inv-bubble;
    --amb-size: 16px;
    --amb-duration: 9s;
    --amb-fill: linear-gradient(135deg, var(--inv-primary), #fff);
    --amb-opacity: .85;
    --pv-cover-anim: inv-bubble;
    --pv-dust: var(--inv-primary);
    --pv-dust-time: 24s;
    --pv-sheen-display: block;
    --pv-sheen: color-mix(in srgb, var(--inv-primary) 60%, #fff);
    --pv-sheen-opacity: .32;
    --pv-in: translateY(50px) scale(.96);
    --pv-deco: url(../../img/invitations/ornaments/cer-instelat-bubble.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .2;
    --pv-open: scale(1.18);
    --pv-open-opacity: 0;
}

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

/* the cover: the neck of a bottle at the foot of the screen; its cork pops and the cover dissolves */
html.inv-js .inv--sampanie .inv-envelope:not(:has(.inv-envelope__photo)) {
    padding-bottom: var(--pv-bottle);
}

.inv--sampanie .inv-envelope__scene::before {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    width: calc(var(--pv-bottle) * 140 / 300);
    height: var(--pv-bottle);
    margin-left: calc(var(--pv-bottle) * 140 / 300 / -2);
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-surface) 60%, #000), color-mix(in srgb, var(--inv-surface) 70%, #fff 12%) 38%, color-mix(in srgb, var(--inv-surface) 60%, #000) 80%);
    -webkit-mask: url(../../img/invitations/ornaments/cer-instelat-bottle.svg) center bottom / contain no-repeat;
    mask: url(../../img/invitations/ornaments/cer-instelat-bottle.svg) center bottom / contain no-repeat;
    opacity: 1;
}

.inv--sampanie .inv-envelope__scene::after {
    top: auto;
    bottom: calc(var(--pv-bottle) - var(--pv-bottle) * .1 * 56 / 40 * .3);
    left: 50%;
    display: block;
    width: calc(var(--pv-bottle) * .1);
    height: auto;
    aspect-ratio: 40 / 56;
    margin-left: calc(var(--pv-bottle) * -.05);
    border-radius: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 60%, #fff), color-mix(in srgb, var(--inv-primary) 60%, #6b4a2b));
    -webkit-mask: url(../../img/invitations/ornaments/cer-instelat-cork.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/cer-instelat-cork.svg) center / contain no-repeat;
    opacity: 1;
    transform: none;
    transition: none;
}

.inv--sampanie .inv-envelope.is-opening .inv-envelope__scene::after {
    opacity: 1;
    transform: none;
    animation: cer-instelat-cork-pop .95s cubic-bezier(.2, .7, .3, 1) both;
}

/* two flutes touching, a sparkle where they meet */
.inv--sampanie .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/cer-instelat-flutes.svg);
    --orn-ratio: 220 / 190;
    --orn-width: min(40cqi, 180px);
    --orn-max: 180px;
    --orn-fill: var(--pv-gold);
    --orn-margin: 0 auto 4px;
    transform-origin: 50% 100%;
    animation: cer-instelat-clink 4.2s ease-in-out infinite;
}

/* ================================================================================================================
   LAMPIOANE: sky lanterns rise over a lake at dusk; the cover rises slowly and its lanterns drift apart
   ================================================================================================================ */

.inv--lampioane {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Birthstone", cursive;
    --names-weight: 400;
    --names-size: clamp(3.4rem, 18cqi, 7.4rem);
    --names-line: 1;
    --amp-font: "Cormorant Garamond", Georgia, serif;
    --amp-style: italic;
    --amp-size: .32em;
    --amp-color: var(--inv-primary);
    --heading-font: "Birthstone", cursive;
    --heading-size: 2.8rem;
    --heading-weight: 400;
    --closing-font: "Birthstone", cursive;
    --pv-lantern: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 70%, #ff9a3c), color-mix(in srgb, var(--inv-primary) 50%, #fff) 85%);
    --pv-water: clamp(100px, 30cqi, 180px);
    --pv-horizon: calc(100% - var(--pv-water));
    --pv-sky:
        radial-gradient(ellipse 80% 22% at 50% var(--pv-horizon), color-mix(in srgb, var(--inv-ornament) 50%, transparent), transparent 80%),
        linear-gradient(180deg, transparent 0 26%, color-mix(in srgb, var(--inv-accent) 70%, transparent) 60%, color-mix(in srgb, var(--inv-ornament) 34%, var(--inv-accent)) var(--pv-horizon), color-mix(in srgb, var(--inv-bg) 66%, var(--inv-accent)) calc(var(--pv-horizon) + 1px), var(--inv-bg) 100%);
    --pv-far: url(../../img/invitations/ornaments/cer-instelat-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-bg) 72%, var(--inv-accent));
    --pv-far-h: clamp(50px, 16cqi, 92px);
    --pv-far-bottom: calc(var(--pv-water) - 6px);
    --pv-near: url(../../img/invitations/ornaments/cer-instelat-ripples.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-ornament) 50%, var(--inv-primary));
    --pv-near-h: calc(var(--pv-water) * .86);
    --pv-near-size: auto 100%;
    --hero-pad: 64px 8px calc(var(--pv-water) + var(--pv-far-h) * .6 + 30px);
    --amb-image: url(../../img/invitations/ornaments/cer-instelat-lantern.svg);
    --amb-ratio: 44 / 62;
    --amb-anim: inv-bubble;
    --amb-size: 26px;
    --amb-duration: 24s;
    --amb-fill: var(--pv-lantern);
    --amb-opacity: .95;
    --pv-cover-anim: inv-bokeh;
    --pv-in: translateY(54px);
    --pv-in-time: 1.5s;
    --pv-deco: url(../../img/invitations/ornaments/cer-instelat-lantern.svg);
    --pv-deco-ratio: 44 / 62;
    --pv-deco-opacity: .26;
    --pv-open: translateY(-104%);
    --pv-open-opacity: 1;
}

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

/* sixteen lanterns: enough to fill the sky, few enough to leave the names in the clear */
.inv--lampioane .inv__ambient i:nth-child(3n) {
    display: none;
}

/* the reflections on the lake shimmer */
.inv--lampioane .inv-hero::after {
    opacity: .5;
    animation: inv-pulse 4s ease-in-out infinite;
}

.inv--lampioane .inv-envelope.is-opening .inv-envelope__scene i {
    animation: cer-instelat-drift-apart 1.6s cubic-bezier(.3, .6, .3, 1) both;
}

.inv--lampioane .inv-envelope__scene i:nth-child(odd) { --pop-x: -30vw; }
.inv--lampioane .inv-envelope__scene i:nth-child(even) { --pop-x: 30vw; }
.inv--lampioane .inv-envelope__scene i:nth-child(1),
.inv--lampioane .inv-envelope__scene i:nth-child(2),
.inv--lampioane .inv-envelope__scene i:nth-child(8) { --pop-x: -36vw; }
.inv--lampioane .inv-envelope__scene i:nth-child(5),
.inv--lampioane .inv-envelope__scene i:nth-child(6),
.inv--lampioane .inv-envelope__scene i:nth-child(7) { --pop-x: 36vw; }

/* ================================================================================================================
   CALEA LACTEE: the band of the Milky Way across the sky over the mountains, drifting slowly; the cover turns away
   ================================================================================================================ */

.inv--calea-lactee {
    --f-display: "Raleway", "Segoe UI", sans-serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Raleway", "Segoe UI", sans-serif;
    --names-weight: 300;
    --names-size: clamp(2rem, 10.4cqi, 4.4rem);
    --names-transform: uppercase;
    --names-spacing: .3em;
    --names-line: 1.3;
    --amp-font: "Allura", cursive;
    --amp-style: normal;
    --amp-size: 1.2em;
    --amp-color: var(--inv-primary);
    --heading-weight: 300;
    --heading-transform: uppercase;
    --heading-spacing: .24em;
    --heading-size: 1.4rem;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --pv-band-h: clamp(180px, 50cqi, 380px);
    --pv-sky: radial-gradient(ellipse 90% 30% at 50% 100%, color-mix(in srgb, var(--inv-accent) 80%, transparent), transparent 80%);
    --pv-far: url(../../img/invitations/ornaments/cer-instelat-ridges.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-bg));
    --pv-far-h: clamp(80px, 26cqi, 150px);
    --pv-near: url(../../img/invitations/ornaments/cer-instelat-ridges.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-bg) 60%, #000);
    --pv-near-h: clamp(70px, 22cqi, 130px);
    --amb-size: 8px;
    --amb-duration: 4.6s;
    --pv-in: scale(.94);
    --pv-letter-step: 80ms;
    --pv-open: rotate(-30deg) scale(1.7);
    --pv-open-opacity: 0;
}

.inv--calea-lactee .inv-hero::after {
    -webkit-mask-position: bottom left;
    mask-position: bottom left;
}

.inv--calea-lactee .inv-envelope:not(:has(.inv-envelope__photo))::before {
    background:
        linear-gradient(120deg, transparent 28%, color-mix(in srgb, var(--inv-ornament) 26%, transparent) 42%, color-mix(in srgb, var(--inv-text) 22%, transparent) 50%, color-mix(in srgb, var(--inv-ornament) 22%, transparent) 58%, transparent 72%),
        var(--pv-sky);
}

/* the band of dust, as wide as two screens, laid across the sky; it drifts along itself, one tile of dust at a time */
.inv--calea-lactee .inv-hero__corner--tl,
.inv--calea-lactee .inv-hero__corner--tr {
    display: block;
    top: 38%;
    left: 50%;
    right: auto;
    width: 180cqi;
    max-width: none;
    height: var(--pv-band-h);
    margin: calc(var(--pv-band-h) / -2) 0 0 -90cqi;
    aspect-ratio: auto;
    rotate: -24deg;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--inv-text) 74%, var(--inv-ornament)) 46%, color-mix(in srgb, var(--inv-text) 60%, var(--inv-primary)) 54%, transparent);
    -webkit-mask: url(../../img/invitations/textures/cer-instelat-milky.svg) 0 0 / 240px repeat;
    mask: url(../../img/invitations/textures/cer-instelat-milky.svg) 0 0 / 240px repeat;
    opacity: .85;
    transform: none;
    animation: cer-instelat-drift 46s linear infinite;
}

.inv--calea-lactee .inv-hero__corner--tr {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--inv-ornament) 30%, transparent) 40%, color-mix(in srgb, var(--inv-primary) 26%, transparent) 60%, transparent);
    -webkit-mask: none;
    mask: none;
    opacity: .5;
    animation: inv-pulse 9s ease-in-out infinite;
}

/* ================================================================================================================
   OPERĂ: an opera house with velvet boxes; the chandelier dims, the curtain rises, golden sparkles float
   ================================================================================================================ */

.inv--opera {
    --f-display: "Cormorant Garamond", Georgia, serif;
    --f-body: "Raleway", "Segoe UI", sans-serif;
    --f-names: "Cinzel", Georgia, serif;
    --names-weight: 400;
    --names-size: clamp(2.3rem, 11.6cqi, 4.8rem);
    --names-transform: uppercase;
    --names-spacing: .1em;
    --names-line: 1.16;
    --amp-font: "Italianno", cursive;
    --amp-style: normal;
    --amp-size: 1.1em;
    --amp-color: var(--inv-primary);
    --heading-weight: 400;
    --heading-size: 1.8rem;
    --heading-style: italic;
    --body-weight: 400;
    --text-display-font: "Cormorant Garamond", Georgia, serif;
    --pv-velvet: color-mix(in srgb, var(--inv-accent) 56%, #7a0a1e);
    --pv-sky:
        radial-gradient(ellipse 60% 40% at 50% 22%, color-mix(in srgb, var(--inv-primary) 24%, transparent), transparent 76%),
        linear-gradient(180deg, color-mix(in srgb, var(--pv-velvet) 46%, var(--inv-bg)), var(--inv-bg) 86%);
    --pv-far: url(../../img/invitations/ornaments/cer-instelat-opera-boxes.svg);
    --pv-far-fill: linear-gradient(180deg, color-mix(in srgb, var(--pv-velvet) 62%, var(--inv-primary)), color-mix(in srgb, var(--pv-velvet) 60%, var(--inv-bg)));
    --pv-far-h: clamp(120px, 40cqi, 240px);
    --pv-far-bottom: 24px;
    --pv-near: none;
    --pv-near-fill: linear-gradient(180deg, transparent, color-mix(in srgb, var(--inv-primary) 26%, var(--inv-bg)) 40%, var(--inv-bg));
    --pv-near-h: 34px;
    --hero-pad: 56px 8px calc(var(--pv-far-h) + 44px);
    --hero-justify: flex-start;
    --amb-anim: inv-sparkle;
    --amb-size: 12px;
    --amb-duration: 5s;
    --amb-fill: var(--inv-primary);
    --amb-opacity: 1;
    --pv-orn-anim: inv-breathe;
    --pv-orn-time: 7s;
    --pv-rays-display: block;
    --pv-rays: var(--inv-primary);
    --pv-rays-opacity: .08;
    --pv-in-odd: translateX(-46px);
    --pv-in-even: translateX(46px);
    --pv-deco: url(../../img/invitations/ornaments/cer-instelat-chandelier.svg);
    --pv-deco-ratio: 300 / 204;
    --pv-deco-opacity: .18;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 2300;
    --pv-reveal-ms: 1300;
}

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

/* the cover: a velvet curtain and a chandelier; the chandelier dims, then the curtain rises */
.inv--opera .inv-envelope:not(:has(.inv-envelope__photo))::before {
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, .06) 3.4vw, rgba(255, 255, 255, .09) 6vw, rgba(0, 0, 0, .1) 8.4vw, rgba(0, 0, 0, .34) 11.6vw),
        linear-gradient(180deg, color-mix(in srgb, var(--pv-velvet) 80%, #fff 6%), var(--pv-velvet) 40%, color-mix(in srgb, var(--pv-velvet) 70%, #000));
}

html.inv-js .inv--opera .inv-envelope:not(:has(.inv-envelope__photo)) {
    padding-top: min(26svh, 230px);
}

.inv--opera .inv-envelope__scene::before {
    display: none;
}

.inv--opera .inv-envelope__scene::after {
    top: 0;
    bottom: auto;
    left: 50%;
    display: block;
    width: min(64vw, 32svh, 300px);
    height: auto;
    aspect-ratio: 300 / 204;
    margin-left: calc(min(64vw, 32svh, 300px) / -2);
    border-radius: 0;
    background: var(--pv-gold);
    -webkit-mask: url(../../img/invitations/ornaments/cer-instelat-chandelier.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/cer-instelat-chandelier.svg) center / contain no-repeat;
    opacity: 1;
    transform: none;
    transition: none;
}

.inv--opera .inv-envelope.is-opening .inv-envelope__scene::after {
    transform: none;
    animation: cer-instelat-dim .7s ease-out both;
}

.inv--opera .inv-envelope.is-opening:not(:has(.inv-envelope__photo)) {
    animation: cer-instelat-curtain-up 2s cubic-bezier(.5, 0, .3, 1) both;
}

.inv--opera .orn--hero {
    display: block;
    --orn-image: url(../../img/invitations/ornaments/cer-instelat-chandelier.svg);
    --orn-ratio: 300 / 204;
    --orn-width: min(58cqi, 260px);
    --orn-max: 260px;
    --orn-fill: var(--pv-gold);
    --orn-margin: -16px auto 4px;
}

/* ================================================================================================================
   NOAPTE DE VARĂ: a warm summer night; the window opens onto the sky, the curtains move, fireflies in the garden
   ================================================================================================================ */

.inv--noapte-de-vara {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Pinyon Script", cursive;
    --names-weight: 400;
    --names-size: clamp(3rem, 16cqi, 6.4rem);
    --names-line: 1.08;
    --amp-font: "Lora", Georgia, serif;
    --amp-style: italic;
    --amp-size: .34em;
    --amp-color: var(--inv-primary);
    --kicker-font: "Lora", Georgia, serif;
    --kicker-style: italic;
    --kicker-transform: none;
    --kicker-spacing: .04em;
    --kicker-size: 1.05rem;
    --heading-style: italic;
    --heading-weight: 400;
    --closing-font: "Pinyon Script", cursive;
    --pv-wood: color-mix(in srgb, var(--inv-ornament) 36%, #5a3a24);
    --pv-sky:
        radial-gradient(ellipse 80% 30% at 50% 100%, color-mix(in srgb, var(--inv-ornament) 30%, transparent), transparent 80%),
        linear-gradient(180deg, transparent 0 34%, color-mix(in srgb, var(--inv-accent) 72%, transparent));
    --pv-far: url(../../img/invitations/ornaments/cer-instelat-hills.svg);
    --pv-far-fill: color-mix(in srgb, var(--inv-accent) 56%, var(--inv-bg));
    --pv-far-h: clamp(80px, 26cqi, 150px);
    --pv-far-bottom: calc(var(--pv-near-h) * .55);
    --pv-near: url(../../img/invitations/ornaments/cer-instelat-railing.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-bg) 55%, #000);
    --pv-near-h: clamp(60px, 18cqi, 96px);
    --hero-pad: clamp(84px, 24cqi, 120px) 8px calc(var(--pv-near-h) + var(--pv-far-h) * .5 + 40px);
    --amb-image: none;
    --amb-radius: 50%;
    --amb-anim: inv-firefly;
    --amb-size: 7px;
    --amb-duration: 9s;
    --amb-fill: radial-gradient(circle, #fff6c8, color-mix(in srgb, var(--inv-primary) 80%, transparent) 60%, transparent);
    --amb-opacity: 1;
    --pv-cover-anim: inv-twinkle;
    --pv-in-odd: translateX(-44px);
    --pv-in-even: translateX(44px);
    --pv-deco: url(../../img/invitations/ornaments/cer-instelat-star4.svg);
    --pv-deco-ratio: 1;
    --pv-deco-opacity: .2;
    --pv-open: none;
    --pv-open-opacity: 1;
    --pv-open-ms: 1900;
    --pv-door-display: block;
    --pv-pane:
        linear-gradient(var(--pv-wood), var(--pv-wood)) 0 0 / 100% 14px no-repeat,
        linear-gradient(var(--pv-wood), var(--pv-wood)) 0 100% / 100% 18px no-repeat,
        linear-gradient(var(--pv-wood), var(--pv-wood)) 0 24% / 100% 8px no-repeat,
        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .13) 38%, transparent 46% 60%, rgba(255, 255, 255, .07) 64%, transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 46%, transparent), color-mix(in srgb, var(--inv-bg) 36%, transparent));
    /* the left casement: a wide stile outside, a thin one where the two casements meet, behind the words */
    --pv-door-fill:
        linear-gradient(var(--pv-wood), var(--pv-wood)) 0 0 / 10px 100% no-repeat,
        linear-gradient(var(--pv-wood), var(--pv-wood)) 100% 0 / 3px 100% no-repeat,
        linear-gradient(var(--pv-wood), var(--pv-wood)) 52% 0 / 4px 100% no-repeat,
        var(--pv-pane);
}

.inv--noapte-de-vara .inv__ambient i {
    top: calc(36% + var(--amb-y) * .5);
}

/* the window: two casements swing out onto the night */
.inv--noapte-de-vara .inv-envelope__door--r {
    scale: none;
    background:
        linear-gradient(var(--pv-wood), var(--pv-wood)) 0 0 / 3px 100% no-repeat,
        linear-gradient(var(--pv-wood), var(--pv-wood)) 100% 0 / 10px 100% no-repeat,
        linear-gradient(var(--pv-wood), var(--pv-wood)) 48% 0 / 4px 100% no-repeat,
        var(--pv-pane);
}

.inv--noapte-de-vara .inv-envelope.is-opening .inv-envelope__door--l {
    transform-origin: 0 50%;
    animation: cer-instelat-casement-l 1.5s cubic-bezier(.5, 0, .3, 1) both;
}

.inv--noapte-de-vara .inv-envelope.is-opening .inv-envelope__door--r {
    transform-origin: 100% 50%;
    animation: cer-instelat-casement-r 1.5s cubic-bezier(.5, 0, .3, 1) .08s both;
}

/* sheer curtains at both edges of the first screen, moving in the warm air */
.inv--noapte-de-vara .inv-hero__corner--tl,
.inv--noapte-de-vara .inv-hero__corner--tr {
    display: block;
    top: -8px;
    width: clamp(48px, 14cqi, 200px);
    max-width: none;
    --hero-corner-image: url(../../img/invitations/ornaments/cer-instelat-curtain-sheer.svg);
    --hero-corner-ratio: 150 / 500;
    --hero-corner-inset: 0;
    --hero-corner-fill: color-mix(in srgb, var(--inv-text) 80%, var(--inv-ornament));
    --hero-corner-opacity: .9;
    transform-origin: 50% 0;
    animation: cer-instelat-breeze 7s ease-in-out infinite;
}

.inv--noapte-de-vara .inv-hero__corner--tr {
    animation-duration: 8.4s;
    animation-delay: -2.6s;
}

.inv--noapte-de-vara .orn--hero-divider {
    display: block;
    --orn-image: var(--pv-divider);
    --orn-ratio: 300 / 30;
    --orn-width: min(58cqi, 240px);
    --orn-max: 240px;
    --orn-fill: var(--inv-primary);
}

/* ================================================================================================================
   FAZELE LUNII: the phases of the moon light up one after another above the names, around a full moon; the cover
   swings away as on an orbit
   ================================================================================================================ */

.inv--fazele-lunii {
    --f-display: "Lora", Georgia, serif;
    --f-body: "Nunito", "Segoe UI", sans-serif;
    --f-names: "Lora", Georgia, serif;
    --names-weight: 400;
    --names-style: italic;
    --names-size: clamp(2.8rem, 14cqi, 5.8rem);
    --names-line: 1.08;
    --amp-style: normal;
    --amp-size: .44em;
    --amp-color: var(--inv-primary);
    --heading-style: italic;
    --heading-weight: 400;
    --body-weight: 400;
    --pv-phase: clamp(24px, 7.6cqi, 46px);
    --pv-moon: clamp(96px, 30cqi, 170px);
    --pv-moon-top: calc(var(--pv-phase) + clamp(56px, 14cqi, 90px));
    --pv-sky:
        radial-gradient(circle at 50% calc(var(--pv-moon-top) + var(--pv-moon) / 2), color-mix(in srgb, var(--inv-ornament) 22%, transparent), transparent calc(var(--pv-moon) * 1.4)),
        linear-gradient(180deg, transparent 0 50%, color-mix(in srgb, var(--inv-accent) 70%, transparent));
    --pv-near: url(../../img/invitations/ornaments/cer-instelat-hills.svg);
    --pv-near-fill: color-mix(in srgb, var(--inv-bg) 62%, #000);
    --pv-near-h: clamp(60px, 18cqi, 110px);
    --hero-pad: calc(var(--pv-moon-top) + var(--pv-moon) + 26px) 8px calc(var(--pv-near-h) + 40px);
    --hero-justify: flex-start;
    --pv-in: scale(.94);
    --pv-deco: url(../../img/invitations/ornaments/cer-instelat-moon-phases.svg);
    --pv-deco-ratio: 800 / 100;
    --pv-deco-opacity: .2;
    --pv-open: rotate(42deg);
    --pv-open-opacity: 0;
}

.inv--fazele-lunii:not(.inv--dark) {
    --pv-near-fill: color-mix(in srgb, var(--inv-accent) 70%, var(--inv-primary));
}

/* the cover: the row of phases across its top; it swings away around a centre far above the screen */
html.inv-js .inv--fazele-lunii .inv-envelope:not(:has(.inv-envelope__photo)) {
    transform-origin: 50% -70%;
}

.inv--fazele-lunii .inv-envelope__scene::before {
    top: max(6svh, 40px);
    bottom: auto;
    left: 50%;
    right: auto;
    width: min(90vw, 600px);
    height: auto;
    aspect-ratio: 800 / 100;
    margin-left: calc(min(90vw, 600px) / -2);
    background: var(--inv-ornament);
    -webkit-mask: url(../../img/invitations/ornaments/cer-instelat-moon-phases.svg) center / contain no-repeat;
    mask: url(../../img/invitations/ornaments/cer-instelat-moon-phases.svg) center / contain no-repeat;
    opacity: .95;
}

/* eight particles become the eight phases (cells of one drawing), in a row; they light up one after another */
.inv--fazele-lunii .inv__ambient i:nth-child(-n + 8) {
    top: clamp(30px, 9cqi, 60px);
    width: var(--pv-phase);
    aspect-ratio: 1;
    scale: 1;
    background: var(--inv-ornament);
    -webkit-mask: url(../../img/invitations/ornaments/cer-instelat-moon-phases.svg) 0 0 / 800% 100% no-repeat;
    mask: url(../../img/invitations/ornaments/cer-instelat-moon-phases.svg) 0 0 / 800% 100% no-repeat;
    opacity: .3;
    animation: cer-instelat-phase 9.6s ease-in-out infinite;
}

.inv--fazele-lunii .inv__ambient i:nth-child(1) { left: calc(50% - var(--pv-phase) * 5.75); animation-delay: 0s; }
.inv--fazele-lunii .inv__ambient i:nth-child(2) { left: calc(50% - var(--pv-phase) * 4.25); animation-delay: 1.2s; -webkit-mask-position: calc(100% / 7) 0; mask-position: calc(100% / 7) 0; }
.inv--fazele-lunii .inv__ambient i:nth-child(3) { left: calc(50% - var(--pv-phase) * 2.75); animation-delay: 2.4s; -webkit-mask-position: calc(200% / 7) 0; mask-position: calc(200% / 7) 0; }
.inv--fazele-lunii .inv__ambient i:nth-child(4) { left: calc(50% - var(--pv-phase) * 1.25); animation-delay: 3.6s; -webkit-mask-position: calc(300% / 7) 0; mask-position: calc(300% / 7) 0; }
.inv--fazele-lunii .inv__ambient i:nth-child(5) { left: calc(50% + var(--pv-phase) * .25); animation-delay: 4.8s; -webkit-mask-position: calc(400% / 7) 0; mask-position: calc(400% / 7) 0; }
.inv--fazele-lunii .inv__ambient i:nth-child(6) { left: calc(50% + var(--pv-phase) * 1.75); animation-delay: 6s; -webkit-mask-position: calc(500% / 7) 0; mask-position: calc(500% / 7) 0; }
.inv--fazele-lunii .inv__ambient i:nth-child(7) { left: calc(50% + var(--pv-phase) * 3.25); animation-delay: 7.2s; -webkit-mask-position: calc(600% / 7) 0; mask-position: calc(600% / 7) 0; }
.inv--fazele-lunii .inv__ambient i:nth-child(8) { left: calc(50% + var(--pv-phase) * 4.75); animation-delay: 8.4s; -webkit-mask-position: 100% 0; mask-position: 100% 0; }

/* the full moon above the names */
.inv--fazele-lunii .inv-hero__corner--tl {
    display: block;
    top: var(--pv-moon-top);
    left: 50%;
    width: var(--pv-moon);
    max-width: none;
    margin-left: calc(var(--pv-moon) / -2);
    aspect-ratio: 1;
    -webkit-mask: none;
    mask: none;
    border-radius: 50%;
    background:
        radial-gradient(circle at 62% 40%, color-mix(in srgb, var(--inv-ornament) 70%, #000 8%) 0 7%, transparent 8%),
        radial-gradient(circle at 36% 60%, color-mix(in srgb, var(--inv-ornament) 70%, #000 8%) 0 10%, transparent 11%),
        radial-gradient(circle at 40% 36%, #fff, color-mix(in srgb, var(--inv-ornament) 50%, #fff) 60%, var(--inv-ornament));
    box-shadow: 0 0 40px 8px color-mix(in srgb, var(--inv-ornament) 34%, transparent);
    opacity: 1;
    animation: inv-breathe 10s ease-in-out infinite;
}

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

/* a group of lines of a constellation lights up */
@keyframes cer-instelat-trace {
    from { transform: scale(.94); opacity: 0; }
    to { transform: none; opacity: .8; }
}

@keyframes cer-instelat-glimmer {
    0%, 100% { opacity: .8; }
    50% { opacity: .5; }
}

/* the moon comes up from behind the roofs */
@keyframes cer-instelat-moonrise {
    from { transform: translateY(46cqi) scale(.86); opacity: 0; }
    30% { opacity: 1; }
    to { transform: none; opacity: 1; }
}

/* the dark disc of the eclipse slides off */
@keyframes cer-instelat-disc-away {
    from { transform: none; }
    to { transform: translate(150%, -16%); }
}

@keyframes cer-instelat-corona {
    0%, 100% { transform: none; opacity: .92; }
    50% { transform: scale(1.04); opacity: 1; }
}

/* a comet crosses the cover */
@keyframes cer-instelat-comet-pass {
    0% { transform: translate(-100%, -6vh) rotate(16deg); opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(110vw, 26vh) rotate(16deg); opacity: 0; }
}

/* the long comet of the first screen: it crosses slowly, then the sky stays clear for a while */
@keyframes cer-instelat-comet-arc {
    0% { transform: translate(-100%, 0) rotate(12deg); opacity: 0; }
    6% { opacity: 1; }
    52% { opacity: 1; }
    60% { transform: translate(120cqi, 26cqi) rotate(12deg); opacity: 0; }
    100% { transform: translate(120cqi, 26cqi) rotate(12deg); opacity: 0; }
}

/* the cover turns and closes towards its centre, like an iris */
@keyframes cer-instelat-iris {
    0% { transform: none; opacity: 1; }
    16% { transform: rotate(8deg) scale(1.03); opacity: 1; }
    100% { transform: rotate(-150deg) scale(.04); opacity: 0; }
}

/* the two leaves of the gold foil peel off from their outer top corners */
@keyframes cer-instelat-peel-l {
    0% { transform: none; opacity: 1; }
    20% { transform: rotate(-4deg); opacity: 1; }
    100% { transform: rotate(-84deg) scale(.96); opacity: 0; }
}

@keyframes cer-instelat-peel-r {
    0% { transform: none; opacity: 1; }
    20% { transform: rotate(4deg); opacity: 1; }
    100% { transform: rotate(84deg) scale(.96); opacity: 0; }
}

/* a half of the bow tie comes undone and drops */
@keyframes cer-instelat-bow-drop {
    0% { transform: none; opacity: 1; }
    30% { transform: rotate(-14deg); opacity: 1; }
    100% { transform: translate(-30%, 46vh) rotate(-120deg); opacity: 0; }
}

/* a lapel swings aside */
@keyframes cer-instelat-lapel {
    0% { transform: none; }
    100% { transform: translateX(-102%) rotate(-8deg); }
}

/* the cork pops and spins away */
@keyframes cer-instelat-cork-pop {
    0% { transform: none; opacity: 1; }
    16% { transform: translateY(-8%) scale(1.08); opacity: 1; }
    100% { transform: translateY(-74vh) rotate(560deg); opacity: 0; }
}

/* two glasses lean in and touch */
@keyframes cer-instelat-clink {
    0%, 60%, 100% { transform: none; }
    70% { transform: scale(1.04) rotate(-2deg); }
    76% { transform: scale(1.06); }
    84% { transform: scale(1.03) rotate(1.5deg); }
}

/* the lanterns of the cover drift apart as it rises */
@keyframes cer-instelat-drift-apart {
    from { transform: none; }
    to { transform: translate(var(--pop-x, 0), -10vh) scale(.8); }
}

/* the band of the Milky Way drifts along itself by one tile of dust */
@keyframes cer-instelat-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-240px); }
}

/* the chandelier dims before the curtain rises */
@keyframes cer-instelat-dim {
    from { opacity: 1; }
    to { opacity: .16; }
}

@keyframes cer-instelat-curtain-up {
    0%, 32% { transform: none; }
    100% { transform: translateY(-105%); }
}

/* the casements of the window swing out onto the night */
@keyframes cer-instelat-casement-l {
    from { transform: perspective(1100px) rotateY(0deg); }
    to { transform: perspective(1100px) rotateY(96deg); }
}

@keyframes cer-instelat-casement-r {
    from { transform: perspective(1100px) rotateY(0deg); }
    to { transform: perspective(1100px) rotateY(-96deg); }
}

/* a sheer curtain in the warm air */
@keyframes cer-instelat-breeze {
    0%, 100% { transform: none; }
    40% { transform: skewX(4deg) scaleX(1.06); }
    70% { transform: skewX(-2deg) scaleX(.98); }
}

/* a phase of the moon lights up when its turn comes */
@keyframes cer-instelat-phase {
    0%, 22%, 100% { opacity: .3; transform: none; }
    8% { opacity: 1; transform: scale(1.12); }
}