/* Paper invitation. The envelope uses the original lettering and watercolor lining. */
html{scrollbar-gutter:stable}
.intro{
  position:fixed;inset:0;width:100%;height:100%;height:100svh;
  max-width:none;max-height:none;margin:0;border:0;padding:28px 24px;
  color:var(--ink);background:#fbf8f2;overflow-x:hidden;overflow-y:auto;isolation:isolate;
  --envelope-width:440px;--letter-lift:-220px;
}
.intro[open]{display:grid;place-items:center}
.intro::backdrop{background:#fbf8f2}
.intro::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,#fffdf8 12%,#fffdf800 68%),
    url('./assets/identidade/estampa-poas.webp') center/490px 735px;
  opacity:.11;
}
.intro::after{
  content:'';position:fixed;inset:18px;border:1px solid #d8e1e3;border-radius:4px;
  pointer-events:none;z-index:-1;
}
.intro-content{position:relative;z-index:1;width:100%;max-width:680px;margin:auto;text-align:center;padding:28px 0;transition:none}
.intro-heading{transition:opacity .3s,transform .4s}
.intro-heading>.eyebrow{justify-content:center;font-size:10px;letter-spacing:2.1px;color:#5d7382;margin-bottom:16px}
.intro-heading h2{font-size:38px;font-weight:400;line-height:1.23;letter-spacing:-.7px}
.intro-heading h2 em{color:var(--blue-deep)}
.envelope-scene{position:relative;width:min(var(--envelope-width),100%);margin:49px auto 0}
.envelope-button{display:block;position:relative;width:100%;padding:0;background:none;border:0;border-radius:12px;isolation:isolate;text-align:center}
.envelope-button:focus-visible{outline:3px solid #426d93;outline-offset:12px}
.envelope-button:disabled{opacity:1}
.envelope-object{display:block;position:relative;width:100%;aspect-ratio:1.55;perspective:1100px;isolation:isolate}
.envelope-shadow{position:absolute;inset:auto 8% -24px;height:21px;border-radius:50%;background:#6c7c8330;filter:blur(15px);z-index:-1;transition:opacity .4s 1.4s}
.envelope-back{position:absolute;inset:0;border-radius:8px;background:#c7dce5;box-shadow:0 16px 36px #42637a1c,0 3px 7px #42637a12;border:1px solid #a9c5d2;z-index:0}
.envelope-back::before{content:'';position:absolute;inset:7px;border-radius:4px;background:#eff7fa url('./assets/identidade/estampa-listras.webp') center/180px 270px;opacity:.72}
.envelope-folds{position:absolute;inset:0;z-index:3;overflow:hidden;border-radius:7px;filter:drop-shadow(0 -1px 1px #698fa52b)}
.envelope-fold-left,.envelope-fold-right,.envelope-pocket{position:absolute;inset:0;display:block}
.envelope-fold-left{background:linear-gradient(125deg,#dfeef3,#bfd8e4);clip-path:polygon(0 0,57% 57%,0 100%)}
.envelope-fold-right{background:linear-gradient(235deg,#d6e9f0,#bdd5e1);clip-path:polygon(100% 0,43% 57%,100% 100%)}
.envelope-pocket{background:linear-gradient(180deg,#e6f1f5 10%,#d6e8ef 90%);clip-path:polygon(0 100%,0 99%,50% 43%,100% 99%,100% 100%);border-bottom:1px solid #adc8d5}
.envelope-pocket::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#fff2 0 1px,transparent 1px 3px);opacity:.3}
.envelope-flap{position:absolute;inset:0 0 auto;height:59%;z-index:5;transform-origin:50% 0;transform-style:preserve-3d;filter:drop-shadow(0 3px 2px #5f83992a)}
.flap-face,.flap-lining{position:absolute;inset:0;display:block;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-face{background:linear-gradient(170deg,#e8f3f7,#d2e5ed 85%);border-top:1px solid #f8fcfd}
.flap-lining{background:#eaf4f9 url('./assets/identidade/estampa-listras.webp') center/180px 270px;transform:rotateX(180deg)}
.envelope-address{position:absolute;z-index:4;left:0;right:0;bottom:10%;font-size:14px;font-family:var(--heading);letter-spacing:.3px;color:#466275}
.envelope-address em{color:#426d78}
.envelope-seal{
  position:absolute;left:50%;top:57%;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:78px;height:78px;transform:translate(-50%,-50%) rotate(-7deg);
  border-radius:47% 53% 48% 52% / 52% 46% 54% 48%;
  background:radial-gradient(circle at 35% 25%,#f8d7be,#e9b28c 80%);
  border:1px solid #d9a47f;box-shadow:0 5px 8px #7f645337,inset 0 2px 2px #fff4,inset 0 -3px 3px #a96f4a25;
  transition:transform .25s,box-shadow .25s;
}
.seal-ring{position:absolute;inset:7px;border:1px solid #bb81565c;border-radius:50%;box-shadow:0 1px 0 #fff8,inset 0 1px 2px #fff4}
.seal-name{display:block;width:45px;height:29px;margin-top:3px;background:#966447;mask:url('./assets/identidade/nome-teo-vetor.svg') center/contain no-repeat;-webkit-mask:url('./assets/identidade/nome-teo-vetor.svg') center/contain no-repeat;filter:drop-shadow(0 1px 0 #fff7)}
.seal-heart{font-size:14px;line-height:1;color:#a26c48;margin-top:1px;text-shadow:0 1px #fff8}
.envelope-instruction{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:35px;color:#526f7e;font-size:13px;font-weight:700;letter-spacing:.15px;transition:opacity .25s}
.envelope-instruction .icon{width:16px;height:16px;stroke-width:1.4;color:#ad795c}
.intro-content>.intro-date{font-size:11px;letter-spacing:.55px;color:#627582;margin-top:18px;transition:opacity .3s}
.intro-date>span{padding-inline:7px;color:#b18a6e}
.stationery-spark{position:absolute;z-index:-1;font-size:31px;line-height:1;color:#caaf83;transition:opacity .3s;pointer-events:none}
.spark-left{left:-47px;top:14%;transform:rotate(-12deg)}
.spark-right{right:-43px;top:64%;font-size:24px;transform:rotate(15deg)}
.letter-paper{background:#fffdf8;border:1px solid #e4daca;border-radius:12px;box-shadow:0 9px 25px #50697916;padding:15px;overflow:hidden}
.invitation-letter{display:block;position:absolute;left:6%;top:4%;width:88%;height:91%;z-index:2;transform-origin:center}
.entry-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.entry-no-script{max-width:360px;margin:18px auto 0;font-size:13px;color:#735d37}
/* Only the RSVP, later in the invitation, asks for name and phone. */
.rsvp-form>.guest-phone-note{font-size:10px;line-height:1.6;color:var(--muted);margin-top:8px}
.rsvp-form>input+label{margin-top:18px}
@media(hover:hover){.envelope-button:not(:disabled):hover .envelope-seal{transform:translate(-50%,-50%) rotate(-3deg) scale(1.06);box-shadow:0 7px 14px #7f645337,inset 0 2px 2px #fff4}.envelope-button:not(:disabled):hover .envelope-instruction{color:#34516a}}
.intro.is-opening .intro-content{opacity:1;transform:none}
.intro.is-opening .intro-heading{opacity:0;transform:translateY(-12px)}
.intro.is-opening .envelope-instruction,.intro.is-opening .intro-date,.intro.is-opening .stationery-spark,.intro.is-opening .envelope-shadow{opacity:0}
.intro.is-opening .envelope-seal{animation:seal-release .35s ease forwards}
.intro.is-opening .envelope-flap{animation:flap-open .8s cubic-bezier(.4,0,.2,1) .15s forwards,envelope-away .5s ease 1.35s forwards}
.intro.is-opening .envelope-part:not(.envelope-flap){animation:envelope-away .5s ease 1.35s forwards}
.intro.is-projecting .invitation-letter{visibility:hidden}
@keyframes seal-release{to{opacity:0;transform:translate(-50%,-72%) rotate(12deg) scale(1.18)}}
@keyframes flap-open{0%{transform:rotateX(0);z-index:5}49%{z-index:5}50%,100%{z-index:1}100%{transform:rotateX(180deg)}}
@keyframes envelope-away{to{translate:0 75px;opacity:0}}
@media(max-width:640px){
  .intro{padding:24px;--envelope-width:350px}
  .intro::after{inset:12px}
  .intro-content{padding:24px 0}
  .intro-heading>.eyebrow{font-size:8px;letter-spacing:1.8px;margin-bottom:15px}
  .intro-heading h2{font-size:30px;letter-spacing:-.5px;line-height:1.26}
  .envelope-scene{margin-top:43px}
  .envelope-seal{width:67px;height:67px}
  .seal-ring{inset:6px}
  .seal-name{width:39px;height:25px;margin-top:2px}
  .seal-heart{font-size:12px}
  .envelope-address{font-size:12px;bottom:9%}
  .envelope-instruction{margin-top:29px;font-size:12px}
  .intro-content>.intro-date{font-size:10px;margin-top:16px;letter-spacing:.3px}
  .stationery-spark{display:none}
  .letter-paper{padding:10px;border-radius:9px}
}
@media(max-width:360px){
  .intro{padding-inline:22px}
  .intro-heading h2{font-size:27px}
  .envelope-scene{margin-top:38px}
  .envelope-seal{width:61px;height:61px}
  .seal-name{width:35px;height:23px}
  .envelope-address{font-size:11px}
}
@media(max-height:650px){
  .intro{padding-block:20px;--envelope-width:330px}
  .intro-content{padding:5px 0}
  .intro-heading>.eyebrow{margin-bottom:10px;font-size:8px}
  .intro-heading h2{font-size:29px}
  .envelope-scene{margin-top:30px}
  .envelope-instruction{margin-top:25px}
  .intro-content>.intro-date{margin-top:12px}
}
@media(max-height:460px){
  .intro{padding:25px 22px;--envelope-width:250px}
  .intro-heading h2{font-size:23px}
  .intro-heading>.eyebrow{font-size:7px;margin-bottom:6px}
  .envelope-scene{margin-top:22px}
  .envelope-seal{width:57px;height:57px}
  .seal-name{width:32px;height:21px}
  .seal-heart{font-size:11px}
  .envelope-address{font-size:10px}
  .envelope-instruction{margin-top:21px;font-size:11px}
  .intro-content>.intro-date{margin-top:9px;font-size:9px}
  .letter-paper{padding:8px}
}
@media(prefers-reduced-motion:reduce){.intro *{animation:none!important;transition:none!important}}

/* The actual invitation is temporarily projected as the emerging sheet. */
.page-stage{position:fixed;inset:0;z-index:20;overflow:hidden;pointer-events:none}
.page-plane{position:absolute;left:0;top:0;transform-origin:0 0;background:#fff;overflow:hidden;border-radius:4px;box-shadow:0 12px 32px #34516a20;will-change:transform}
.page-plane>#invitation-shell{display:block;min-width:0;width:100%;text-align:left}
.page-plane .welcome *{animation:none!important;transition:none!important}