.invitation-scroll {
  position: relative;
  width: min(100%, 440px);
  flex: 0 0 auto;
  margin: 18px auto;
  perspective: 900px;
}
#arrival .arrival-card h2 em,
#arrival .arrival-card .date span { color: inherit; opacity: 1; }
.invitation-scroll .arrival-card {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 3px;
  border: 1px solid #d9c69f;
  padding-top: 40px;
  padding-bottom: 38px;
  background: linear-gradient(90deg, #efe0bf, #fff8e9 8%, #fffaf0 50%, #fff8e9 92%, #efdfbd);
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: inset(50% 0);
  box-shadow: 0 12px 35px rgb(28 39 24 / 18%);
}
.invitation-scroll .arrival-card::before {
  inset: 14px;
  background: none;
  border: 1px solid rgb(172 149 103 / 40%);
  border-radius: 2px;
}
.invitation-scroll .arrival-card > * { opacity: 0; }
.scroll-roll {
  pointer-events: none;
  position: absolute;
  left: -5px;
  right: -5px;
  height: 28px;
  z-index: 3;
  border: 1px solid #cbb58a;
  border-radius: 9px;
  background: linear-gradient(#dfc89b 0%, #fff8e6 25%, #fffbed 43%, #e6d2ad 82%, #bca276 100%);
  box-shadow: 0 5px 8px rgb(59 47 27 / 14%);
}
.scroll-roll::before, .scroll-roll::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 9px;
  border: 1px solid #b69b70;
  border-radius: 50%;
  background: radial-gradient(ellipse, #bca47d 12%, #f9edcf 23%, #e1cba3 50%, #fff6df 58%, #c5ab7e 90%);
}
.scroll-roll::before { left: -4px; }
.scroll-roll::after { right: -4px; }
.scroll-roll-top { top: 50%; transform: translateY(-100%); }
.scroll-roll-bottom { bottom: 50%; transform: translateY(100%); }
.scroll-ribbon {
  pointer-events: none;
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 23px;
  height: 76px;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background: linear-gradient(90deg, #936c5d, #d2a48f 45%, #b88876 75%, #8d6557);
  box-shadow: 2px 2px 4px rgb(66 40 27 / 18%);
}
.scroll-ribbon-knot {
  position: absolute;
  top: 28px;
  left: 1px;
  width: 21px;
  height: 20px;
  z-index: 2;
  border-radius: 6px;
  background: linear-gradient(110deg, #dab29d, #ac7b69);
  box-shadow: 0 2px 3px rgb(67 40 29 / 20%);
}
.scroll-ribbon-knot::before, .scroll-ribbon-knot::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 33px;
  height: 24px;
  border: 9px solid #c49680;
  box-sizing: border-box;
  box-shadow: 0 3px 3px rgb(67 40 29 / 14%);
}
.scroll-ribbon-knot::before { right: 13px; border-radius: 65% 55% 45% 60%; transform: rotate(22deg); }
.scroll-ribbon-knot::after { left: 13px; border-radius: 55% 65% 60% 45%; transform: rotate(-22deg); }
.scroll-ribbon-tail {
  position: absolute;
  top: 40px;
  width: 16px;
  height: 40px;
  transform-origin: top center;
  background: linear-gradient(90deg, #a77765, #d4aa95);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
.scroll-ribbon-tail.left { left: 0; transform: rotate(24deg); }
.scroll-ribbon-tail.right { right: 0; transform: rotate(-24deg); }
#arrival.visible .scroll-ribbon { animation: untie-ribbon .85s ease-in-out .35s both; }
#arrival.visible .scroll-roll-top { animation: unroll-top 1.6s cubic-bezier(.45,0,.2,1) 1s both; }
#arrival.visible .scroll-roll-bottom { animation: unroll-bottom 1.6s cubic-bezier(.45,0,.2,1) 1s both; }
#arrival.visible .invitation-scroll .arrival-card { animation: unroll-paper 1.6s cubic-bezier(.45,0,.2,1) 1s both; }
#arrival.visible .invitation-scroll .arrival-card > * { animation: scroll-content-in .85s ease 1.9s both; }
#arrival.visible .replay { animation: scroll-content-in .6s ease 2.2s both; }
@keyframes untie-ribbon {
  0%, 15% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
  55% { opacity: 1; transform: translate(-50%, -42%) rotate(-7deg) scale(1.08); }
  100% { opacity: 0; transform: translate(-40%, 15%) rotate(12deg) scale(.92); }
}
@keyframes unroll-top {
  from { top: 50%; transform: translateY(-100%); }
  to { top: 0; transform: translateY(-50%); }
}
@keyframes unroll-bottom {
  from { bottom: 50%; transform: translateY(100%); }
  to { bottom: 0; transform: translateY(50%); }
}
@keyframes unroll-paper { from { clip-path: inset(50% 0); } to { clip-path: inset(0); } }
@keyframes scroll-content-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #arrival.visible .invitation-scroll *, #arrival.visible .replay { animation: none !important; }
  .invitation-scroll .arrival-card { clip-path: none; }
  .invitation-scroll .arrival-card > * { opacity: 1; }
  .scroll-ribbon { display: none; }
  .scroll-roll-top { top: 0; transform: translateY(-50%); }
  .scroll-roll-bottom { bottom: 0; transform: translateY(50%); }
}
@media (max-height: 700px) {
  .invitation-scroll { margin-top: 14px; margin-bottom: 14px; }
  .invitation-scroll .arrival-card { padding-top: 30px; padding-bottom: 28px; }
}
@media (max-width: 700px) {
  #arrival {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
    padding: max(24px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }
  #arrival:not([hidden]) { display: flex; }
  #arrival[hidden] { display: none !important; }
  #arrival .invitation-scroll {
    flex: 0 0 auto;
    margin: auto 0 0;
  }
  #arrival .replay {
    flex: 0 0 auto;
    position: static;
    transform: none;
    margin: 22px 0 auto;
  }
}