/* An open paper invitation, composed as separate layers over their own church photo. */
.hero.invitation-cover{
  height:calc(100svh + 130px);min-height:890px;max-height:1230px;padding:0;
  border:12px solid #e6e1d5;overflow:hidden;display:block;
  background:#777 url('assets/church.webp') center 46%/cover no-repeat;
}
.invitation-cover:before{inset:0;z-index:-1;background:linear-gradient(180deg,#0004 0%,transparent 28%,#0000000d 65%,#0003 100%)}
.invitation-cover .hero-glow{z-index:0;pointer-events:none;background:radial-gradient(ellipse at 60% 12%,#f8f1df15,transparent 65%)}
.cover-kicker{position:absolute;z-index:1;top:111px;left:0;width:100%;margin:0;text-align:center;font:500 13px/1.5 var(--sans);letter-spacing:.32em;color:#faf4e8;text-shadow:0 2px 14px #0008}
.cover-art{position:absolute;right:7%;bottom:70px;width:min(800px,64vw);aspect-ratio:1.45;isolation:isolate;animation:invitation-arrive 1.5s cubic-bezier(.2,.7,.2,1) both}
.cover-envelope{position:absolute;left:22%;top:0;width:55%;height:100%;overflow:visible;transform:rotate(-8deg);filter:drop-shadow(0 12px 18px #0002)}
.cover-photo{position:absolute;z-index:2;left:0;bottom:0;width:57%;aspect-ratio:1.26;margin:0;padding:13px 13px 28px;background:#f1efea;transform:rotate(-12deg);box-shadow:0 12px 28px #0004}
.cover-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;filter:none}
.invitation-card{position:absolute;z-index:3;right:0;bottom:-2%;width:42%;height:83%;background:#f4edd8;color:#221e1b;transform:rotate(11deg);box-shadow:0 8px 24px #0002;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18% 3% 5%;padding-top:12%;text-align:center}
.card-date{font:400 11px/1.4 'Courier New',monospace;letter-spacing:.16em;margin:0}
.card-promise{font:400 clamp(35px,3.9vw,60px)/1.12 var(--script);white-space:nowrap;margin:12% -12% 7%;transform:rotate(-1deg)}
.invitation-card h1{font:400 12px/1.15 'Courier New',monospace;letter-spacing:.05em;margin:0}
.cover-scroll{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:center;font:400 11px/1.5 var(--sans);letter-spacing:.07em;color:#faf4e8;text-shadow:0 1px 5px #0009;z-index:4;padding:8px 16px}
.cover-scroll span{font-size:21px;line-height:1}
@keyframes invitation-arrive{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@media(min-width:1600px){.cover-art{right:10%;width:850px}.card-promise{font-size:65px}}
@media(max-width:1000px) and (min-width:701px){.cover-art{width:76vw;right:7%;bottom:70px}.card-promise{font-size:5vw}.invitation-cover{background-position:45% center}}
@media(max-width:700px){
 .hero.invitation-cover{height:calc(100svh + 65px);min-height:805px;max-height:1065px;border-width:7px;background-position:45% center}
 .cover-kicker{top:105px;font-size:11px;letter-spacing:.26em}
 .cover-art{width:94%;aspect-ratio:.98;right:4%;bottom:65px}
 .cover-envelope{width:66%;left:16%;top:0;height:100%;transform:rotate(-9deg)}
 .cover-photo{width:58%;bottom:3%;left:0;padding:8px 8px 18px;aspect-ratio:1.05;transform:rotate(-12deg)}
 .cover-photo img{object-position:50% 25%}
 .invitation-card{right:0;bottom:0;width:43%;height:72%;padding:16% 2% 6%;transform:rotate(11deg)}
 .card-date{font-size:7px;letter-spacing:.08em}
 .card-promise{font-size:clamp(27px,7.4vw,49px);line-height:1.15;margin:10% -17% 7%}
 .invitation-card h1{font-size:8px;line-height:1.2}
 .cover-scroll{bottom:13px;font-size:10px;gap:10px}
}
@media(max-width:370px){.hero.invitation-cover{min-height:735px}.cover-kicker{top:100px}.cover-art{bottom:61px;width:94%;aspect-ratio:.94}.card-promise{font-size:7.4vw}.card-date{font-size:6px}.invitation-card h1{font-size:7px}}
@media(prefers-reduced-motion:reduce){.cover-art{animation:none}}
/* Position follows the scroll in either direction without transition lag. */
.scroll-motion .reveal{transition:none}
.motion-off .reveal{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important}
.motion-off .cover-photo,.motion-off .invitation-card,.motion-off .cover-envelope{translate:none!important;rotate:none!important}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important}}
@media(max-width:700px){.cover-art{width:88%;right:7%;aspect-ratio:.95}}

/* Leave the upper four fifths for the church; the invitation continues below the fold. */
.hero.invitation-cover{
 --cover-width:min(800px,64vw);--cover-ratio:1.45;--cover-start:78svh;
 height:calc(var(--cover-start) + var(--cover-width) / var(--cover-ratio) + 95px);
 min-height:0;max-height:none;overflow:clip;background:#777;
}
.cover-backdrop{position:sticky;top:0;width:100%;height:100svh;z-index:-2;background:url('assets/church.webp') center 46%/cover no-repeat}
.cover-art{top:var(--cover-start);bottom:auto;width:var(--cover-width);aspect-ratio:var(--cover-ratio)}
@media(min-width:1600px){.hero.invitation-cover{--cover-width:850px}}
@media(max-width:1000px) and (min-width:701px){.hero.invitation-cover{--cover-width:76vw}}
@media(max-width:700px){
 .hero.invitation-cover{--cover-width:calc((100vw - 14px) * .88);--cover-ratio:.95}
 .cover-art{top:var(--cover-start);bottom:auto;width:var(--cover-width);aspect-ratio:var(--cover-ratio)}
 .cover-backdrop{background-position:45% center}
}