/* The supplied ivory-and-olive artwork replaces the original envelope and copy. */
button.invitation-envelope-olive {
  background: #f4f2e5 url('./assets/envelope-ivory-olive-oo.png') center / cover no-repeat;
  border-radius: 20px;
  isolation: isolate;
}

button.invitation-envelope-olive > * {
  visibility: hidden !important;
}

button.invitation-envelope-olive > .invitation-opening-artwork {
  visibility: visible !important;
}

button.invitation-envelope-olive.invitation-envelope-opening {
  opacity: 0 !important;
  pointer-events: none;
}

.invitation-opening-artwork {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.invitation-opening-artwork.opening-detached {
  position: fixed;
  inset: auto;
  z-index: 60;
  border-radius: 20px;
  pointer-events: auto;
  touch-action: none;
}

.opening-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.opening-wing,
.opening-paper {
  position: absolute;
  inset: 0;
}

.opening-paper {
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.opening-wing-top { z-index: 2; }
.opening-wing-bottom { z-index: 1; }

.opening-hint-cover,
.opening-hint-pulse {
  position: absolute;
  inset: 0;
  mask: url('./assets/envelope-hint-mask.svg') center / 100% 100% no-repeat;
  -webkit-mask: url('./assets/envelope-hint-mask.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}

.opening-hint-cover { overflow: hidden; }

.opening-hint-blank {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translateY(-8%);
}

.opening-hint-pulse {
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: 53.3% 68.1%;
}

.is-opening .opening-wing {
  will-change: transform;
  animation-duration: 2.4s;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  animation-fill-mode: forwards;
}

.is-opening .opening-wing-top { animation-name: opening-up; }
.is-opening .opening-wing-bottom { animation-name: opening-down; }

.is-opening .opening-hint-pulse { animation-play-state: paused; }

@keyframes opening-up {
  from { transform: translateY(0); }
  to { transform: translateY(-105%); }
}

@keyframes opening-down {
  from { transform: translateY(0); }
  to { transform: translateY(105%); }
}

@media (prefers-reduced-motion: reduce) {
  .is-opening .opening-wing { animation: none; }
  .invitation-opening-artwork.is-opening { animation: opening-reduced 0.4s ease forwards; }
  @keyframes opening-reduced { to { opacity: 0; } }
}