/* Watercolor flowers spread across the scene, then drift out to reveal the page. */
.invitation-opening-scene {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
  animation: opening-scene-away 1800ms ease-in-out 4200ms both;
}
.opening-veil {
  position: absolute;
  inset: 0;
  background: #f5e9e5;
  animation: opening-veil-in 650ms ease-out both;
}
.opening-envelope {
  position: absolute;
  left: 50%;
  top: 56%;
  width: var(--scene-width);
  aspect-ratio: 2400 / 1597;
  margin-left: calc(var(--scene-width) / -2);
  margin-top: calc(var(--scene-width) * 1597 / 2400 / -2);
  perspective: 1100px;
  animation: opening-envelope-center 1100ms cubic-bezier(.2,.75,.25,1) both,
    opening-envelope-away 1100ms ease-in-out 3200ms forwards;
}
.opening-lining, .opening-card, .opening-pocket, .opening-flap {
  position: absolute;
  inset: 0;
}
.opening-lining, .opening-flap-back {
  /* Sample only the bottom paper, below the baked-in wax seal and its shadow. */
  background: #f4ccd2 var(--envelope-paper) center bottom / 100% 450% no-repeat;
}
.opening-lining {
  inset: 2.4% 1.8% 2%;
  box-shadow: inset 0 15px 22px #b86b771a;
}
.opening-card {
  inset: 9% 8% 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8%;
  z-index: 2;
  color: #b86b77;
  background: #fffbfb;
  box-shadow: 0 2px 12px #b86b7714;
  font-family: Velour, Georgia, serif;
  font-size: clamp(15px, 2.5vw, 26px);
  animation: opening-card-rise 2700ms cubic-bezier(.2,.65,.3,1) 650ms both;
}
.opening-card img { width: 30%; max-height: 48%; object-fit: contain; }
.opening-card span { text-transform: uppercase; letter-spacing: .08em; }
.opening-pocket { z-index: 3; clip-path: polygon(1.8% 2.4%,50% 76%,98.2% 2.4%,98.2% 98%,1.8% 98%); }
.opening-pocket img, .opening-flap-front { width: 100%; height: 100%; object-fit: contain; }
.opening-flap {
  z-index: 4;
  transform-origin: 50% 2.4%;
  transform-style: preserve-3d;
  animation: opening-flap-lift 2000ms cubic-bezier(.33,.1,.25,1) 260ms both;
}
.opening-flap-front, .opening-flap-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  clip-path: polygon(1.8% 2.4%,98.2% 2.4%,98.2% 4%,62% 54%,61% 62%,57% 68%,45% 68%,40% 61%,38% 54%,1.8% 4%);
}
.opening-flap-back { transform: rotateY(180deg); clip-path: polygon(1.8% 2.4%,98.2% 2.4%,50% 61%); }
.opening-flower-definitions { position: absolute; }
.opening-blossoms { position: absolute; left: 50%; top: 47%; }
.opening-flight {
  position: absolute;
  width: var(--flower-size);
  height: var(--flower-size);
  margin: calc(var(--flower-size) / -2);
  color: var(--flower-tone);
  opacity: 0;
  animation: opening-blossom-flight 3600ms cubic-bezier(.2,.45,.4,1) var(--flower-delay) both;
}
.opening-flight svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: opening-blossom-tumble 3600ms ease-in-out var(--flower-delay) both;
}
.opening-flower-sprite {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('/assets/wedding-opening-flowers-20261012.png');
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: var(--flower-cell);
  animation: opening-garden-sway 3600ms ease-in-out var(--flower-delay) both;
}
.opening-flight.is-garden-flower {
  animation-name: opening-garden-flight;
  animation-timing-function: cubic-bezier(.25,.5,.35,1);
}
#cover.opening .envelope { opacity: 0; transform: none; transition: none; }
#invitation.invitation-arriving { animation: opening-invitation-reveal 1800ms ease-out both; }
@keyframes opening-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes opening-envelope-center {
  from { transform: translate(var(--source-x),var(--source-y)) scale(var(--source-scale)); }
  to { transform: translate(0,0) scale(1); }
}
@keyframes opening-flap-lift {
  0%, 12% { transform: rotateX(0); z-index: 4; }
  55% { z-index: 4; }
  56%, 100% { z-index: 1; }
  100% { transform: rotateX(165deg); }
}
@keyframes opening-card-rise {
  0%, 18% { transform: translateY(4%); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(-44%); opacity: 1; }
}
@keyframes opening-envelope-away { to { opacity: 0; } }
@keyframes opening-scene-away { from { opacity: 1; } to { opacity: 0; } }
@keyframes opening-invitation-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes opening-blossom-flight {
  0% { opacity: 0; transform: translate(0,0) scale(.4); }
  12% { opacity: .95; }
  38% { opacity: .9; transform: translate(var(--bend-x),var(--bend-y)) scale(.95); }
  72% { opacity: .8; transform: translate(var(--drift-x),var(--drift-y)) scale(1); }
  100% { opacity: 0; transform: translate(var(--flight-x),var(--flight-y)) scale(1.05); }
}
@keyframes opening-blossom-tumble {
  from { transform: rotate(-18deg) rotateY(0); }
  50% { transform: rotate(var(--flower-half-spin)) rotateY(35deg); }
  to { transform: rotate(var(--flower-spin)) rotateY(-25deg); }
}
@keyframes opening-garden-flight {
  0% { opacity: 0; transform: translate(0,0) scale(.15); }
  14% { opacity: .95; }
  30% { opacity: 1; transform: translate(var(--garden-x),var(--garden-y)) scale(1); }
  46% { opacity: 1; transform: translate(var(--garden-drift-x),var(--garden-drift-y)) scale(1.03); }
  80% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--flight-x),var(--flight-y)) scale(1.06); }
}
@keyframes opening-garden-sway {
  from { transform: rotate(var(--flower-tilt)); }
  45% { transform: rotate(var(--flower-sway)); }
  to { transform: rotate(var(--flower-spin)); }
}
@media (prefers-reduced-motion: reduce) { .invitation-opening-scene { display: none; } }