/* Soft beige-gold lettering and line symbols throughout the invitation. */
:root{--invitation-brown:#9b805f}
body,#invitation{color:var(--invitation-brown)}
#invitation :is(h1,h2,h3,p,span,time,a,small,b,strong,i,em,svg,.time,.event-detail,.ceremony-cross),
#envelope-stage :is(button,span),.music-control,.replay-control {
  color:var(--invitation-brown)!important;
}
#invitation svg [stroke]:not([stroke="none"]){stroke:currentColor!important}
#invitation svg stop{stop-color:var(--invitation-brown)}
.music-control{border-color:#cbb8a8;background:#fffdf7ed}
.replay-control{border-color:#cbb8a8}

/* Restore the original feather paper and warm agenda background. */
#christening{background:#fcfaf7!important}
#christening .christening-texture{
  z-index:0;
  opacity:.78;
  background:linear-gradient(180deg,#fcfaf7 0%,rgba(252,250,247,.9) 7%,rgba(252,250,247,.4) 23%,rgba(252,250,247,.2) 55%,#fcfaf7 100%),url('assets/ivory-feathers.webp') center 35%/cover!important;
}
#schedule{
  background:linear-gradient(to bottom,#f4eee7 0%,rgba(244,238,231,.95) 8%,rgba(244,238,231,.6) 23%,rgba(252,250,247,.18) 46%,rgba(252,250,247,.18) 100%)!important;
}
#invitation .engagement-ivory>.flower-garden,
#invitation .engagement-ivory>.butterfly-sky{display:none}
/* Section-local skies cannot fly into the engagement portrait. */
#invitation .butterfly-sky{position:absolute;inset:0;z-index:7}
#invitation section:not(.motion-active) .butterfly,
#invitation section:not(.motion-active) .wing{animation-play-state:paused!important}

/* Keep the original envelope, now with a lifting seal and hinged lid. */
.invitation-opening{overflow:hidden;perspective:1300px;transition:opacity .75s ease 2.45s;outline:none;grid-template-columns:minmax(0,1fr);justify-items:center}
.opening-envelope{perspective:1100px;transform-style:preserve-3d;overflow:visible;min-width:0;min-height:0}
.envelope-heading{z-index:6;transition:opacity .4s}
.envelope-date{color:var(--invitation-brown);opacity:.5}
.envelope-folds{z-index:3;pointer-events:none}
.envelope-side{fill:#eee5d8;opacity:1}
.envelope-bottom{fill:#f7f0e5;opacity:1}
.envelope-lid{position:absolute;left:0;right:0;top:0;height:56%;z-index:5;transform-origin:50% 0%;transform:rotateX(0);backface-visibility:visible}
.envelope-lid svg{display:block;width:100%;height:100%;overflow:visible}
.envelope-lid path{fill:#fdfaf5;stroke:#cbb89f;stroke-width:1;vector-effect:non-scaling-stroke}
.envelope-letter{position:absolute;inset:7% 5% 4%;z-index:2;border:1px solid #d4c8b8;border-radius:2px;background:#fffdf9 url('assets/ivory-feathers.webp') center/cover;box-shadow:0 1px 10px #78654e12;display:grid;place-items:center;color:var(--invitation-brown);font:22px Georgia,serif;letter-spacing:4px}
.seal-open{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:8;width:clamp(94px,25%,140px);aspect-ratio:1;padding:0;border:0;background:transparent;cursor:pointer}
.seal-open .envelope-seal{position:static;display:block;width:100%;height:100%;transform:rotate(8deg);object-fit:contain;pointer-events:none}
.envelope-content{z-index:8;transition:opacity .35s}
.opening-button,.opening-button:hover{border:0;background:transparent;box-shadow:none;border-radius:0;color:var(--invitation-brown)}
.opening-button:focus-visible,.seal-open:focus-visible{outline:1px dashed var(--invitation-brown);outline-offset:5px}
.invitation-opening.is-opening{opacity:0;pointer-events:none}
.is-opening .seal-open{animation:lift-wax .8s ease forwards}
.is-opening .envelope-lid{animation:unfold-lid 1.2s .5s cubic-bezier(.25,.5,.25,1) forwards}
.is-opening .envelope-letter{animation:lift-letter 1.4s 1.1s cubic-bezier(.25,.5,.25,1) forwards}
.is-opening .envelope-heading,.is-opening .envelope-content{opacity:0}
@keyframes lift-wax{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}
  45%{opacity:1;transform:translate(-50%,-80%) rotate(-18deg) scale(1.12)}
  100%{opacity:0;transform:translate(-35%,-145%) rotate(-30deg) scale(1.2)}
}
@keyframes unfold-lid{
  0%{transform:rotateX(0deg);z-index:5}
  48%{z-index:5}
  52%,100%{z-index:1}
  100%{transform:rotateX(175deg)}
}
@keyframes lift-letter{
  0%{transform:translateY(0)}
  100%{transform:translateY(-52%)}
}
@media(prefers-reduced-motion:reduce){
  .invitation-opening{transition:none}
  .is-opening .seal-open,.is-opening .envelope-lid,.is-opening .envelope-letter{animation:none}
}