/* ===== Página do CONVITE (envelope -> convite) ===== */
:root{
  --navy:#22304f; --navy-deep:#0f1830; --silver:#d6deef; --silver-soft:#9aa8c8;
  --apex:66%;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{max-width:100%; overflow-x:hidden}
body{font-family:"Cormorant Garamond",Georgia,serif; -webkit-font-smoothing:antialiased;
  background:radial-gradient(circle at 50% 38%, #2b3a5c 0%, #1a2540 55%, #0e1526 100%);
  min-height:100vh;}
img{max-width:100%}

/* ===================== INTRO / ENVELOPE ===================== */
#intro{position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(circle at 50% 40%, #2b3a5c 0%, #1a2540 55%, #0e1526 100%);
  transition:opacity .8s ease, visibility .8s;}
#intro.hide{opacity:0; visibility:hidden}
.brand-mono{display:block; width:min(38vw,135px); height:auto; margin:0 auto 18px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.38));}
.stage{perspective:1600px; width:min(80vw,380px);}
.envelope{position:relative; width:100%; aspect-ratio:560/383; cursor:pointer;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.5)); transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.envelope:active{transform:scale(.99)}
.layer{position:absolute; inset:0; background-image:url(../assets/envelope.png);
  background-size:100% 100%; background-repeat:no-repeat; border-radius:8px;}
.env-back{background:linear-gradient(160deg,#1c2845,#0c1222); border-radius:8px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.5);}
.card{position:absolute; left:9%; width:82%; bottom:2%; height:96%;
  object-fit:cover; object-position:top center; border-radius:7px; z-index:2;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  transition:transform 1s cubic-bezier(.2,.7,.2,1) .15s;}
.pocket{z-index:3; clip-path:polygon(0 0, 50% var(--apex), 100% 0, 100% 100%, 0 100%);}
.flap{z-index:4; transform-origin:50% 0; clip-path:polygon(0 0, 100% 0, 50% var(--apex));
  transition:transform .85s cubic-bezier(.5,0,.2,1);}
.seal{position:absolute; left:50%; top:var(--apex); width:16%; transform:translate(-50%,-50%);
  z-index:5; pointer-events:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); transition:opacity .4s ease .1s;}
.envelope.open .flap{transform:rotateX(-172deg); z-index:1;}
.envelope.open .seal{opacity:0}
.envelope.open .card{transform:translateY(-48%) scale(1.01)}
.hint{text-align:center; margin-top:30px}
.hint .t{font-style:italic; font-size:1.5rem; color:var(--silver)}

/* convite revelado */
#convite{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:26px 18px; opacity:0; visibility:hidden; transition:opacity .9s ease .2s, visibility .9s;}
#convite.show{opacity:1; visibility:visible}
.invite-wrap{position:relative; width:min(90vw,430px);
  box-shadow:0 30px 70px rgba(0,0,0,.55); border-radius:8px;}
.invite{display:block; width:100%; border-radius:8px}
.hot{position:absolute; display:block; cursor:pointer; border-radius:10px; -webkit-tap-highlight-color:transparent;}
.hot:focus-visible{outline:2px dashed rgba(255,255,255,.6); outline-offset:3px}
.h1{left:21%; top:82%; width:59%; height:4.9%}
.h2{left:22.5%; top:88.3%; width:56.5%; height:4.4%}
@media (prefers-reduced-motion: reduce){ .envelope,.flap,.card,.seal,#intro,#convite{transition-duration:.001s !important} }