*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;background:#000;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.scene{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:2rem 1rem;min-height:100vh;min-height:100svh;background:#000;position:relative;overflow:hidden;}
.particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle var(--d,3s) ease-in-out infinite var(--delay,0s);}
@keyframes twinkle{0%,100%{opacity:0.15;transform:scale(1);}50%{opacity:0.9;transform:scale(1.6);}}

.env-stage{position:relative;width:100%;max-width:340px;}
.envelope-wrap{position:relative;width:100%;cursor:pointer;z-index:2;}
.env-body-wrap{position:relative;overflow:hidden;padding-top:110%;background:linear-gradient(0deg,#c7c3bd 0%,#c7c3bd 55%,rgba(200,196,190,0) 55%);border-radius:2px;box-shadow:0 8px 32px rgba(0,0,0,0.28),0 2px 6px rgba(0,0,0,0.12);}
.env-paper{position:absolute;width:calc(100% - 1.2rem);left:0.6rem;height:90%;background:#f0ede8;top:100%;z-index:3;transition:top 0.45s cubic-bezier(0.22,1,0.36,1);border-radius:1px;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.env-paper::before,.env-paper::after{content:'';position:absolute;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.08);border-radius:1px;height:1px;}
.env-paper::before{width:50%;top:25%;}
.env-paper::after{width:32%;top:35%;}
.env-paper.rising{top:4%;}
.env-flap{filter:drop-shadow(0px 6px 3px rgba(0,0,0,0.12));position:absolute;width:100%;height:33%;top:45%;z-index:99;transition:transform 0.5s ease-in-out;transform-origin:top;backface-visibility:hidden;}
.env-flap:before{content:'';position:absolute;width:100%;height:100%;background:#dedad5;clip-path:polygon(50% 100%,0 0,100% 0);}
.env-flap.open{transform:rotateX(-180deg);}
.env-base-wrap{height:55%;width:100%;z-index:2;bottom:0;position:absolute;filter:drop-shadow(0px -6px 3px rgba(0,0,0,0.08));}
.env-base{clip-path:polygon(50% 50%,100% 0,100% 100%,0 100%,0 0);background:#c7c3bd;width:100%;height:100%;position:relative;}
.env-base:before,.env-base:after{content:'';position:absolute;background:#d0ccc6;width:50%;height:100%;}
.env-base:before{clip-path:polygon(100% 50%,0 0,0 100%);}
.env-base:after{right:0;clip-path:polygon(0 50%,100% 0,100% 100%);}
.env-seal{position:absolute;top:72%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#2a2420;color:#e9e8e4;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:100;transition:opacity 0.3s;border:1.5px solid #1a1410;box-shadow:0 2px 10px rgba(0,0,0,0.35),0 0 0 4px rgba(42,36,32,0.12);}
.env-seal.hidden{opacity:0;pointer-events:none;}
.open-hint{font-size:11px;color:rgba(255,255,255,0.5);letter-spacing:3px;text-align:center;margin-top:0.875rem;animation:pulse 2s ease-in-out infinite;font-family:'Cormorant Garamond',Georgia,serif;}
@keyframes pulse{0%,100%{opacity:0.4;}50%{opacity:1;}}

/* ── grand cinematic overlay ── */
.grand-overlay{
  position:fixed;inset:0;
  background:radial-gradient(ellipse at center,#0e0e0e 0%,#000 65%);
  display:flex;align-items:center;justify-content:center;
  z-index:500;opacity:0;pointer-events:none;
  transition:opacity 0.55s ease;
}
.grand-overlay.active{opacity:1;}
.g-ring{
  position:absolute;left:50%;top:50%;
  width:160px;height:160px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.55);
  animation:ringOut 2.8s cubic-bezier(0.1,0,0.85,1) infinite;
}
.g-ring:nth-child(2){animation-delay:0.93s;border-color:rgba(255,255,255,0.3);}
.g-ring:nth-child(3){animation-delay:1.86s;border-color:rgba(255,255,255,0.12);}
@keyframes ringOut{
  0%{transform:translate(-50%,-50%) scale(0.35);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(4.5);opacity:0;}
}
.g-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0.9rem;}
.g-symbol{
  font-size:34px;color:#fff;letter-spacing:18px;padding-left:18px;
  animation:gPulse 2.2s ease-in-out infinite;
}
@keyframes gPulse{
  0%,100%{opacity:0.75;text-shadow:0 0 24px rgba(255,255,255,0.25);}
  50%{opacity:1;text-shadow:0 0 48px rgba(255,255,255,0.6),0 0 90px rgba(255,255,255,0.2);}
}
.g-texts{display:flex;flex-direction:column;align-items:center;gap:0.55rem;}
.g-company{font-size:10px;letter-spacing:6px;color:#999;text-transform:uppercase;font-family:var(--font-sans);opacity:0;}
.g-divider{width:0;height:1px;background:rgba(255,255,255,0.25);}
.g-tagline{font-size:10px;letter-spacing:4px;color:#555;text-transform:uppercase;font-family:var(--font-sans);font-style:italic;opacity:0;}

.grand-overlay.active .g-company{animation:gFadeUp 0.9s ease 0.5s forwards;}
.grand-overlay.active .g-divider{animation:gDrawLine 1s ease 1.1s forwards;}
.grand-overlay.active .g-tagline{animation:gFadeUp 0.9s ease 1.8s forwards;}
@keyframes gFadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes gDrawLine{to{width:90px;}}

/* ── card ── */
.card-reveal{width:100%;max-width:380px;display:none;animation:riseUp 0.7s cubic-bezier(0.22,1,0.36,1) both;}
@keyframes riseUp{from{opacity:0;transform:translateY(40px) scale(0.95);}to{opacity:1;transform:translateY(0) scale(1);}}
.card{background:#e9e8e4;border-radius:2px;overflow:hidden;width:100%;box-shadow:0 16px 60px rgba(0,0,0,0.35),0 4px 16px rgba(0,0,0,0.15);}

.card-inner{padding:2.75rem 2.25rem 1.75rem;text-align:center;}

.card-logo{margin-bottom:1.75rem;padding-left:16px;}
.card-logo img{max-width:180px;height:auto;mix-blend-mode:multiply;display:block;margin:0 auto;}

.guest-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:36px;font-weight:300;font-style:italic;color:#1a1a1a;line-height:1.3;letter-spacing:0.5px;margin-bottom:1.75rem;animation:fadeIn 1s ease 0.5s both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.card-rule{width:50px;height:1px;background:#c0bdb8;margin:0 auto 1.75rem;}

.event-label{font-family:'Cormorant Garamond',Georgia,serif;font-size:10px;letter-spacing:5px;color:#6a635c;text-transform:uppercase;margin-bottom:0.6rem;}

.movie-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-weight:600;letter-spacing:2px;color:#1a1a1a;text-transform:uppercase;margin-bottom:1.75rem;line-height:1.35;}

.event-details{margin-bottom:1.5rem;}
.event-detail-row{font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;color:#4a4540;line-height:2.3;}

.rsvp-deadline{font-family:'Cormorant Garamond',Georgia,serif;font-size:12px;color:#6a635c;margin-bottom:1.25rem;font-style:italic;}
.rsvp-deadline span{color:#1a1a1a;font-style:normal;font-weight:500;}

.cta-row{display:flex;gap:8px;}
.btn-accept{flex:1;padding:12px 11px;border:1px solid #1a1a1a;border-radius:1px;background:#1a1a1a;color:#e9e8e4;font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:opacity 0.2s;font-family:'Cormorant Garamond',Georgia,serif;}
.btn-accept:hover{opacity:0.8;}
.btn-decline{flex:1;padding:12px 11px;border:1px solid rgba(0,0,0,0.18);border-radius:1px;background:transparent;color:#888;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background 0.2s;font-family:'Cormorant Garamond',Georgia,serif;}
.btn-decline:hover{background:rgba(0,0,0,0.05);}

.rsvp-form{margin-top:1.5rem;border-top:1px solid rgba(0,0,0,0.1);padding-top:1.5rem;display:none;flex-direction:column;gap:0.875rem;animation:fadeIn 0.4s ease both;text-align:left;}
.rsvp-form.visible{display:flex;}
.rsvp-heading{font-family:'Cormorant Garamond',Georgia,serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#a0998e;text-align:center;margin-bottom:0.25rem;}
.form-label{font-family:'Cormorant Garamond',Georgia,serif;font-size:10px;color:#a0998e;letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:5px;}
.form-input,.form-select{width:100%;padding:8px 0;font-size:14px;border:none;border-bottom:1px solid rgba(0,0,0,0.15);border-radius:0;background:transparent;color:#1a1a1a;font-family:'Cormorant Garamond',Georgia,serif;-webkit-appearance:none;appearance:none;}
.form-input:focus,.form-select:focus{outline:none;border-color:rgba(0,0,0,0.5);}
.form-input::placeholder{color:#c0bdb8;}
.btn-submit{padding:12px;border:1px solid #1a1a1a;border-radius:1px;background:#1a1a1a;color:#e9e8e4;font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-family:'Cormorant Garamond',Georgia,serif;margin-top:0.5rem;}

.success-box{display:none;flex-direction:column;align-items:center;gap:0.875rem;padding:1.75rem 0;text-align:center;animation:fadeIn 0.5s ease both;}
.success-box.visible{display:flex;}
.check-circle{width:48px;height:48px;border-radius:50%;border:1px solid #c0bdb8;display:flex;align-items:center;justify-content:center;font-size:20px;color:#4a4540;}
.success-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;color:#1a1a1a;letter-spacing:1px;}
.success-sub{font-family:'Cormorant Garamond',Georgia,serif;font-size:13px;color:#888;line-height:1.7;font-style:italic;}

.card-footer{padding:1.25rem 2.25rem;border-top:1px solid rgba(0,0,0,0.08);text-align:center;}
.footer-note{font-family:'Cormorant Garamond',Georgia,serif;font-size:10px;color:#7a736a;letter-spacing:0.3px;font-style:italic;margin-bottom:0.3rem;}
.footer-email{font-family:'Cormorant Garamond',Georgia,serif;font-size:10px;color:#7a736a;letter-spacing:1px;}

/* desktop */
@media (min-width:640px){
  .env-stage{max-width:440px;}
  .card-reveal{max-width:440px;}
  .card-inner{padding:3.5rem 3rem 2.25rem;}
  .card-footer{padding:1.25rem 3rem;}
  .guest-name{font-size:42px;}
  .movie-title{font-size:24px;}
  .event-detail-row{font-size:16px;}
}

/* iOS input zoom prevention */
@media (max-width:480px){
  .form-input,.form-select{font-size:16px;}
}

/* very small screens */
@media (max-width:360px){
  .card-inner{padding:2rem 1.5rem 1.5rem;}
  .card-footer{padding:1rem 1.5rem;}
  .guest-name{font-size:36px;}
  .cta-row{flex-direction:column;}
}