/* ==================================================================
   PRISTAGE HJR — Photographic envelope (6.0.0)
   Shared by the invitation's opening (Open Card "envelope3d") and the
   landing hero. Drawn by assets/js/dis-envelope.js.

   The envelope is a flat stack ordered by z-index (back, letter, pocket,
   flap, seal). Only the flap turns in 3D, on its hinge, and both of its
   faces are one plane: the lining is the back face, turned with
   rotateY so it stays on the hinge when the flap swings over the top.
   ================================================================== */
.ev{ position:relative; width:100%; aspect-ratio:1349 / 950; }
.ev-tilt{
    position:absolute; inset:0; transform-style:preserve-3d;
    transform:rotateX(var(--ev-rx,0deg)) rotateY(var(--ev-ry,0deg)) rotateZ(var(--ev-rz,0deg));
}
.ev-env{
    position:absolute; inset:0; transform-style:flat; will-change:transform;
    perspective:var(--ev-persp,1600px); perspective-origin:50% 0%;
}
.ev-env > img, .ev-env > div, .ev-env > i{ position:absolute; display:block; margin:0; padding:0; border:0; max-width:none; user-select:none; -webkit-user-drag:none; }
.ev-in, .ev-pocket, .ev-flap{ left:0; top:0; width:100%; height:100% !important; transform-origin:50% .4%; }
.ev-in, .ev-pocket{ will-change:transform,opacity; }
.ev-in{ z-index:0; }
.ev-pocket{ z-index:3; }
.ev-letter{ left:9.27%; top:4.1%; width:85.6%; aspect-ratio:1000 / 655; z-index:2; will-change:transform; transform-origin:50% 50%; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ev-letter > img{ position:absolute; inset:0; width:100%; height:100% !important; max-width:none; display:block; }
.ev-letter::after{ /* soft contact shadow the card casts once it is out */
    content:''; position:absolute; left:4%; right:4%; bottom:-3%; height:12%; z-index:-1; border-radius:50%;
    background:radial-gradient(closest-side, rgba(4,12,34,.42), transparent); filter:blur(6px);
    opacity:calc(var(--ev-p,0) * 1.4 - .4);
}
/* never opacity / will-change:opacity / filter on the flap itself: those flatten
   its 3D context in Chrome and the lining would show the outside paper instead */
.ev-flap{ z-index:4; transform-style:preserve-3d; will-change:transform; }
.ev-flap > img{ position:absolute; inset:0; width:100%; height:100% !important; max-width:none; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ev-flap-in{ transform-origin:51.33% 50%; transform:rotateY(180deg); }
.ev-seal{ left:36.7%; top:19.02%; width:26.62%; aspect-ratio:1; z-index:5; transform-origin:50% 52%; will-change:transform,opacity; }
.ev-seal > img{ position:absolute; inset:0; width:100%; height:100% !important; max-width:none; display:block; }
.ev-half{ z-index:6; opacity:0; pointer-events:none; }
.ev-half-l{ clip-path:polygon(0 0, 55% 0, 47% 46%, 53% 62%, 45% 100%, 0 100%); }
.ev-half-r{ clip-path:polygon(55% 0, 100% 0, 100% 100%, 45% 100%, 53% 62%, 47% 46%); }
.ev-crumb{
    left:49.4%; top:37.4%; width:1.1%; aspect-ratio:1; border-radius:50%; z-index:6; opacity:0; pointer-events:none;
    background:radial-gradient(circle at 35% 30%, var(--ev-wax-hi,#6f9bf0), var(--ev-wax,#12398a) 70%);
}
.ev-shadow{
    position:absolute; left:10%; right:10%; height:12%; bottom:-6%; z-index:-1; border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side, rgba(2,8,26,.55), transparent); filter:blur(8px);
}
/* the couple's initials pressed into the blank wax */
.ev-mono{
    position:absolute; left:0; right:0; top:50.5%; transform:translateY(-50%); z-index:2;
    text-align:center; line-height:1; white-space:nowrap; pointer-events:none;
    font-family:var(--ev-mono-font,"Pinyon Script","Great Vibes",cursive); font-weight:400;
    font-size:var(--ev-mono-size,30px); letter-spacing:-.04em;
    color:var(--ev-wax-ink,rgba(196,214,255,.82));
    text-shadow:-.04em -.05em 0 rgba(255,255,255,.34), .05em .07em .06em rgba(0,0,0,.55);
    mix-blend-mode:screen;
}
.ev-mono i{ font-style:normal; font-size:.62em; margin:0 .04em; vertical-align:.18em; opacity:.9; }

/* colourways: wax highlights for the crumbs and the monogram */
.ev-c-sapphire{ --ev-wax:#12398a; --ev-wax-hi:#6f9bf0; --ev-wax-ink:rgba(196,214,255,.86); --ev-print:#1d3f8c; --ev-rule:#3a62b8; }
.ev-c-gold{     --ev-wax:#8a6420; --ev-wax-hi:#f2d58a; --ev-wax-ink:rgba(255,236,184,.9);  --ev-print:#7a5a1e; --ev-rule:#b48c3c; }
.ev-c-rose{     --ev-wax:#9e4a5e; --ev-wax-hi:#f4bcc8; --ev-wax-ink:rgba(255,218,226,.9);  --ev-print:#8e3f52; --ev-rule:#c07a8a; }
.ev-c-burgundy{ --ev-wax:#5e1322; --ev-wax-hi:#d9707f; --ev-wax-ink:rgba(255,196,204,.86); --ev-print:#6b1a2a; --ev-rule:#9a3a4c; }
.ev-c-emerald{  --ev-wax:#1d5b45; --ev-wax-hi:#9ddcbd; --ev-wax-ink:rgba(206,248,228,.88); --ev-print:#1e5644; --ev-rule:#4b8a70; }
.ev-c-pearl{    --ev-wax:#a9a092; --ev-wax-hi:#fffaf0; --ev-wax-ink:rgba(255,255,255,.9);  --ev-print:#5e564b; --ev-rule:#a39886; }
.ev-c-pearl .ev-mono{ mix-blend-mode:normal; color:rgba(120,110,96,.55); text-shadow:-.03em -.04em 0 rgba(255,255,255,.8), .04em .05em .04em rgba(0,0,0,.25); }

/* the printed face of the card inside (live text, letterpress) */
.ev-face{
    position:absolute; inset:9% 6.5%; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; color:var(--ev-print,#1d3f8c); mix-blend-mode:multiply; pointer-events:none;
}
.ev-face::before, .ev-face::after{ content:''; position:absolute; pointer-events:none; border:1px solid var(--ev-rule,#3a62b8); }
.ev-face::before{ inset:-5% -3.2%; opacity:.9; }
.ev-face::after{ inset:-3.4% -2%; border-width:.5px; opacity:.7; }
.ev-face > *{ position:relative; margin:0; text-shadow:0 1px 0 rgba(255,255,255,.55); }
.ev-face .ev-k{ font-family:"Cinzel","Cormorant Garamond",Georgia,serif; font-size:var(--ev-fk,8.5px); letter-spacing:.32em; text-transform:uppercase; opacity:.85; }
.ev-face .ev-n{ font-family:var(--ev-script,"Pinyon Script","Great Vibes",cursive); font-size:var(--ev-fn,32px); line-height:1.08; margin:.18em 0 .12em; white-space:nowrap; }
.ev-face .ev-n i{ font-style:normal; font-size:.62em; margin:0 .24em; }
.ev-face .ev-d{ font-family:"Cinzel","Cormorant Garamond",Georgia,serif; font-size:var(--ev-fd,8px); letter-spacing:.22em; text-transform:uppercase; }
.ev-face .ev-v{ font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:var(--ev-fv,9px); margin-top:.5em; opacity:.85; }
.ev-face .ev-rule{ width:18%; height:1px; margin:.55em auto .45em; background:currentColor; opacity:.5; }


/* ==================================================================
   The invitation's own opening (inside .pr-card, sized in --pr-u)
   ================================================================== */
.dis-open-card.dis-oc-envelope3d{
    --u:var(--pr-u, 1px);
    --ev-mono-size:calc(var(--u) * 33);
    --ev-fk:calc(var(--u) * 7.6); --ev-fn:calc(var(--u) * 30); --ev-fd:calc(var(--u) * 7.2); --ev-fv:calc(var(--u) * 8.6);
    cursor:grab; touch-action:none; overscroll-behavior:contain; z-index:40;
    font-family:"Cormorant Garamond",Georgia,serif; color:#eef3ff;
    background:
        radial-gradient(70% 46% at 50% 60%, rgba(84,128,226,.32), transparent 70%),
        radial-gradient(120% 90% at 50% 40%, #173a86 0%, #0b2257 46%, #050e27 100%);
    transition:opacity .85s cubic-bezier(.4,0,.2,1), visibility 0s linear .85s;
}
.dis-oc-envelope3d.ev-bg-paper{
    color:var(--pr-ink,#2b2a33);
    background:
        radial-gradient(70% 46% at 50% 62%, rgba(255,255,255,.75), transparent 72%),
        radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--pr-paper,#f7f3ea) 96%, #fff), color-mix(in srgb, var(--pr-paper,#f7f3ea) 82%, var(--pr-ink,#333)));
}
.dis-oc-envelope3d::before{ /* velvet grain */
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.22; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dis-oc-envelope3d:active{ cursor:grabbing; }
/* the old generic pieces are not used by this opening */
.dis-oc-envelope3d .dis-oc-piece, .dis-oc-envelope3d .dis-oc-cover,
.dis-oc-envelope3d .dis-oc-flap, .dis-oc-envelope3d .dis-oc-seal{ display:none !important; }

.dis-oc-envelope3d .ev-card{
    position:absolute; z-index:3;
    width:calc(var(--u) * 340); left:calc(50% - var(--u) * 170);
    top:calc(56% - var(--u) * 119.7);
}
.dis-oc-envelope3d .ev-tilt{ animation:ev-float 6.5s ease-in-out infinite; }
.dis-oc-envelope3d.ev-moving .ev-tilt, .dis-oc-envelope3d.ev-opened .ev-tilt{ animation-play-state:paused; }
@keyframes ev-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 calc(var(--u) * -6); } }
.dis-oc-envelope3d .ev-shadow{ bottom:-9%; }

/* words above the envelope (also where a personal link greets the guest) */
.dis-oc-envelope3d .dis-oc-inner{
    position:absolute; left:8%; right:8%; top:13%; transform:none; z-index:4; gap:calc(var(--u) * 6);
    transition:opacity .5s ease, transform .6s ease; color:inherit;
    opacity:calc(1 - var(--ev-p,0) * 3.2);
}
.dis-oc-envelope3d .dis-oc-kicker{
    font-family:"Cinzel","Cormorant Garamond",Georgia,serif; font-size:calc(var(--u) * 9.5); letter-spacing:.42em;
    color:#b9c9ee; text-transform:uppercase;
}
.dis-oc-envelope3d.ev-bg-paper .dis-oc-kicker{ color:var(--pr-accent,#8a6a3b); }
.dis-oc-envelope3d .dis-oc-title{
    font-family:var(--px-script,"Pinyon Script"),"Pinyon Script","Great Vibes",cursive; font-style:normal;
    font-size:calc(var(--u) * 40); line-height:1.12; color:#f5f8ff; text-shadow:0 calc(var(--u) * 2) calc(var(--u) * 18) rgba(0,0,0,.35);
}
.dis-oc-envelope3d.ev-bg-paper .dis-oc-title{ color:var(--pr-ink,#2b2a33); text-shadow:none; }
/* 6.1.2: name / date / place slots still empty (the Edit page fills them as the customer types) take no room */
.dis-oc-envelope3d [hidden]{ display:none !important; }
.dis-oc-envelope3d .dis-oc-to{ color:inherit; opacity:.86; }

.dis-open-card.dis-oc-envelope3d .dis-oc-btn{
    bottom:12.5%; z-index:5;
    padding:calc(var(--u) * 11) calc(var(--u) * 24);
    font-family:"Cinzel",Georgia,serif; font-size:calc(var(--u) * 10); font-weight:600; letter-spacing:.24em;
    color:#f4f7ff; background:rgba(255,255,255,.08);
    border:calc(var(--u) * 1) solid rgba(186,206,250,.42);
    box-shadow:0 calc(var(--u) * 10) calc(var(--u) * 28) rgba(0,6,30,.35), inset 0 1px 0 rgba(255,255,255,.18);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    animation:ev-breathe 2.8s ease-in-out infinite;
    opacity:calc(1 - var(--ev-p,0) * 6);
}
.dis-oc-envelope3d.ev-bg-paper .dis-oc-btn{ color:var(--pr-ink,#2b2a33); background:rgba(255,255,255,.55); border-color:color-mix(in srgb, var(--pr-accent,#8a6a3b) 55%, transparent); box-shadow:0 calc(var(--u) * 8) calc(var(--u) * 22) rgba(0,0,0,.12); }
@keyframes ev-breathe{ 0%,100%{ transform:translateX(-50%) scale(1); } 50%{ transform:translateX(-50%) scale(1.045); } }
.dis-oc-envelope3d .ev-hint{
    position:absolute; left:0; right:0; bottom:6.2%; z-index:5; margin:0; text-align:center; pointer-events:none;
    font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-size:calc(var(--u) * 11.5); color:#a9bce6; letter-spacing:.02em;
    opacity:calc(.9 - var(--ev-p,0) * 6);
}
.dis-oc-envelope3d.ev-bg-paper .ev-hint{ color:color-mix(in srgb, var(--pr-ink,#2b2a33) 70%, transparent); }
.dis-oc-envelope3d .ev-hint i{
    display:block; width:calc(var(--u) * 14); height:calc(var(--u) * 14); margin:0 auto calc(var(--u) * 6);
    border-left:1.5px solid currentColor; border-top:1.5px solid currentColor; transform:rotate(45deg);
    animation:ev-nudge 1.8s ease-in-out infinite;
}
@keyframes ev-nudge{ 0%,100%{ translate:0 calc(var(--u) * 4); opacity:.4; } 50%{ translate:0 calc(var(--u) * -3); opacity:1; } }

/* opened: the letter is presented, then the whole sheet dissolves into the invitation */
.dis-oc-envelope3d.ev-opened{ pointer-events:none; }
.dis-oc-envelope3d.is-open{ opacity:0; visibility:hidden; transition-delay:.45s, 1.3s; }
.dis-oc-envelope3d.is-open .ev-letter{ transition:filter .9s ease .3s; filter:blur(2px); }
.dis-open-card.dis-oc-envelope3d.is-done{ display:none !important; }

/* the edit page: a quiet replay control beside the live card */
.dis-oc-envelope3d[data-preview] .ev-hint{ display:none; }

/* failsafe: if the script never runs, the sealed sheet steps aside on its own */
.dis-oc-envelope3d:not(.ev-ready){ animation:ev-failsafe .6s ease 7s forwards; }
@keyframes ev-failsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }


@media (prefers-reduced-motion:reduce){
    .dis-oc-envelope3d .ev-tilt, .dis-oc-envelope3d .dis-oc-btn, .dis-oc-envelope3d .ev-hint i{ animation:none; }
}