/* ENVELOPE REVEAL v2 — cinematic photorealistic invitation opening · The Occasion Company
   Drop-in (same API as v1): <link rel="stylesheet" href="envelope-reveal.css">
   <div id="envelope-reveal" data-style="classic|modern|rustic" data-names="Eleanor & James"
        data-date="Saturday, June 12, 2027" data-initials="E·J"></div> (first child of body)
   <script src="envelope-reveal.js"></script> (before </body>)
   Textures: envelope-assets/paper.jpg · wax-seal.jpg · bg.jpg · grain.png
   No-JS: overlay only appears when JS adds html.er-active. Repeat visits auto-skip.
   Honors prefers-reduced-motion. */
#envelope-reveal{display:none}
html.er-active #envelope-reveal{display:flex;position:fixed;inset:0;z-index:9999;
 align-items:center;justify-content:center;overflow:hidden;opacity:1;
 background:#060504 url('envelope-assets/bg.jpg') center/cover no-repeat;
 transition:opacity 1s ease .1s;-webkit-tap-highlight-color:transparent}
/* cool-shadow color grade over the warm photo bg */
html.er-active #envelope-reveal::before{content:'';position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(24,32,52,.20) 0%,rgba(24,32,52,0) 45%,rgba(24,32,52,.12) 100%)}
/* animated film grain */
html.er-active #envelope-reveal::after{content:'';position:absolute;inset:-64px;pointer-events:none;
 background:url('envelope-assets/grain.png') 0 0/128px 128px repeat;opacity:.055;
 animation:er-grain .9s steps(4) infinite}
@keyframes er-grain{0%{transform:translate(0,0)}25%{transform:translate(-18px,12px)}
 50%{transform:translate(14px,-20px)}75%{transform:translate(-10px,-14px)}100%{transform:translate(0,0)}}
/* vignette */
.er-vignette{position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse 105% 90% at 50% 46%,rgba(0,0,0,0) 52%,rgba(0,0,0,.52) 100%)}
html.er-active #envelope-reveal.er-done{opacity:0;pointer-events:none}
.er-scene{position:relative;text-align:center;perspective:1400px;z-index:2;
 transition:transform 1.3s cubic-bezier(.25,.1,.25,1),opacity 1.3s ease;transform:translateZ(0)}
#envelope-reveal.er-revealed .er-scene{transform:scale(1.1) translateY(-14px);opacity:0}
.er-eyebrow{font-family:'Cormorant Garamond',Georgia,serif;text-transform:uppercase;
 letter-spacing:6px;font-size:12px;color:rgba(216,190,140,.85);margin-bottom:34px;
 opacity:0;animation:er-fadein 1.8s ease .6s forwards;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.er-hint{margin-top:34px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
 font-size:17px;color:rgba(240,230,210,.6);letter-spacing:.5px;opacity:0;
 animation:er-fadein 1.8s ease 1.3s forwards;transition:opacity .5s ease;
 text-shadow:0 2px 10px rgba(0,0,0,.6)}
#envelope-reveal.er-opening .er-hint,#envelope-reveal.er-rising .er-hint{opacity:0!important;animation:none}
@keyframes er-fadein{to{opacity:1}}
/* warm bloom behind the envelope — blurred, light-like */
.er-bloom{position:absolute;left:50%;top:46%;width:420px;height:420px;transform:translate(-50%,-50%);
 background:radial-gradient(circle,rgba(255,196,120,.30) 0%,rgba(255,180,100,.10) 42%,rgba(255,180,100,0) 68%);
 filter:blur(28px);opacity:.5;pointer-events:none;
 transition:opacity 1.8s ease,transform 1.8s ease}
#envelope-reveal.er-cracking .er-bloom{opacity:.68;transform:translate(-50%,-50%) scale(1.1)}
#envelope-reveal.er-rising .er-bloom{opacity:.95;transform:translate(-50%,-50%) scale(1.5)}
#envelope-reveal.er-revealed .er-bloom{opacity:1;transform:translate(-50%,-50%) scale(2.2)}
/* ============ ENVELOPE ============ */
.er-envelope{position:relative;width:min(340px,76vw);aspect-ratio:320/212;margin:0 auto;
 isolation:isolate;
 filter:drop-shadow(20px 32px 46px rgba(0,0,0,.68));
 transition:filter 1.4s ease,transform 1.4s cubic-bezier(.25,.1,.25,1);transform-style:preserve-3d}
#envelope-reveal.er-rising .er-envelope{filter:drop-shadow(10px 16px 26px rgba(0,0,0,.5));
 transform:translateY(16px) scale(.982)}
/* envelope back panel — the interior back wall, behind the card (z 1) */
.er-env-back{position:absolute;inset:0;z-index:1;border-radius:8px 10px 7px 11px/10px 7px 11px 8px;
 background:
  linear-gradient(115deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.14) 48%,rgba(0,0,0,.36) 100%),
  var(--er-tint,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))),
  url('envelope-assets/paper.jpg') center/cover;
 box-shadow:inset 0 0 34px rgba(0,0,0,.42)}
/* invitation card — starts fully INSIDE the envelope (z 2), drawn up through the mouth.
   The front body (z 4) occludes it until it clears the top edge: it can never
   show through the envelope or below its bottom edge. */
.er-card{position:absolute;left:7%;right:7%;top:4%;height:92%;z-index:2;
 background:
  linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 34%),
  url('envelope-assets/paper.jpg') center/cover;
 border-radius:3px 5px 4px 6px;
 box-shadow:0 -4px 18px rgba(0,0,0,.4);
 display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8% 8%;
 transform:translateY(0) rotateX(0deg);transform-origin:50% 100%;
 filter:brightness(.9) saturate(.95);
 opacity:0; /* hidden until the rise begins */}
.er-card::before{content:'';position:absolute;inset:6.5%;border:1px solid var(--er-rule,rgba(150,118,66,.5));
 border-radius:2px;pointer-events:none}
.er-card::after{content:'';position:absolute;inset:8.5%;border:1px solid var(--er-rule,rgba(150,118,66,.28));
 border-radius:1px;pointer-events:none}
.er-card-names{font-family:'Playfair Display',Georgia,serif;font-weight:600;
 font-size:clamp(1.5rem,7vw,2.1rem);line-height:1.22;color:var(--er-ink,#241d12);letter-spacing:.01em;
 text-align:center}
.er-card-rule{width:52px;height:1px;margin:11px 0;
 background:linear-gradient(90deg,rgba(0,0,0,0),var(--er-gold,#a5854e),rgba(0,0,0,0))}
.er-card-date{font-family:'Cormorant Garamond',Georgia,serif;text-transform:uppercase;
 letter-spacing:3px;font-size:11px;color:var(--er-muted,#6e6046);text-align:center}
#envelope-reveal.er-rising .er-card{animation:er-card-rise 2.1s cubic-bezier(.3,.06,.28,1) forwards}
@keyframes er-card-rise{
 0%{transform:translateY(0) rotateX(0deg);opacity:0;filter:brightness(.9) saturate(.95)}
 6%{opacity:1}
 14%{transform:translateY(-3%) rotateX(0deg);filter:brightness(.93) saturate(.95)} /* hesitation — static friction */
 52%{transform:translateY(-42%) rotateX(-1.5deg);filter:brightness(1.0) saturate(.98)} /* steady draw */
 76%{transform:translateY(-66%) rotateX(-3deg);filter:brightness(1.05) saturate(1)}  /* friction at the lip — slows */
 100%{transform:translateY(-88%) rotateX(-4deg);opacity:1;filter:brightness(1.08) saturate(1)}} /* drawn out, slight curl, catching the light */
/* envelope body — photographic paper, key light upper-left. FRONT panel (z 4):
   occludes the card everywhere they overlap. */
.er-body{position:absolute;inset:0;z-index:4;border-radius:8px 10px 7px 11px/10px 7px 11px 8px;
 background:
  linear-gradient(115deg,rgba(255,246,224,.24) 0%,rgba(255,246,224,0) 34%,rgba(0,0,0,0) 60%,rgba(12,7,4,.36) 100%),
  var(--er-tint,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))),
  url('envelope-assets/paper.jpg') center/cover;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -12px 26px rgba(64,42,20,.20),
  inset 14px 0 26px rgba(64,42,20,.10),inset -6px 0 18px rgba(64,42,20,.08)}
/* side fold seams */
.er-body::before{content:'';position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;
 border-radius:8px 0 0 11px;
 background:linear-gradient(100deg,rgba(64,42,20,.16),rgba(64,42,20,0) 75%);
 clip-path:polygon(0 0,100% 36%,100% 64%,0 100%)}
.er-body::after{content:'';position:absolute;top:0;bottom:0;right:0;width:30%;pointer-events:none;
 border-radius:0 10px 7px 0;
 background:linear-gradient(260deg,rgba(64,42,20,.16),rgba(64,42,20,0) 75%);
 clip-path:polygon(100% 0,0 36%,0 64%,100% 100%)}
/* dark mouth — the envelope interior opening, BEHIND the card (z 1):
   the card slides out over the dark slit, like a real envelope */
.er-mouth{position:absolute;z-index:1;top:-1.5%;left:4.5%;right:4.5%;height:15%;
 border-radius:0 0 40% 40%/0 0 100% 100%;pointer-events:none;
 background:linear-gradient(180deg,#050403 0%,#0d0a06 55%,#171208 100%);
 box-shadow:inset 0 6px 12px rgba(0,0,0,.9),0 1px 0 rgba(255,244,220,.12)}
/* flap — photographic paper, lifts in 3D with a beat of hesitation */
.er-flap{position:absolute;left:0;right:0;top:0;height:56%;z-index:5;
 background:
  linear-gradient(180deg,rgba(255,246,224,.16) 0%,rgba(255,246,224,0) 42%,rgba(12,7,4,.26) 100%),
  var(--er-tint,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))),
  url('envelope-assets/paper.jpg') center/cover;
 clip-path:polygon(0 0,100% 0,50% 100%);border-radius:8px 10px 0 0;
 transform-origin:50% 0%;transform:rotateX(0deg);
 box-shadow:inset 0 12px 16px rgba(50,32,16,.28);
 backface-visibility:hidden;-webkit-backface-visibility:hidden}
.er-flap::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;
 background:linear-gradient(180deg,rgba(50,32,16,.30),rgba(50,32,16,0));transform:translateX(-50%)}
#envelope-reveal.er-opening .er-flap,#envelope-reveal.er-rising .er-flap,#envelope-reveal.er-revealed .er-flap{
 animation:er-flap-lift 1.5s cubic-bezier(.3,.05,.3,1) forwards}
@keyframes er-flap-lift{
 0%{transform:rotateX(0deg);filter:brightness(1)}
 12%{transform:rotateX(-5deg);filter:brightness(.99)}   /* static friction */
 100%{transform:rotateX(-174deg);filter:brightness(.52)}}
/* ============ WAX SEAL — photographic, irregular, splits on crack ============ */
.er-seal{position:absolute;left:50%;top:46%;z-index:6;width:96px;height:96px;margin:-48px 0 0 -48px;
 cursor:pointer;filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))}
.er-seal-half{position:absolute;inset:0;background:url('envelope-assets/wax-seal.jpg') center/100% 100% no-repeat;
 border-radius:50%;
 transition:transform .7s cubic-bezier(.3,.05,.3,1),opacity .7s ease;filter:var(--er-seal-filter,none)}
.er-seal-top{clip-path:polygon(0 0,100% 0,100% 40%,80% 47%,92% 55%,100% 62%,100% 100%,0 100%,0 60%,10% 53%,0 45%)}
.er-seal-bottom{clip-path:polygon(0 45%,10% 53%,0 60%,0 100%,100% 100%,100% 62%,92% 55%,80% 47%,100% 40%,100% 0,0 0)}
/* hairline fracture */
.er-seal-crack{position:absolute;left:-6%;right:-6%;top:50%;height:2px;margin-top:-1px;
 background:linear-gradient(90deg,rgba(0,0,0,0),rgba(12,18,38,.85) 18%,rgba(12,18,38,.85) 82%,rgba(0,0,0,0));
 transform:rotate(-11deg) scaleX(0);transform-origin:50% 50%;opacity:0;mix-blend-mode:multiply}
#envelope-reveal.er-cracking .er-seal-crack{animation:er-crack-in .3s ease .05s forwards}
@keyframes er-crack-in{to{transform:rotate(-11deg) scaleX(1);opacity:1}}
/* hover/active */
.er-seal:hover .er-seal-half{filter:var(--er-seal-filter,none) brightness(1.06)}
.er-seal:active .er-seal-half{filter:var(--er-seal-filter,none) brightness(.96)}
/* split */
#envelope-reveal.er-opening .er-seal-top{transform:translate(-8px,-10px) rotate(-10deg);opacity:0}
#envelope-reveal.er-opening .er-seal-bottom{transform:translate(8px,9px) rotate(9deg);opacity:0}
#envelope-reveal.er-opening .er-seal-crack{opacity:0;transition:opacity .4s ease}
#envelope-reveal.er-opening .er-seal{pointer-events:none}
/* dust motes in the light */
.er-dust{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.er-mote{position:absolute;border-radius:50%;
 background:radial-gradient(circle,rgba(240,220,180,.9),rgba(240,220,180,0) 70%);
 opacity:0;animation:er-drift linear infinite}
@keyframes er-drift{0%{transform:translate3d(0,14px,0);opacity:0}
 18%,82%{opacity:var(--er-mote-o,.45)}
 100%{transform:translate3d(var(--er-dx,20px),-48vh,0);opacity:0}}
/* controls */
.er-skip{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);background:none;border:none;
 cursor:pointer;font-family:'Cormorant Garamond',Georgia,serif;font-size:14px;letter-spacing:3px;
 text-transform:uppercase;color:rgba(240,232,216,.42);padding:10px 18px;transition:color .3s ease;z-index:10}
.er-skip:hover{color:rgba(240,232,216,.85)}
.er-sound{position:absolute;bottom:22px;right:22px;background:none;border:1px solid rgba(240,232,216,.25);
 border-radius:50%;width:40px;height:40px;cursor:pointer;color:rgba(240,232,216,.6);font-size:15px;
 display:flex;align-items:center;justify-content:center;transition:color .3s ease,border-color .3s ease;z-index:10}
.er-sound:hover{color:rgba(240,232,216,.9);border-color:rgba(240,232,216,.5)}
.er-sound .er-waves{display:none}
.er-sound.er-on .er-waves{display:inline}
.er-sound.er-on .er-mute-x{display:none}
/* style variants — tint the photographic paper, recolor the seal */
#envelope-reveal[data-style="classic"]{--er-ink:#241d12;--er-muted:#6e6046;
 --er-gold:#a5854e;--er-rule:rgba(150,118,66,.5);
 --er-tint:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));--er-seal-filter:none}
#envelope-reveal[data-style="modern"]{--er-ink:#1b1b1b;--er-muted:#7d7d7d;
 --er-gold:#9a917c;--er-rule:rgba(120,120,120,.4);
 --er-tint:linear-gradient(rgba(255,255,255,.38),rgba(255,255,255,.38));
 --er-seal-filter:grayscale(.85) brightness(1.15) contrast(.96)}
#envelope-reveal[data-style="rustic"]{--er-ink:#33260f;--er-muted:#7d6640;
 --er-gold:#96703a;--er-rule:rgba(140,108,58,.5);
 --er-tint:linear-gradient(rgba(146,104,58,.24),rgba(146,104,58,.24));
 --er-seal-filter:saturate(1.12) brightness(.96) sepia(.14)}
/* small screens: tighten spacing and cap the scene so the risen card never clips */
@media (max-height:700px),(max-width:420px){
 .er-eyebrow{margin-bottom:20px;font-size:11px;letter-spacing:5px}
 .er-hint{margin-top:20px;font-size:15px}
 .er-envelope{width:min(300px,72vw)}
 .er-seal{width:84px;height:84px;margin:-42px 0 0 -42px}
 .er-skip{bottom:16px}}
@media (prefers-reduced-motion:reduce){
 html.er-active #envelope-reveal,html.er-active #envelope-reveal::after{transition:none;animation:none}
 .er-eyebrow,.er-hint{animation:none;opacity:1}
 .er-mote{display:none}
 .er-flap,.er-card,.er-seal-half,.er-scene,.er-bloom,.er-envelope{animation-duration:.01s!important;transition-duration:.01s!important}}