/* ══════════════════════════════════════════════════════════════
   CONTACT — glass envelope (see /assets/envelope.js)
   JS writes on .ev-stage: --flap (0 closed .. 1 open), --lift (card
   out of the pocket), --turn (card swing), --seal (check), plus
   camera --ry --rx (deg), --k, --x --y (percent).
   Depth order inside the envelope: flap-open < back < card < front
   < flap-closed < seal.
   ══════════════════════════════════════════════════════════════ */

.ev-stage {
    --u: min(10vw, 19vh);
    --EW: calc(var(--u) * 2.6);
    --EH: calc(var(--u) * 1.65);
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse 45% 45% at calc(var(--x, 50) * 1%) calc(var(--y, 50) * 1%), rgba(16, 201, 138, calc(0.1 + var(--lift, 0) * 0.08 + var(--seal, 0) * 0.08)), rgba(16, 201, 138, 0) 70%),
        #0d110f;
    perspective: 1400px;
    perspective-origin: 50% 40%;
}

.ev-rig {
    position: absolute;
    left: calc(var(--x, 50) * 1%);
    top: calc(var(--y, 50) * 1%);
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform:
        scale3d(var(--k, 1), var(--k, 1), var(--k, 1))
        rotateX(calc(var(--rx, 12) * 1deg))
        rotateY(calc(var(--ry, 0) * 1deg));
}
.ev-glow {
    position: absolute;
    width: calc(var(--EW) * 1.6);
    height: calc(var(--EW) * 1.1);
    left: calc(var(--EW) * -0.8);
    top: calc(var(--EW) * -0.55);
    transform: translateZ(calc(var(--u) * -0.8));
    background: radial-gradient(closest-side, rgba(16, 201, 138, 0.28), rgba(16, 201, 138, 0));
}

.ev-env {
    position: absolute;
    width: var(--EW);
    height: var(--EH);
    left: calc(var(--EW) / -2);
    top: calc(var(--EH) / -2);
    transform-style: preserve-3d;
}

.ev-back {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--u) * 0.05);
    background: linear-gradient(160deg, rgba(16, 201, 138, 0.16), rgba(16, 201, 138, 0.04));
    border: 1px solid rgba(62, 224, 168, 0.55);
    box-shadow: inset 0 0 calc(var(--u) * 0.4) rgba(16, 201, 138, 0.2), 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

.ev-flap, .ev-front { position: absolute; left: 0; width: 100%; }
.ev-flap svg, .ev-front svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ev-flap path, .ev-front path {
    stroke: #3ee0a8;
    stroke-width: 1.2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px rgba(16, 201, 138, 0.7));
}

/* flap hinges on the top edge: 0 = folded down over the front, 1 = open */
.ev-flap {
    top: 0;
    height: 58%;
    transform-origin: 50% 0;
    transform: rotateX(calc(var(--flap, 0) * 178deg)) translateZ(calc(var(--u) * 0.06));
}
.ev-flap path { fill: rgba(16, 36, 28, 0.88); }

.ev-front {
    top: 0;
    height: 100%;
    transform: translateZ(calc(var(--u) * 0.045));
}
.ev-front path { fill: rgba(12, 28, 21, 0.82); }

/* message card: slides up out of the pocket */
.ev-card {
    position: absolute;
    left: 6%;
    top: 7%;
    width: 88%;
    height: 88%;
    box-sizing: border-box;
    padding: calc(var(--u) * 0.14) calc(var(--u) * 0.16);
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 0.07);
    border-radius: calc(var(--u) * 0.04);
    background: linear-gradient(180deg, #16241d, #0f1813);
    border: 1px solid rgba(62, 224, 168, calc(0.3 + var(--lift, 0) * 0.5));
    box-shadow: 0 0 calc(var(--u) * 0.5) rgba(16, 201, 138, calc(var(--lift, 0) * 0.45));
    transform:
        translateY(calc(var(--lift, 0) * var(--EH) * -0.78))
        translateZ(calc(var(--u) * 0.02 + var(--turn, 0) * var(--u) * 0.3))
        rotateY(calc(var(--turn, 0) * -16deg))
        rotateX(calc(var(--turn, 0) * 6deg));
}
.ev-line { display: block; height: calc(var(--u) * 0.07); border-radius: 99px; background: rgba(240, 240, 237, 0.85); }
.ev-line.w1 { width: 58%; }
.ev-line.w2 { width: 38%; background: rgba(240, 240, 237, 0.35); margin-bottom: calc(var(--u) * 0.04); }
.ev-field { display: block; height: calc(var(--u) * 0.16); border-radius: calc(var(--u) * 0.03); border: 1px solid rgba(240, 240, 237, 0.18); background: rgba(255, 255, 255, 0.03); }
.ev-field.tall { height: calc(var(--u) * 0.34); }
.ev-send { display: block; width: 36%; height: calc(var(--u) * 0.15); border-radius: 99px; background: #10c98a; box-shadow: 0 0 calc(var(--u) * 0.2) rgba(16, 201, 138, 0.6); }

/* seal: a green check where the flap tip meets the front */
.ev-seal {
    position: absolute;
    left: 50%;
    top: 58%;
    width: calc(var(--u) * 0.42);
    height: calc(var(--u) * 0.42);
    margin: calc(var(--u) * -0.21) 0 0 calc(var(--u) * -0.21);
    border-radius: 50%;
    background: #10c98a;
    box-shadow: 0 0 0 calc(var(--u) * 0.06) rgba(16, 201, 138, 0.25), 0 0 calc(var(--u) * 0.6) rgba(16, 201, 138, 0.9);
    transform: translateZ(calc(var(--u) * 0.1)) scale(var(--seal, 0));
    opacity: var(--seal, 0);
}
.ev-seal svg { width: 100%; height: 100%; }
.ev-seal path { fill: none; stroke: #04140d; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.ev-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 11, 9, 0.7) 0%, rgba(8, 11, 9, 0.22) 44%, rgba(8, 11, 9, 0) 62%),
        radial-gradient(ellipse 85% 80% at 60% 45%, rgba(8, 11, 9, 0), rgba(8, 11, 9, 0.5) 100%);
}

/* ── PAGE CONTENT ON TOP ── (the contact grid is already glass via
   body.explode in explode.css) */
body.envelope .page-hero { background: transparent; }
body.envelope main > section { background: transparent; border-top: 0; }
body.envelope .prose.ev-note {
    max-width: none;
    background: var(--glass-strong);
    border: 1px solid var(--border);
    padding: 40px 40px 36px;
}
body.envelope .prose.ev-note > * { max-width: 760px; }
body.envelope .contact-form,
body.envelope .contact-info,
body.envelope .step { background: var(--glass-strong); }

@media (min-width: 1000px) and (min-aspect-ratio: 13/10) {
    body.envelope .prose.ev-note,
    body.envelope .steps { max-width: min(600px, 44vw); }
    body.envelope .pc-band { justify-content: flex-start; padding-left: max(48px, calc((100vw - 1200px) / 2 + 48px)); }
}
@media (max-width: 999px), (max-aspect-ratio: 13/10) {
    .ev-stage { --u: min(20vw, 13vh); }
}
@media (max-width: 700px) {
    body.envelope .prose.ev-note { padding: 28px 22px; }
}