/* One continuous paper surface, with chiffon softly emerging near the end. */
html,body{background:#fcfaf7}
#invitation{background:#fcfaf7 url('assets/ivory-chiffon-background-v1.png') center bottom/100% 100rem no-repeat;box-shadow:none}
#invitation>.hero,#invitation>.welcome,#invitation>.calendar,#invitation>.countdown{background:#fcfaf7!important}
#invitation>#schedule{background:linear-gradient(to bottom,#fcfaf7 0%,rgba(252,250,247,.96) 10%,rgba(252,250,247,.65) 35%,rgba(252,250,247,.18) 100%)!important}
#invitation>.closing{background:rgba(252,250,247,.18)!important;padding-bottom:3rem}
/* Move only the contents on arrival; the paper itself must never appear as panels. */
#invitation>.section-arrival{opacity:1;transform:none;transition:none}
#invitation .hero.engagement-ivory:before{background:linear-gradient(to bottom,#fcfaf7,rgba(252,250,247,.82) 35%,transparent)!important}
#invitation .hero.engagement-ivory:after{background:linear-gradient(to bottom,transparent,rgba(252,250,247,.65) 65%,#fcfaf7)!important;height:30%}
#invitation>.welcome{padding-top:2.5rem;padding-bottom:3rem}
#welcome .intro{margin-top:1rem}

/* Full flowers sit inside the opening border, then dissolve into the paper. */
#christening .hero-garden{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 80%,transparent 100%);
}
#invitation .quiet-garden{
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 80%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 80%,transparent);
}
#christening:after{bottom:15%;border-color:#d2e1e9;outline-color:#e2eaf0}

/* The names are the focal point, set in Armenian serif lettering. */
#christening .christening-content .christening-names{
  font-family:'Noto Serif Armenian',Georgia,serif;
  font-size:clamp(1.25rem,2.5vw,1.5rem);
  font-weight:400;
  font-synthesis:none;
  line-height:1.55;
  letter-spacing:.035em;
  gap:.25rem;
  margin:1.65rem auto 0;
  text-shadow:0 1px 0 #fffdf9;
}
#christening .christening-names span{position:relative;padding:0 .5em}
#christening .christening-names span:before,#christening .christening-names span:after{
  content:'';position:absolute;top:50%;width:12px;height:1px;background:linear-gradient(90deg,transparent,#c4ad92);opacity:.7;
}
#christening .christening-names span:before{right:100%}
#christening .christening-names span:after{left:100%;transform:rotate(180deg)}

/* A little more breathing room above the engagement names. */
#invitation .engagement-ivory .engagement-intro{margin-top:2rem}
.engagement-botanicals{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.engagement-botanicals span{position:absolute;width:clamp(125px,25vw,220px);aspect-ratio:1;background-image:url('assets/motion-sprites.png');background-size:300% 200%;background-repeat:no-repeat;opacity:.2;filter:saturate(.65)}
.engagement-botanicals span:first-child{left:-3%;top:24%;background-position:50% 0%;transform:rotate(-24deg)}
.engagement-botanicals span:last-child{right:-3%;top:67%;background-position:100% 100%;transform:rotate(20deg)}
@media(max-width:700px){
  #christening .christening-content .christening-names{font-size:1.25rem;line-height:1.6;gap:.25rem}
  #invitation .engagement-ivory .engagement-intro{margin-top:1.8rem}
  .engagement-botanicals span{opacity:.17}
}

/* Fine leaf accents make the smaller names distinctive without heavy borders. */
#christening .christening-names span:before,#christening .christening-names span:after{
  width:13px;height:5px;background:transparent;border:1px solid #c7b28e;
  border-radius:100% 0 100% 0;opacity:.8;top:calc(50% - 3px);
}
#christening .christening-names span:before{transform:rotate(18deg);right:calc(100% + 2px)}
#christening .christening-names span:after{transform:rotate(198deg);left:calc(100% + 2px)}
#christening .christening-date{row-gap:.4rem}
#christening .christening-date .christening-year{
  font-size:1.15rem;line-height:1.1;letter-spacing:.16em;text-indent:.16em;margin-top:-.2rem;
}

/* The same watercolor flowers frame the upper part of the hands. */
.engagement-botanicals{z-index:3}
.engagement-botanicals span:first-child{left:-3%;right:auto;top:27%;opacity:.45;background-position:50% 0%}
.engagement-botanicals span:nth-child(2){left:auto;right:-3%;top:67%;opacity:.2;background-position:100% 100%;transform:rotate(20deg)}
.engagement-botanicals span:nth-child(3){left:auto;right:-4%;top:30%;opacity:.62;background-position:100% 0%;transform:rotate(20deg)}
.engagement-botanicals span:nth-child(4){left:-5%;right:auto;top:39%;opacity:.5;background-position:0% 100%;transform:rotate(-20deg)}

/* A clean line of names, with no leaf-shaped ornaments. */
#christening .christening-content .christening-names{
  flex-direction:row;flex-wrap:nowrap;align-items:baseline;justify-content:center;
  width:max-content;max-width:100%;gap:.36em;margin:1.35rem auto 0;
  font-family:'Noto Sans Armenian',sans-serif;font-size:clamp(.875rem,3.45vw,1.15rem);
  font-weight:400;line-height:1.7;letter-spacing:0;text-shadow:none;
}
#christening .christening-names span{padding:0;align-self:auto}
#christening .christening-names span:before,#christening .christening-names span:after{display:none}
#christening .christening-names i{display:inline;font-style:normal;font-size:.8em;opacity:.55}
#christening .christening-date{row-gap:.1rem;margin-top:1.15rem}
#christening .christening-date .christening-month{line-height:1.4}
#christening .christening-date .christening-year{margin-top:0;font-size:1.05rem;line-height:1.1}

/* Keep the remaining bouquet below the hands; remove both right-side clusters. */
.engagement-botanicals span:first-child{left:-3%;top:68%;width:clamp(115px,24vw,190px);opacity:.4}
.engagement-botanicals span:nth-child(4){left:-2%;top:75%;width:clamp(105px,22vw,170px);opacity:.45}
.engagement-botanicals span:nth-child(2),.engagement-botanicals span:nth-child(3){display:none}
#invitation .countdown .timer div{background:#f8fbfd;border-color:#e4edf2;box-shadow:none}

/* The wax stamp belongs to the moving flap, so they open as one object. */
.envelope-lid{height:79.8%;transform-style:preserve-3d}
.envelope-lid>.seal-open{top:73.6842%;transform:translate(-50%,-50%) translateZ(1px)}
.invitation-opening.is-opening .envelope-lid>.seal-open{animation:none;opacity:1}
.invitation-opening.is-opening .envelope-lid{animation:open-stamped-flap 1.7s .2s cubic-bezier(.3,.45,.2,1) forwards}
.invitation-opening.is-opening .envelope-letter{animation:lift-letter 1.2s 1.35s cubic-bezier(.25,.5,.25,1) forwards}
@keyframes open-stamped-flap{
  0%{transform:rotateX(0deg);z-index:5}
  55%{z-index:5}
  65%,100%{z-index:1}
  100%{transform:rotateX(165deg)}
}
@media(prefers-reduced-motion:reduce){
  .invitation-opening.is-opening .envelope-lid,.invitation-opening.is-opening .envelope-letter{animation:none}
}

/* Refined ring above the engagement heading. */
#invitation .engagement-rings{width:68px;height:76px;margin:0 auto 1.15rem}
#invitation .engagement-rings .engagement-solitaire{width:100%;height:100%;animation:none}
#invitation .engagement-rings+ .eyebrow{margin-top:0}
.engagement-botanicals span:first-child{background-position:100% 100%;opacity:.6}
.engagement-botanicals span:nth-child(4){background-position:100% 0%;opacity:.55}
#invitation .countdown .timer div{background:#faf5ee;border-color:#e9ddcd;box-shadow:inset 0 1px 0 #fffdf9}

/* The requested envelope title and a fine warm-gold button frame. */
#envelope-stage .envelope-heading{top:14%}
#envelope-stage #opening-title{font:400 clamp(21px,5vw,32px)/1.5 'Noto Serif Armenian',serif;color:var(--invitation-brown);opacity:.8;filter:none;letter-spacing:0}
#envelope-stage .opening-button{border:1px solid #b9a17e;border-radius:2px;background:rgba(255,252,246,.5);padding:6px 14px;min-height:32px;font-size:10px}
#envelope-stage .opening-button:hover{background:#fffaf1;border-color:#9b805f}

/* Overlapping, eased motion prevents a pause or snap between the two reveals. */
.invitation-opening{transition:opacity 1.15s cubic-bezier(.22,.61,.36,1) 2.6s}
.invitation-opening.is-opening .envelope-lid{animation:open-stamped-flap 2.1s .15s cubic-bezier(.22,.61,.36,1) forwards}
.invitation-opening.is-opening .envelope-letter{animation:lift-letter 1.5s 1.35s cubic-bezier(.22,.61,.36,1) forwards}
#christening .hero-garden .flower{
  left:var(--x);top:var(--y);
  transform:translate(calc(-50% + var(--travel-x,0px)),calc(-50% + var(--travel-y,0px))) rotate(var(--start-angle)) scale(1.04);
  transition:transform 3.4s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--delay);
  will-change:transform;
}
.flowers-unfurl #christening .hero-garden .flower{transform:translate(-50%,-50%) rotate(var(--angle)) scale(1)}
.invitation-ready #christening .hero-garden .flower{will-change:auto}
@media(prefers-reduced-motion:reduce){
  .invitation-opening{transition:none}
  .invitation-opening.is-opening .envelope-lid,.invitation-opening.is-opening .envelope-letter{animation:none}
  #christening .hero-garden .flower{transition:none;transform:translate(-50%,-50%) rotate(var(--angle))}
}

/* A compact line of names inside a light watercolor floral frame. */
#invitation .engagement-ivory .ceremony-heading{
  font:200 clamp(1.1rem,4.5vw,1.45rem)/1.6 'Noto Sans Armenian',sans-serif;
  position:relative;top:-1rem;
  letter-spacing:.1em;margin:0 auto;
}
.engagement-name-frame{
  position:relative;isolation:isolate;display:grid;place-items:center;
  width:min(92%,376px);height:164px;margin:1.1rem auto 0;
}
.engagement-name-frame:before{
  content:'';position:absolute;inset:18px 20px;border:1px solid rgba(185,161,126,.42);pointer-events:none;
}
#invitation .hero.engagement-ivory h1.engagement-names{
  position:relative;z-index:1;display:flex;flex-direction:row;align-items:baseline;justify-content:center;
  width:auto;max-width:100%;margin:0;padding:0;gap:.22em;
  font:400 clamp(1.45rem,7.5vw,2.5rem)/1.5 'Noto Serif Armenian',Georgia,serif;
  letter-spacing:0;text-shadow:none;white-space:nowrap;
}
#invitation .engagement-names .name-boris,#invitation .engagement-names .name-liza{
  text-transform:none;position:static;
}
#invitation .hero.engagement-ivory h1.engagement-names i{
  position:static;transform:none;font:400 .62em/1.5 'Noto Serif Armenian',Georgia,serif;opacity:.8;
}
#invitation .hero.engagement-ivory h1.engagement-names:before,
#invitation .hero.engagement-ivory h1.engagement-names:after{display:none;content:none}
.name-frame-blooms{position:absolute;inset:0;pointer-events:none;z-index:0}
.name-frame-blooms span{
  position:absolute;display:block;width:88px;aspect-ratio:1;
  background:url('assets/motion-sprites.png') no-repeat;background-size:300% 200%;opacity:.88;
}
.name-frame-blooms span:nth-child(1){left:-4px;top:-12px;background-position:100% 0%;transform:rotate(-28deg)}
.name-frame-blooms span:nth-child(2){left:36px;top:-25px;width:80px;background-position:50% 0%;transform:rotate(-38deg)}
.name-frame-blooms span:nth-child(3){right:-4px;bottom:-12px;background-position:100% 0%;transform:rotate(152deg)}
.name-frame-blooms span:nth-child(4){right:36px;bottom:-25px;width:80px;background-position:0% 100%;transform:rotate(145deg)}
.name-frame-blooms span:nth-child(5){right:-6px;top:-17px;width:82px;background-position:100% 100%;transform:rotate(35deg);opacity:.72}
.name-frame-blooms span:nth-child(6){left:-6px;bottom:-17px;width:82px;background-position:100% 100%;transform:rotate(215deg);opacity:.72}
@media(max-width:360px){
  .engagement-name-frame{height:154px}
  .engagement-name-frame:before{inset:18px 12px}
  .name-frame-blooms span{width:76px}
  .name-frame-blooms span:nth-child(2),.name-frame-blooms span:nth-child(4){width:68px}
  .name-frame-blooms span:nth-child(5),.name-frame-blooms span:nth-child(6){width:70px}
}

/* Larger invitation text and a little more space below the names. */
#welcome .intro{font-size:clamp(1.1875rem,2.5vw,1.5rem);line-height:1.85}
.engagement-ivory .hands-artwork{top:22%;bottom:-22%}
@media(max-width:700px){.engagement-ivory .hands-artwork{top:24%;bottom:-24%}}
/* Small blossoms decorate the date frame while leaving 14 readable. */
#invitation .calendar .days strong:before,#invitation .calendar .days strong:after{
  content:'';display:block;position:absolute;inset:auto;z-index:2;width:28px;height:28px;
  border:0;border-radius:0;box-shadow:none;background-image:url('assets/motion-sprites.png');
  background-size:300% 200%;background-repeat:no-repeat;opacity:.95;animation:none;pointer-events:none;
}
#invitation .calendar .days strong:before{left:-13px;top:-13px;background-position:100% 0%;transform:rotate(-25deg)}
#invitation .calendar .days strong:after{right:-13px;bottom:-13px;background-position:50% 0%;transform:rotate(155deg)}

/* This heading receives programmatic focus after the envelope opens. */
#christening-title:focus,#christening-title:focus-visible{outline:none;box-shadow:none}
#christening .ceremony-divider{bottom:.25rem}

/* Place the engagement date lower without shifting the hands image. */
#invitation .hero.engagement-ivory{height:calc(100svh + 15rem)}
#invitation .engagement-ivory .hands-scene{height:calc(100% - 11.5rem)}

/* Seal the fold seams so the inner paper never peeks through the closed envelope. */
#envelope-stage .envelope-side{stroke:#eee5d8;stroke-width:1;stroke-linejoin:round}
#envelope-stage .envelope-bottom{stroke:#f7f0e5;stroke-width:1;stroke-linejoin:round}
#envelope-stage .envelope-lines{stroke:#cbb89f;stroke-width:1;stroke-linecap:round;opacity:.7}
#envelope-stage .envelope-letter{opacity:0;transition:opacity .25s ease .8s}
#envelope-stage.is-opening .envelope-letter{opacity:1}
@media(prefers-reduced-motion:reduce){
  #envelope-stage .envelope-letter{transition:none}
}