/* ============================================================
   ENVELOPE INTRO: gedeelde "digitale uitnodiging"
   Per-website in te schakelen op ELKE template. Alle kleuren
   komen uit de site-CSS-variabelen (--color-primary / --color-text
   / --color-background), die wedding/template.blade.php per website
   op :root zet, of uit de eigen envelopkleuren die de partial inline
   op #luxEnvIntro zet. Zelfstandig: geen afhankelijkheid van
   template-stylesheets.

   Opbouw van de envelop (achterkant, waar klep en zegel zitten):
     laag--achter : rug met voering + de klep zodra hij open staat
     kaart        : de uitnodiging, tussen de lagen in
     laag--voor   : zijflappen + bodem, de dichte klep, glans, zegel
   Geen preserve-3d: de lagen liggen plat op elkaar en de volgorde is
   gewoon z-index. De klep draait met een eigen perspective() en bestaat
   twee keer (dicht: buitenkant, boven de kaart; open: voering, onder
   de kaart), op 90 graden neemt de ene het van de andere over. Zo kan
   de klep nooit door de kaart heen schilderen.

   Het openen zelf (zegel breekt, klep, kaart eruit, envelop valt weg)
   draait in JS via de Web Animations API, zie de partial.
   ============================================================ */
.lux-env {
    --le-serif: var(--le-display, 'Cormorant Garamond'), 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --le-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --le-accent: var(--color-primary, #A5715F);
    --le-ink: var(--color-text, #40322C);
    --le-paper: var(--color-background, #FAF5EF);

    /* Papier van de envelop: de accentkleur, getint naar de achtergrond */
    --le-env: color-mix(in srgb, var(--le-accent) var(--le-tint, 26%), var(--le-paper));
    --le-env-licht: color-mix(in srgb, var(--le-env) 86%, #ffffff);
    --le-env-donker: color-mix(in srgb, var(--le-env) 90%, #2a1a12);
    /* Voering: diep en rijk, met een fijn bloemetjespatroon */
    --le-liner: color-mix(in srgb, var(--le-accent) 84%, #1d120c);
    --le-liner-print: color-mix(in srgb, var(--le-paper) 34%, transparent);
    /* Kaart: licht, maar getint naar de site-achtergrond */
    --le-card: color-mix(in srgb, #ffffff 88%, var(--le-paper));
    /* De kaart is altijd licht, dus altijd donkere inkt (de site-tekstkleur is
       op een donkere template licht en zou wegvallen) */
    --le-card-ink: color-mix(in srgb, var(--le-accent) 16%, #2b211c);

    /* Maten: alles volgt de breedte van de envelop (3:2) */
    --le-w: min(84vw, 480px, 60vh);
    --le-w: min(84vw, 480px, 60svh);
    --le-h: calc(var(--le-w) / 1.5);
    --le-r: calc(var(--le-w) * 0.02);
    /* Kaart op ware grootte = k keer zo groot als in de envelop; in de
       envelop staat hij op scale(1/k). Zo is de tekst scherp als hij
       naar voren komt (verkleinen blijft scherp, vergroten niet). */
    --le-k: 1.25;

    --le-shadow-ink: rgba(36, 22, 14, 0.16);
    --le-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .12 0 0 0 0 .08 .55 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --le-foulard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='6' cy='4.1' r='1.45'/%3E%3Ccircle cx='6' cy='7.9' r='1.45'/%3E%3Ccircle cx='4.1' cy='6' r='1.45'/%3E%3Ccircle cx='7.9' cy='6' r='1.45'/%3E%3Ccircle cx='18' cy='16.1' r='1.45'/%3E%3Ccircle cx='18' cy='19.9' r='1.45'/%3E%3Ccircle cx='16.1' cy='18' r='1.45'/%3E%3Ccircle cx='19.9' cy='18' r='1.45'/%3E%3Ccircle cx='18' cy='6' r='.7'/%3E%3Ccircle cx='6' cy='18' r='.7'/%3E%3C/g%3E%3C/svg%3E");

    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    color-scheme: only light;
    /* De site kan body inzoomen (lettergrootte); de envelop niet. */
    zoom: calc(1 / var(--font-scale, 1));
    transition: opacity 480ms ease, visibility 480ms ease;
}
.lux-env[hidden] { display: none; }
.lux-env.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.lux-env *, .lux-env *::before, .lux-env *::after { box-sizing: border-box; }

@media (min-width: 900px) and (min-height: 680px) {
    .lux-env { --le-k: 1.5; }
}

html.lux-env-lock,
html.lux-env-lock body { overflow: hidden; }

/* Achtergrond: papier met zacht licht in het midden, vignet en korrel */
.lux-env__bg {
    position: absolute;
    inset: 0;
    background-color: var(--le-paper);
    background-image:
        radial-gradient(120% 95% at 50% 48%, transparent 52%, color-mix(in srgb, var(--le-accent) 13%, transparent) 100%),
        radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--le-accent) 7%, transparent), transparent 70%);
}
.lux-env__bg::before {
    /* lichtvlek achter de envelop; soft-light werkt op licht én donker papier */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(48% 40% at 50% 44%, rgba(255, 255, 255, 0.5), transparent 72%);
    mix-blend-mode: soft-light;
}
.lux-env__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--le-grain);
    opacity: 0.55;
    mix-blend-mode: multiply;
}

.lux-env__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    width: 100%;
    max-width: 600px;
}
.lux-env.is-open .lux-env__inner { cursor: default; }

@keyframes le-fade-in {
    from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

.lux-env .lux-env__kicker {
    font-family: var(--le-sans);
    color: var(--le-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    margin: 0 0 clamp(26px, 5.5vh, 48px);
    padding-left: 0.42em;
    animation: le-fade-in 900ms 120ms cubic-bezier(.22,.61,.36,1) both;
}

/* ============================================================
   DE ENVELOP
   ============================================================ */
.lux-env__stage {
    position: relative;
    width: var(--le-w);
    height: var(--le-h);
    perspective: 1100px;
    margin: 0 0 clamp(34px, 6.5vh, 60px);
    animation: le-land 1250ms 60ms cubic-bezier(.2,.8,.25,1) both;
}
@keyframes le-land {
    0%   { opacity: 0; transform: translateY(-46px) rotate(-5deg) scale(.94); }
    55%  { opacity: 1; transform: translateY(5px) rotate(.8deg) scale(1.006); }
    80%  { transform: translateY(-2px) rotate(-.25deg); }
    100% { opacity: 1; transform: none; }
}

/* Slagschaduw op "tafel" */
.lux-env__shadow {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -9%;
    height: 18%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(36, 22, 14, 0.30), rgba(36, 22, 14, 0.12) 55%, transparent);
    filter: blur(5px);
    animation: le-shadow 5.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes le-shadow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(.9); opacity: .75; }
}

.lux-env__tilt,
.lux-env__float {
    position: absolute;
    inset: 0;
}
.lux-env__tilt { will-change: transform; }
.lux-env__float { animation: le-float 5.6s ease-in-out infinite; }
@keyframes le-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-7px) rotate(-.45deg); }
}

.lux-env__laag {
    position: absolute;
    inset: 0;
}
.lux-env__laag--achter { z-index: 1; }
.lux-env__laag--voor   { z-index: 3; pointer-events: none; }

/* Rug: papier met de voering erin */
.lux-env__back {
    position: absolute;
    inset: 0;
    border-radius: var(--le-r);
    background-color: var(--le-env-donker);
    background-image: var(--le-grain);
    box-shadow:
        0 1px 1px var(--le-shadow-ink),
        0 18px 34px -16px rgba(36, 22, 14, 0.30),
        0 40px 70px -40px rgba(36, 22, 14, 0.35);
}
.lux-env__liner {
    position: absolute;
    left: 3.4%;
    right: 3.4%;
    top: 3.6%;
    bottom: 34%;
    border-radius: calc(var(--le-r) * .6) calc(var(--le-r) * .6) 0 0;
    background-color: var(--le-liner);
    background-image:
        linear-gradient(172deg, rgba(255, 255, 255, 0.16), transparent 45%, rgba(0, 0, 0, 0.18)),
        var(--le-grain);
    overflow: hidden;
}
.lux-env__liner::before,
.lux-env__flap--open .lux-env__flap-vlak::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--le-liner-print);
    -webkit-mask: var(--le-foulard) 0 0 / calc(var(--le-w) * .072) calc(var(--le-w) * .072) repeat;
            mask: var(--le-foulard) 0 0 / calc(var(--le-w) * .072) calc(var(--le-w) * .072) repeat;
}

/* Klep */
.lux-env__flap {
    position: absolute;
    inset: 0;
    transform-origin: 50% 0;
    will-change: transform;
}
.lux-env__flap-vlak,
.lux-env__flap-schaduw {
    position: absolute;
    inset: 0;
    clip-path: polygon(0.82% 0.57%, 1.09% 0.33%, 1.38% 0.15%, 1.69% 0.04%, 2% 0%, 98% 0%, 98.31% 0.04%, 98.62% 0.15%, 98.91% 0.33%, 99.18% 0.57%, 53.75% 55.5%, 53.2% 56.09%, 52.61% 56.58%, 51.99% 56.97%, 51.34% 57.25%, 50.67% 57.42%, 50% 57.47%, 49.33% 57.42%, 48.66% 57.25%, 48.01% 56.97%, 47.39% 56.58%, 46.8% 56.09%, 46.25% 55.5%);
}
.lux-env__flap-schaduw {
    background: linear-gradient(180deg, rgba(28, 16, 10, 0.05), rgba(28, 16, 10, 0.55));
    opacity: 0;
}
/* Dicht: de buitenkant, boven alles */
.lux-env__flap--dicht {
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35))
        drop-shadow(0 2px 2px rgba(36, 22, 14, 0.14))
        drop-shadow(0 7px 10px rgba(36, 22, 14, 0.12));
}
.lux-env__flap--dicht .lux-env__flap-vlak {
    background-color: var(--le-env);
    background-image:
        var(--le-grain),
        linear-gradient(180deg, var(--le-env-licht) 0%, var(--le-env) 62%, color-mix(in srgb, var(--le-env) 94%, #2a1a12) 100%);
}
/* Open: de binnenkant (voering met papierrand), achter de kaart */
.lux-env__flap--open { opacity: 0; transform: rotateX(90deg); }
.lux-env__flap--open .lux-env__flap-vlak {
    background-color: var(--le-env-donker);
    background-image: var(--le-grain);
}
.lux-env__flap--open .lux-env__flap-vlak::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--le-liner);
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.14), transparent 50%, rgba(0, 0, 0, 0.2)), var(--le-grain);
    clip-path: polygon(4.75% 3.7%, 5% 3.49%, 5.27% 3.33%, 5.55% 3.24%, 5.84% 3.2%, 94.16% 3.2%, 94.45% 3.24%, 94.73% 3.33%, 95% 3.49%, 95.25% 3.7%, 53.45% 52.04%, 52.94% 52.56%, 52.4% 52.99%, 51.83% 53.33%, 51.23% 53.58%, 50.62% 53.73%, 50% 53.77%, 49.38% 53.73%, 48.77% 53.58%, 48.17% 53.33%, 47.6% 52.99%, 47.06% 52.56%, 46.55% 52.04%);
}
.lux-env__flap--open .lux-env__flap-vlak::after {
    clip-path: polygon(4.75% 3.7%, 5% 3.49%, 5.27% 3.33%, 5.55% 3.24%, 5.84% 3.2%, 94.16% 3.2%, 94.45% 3.24%, 94.73% 3.33%, 95% 3.49%, 95.25% 3.7%, 53.45% 52.04%, 52.94% 52.56%, 52.4% 52.99%, 51.83% 53.33%, 51.23% 53.58%, 50.62% 53.73%, 50% 53.77%, 49.38% 53.73%, 48.77% 53.58%, 48.17% 53.33%, 47.6% 52.99%, 47.06% 52.56%, 46.55% 52.04%);
}

/* Voorkant: zijflappen + bodem. De schaduw zit op een wrapper,
     want een filter op hetzelfde element als clip-path wordt
     meegeknipt. */
.lux-env__front {
    position: absolute;
    inset: 0;
    border-radius: var(--le-r);
    overflow: hidden;
}
.lux-env__stuk {
    position: absolute;
    inset: 0;
}
.lux-env__stuk > div {
    position: absolute;
    inset: 0;
    background-color: var(--le-env);
}
.lux-env__stuk--l {
    filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.28)) drop-shadow(3px 0 4px rgba(36, 22, 14, 0.12));
}
.lux-env__stuk--l > div {
    clip-path: polygon(0% -1%, 44.42% 46.98%, 45.26% 48.13%, 45.88% 49.55%, 46.26% 51.16%, 46.36% 52.85%, 46.19% 54.53%, 45.76% 56.1%, 45.09% 57.47%, 44.21% 58.56%, 0% 101%);
    background-image: var(--le-grain), linear-gradient(95deg, color-mix(in srgb, var(--le-env) 94%, #2a1a12), var(--le-env) 70%, var(--le-env-licht));
}
.lux-env__stuk--r {
    filter: drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.28)) drop-shadow(-3px 0 4px rgba(36, 22, 14, 0.12));
}
.lux-env__stuk--r > div {
    clip-path: polygon(100% -1%, 100% 101%, 55.79% 58.56%, 54.91% 57.47%, 54.24% 56.1%, 53.81% 54.53%, 53.64% 52.85%, 53.74% 51.16%, 54.12% 49.55%, 54.74% 48.13%, 55.58% 46.98%);
    background-image: var(--le-grain), linear-gradient(265deg, color-mix(in srgb, var(--le-env) 94%, #2a1a12), var(--le-env) 70%, var(--le-env-licht));
}
.lux-env__stuk--b {
    filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.4)) drop-shadow(0 -3px 5px rgba(36, 22, 14, 0.13));
}
.lux-env__stuk--b > div {
    clip-path: polygon(-0.67% 100%, 43.93% 48.94%, 44.83% 48.03%, 45.79% 47.26%, 46.8% 46.66%, 47.84% 46.22%, 48.92% 45.96%, 50% 45.87%, 51.08% 45.96%, 52.16% 46.22%, 53.2% 46.66%, 54.21% 47.26%, 55.17% 48.03%, 56.07% 48.94%, 100.67% 100%);
    background-image: var(--le-grain), linear-gradient(180deg, var(--le-env-licht) 40%, var(--le-env) 75%, color-mix(in srgb, var(--le-env) 95%, #2a1a12));
}

/* Lichtval die de muis volgt (alleen op een computer, via JS) */
.lux-env__glans {
    position: absolute;
    inset: 0;
    border-radius: var(--le-r);
    background: radial-gradient(70% 90% at var(--le-gx, 32%) var(--le-gy, 18%), rgba(255, 255, 255, 0.4), transparent 62%);
    mix-blend-mode: soft-light;
    pointer-events: none;
    overflow: hidden;
}
/* Af en toe trekt er een brede lichtstreep over het papier */
.lux-env__glans::after {
    content: '';
    position: absolute;
    inset: -30% -80%;
    background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.7) 50%, transparent 58%);
    transform: translateX(-60%);
    animation: le-sheen 7s 1.6s cubic-bezier(.45,0,.3,1) infinite;
}
@keyframes le-sheen {
    0%        { transform: translateX(-60%); }
    26%, 100% { transform: translateX(60%); }
}

/* Even optillen onder de muis, indrukken bij een tik */
.lux-env__float,
.lux-env__seal-half,
.lux-env__mono,
.lux-env__strik { transition: scale 500ms cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine) {
    .lux-env:not(.is-open) .lux-env__inner:hover .lux-env__float { scale: 1.018; }
    .lux-env:not(.is-open) .lux-env__inner:hover .lux-env__seal-half,
    .lux-env:not(.is-open) .lux-env__inner:hover .lux-env__mono,
    .lux-env:not(.is-open) .lux-env__inner:hover .lux-env__strik { scale: 1.05; }
}

/* De achterkant (klep, zegel, kaart) als één geheel; bij Post ligt de
   voorkant erover en draait de achterkant pas bij het openen naar voren */
.lux-env__achterkant { position: absolute; inset: 0; }
.lux-env:not(.is-open) .lux-env__inner:active .lux-env__float { scale: .985; transition-duration: 120ms; }

/* Waszegel */
.lux-env__seal {
    position: absolute;
    left: 50%;
    top: 57%;
    width: calc(var(--le-w) * 0.235);
    height: calc(var(--le-w) * 0.235);
    margin: calc(var(--le-w) * -0.1175) 0 0 calc(var(--le-w) * -0.1175);
    /* één schaduw voor beide helften, anders tekent de ene helft een
       naad over de andere */
    filter: drop-shadow(0 2px 2px rgba(30, 14, 8, 0.30)) drop-shadow(0 6px 8px rgba(30, 14, 8, 0.22));
}
.lux-env__seal-half {
    position: absolute;
    inset: 0;
    will-change: transform;
}
.lux-env__seal-half svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.lux-env__seal-half--l { transform-origin: 32% 55%; }
.lux-env__seal-half--r { transform-origin: 68% 55%; }
/* De barst: linkerhelft een fractie breder, zodat er dicht geen naad zichtbaar is */
.lux-env__seal-half--l svg { clip-path: polygon(-10% -10%, 53.6% -10%, 47.6% 20%, 55.6% 38%, 46.6% 55%, 54.6% 72%, 47.6% 88%, 52.6% 110%, -10% 110%); }
.lux-env__seal-half--r svg { clip-path: polygon(53% -10%, 110% -10%, 110% 110%, 52% 110%, 47% 88%, 54% 72%, 46% 55%, 55% 38%, 47% 20%); }
.lux-env__barst {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.lux-env__barst svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lux-env__barst polyline {
    fill: none;
    stroke: color-mix(in srgb, var(--le-accent) 45%, #140a06);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
/* Glimlicht dat af en toe over het zegel trekt */
.lux-env__seal-glint {
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
}
.lux-env__seal-glint::before {
    content: '';
    position: absolute;
    inset: -20% -60%;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 232, 0.55) 50%, transparent 62%);
    transform: translateX(-70%);
    animation: le-glint 5.2s 2.2s ease-in-out infinite;
}
@keyframes le-glint {
    0%       { transform: translateX(-70%); }
    22%, 100% { transform: translateX(70%); }
}
.lux-env.is-open .lux-env__seal-glint { display: none; }

/* Stukjes was die wegspringen als het zegel breekt */
.lux-env__chip {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9%;
    height: 7%;
    background: color-mix(in srgb, var(--le-accent) 85%, #140a06);
    clip-path: polygon(10% 30%, 60% 0%, 100% 45%, 75% 100%, 15% 85%);
    opacity: 0;
    transform: translate(-50%, -50%);
}
.lux-env__chip:nth-child(2n) { width: 6%; height: 6%; clip-path: polygon(0 40%, 50% 0, 100% 30%, 80% 100%, 20% 90%); }
.lux-env__chip:nth-child(3n) { width: 11%; height: 6%; }

/* Was-kleuren voor de SVG-gradients (gedefinieerd in de partial) */
.lux-env .le-w1 { stop-color: color-mix(in srgb, var(--le-accent) 64%, #ffffff); }
.lux-env .le-w2 { stop-color: var(--le-accent); }
.lux-env .le-w3 { stop-color: color-mix(in srgb, var(--le-accent) 62%, #140a06); }
.lux-env .le-d1 { stop-color: color-mix(in srgb, var(--le-accent) 74%, #140a06); }
.lux-env .le-d2 { stop-color: color-mix(in srgb, var(--le-accent) 88%, #ffffff); }
.lux-env .le-r1 { stop-color: color-mix(in srgb, var(--le-accent) 55%, #ffffff); }
.lux-env .le-r2 { stop-color: color-mix(in srgb, var(--le-accent) 70%, #140a06); }

/* ============================================================
   DE KAART: op ware grootte opgebouwd, in de envelop verkleind
   ============================================================ */
.lux-env__card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--le-w) * 0.86 * var(--le-k));
    height: calc(var(--le-h) * 0.8 * var(--le-k));
    margin-left: calc(var(--le-w) * -0.43 * var(--le-k));
    margin-top: calc(var(--le-h) * -0.4 * var(--le-k));
    z-index: 2;
    transform: scale(calc(1 / var(--le-k)));
    border-radius: calc(var(--le-w) * 0.012 * var(--le-k));
    background-color: var(--le-card);
    background-image:
        var(--le-grain),
        linear-gradient(165deg, rgba(255, 255, 255, 0.7), transparent 45%, color-mix(in srgb, var(--le-paper) 55%, transparent));
    box-shadow:
        0 1px 2px rgba(36, 22, 14, 0.12),
        0 20px 40px -22px rgba(36, 22, 14, 0.45),
        0 50px 90px -50px rgba(36, 22, 14, 0.35);
    container-type: inline-size;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    will-change: transform;
}
.lux-env__card-rand {
    position: absolute;
    inset: 4.2cqw;
    border: 1px solid color-mix(in srgb, var(--le-accent) 48%, transparent);
    pointer-events: none;
}
.lux-env__card-rand::after {
    content: '';
    position: absolute;
    inset: 0.9cqw;
    border: 1px solid color-mix(in srgb, var(--le-accent) 22%, transparent);
}
.lux-env__card-in {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4cqw;
    padding: 0 11cqw;
    text-align: center;
}
.lux-env__card-kicker {
    font-family: var(--le-sans);
    font-size: max(8px, 2.05cqw);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.36em;
    padding-left: 0.36em;
    text-transform: uppercase;
    color: var(--le-accent);
}
.lux-env__card-names {
    font-family: var(--le-serif);
    font-size: 9.6cqw;
    font-weight: 500;
    line-height: 1.04;
    color: var(--le-card-ink);
    text-wrap: balance;
}
.lux-env__card.is-lang .lux-env__card-names { font-size: 8cqw; }
.lux-env__card-names em {
    font-style: italic;
    color: var(--le-accent);
    padding: 0 0.06em;
}
.lux-env__card-orn {
    display: flex;
    align-items: center;
    gap: 1.8cqw;
    color: var(--le-accent);
}
.lux-env__card-orn::before,
.lux-env__card-orn::after {
    content: '';
    width: 7cqw;
    height: 1px;
    background: currentColor;
    opacity: .5;
}
.lux-env__card-orn b {
    width: 1.3cqw;
    height: 1.3cqw;
    background: currentColor;
    transform: rotate(45deg);
}
.lux-env__card-date {
    font-family: var(--le-sans);
    font-size: max(8px, 2.25cqw);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.3em;
    padding-left: 0.3em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--le-card-ink) 78%, transparent);
}
/* Folie-glans die over de kaart trekt zodra hij in beeld is */
.lux-env__card-glans {
    position: absolute;
    inset: -10% -40%;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 214, 0.5) 50%, transparent 60%);
    mix-blend-mode: color-dodge;
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   TEKST ROND DE ENVELOP
   ============================================================ */
.lux-env .lux-env__names {
    font-family: var(--le-serif);
    color: var(--le-ink);
    font-size: clamp(36px, 8.6vw, 58px);
    font-weight: 500;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: 0.005em;
    text-transform: none;
    margin: 0;
    padding: 0;
    text-wrap: balance;
    animation: le-fade-in 1000ms 380ms cubic-bezier(.22,.61,.36,1) both;
}
.lux-env .lux-env__names .amp {
    font-style: italic;
    color: var(--le-accent);
    padding: 0 0.06em;
}
.lux-env .lux-env__date {
    font-family: var(--le-sans);
    color: var(--le-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.32em;
    padding-left: 0.32em;
    text-transform: uppercase;
    opacity: 0.72;
    margin: 16px 0 0;
    animation: le-fade-in-dim 1000ms 480ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes le-fade-in-dim {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: .72; transform: none; }
}

.lux-env .lux-env__hint {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--le-sans);
    color: var(--le-accent);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: clamp(28px, 5vh, 44px) 0 0;
    animation: le-fade-in 900ms 750ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes le-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--le-accent) 45%, transparent); }
    70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--le-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--le-accent) 0%, transparent); }
}
.lux-env__hint::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--le-accent);
    animation: le-pulse 2s ease-out infinite;
}
.lux-env__inner:focus-visible .lux-env__hint { text-decoration: underline; text-underline-offset: 4px; }

/* Overslaan-link */
.lux-env .lux-env__skip {
    position: absolute;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: 0;
    box-shadow: none;
    font-family: var(--le-sans);
    color: var(--le-ink);
    opacity: 0.55;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    padding: 10px 16px;
    animation: le-fade-in-skip 800ms 1100ms ease both;
}
@keyframes le-fade-in-skip { from { opacity: 0; } to { opacity: .55; } }
.lux-env .lux-env__skip:hover { opacity: 0.85; }

/* Lage schermen (telefoon liggend): compacter */
@media (max-height: 560px) {
    .lux-env { --le-w: min(60vw, 360px, 52vh); --le-w: min(60vw, 360px, 52svh); }
    .lux-env .lux-env__kicker { margin-bottom: 14px; }
    .lux-env__stage { margin-bottom: 18px; }
    .lux-env .lux-env__names { font-size: clamp(26px, 6vh, 36px); }
    .lux-env .lux-env__date { margin-top: 6px; }
    .lux-env .lux-env__hint { margin-top: 12px; }
    .lux-env .lux-env__skip { display: none; }
}

/* ============================================================
   DE VIJF ENVELOPPEN (Ontwerp > Digitale uitnodiging, 29 okt 2026)
   Klassiek is alles hierboven. De andere vier zetten er een laag
   overheen: andere kleuren en papier, en eigen stukken (postzegel,
   monogram, lint) die de partial alleen voor die envelop rendert.
   Alle kleuren blijven van de site (of de eigen envelopkleuren) komen.
   ============================================================ */

/* ---------- POST: kraftpapier, handschrift, postzegel en poststempel ----------
   De envelop blijft met de voorkant naar je toe, als een brief op de mat.
   Klep, voering en zijflappen van de klassieke envelop doen hier niet mee.
   Bij het openen scheurt de strook aan de bovenrand eraf en schuift de
   brief door de opening naar buiten. Het vlak heeft bovenaan een
   gekartelde rand (clip-path); de strook ligt daar precies overheen met
   dezelfde kartel als onderrand en hetzelfde papier (zelfde grain-positie,
   verloop op de volle hoogte), zodat je de scheur pas ziet als hij loslaat. */
.lux-env--post {
    --le-env: color-mix(in srgb, var(--le-accent) 12%, #C9A77A);
    --le-env-donker: color-mix(in srgb, var(--le-env) 86%, #3a2a1a);
    --le-post-inkt: color-mix(in srgb, var(--le-accent) 55%, #2a1a10);
    --le-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
    --le-post-papier: var(--le-grain), linear-gradient(160deg, rgba(255, 255, 255, 0.2), transparent 45%, rgba(0, 0, 0, 0.14));
    --le-post-lijn: color-mix(in srgb, var(--le-post-inkt) 40%, transparent);
}
.lux-env--post .lux-env__laag--achter,
.lux-env--post .lux-env__laag--voor { display: none; }
/* De schaduw op de wrapper: een filter op het geknipte vlak zelf wordt meegeknipt */
.lux-env--post .lux-env__voorkant {
    position: absolute;
    inset: 0;
    z-index: 6;
    filter: drop-shadow(0 1px 1px var(--le-shadow-ink)) drop-shadow(0 16px 18px rgba(36, 22, 14, 0.22));
    will-change: transform;
}
.lux-env--post .lux-env__post-vlak {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background-color: var(--le-env);
    background-image: var(--le-post-papier);
    clip-path: polygon(0% 6.25%, 2.35% 6.57%, 5.34% 6.74%, 8.9% 7.06%, 12.15% 7.48%, 14.73% 7.31%, 16.47% 7.28%, 20.47% 7.48%, 24.47% 7.28%, 27.57% 7.62%, 30.13% 6.75%, 32.6% 6.48%, 35.31% 6.69%, 38.36% 7.34%, 40.11% 6.66%, 43.04% 7.54%, 44.78% 6.8%, 48.11% 7.64%, 50.14% 6.86%, 52.68% 6.89%, 55.67% 7.17%, 59.62% 6.94%, 62.88% 7.2%, 65.79% 7.28%, 68.42% 7.31%, 71.55% 6.78%, 74.16% 7.44%, 76.05% 7.33%, 78.05% 6.37%, 80.22% 7.13%, 83.37% 6.46%, 87.26% 7.59%, 91.23% 7.39%, 92.85% 5.82%, 96.06% 6.6%, 98.93% 7.28%, 100% 6.68%, 100% 100%, 0% 100%);
}
.lux-env--post .lux-env__post-vlak::after {
    content: '';
    position: absolute;
    inset: 4%;
    border: 1px dashed var(--le-post-lijn);
    border-radius: 2px;
}
/* De strook: 9% hoog, zelfde papier, kartel als onderrand (een haartje
   onder die van het vlak, tegen een naadje) */
.lux-env--post .lux-env__post-strook {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 9%;
    z-index: 7;
    transform-origin: 0% 100%;
    will-change: transform, filter;
}
.lux-env--post .lux-env__post-strook > div {
    position: absolute;
    inset: 0;
    border-radius: 3px 3px 0 0;
    background-color: var(--le-env);
    background-image: var(--le-post-papier);
    background-size: auto, 100% 1111.1%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75.56%, 98.93% 82.22%, 96.06% 74.67%, 92.85% 66.00%, 91.23% 83.44%, 87.26% 85.67%, 83.37% 73.11%, 80.22% 80.56%, 78.05% 72.11%, 76.05% 82.78%, 74.16% 84.00%, 71.55% 76.67%, 68.42% 82.56%, 65.79% 82.22%, 62.88% 81.33%, 59.62% 78.44%, 55.67% 81.00%, 52.68% 77.89%, 50.14% 77.56%, 48.11% 86.22%, 44.78% 76.89%, 43.04% 85.11%, 40.11% 75.33%, 38.36% 82.89%, 35.31% 75.67%, 32.6% 73.33%, 30.13% 76.33%, 27.57% 86.00%, 24.47% 82.22%, 20.47% 84.44%, 16.47% 82.22%, 14.73% 82.56%, 12.15% 84.44%, 8.9% 79.78%, 5.34% 76.22%, 2.35% 74.33%, 0% 70.78%);
}
/* Het bovenste stuk van de stippellijn staat op de strook (4% van de
   envelophoogte = 44% van de strook) */
.lux-env--post .lux-env__post-strook > div::after {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    top: 44.4%;
    bottom: -20%;
    border: 1px dashed var(--le-post-lijn);
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
}
.lux-env__post-adres {
    position: absolute;
    left: 9%;
    right: 30%;
    top: 36%;
    text-align: left;
    color: var(--le-post-inkt);
    line-height: 1.1;
}
.lux-env__post-adres > span { display: block; }
.lux-env__post-kicker {
    font-family: var(--le-sans);
    font-size: calc(var(--le-w) * 0.022);
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 1.1em;
}
.lux-env__post-namen {
    font-family: var(--le-hand);
    font-size: calc(var(--le-w) * 0.1);
    font-weight: 600;
}
.lux-env__post-namen em { font-style: normal; color: var(--le-accent); }
.lux-env__post-datum {
    font-family: var(--le-hand);
    font-size: calc(var(--le-w) * 0.052);
    font-weight: 500;
    opacity: 0.85;
    margin-top: 0.15em;
}
.lux-env__postzegel {
    position: absolute;
    right: 5.5%;
    top: 10.5%;
    width: 14%;
    aspect-ratio: 4 / 5;
    padding: 5.5%;
    transform: rotate(2.5deg);
    background: radial-gradient(circle, var(--le-env) 2.3px, transparent 2.7px) 0 0 / 8px 8px, #FBF6EC;
    filter: drop-shadow(0 2px 3px rgba(40, 25, 15, 0.25));
}
.lux-env__postzegel > div {
    position: absolute;
    inset: 6px;
    display: grid;
    place-items: center;
    grid-template-rows: 1fr auto;
    padding: 6% 4%;
    color: #fff;
    background-color: color-mix(in srgb, var(--le-accent) 85%, #fff);
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.25), transparent 50%, rgba(0, 0, 0, 0.1));
}
/* Op de postzegel staat wat het paar voor het zegel koos (hart, initialen,
   datum of een woord); zonder keuze een hart */
.lux-env__postzegel > div > b {
    font-family: var(--le-serif);
    font-weight: 600;
    font-size: calc(var(--le-w) * 0.042);
    line-height: 1;
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}
.lux-env__postzegel > div > b em { font-style: italic; font-size: 0.8em; padding: 0 0.06em; }
.lux-env--zegel-hart .lux-env__postzegel > div > b,
.lux-env--zegel-geen .lux-env__postzegel > div > b { font-size: calc(var(--le-w) * 0.05); }
.lux-env--zegel-woord .lux-env__postzegel > div > b,
.lux-env--zegel-datum .lux-env__postzegel > div > b { font-size: calc(var(--le-w) * 0.024); letter-spacing: 0.04em; }
.lux-env__postzegel > div > span {
    font-family: var(--le-sans);
    font-size: calc(var(--le-w) * 0.02);
    font-weight: 700;
    letter-spacing: 0.18em;
}
.lux-env__poststempel {
    position: absolute;
    right: 13%;
    top: 12.5%;
    width: 18%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--le-post-inkt);
    opacity: 0.55;
    transform: rotate(-14deg);
    mix-blend-mode: multiply;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--le-post-inkt);
    font-family: var(--le-sans);
    font-size: calc(var(--le-w) * 0.021);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lux-env__poststempel span { display: block; }
.lux-env__poststempel::before { content: ''; position: absolute; inset: 9%; border-radius: 50%; border: 1px solid var(--le-post-inkt); }
.lux-env__poststempel::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 36%;
    width: 85%;
    height: 28%;
    background: repeating-linear-gradient(180deg, var(--le-post-inkt) 0 1.5px, transparent 1.5px 7px);
    -webkit-mask: linear-gradient(90deg, #000, transparent);
            mask: linear-gradient(90deg, #000, transparent);
}

/* ---------- MINIMAL: wit, mat en strak, met een vlak monogram ---------- */
.lux-env--minimal {
    --le-env: color-mix(in srgb, var(--le-accent) 5%, #ffffff);
    --le-env-licht: #ffffff;
    --le-env-donker: color-mix(in srgb, var(--le-accent) 9%, #efece7);
    --le-liner: color-mix(in srgb, var(--le-accent) 22%, #ffffff);
    --le-liner-print: transparent;
    --le-grain: none;
    --le-paper: color-mix(in srgb, var(--le-accent) 4%, #f7f5f1);
    --le-ink: color-mix(in srgb, var(--le-accent) 30%, #2b2622);
    --le-lijn: color-mix(in srgb, var(--le-accent) 35%, #c9c3bb);
}
.lux-env--minimal .lux-env__bg { background-image: none; }
.lux-env--minimal .lux-env__bg::before,
.lux-env--minimal .lux-env__bg::after,
.lux-env--minimal .lux-env__glans { display: none; }
.lux-env--minimal .lux-env__back { box-shadow: 0 1px 0 var(--le-lijn), 0 24px 40px -28px rgba(30, 20, 10, 0.35); }
.lux-env--minimal .lux-env__flap--dicht,
.lux-env--minimal .lux-env__stuk--l,
.lux-env--minimal .lux-env__stuk--r,
.lux-env--minimal .lux-env__stuk--b {
    filter: drop-shadow(0 .7px 0 var(--le-lijn)) drop-shadow(0 -.7px 0 var(--le-lijn)) drop-shadow(.7px 0 0 var(--le-lijn)) drop-shadow(-.7px 0 0 var(--le-lijn));
}
.lux-env--minimal .lux-env__flap--dicht .lux-env__flap-vlak { background-image: none; }
.lux-env--minimal .lux-env__stuk > div { background-image: none; }
.lux-env__mono {
    position: absolute;
    left: 50%;
    top: 57%;
    width: 17%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--le-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--le-sans);
    font-weight: 500;
    font-size: calc(var(--le-w) * 0.036);
    letter-spacing: 0.12em;
    padding-left: 0.12em;
    box-shadow: 0 0 0 4px var(--le-env), 0 0 0 5px var(--le-lijn);
    will-change: transform;
}
.lux-env__mono em { font-family: var(--le-serif); font-style: italic; font-size: 0.85em; padding: 0 0.04em; }
.lux-env--minimal .lux-env .lux-env__names,
.lux-env--minimal .lux-env__names {
    font-family: var(--le-sans);
    font-weight: 300;
    font-size: clamp(22px, 4.2vw, 32px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lux-env--minimal .lux-env__names .amp { font-family: var(--le-serif); font-style: italic; text-transform: none; }
.lux-env--minimal .lux-env__kicker,
.lux-env--minimal .lux-env__hint { font-weight: 500; }
.lux-env--minimal .lux-env__hint::before { display: none; }
.lux-env--minimal .lux-env__card-names { font-family: var(--le-sans); font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; font-size: 6.4cqw; }
.lux-env--minimal .lux-env__card-names em { font-family: var(--le-serif); text-transform: none; }
/* Geen lichtstreep over de kaart: Minimal opent rustig en vlak */
.lux-env--minimal .lux-env__card-glans { display: none; }

/* ---------- GOUD: diep donker papier, gouden zegel, gouden rand ---------- */
.lux-env--goud {
    --le-goud: #d8b76a;
    --le-paper: color-mix(in srgb, var(--le-accent) 22%, #130d0b);
    --le-ink: #efe1c2;
    --le-env: color-mix(in srgb, var(--le-accent) 58%, #1c1310);
    --le-env-licht: color-mix(in srgb, var(--le-env) 82%, #7a5a32);
    --le-env-donker: color-mix(in srgb, var(--le-env) 84%, #000);
    --le-liner: #caa456;
    --le-liner-print: rgba(255, 242, 205, 0.4);
    --le-card: #1a1311;
    --le-card-ink: #ead6a4;
}
.lux-env--goud .lux-env__bg { background-image: radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--le-goud) 14%, transparent), transparent 70%); }
.lux-env--goud .lux-env__bg::before { background: radial-gradient(40% 34% at 50% 44%, rgba(255, 230, 170, 0.28), transparent 72%); mix-blend-mode: screen; }
.lux-env--goud .le-w1 { stop-color: #f7e7b8; }
.lux-env--goud .le-w2 { stop-color: #cfa652; }
.lux-env--goud .le-w3 { stop-color: #7a581b; }
.lux-env--goud .le-d1 { stop-color: #8a6524; }
.lux-env--goud .le-d2 { stop-color: #e9cd88; }
.lux-env--goud .le-r1 { stop-color: #fff2cc; }
.lux-env--goud .le-r2 { stop-color: #6c4e16; }
.lux-env--goud .lux-env__seal { --le-accent: #b8923a; }
.lux-env--goud .lux-env__barst polyline { stroke: #4a3410; }
.lux-env--goud .lux-env__chip { background: #a9842f; }
.lux-env--goud .lux-env__flap--dicht {
    filter: drop-shadow(0 -.8px 0 var(--le-goud)) drop-shadow(0 .8px 0 var(--le-goud)) drop-shadow(.8px 0 0 var(--le-goud)) drop-shadow(-.8px 0 0 var(--le-goud)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45));
}
.lux-env--goud .lux-env__stuk--l,
.lux-env--goud .lux-env__stuk--r,
.lux-env--goud .lux-env__stuk--b { filter: drop-shadow(.6px 0 0 color-mix(in srgb, var(--le-goud) 55%, transparent)) drop-shadow(-.6px 0 0 color-mix(in srgb, var(--le-goud) 55%, transparent)); }
.lux-env--goud .lux-env__card { background-image: var(--le-grain), linear-gradient(165deg, rgba(255, 230, 170, 0.08), transparent 45%, rgba(0, 0, 0, 0.3)); }
.lux-env--goud .lux-env__card-rand { border-color: color-mix(in srgb, var(--le-goud) 70%, transparent); }
.lux-env--goud .lux-env__card-rand::after { border-color: color-mix(in srgb, var(--le-goud) 35%, transparent); }
.lux-env--goud .lux-env__card-kicker,
.lux-env--goud .lux-env__card-orn,
.lux-env--goud .lux-env__card-names em,
.lux-env--goud .lux-env__names .amp,
.lux-env--goud .lux-env__kicker,
.lux-env--goud .lux-env__hint { color: var(--le-goud); }
.lux-env--goud .lux-env__hint::before { background: var(--le-goud); }
.lux-env--goud .lux-env__card-date { color: color-mix(in srgb, var(--le-goud) 80%, transparent); }
.lux-env--goud .lux-env__card-glans { background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 190, 0.35), transparent 60%); mix-blend-mode: screen; }
/* De gouden lichtstreep die bij de tik over de envelop trekt (JS beweegt de <i>) */
.lux-env--goud .lux-env__goud-glans {
    position: absolute;
    inset: 0;
    border-radius: var(--le-r);
    overflow: hidden;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
}
.lux-env--goud .lux-env__goud-glans i {
    position: absolute;
    inset: -30% -80%;
    background: linear-gradient(110deg, transparent 40%, rgba(255, 226, 150, 0.22) 47%, rgba(255, 240, 200, 0.6) 50%, rgba(255, 226, 150, 0.22) 53%, transparent 60%);
    transform: translateX(-62%);
    will-change: transform;
}

/* ---------- LINT: zachte tint, bloemetjesvoering, satijnen lint met strik ---------- */
.lux-env--lint {
    --le-env: color-mix(in srgb, var(--le-accent) 16%, #fbf4ec);
    --le-env-licht: color-mix(in srgb, var(--le-env) 80%, #ffffff);
    --le-env-donker: color-mix(in srgb, var(--le-env) 88%, #3a2622);
    --le-liner: color-mix(in srgb, var(--le-accent) 42%, #ffffff);
    --le-liner-print: color-mix(in srgb, var(--le-accent) 85%, #3a1a1a);
    --le-foulard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23000'%3E%3Ccircle cx='10' cy='10' r='2.2'/%3E%3Ccircle cx='10' cy='4.5' r='1.6'/%3E%3Ccircle cx='10' cy='15.5' r='1.6'/%3E%3Ccircle cx='4.5' cy='10' r='1.6'/%3E%3Ccircle cx='15.5' cy='10' r='1.6'/%3E%3Ccircle cx='30' cy='30' r='2.2'/%3E%3Ccircle cx='30' cy='24.5' r='1.6'/%3E%3Ccircle cx='30' cy='35.5' r='1.6'/%3E%3Ccircle cx='24.5' cy='30' r='1.6'/%3E%3Ccircle cx='35.5' cy='30' r='1.6'/%3E%3Cpath d='M30 10c3 0 5 2 5 5-3 0-5-2-5-5zm-20 20c-3 0-5-2-5-5 3 0 5 2 5 5z'/%3E%3C/g%3E%3C/svg%3E");
    --le-lint: var(--le-accent);
}
.lux-env__lint {
    position: absolute;
    left: -1.5%;
    right: -1.5%;
    top: 57%;
    height: 9.5%;
    transform: translateY(-50%);
    pointer-events: none;
}
.lux-env__lint-l,
.lux-env__lint-r {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.5%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--le-lint) 70%, #fff) 0%, var(--le-lint) 38%, color-mix(in srgb, var(--le-lint) 78%, #000) 100%);
    box-shadow: 0 2px 3px rgba(40, 20, 20, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    will-change: transform;
}
.lux-env__lint-l { left: 0; }
.lux-env__lint-r { right: 0; }
.lux-env__strik {
    position: absolute;
    left: 50%;
    top: 56%;
    width: 34%;
    transform: translate(-50%, -46%);
    filter: drop-shadow(0 4px 5px rgba(40, 20, 20, 0.3));
    will-change: transform;
}
.lux-env__strik svg { display: block; width: 100%; height: auto; overflow: visible; }
.lux-env__strik .lus { fill: var(--le-lint); }
.lux-env__strik .gat { fill: color-mix(in srgb, var(--le-lint) 62%, #000); opacity: 0.5; }
.lux-env__strik .licht { fill: #fff; opacity: 0.28; }
.lux-env__strik .donker { fill: #000; opacity: 0.22; }
.lux-env__label {
    position: absolute;
    left: 58%;
    top: 66%;
    width: 14%;
    aspect-ratio: 5 / 3;
    transform: rotate(-6deg);
    background: #fffdf8;
    box-shadow: 0 2px 4px rgba(40, 20, 20, 0.22);
    display: grid;
    place-items: center;
    font-family: var(--le-serif);
    font-weight: 600;
    font-size: calc(var(--le-w) * 0.034);
    letter-spacing: 0.05em;
    color: var(--le-card-ink);
    will-change: transform;
}
.lux-env__label::before {
    content: '';
    position: absolute;
    left: 10%;
    top: 50%;
    width: 5%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #a89;
    transform: translateY(-50%);
}
.lux-env__label em { font-style: italic; color: var(--le-accent); font-size: 0.8em; padding: 0 0.1em; }

/* ============================================================
   REDUCED MOTION: envelop staat stil, opent met een fade
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .lux-env .lux-env__kicker,
    .lux-env__stage,
    .lux-env .lux-env__names,
    .lux-env .lux-env__date,
    .lux-env .lux-env__hint,
    .lux-env .lux-env__skip,
    .lux-env__float,
    .lux-env__shadow,
    .lux-env__hint::before,
    .lux-env__seal-glint::before,
    .lux-env__glans::after { animation: none !important; }
    .lux-env .lux-env__date { opacity: .72; }
    .lux-env .lux-env__skip { opacity: .55; }
}