/* ============================================================
   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. Zo neemt de envelop automatisch de gekozen kleuren
   over. Zelfstandig: geen afhankelijkheid van template-stylesheets.
   ============================================================ */
.lux-env,
.lux-env__sheet {
    --le-serif: '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 brief + vel: licht maar getint naar de site-achtergrond,
       zodat de morph naadloos in élk palet overloopt. */
    --le-sheet: color-mix(in srgb, #ffffff 86%, var(--le-paper));
    --le-sheet-2: color-mix(in srgb, #ffffff 70%, var(--le-paper));
}

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

.lux-env {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--le-paper);
    background-image:
        radial-gradient(900px 560px at 50% -8%, color-mix(in srgb, var(--le-accent) 10%, transparent), transparent 62%),
        radial-gradient(760px 520px at 12% 105%, color-mix(in srgb, var(--le-accent) 7%, transparent), transparent 58%),
        radial-gradient(700px 480px at 92% 88%, color-mix(in srgb, #ffffff 60%, transparent), transparent 55%);
    transition: opacity 520ms ease, visibility 520ms ease;
    padding: 24px;
    box-sizing: border-box;
}
.lux-env[hidden] { display: none; }
.lux-env.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.lux-env__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    max-width: 520px;
    width: 100%;
    transition: transform 620ms cubic-bezier(.22,.61,.36,1);
}
.lux-env.is-open .lux-env__inner { transform: scale(1.03); }
.lux-env__inner:focus-visible .lux-env__hint { text-decoration: underline; text-underline-offset: 4px; }

@keyframes le-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.lux-env__kicker {
    font-family: var(--le-sans);
    color: var(--le-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin: 0 0 30px;
    animation: le-fade-in 700ms ease-out both;
}

/* — Envelop —
   Opbouw: rug met liner-patroon → brief → voorkant (zijflappen + bodem,
   in een afgeronde overflow-wrapper) → klep → wax-zegel. Rust: zachte
   float met lichte 3D-tilt boven een slagschaduw. */
.lux-env__stage {
    perspective: 1200px;
    margin-bottom: 38px;
    animation: le-fade-in 700ms 120ms ease-out both;
}
.lux-env__scene { position: relative; transform-style: preserve-3d; }

.lux-env__envelope {
    position: relative;
    width: min(78vw, 330px);
    aspect-ratio: 33 / 22;
    transform-style: preserve-3d;
    transition: transform 620ms cubic-bezier(.22,.61,.36,1);
}
@keyframes le-env-float {
    0%, 100% { transform: rotateX(7deg) translateY(0); }
    50% { transform: rotateX(7deg) translateY(-8px); }
}
.lux-env:not(.is-open) .lux-env__envelope { animation: le-env-float 3.8s ease-in-out infinite; }
.lux-env.is-open .lux-env__envelope { transform: rotateX(0deg) translateY(-12px); }

/* Slagschaduw onder de envelop */
.lux-env__shadow {
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    width: 84%;
    height: 24px;
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--le-ink) 34%, transparent), transparent 70%);
    filter: blur(7px);
    opacity: 0.5;
    transition: opacity 620ms ease, transform 620ms ease;
    pointer-events: none;
}
.lux-env.is-open .lux-env__shadow { opacity: 0.28; transform: translateX(-50%) scaleX(0.8); }

/* Rug met subtiel diamant-liner-patroon */
.lux-env__back {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background:
        repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--le-accent) 14%, transparent) 0 1px,
            transparent 1px 9px),
        repeating-linear-gradient(-45deg,
            color-mix(in srgb, var(--le-accent) 14%, transparent) 0 1px,
            transparent 1px 9px),
        linear-gradient(180deg,
            color-mix(in srgb, var(--le-accent) 48%, var(--le-paper)),
            color-mix(in srgb, var(--le-accent) 38%, var(--le-paper)));
    box-shadow: 0 32px 58px -26px color-mix(in srgb, var(--le-accent) 75%, transparent);
    z-index: 1;
    /* Expliciete diepte: binnen preserve-3d sorteert de browser op z-positie,
       dus elke laag krijgt een eigen translateZ (rug -2, brief 0, voorkant +2,
       klep +4, zegel +6) — anders schildert een bewegende laag er dwars
       doorheen. Enkele px op perspective 1200px is visueel onzichtbaar. */
    transform: translateZ(-2px);
}

/* Brief in de envelop */
.lux-env__letter {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 9%;
    bottom: 10%;
    background: linear-gradient(180deg, var(--le-sheet), var(--le-sheet-2));
    border: 1px solid color-mix(in srgb, var(--le-accent) 16%, transparent);
    border-radius: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    box-sizing: border-box;
    transition: transform 620ms cubic-bezier(.2,.7,.3,1) 200ms;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--le-ink) 45%, transparent);
    transform: translateY(0) translateZ(0);
}
.lux-env.is-open .lux-env__letter { transform: translateY(-42%) translateZ(0); }

.lux-env__letter-mono {
    font-family: var(--le-serif);
    font-size: clamp(24px, 6vw, 30px);
    font-weight: 500;
    color: var(--le-accent);
    line-height: 1;
    letter-spacing: 0.08em;
}
.lux-env__letter-line {
    width: 30px;
    height: 1px;
    background: color-mix(in srgb, var(--le-accent) 45%, transparent);
}
.lux-env__letter-sub {
    font-family: var(--le-sans);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--le-ink);
    opacity: 0.65;
}

/* Voorkant: zijflappen + bodem met vouwschaduwen */
.lux-env__front {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
    transform: translateZ(2px);
}
.lux-env__side,
.lux-env__bottom {
    position: absolute;
    inset: 0;
}
.lux-env__side--left {
    background: linear-gradient(105deg,
        color-mix(in srgb, var(--le-accent) 20%, var(--le-paper)),
        color-mix(in srgb, var(--le-accent) 30%, var(--le-paper)));
    clip-path: polygon(0 0, 47% 50%, 0 100%);
    filter: drop-shadow(2px 0 3px color-mix(in srgb, var(--le-ink) 18%, transparent));
}
.lux-env__side--right {
    background: linear-gradient(255deg,
        color-mix(in srgb, var(--le-accent) 20%, var(--le-paper)),
        color-mix(in srgb, var(--le-accent) 30%, var(--le-paper)));
    clip-path: polygon(100% 0, 53% 50%, 100% 100%);
    filter: drop-shadow(-2px 0 3px color-mix(in srgb, var(--le-ink) 18%, transparent));
}
.lux-env__bottom {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--le-accent) 16%, var(--le-paper)),
        color-mix(in srgb, var(--le-accent) 27%, var(--le-paper)));
    clip-path: polygon(0 100%, 50% 44%, 100% 100%);
    filter: drop-shadow(0 -2px 4px color-mix(in srgb, var(--le-ink) 16%, transparent));
}

/* Klep — licht op en lost op terwijl hij openklapt (geen harde driehoek
   over de brief; fade vermijdt ook z-sorteer-artefacten) */
.lux-env__flap {
    position: absolute;
    inset: 0;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--le-accent) 31%, var(--le-paper)),
        color-mix(in srgb, var(--le-accent) 22%, var(--le-paper)));
    clip-path: polygon(0 0, 100% 0, 50% 60%);
    z-index: 6;
    transform-origin: 50% 0;
    transform: rotateX(0deg) translateZ(4px);
    filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--le-ink) 20%, transparent));
}
.lux-env.is-open .lux-env__flap {
    animation: le-flap-open 480ms cubic-bezier(.5,.03,.4,1) 30ms forwards;
}
@keyframes le-flap-open {
    0%   { transform: rotateX(0deg) translateZ(4px);   opacity: 1; }
    55%  { opacity: 1; }
    100% { transform: rotateX(142deg) translateZ(6px); opacity: 0; }
}

/* Wax-zegel met initialen — breekt los zodra de klep opent */
.lux-env__seal {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%) translateZ(6px);
    width: clamp(56px, 17vw, 68px);
    height: clamp(56px, 17vw, 68px);
    border-radius: 48% 52% 51% 49% / 52% 48% 53% 47%;
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, #ffffff 28%, var(--le-accent)), var(--le-accent) 56%, color-mix(in srgb, #000000 24%, var(--le-accent)));
    box-shadow:
        0 5px 16px -5px color-mix(in srgb, var(--le-accent) 85%, #000000),
        inset 0 2px 3px color-mix(in srgb, #ffffff 22%, transparent),
        inset 0 -2px 4px color-mix(in srgb, #000000 20%, transparent);
    display: grid;
    place-items: center;
    z-index: 7;
    transition: opacity 260ms ease, transform 300ms cubic-bezier(.3,.6,.4,1);
}
.lux-env__seal::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, #ffffff 38%, transparent);
}
.lux-env__seal::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 52% 48% 49% 51% / 47% 53% 48% 52%;
    background: color-mix(in srgb, var(--le-accent) 55%, transparent);
    z-index: -1;
}
.lux-env__seal span {
    font-family: var(--le-serif);
    color: #FFFAF3;
    font-size: clamp(16px, 4.6vw, 20px);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    text-shadow: 0 1px 2px color-mix(in srgb, #000000 30%, transparent);
}
.lux-env.is-open .lux-env__seal {
    opacity: 0;
    transform: translate(-50%, -95%) translateZ(6px) scale(1.14) rotate(-7deg);
}

/* Tekst rond de envelop wijkt zodra hij opent */
.lux-env.is-open .lux-env__kicker,
.lux-env.is-open .lux-env__names,
.lux-env.is-open .lux-env__date,
.lux-env.is-open .lux-env__hint {
    animation: none;
    opacity: 0;
    transition: opacity 300ms ease;
}

/* Vel dat vanuit de brief het scherm vult (FLIP-morph via JS) */
.lux-env__sheet {
    position: fixed;
    inset: 0;
    z-index: 2001;
    background: linear-gradient(180deg, var(--le-sheet), var(--le-sheet-2));
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    will-change: transform;
}

/* Namen + datum onder de envelop */
.lux-env__names {
    font-family: var(--le-serif);
    color: var(--le-ink);
    font-size: clamp(30px, 7.4vw, 44px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 0.01em;
    margin: 0;
    animation: le-fade-in 700ms 220ms ease-out both;
}
.lux-env__names .amp {
    font-style: italic;
    color: var(--le-accent);
    padding: 0 0.08em;
}
.lux-env__date {
    font-family: var(--le-sans);
    color: var(--le-ink);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.7;
    margin: 14px 0 0;
    animation: le-fade-in 700ms 300ms ease-out both;
}

/* Tik-hint */
.lux-env__hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--le-sans);
    color: var(--le-accent);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 34px 0 0;
    animation: le-fade-in 700ms 420ms ease-out both;
}
@keyframes le-pulse {
    0%, 100% { transform: scale(1); opacity: 0.55; }
    50% { transform: scale(1.55); opacity: 1; }
}
.lux-env__hint::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--le-accent);
    animation: le-pulse 1.8s ease-in-out infinite;
}
.lux-env.is-open .lux-env__hint { opacity: 0; transition: opacity 250ms ease; }

/* Overslaan-link */
.lux-env__skip {
    position: absolute;
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: 0;
    font-family: var(--le-sans);
    color: var(--le-ink);
    opacity: 0.55;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
    padding: 10px 16px;
}
.lux-env__skip:hover { opacity: 0.85; }

/* ============================================================
   REDUCED MOTION — envelop verschijnt statisch, opent instant
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .lux-env__kicker,
    .lux-env__stage,
    .lux-env__names,
    .lux-env__date,
    .lux-env__hint { animation: none !important; }
    .lux-env:not(.is-open) .lux-env__envelope { animation: none; }
    .lux-env__hint::before { animation: none; }
    .lux-env__envelope,
    .lux-env__letter,
    .lux-env__flap,
    .lux-env__seal,
    .lux-env__inner { transition-duration: 0.01ms !important; }
}