/* Cover-only motion. The envelope's existing 3D opening transition stays intact. */
#envelope.cover-enhanced.cover-visible > :is(
  .cover-top, .cover-prelude, .double-happiness, .cover-title,
  .cover-names, .cover-rule, .cover-date, .cover-lunar,
  .cover-time, .cover-action, .cover-bottom
) {
  animation: cover-arrive .68s cubic-bezier(.22, 1, .36, 1) var(--cover-delay, 0s) both;
}

#envelope .cover-prelude { --cover-delay: .07s; }
#envelope .double-happiness { --cover-delay: .13s; }
#envelope .cover-title { --cover-delay: .19s; }
#envelope .cover-names { --cover-delay: .25s; }
#envelope .cover-rule { --cover-delay: .3s; }
#envelope .cover-date { --cover-delay: .35s; }
#envelope .cover-lunar { --cover-delay: .39s; }
#envelope .cover-time { --cover-delay: .42s; }
#envelope .cover-action { --cover-delay: .46s; }
#envelope .cover-bottom { --cover-delay: .49s; }

#envelope.cover-enhanced .double-happiness > span {
  display: block;
  transform-origin: 50% 50%;
  animation: cover-seal-breathe 5.6s ease-in-out .8s infinite;
}

#envelope.cover-enhanced .double-happiness::before,
#envelope.cover-enhanced .double-happiness::after {
  transform-origin: 50% 50%;
  animation: cover-ring-breathe 5.6s ease-in-out .8s infinite;
}

#envelope.cover-enhanced .double-happiness::after {
  animation-delay: 1.25s;
}

#envelope.cover-enhanced.cover-visible .cover-rule::before,
#envelope.cover-enhanced.cover-visible .cover-rule::after {
  animation: cover-line-unfold .7s cubic-bezier(.22, 1, .36, 1) .35s both;
}

#envelope.cover-enhanced .cover-rule::before { transform-origin: right center; }
#envelope.cover-enhanced .cover-rule::after { transform-origin: left center; }

#envelope.cover-enhanced .open-button::after {
  pointer-events: none;
  animation: cover-button-glint 5.8s ease-in-out .65s infinite both;
}

#envelope.cover-enhanced > .cover-sparks {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

#envelope.cover-enhanced .cover-spark {
  position: absolute;
  left: var(--spark-left);
  top: var(--spark-top);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 5px #eddbb940;
  opacity: 0;
  pointer-events: none;
  animation: cover-spark-drift var(--spark-duration, 6s) ease-in-out var(--spark-delay, 0s) infinite both;
}

/* Pause the entrance, seal, rings, rules, button, and sparks together offscreen. */
#envelope.cover-enhanced:not(.cover-running) > :is(
  .cover-top, .cover-prelude, .double-happiness, .cover-title,
  .cover-names, .cover-rule, .cover-date, .cover-lunar,
  .cover-time, .cover-action, .cover-bottom
),
#envelope.cover-enhanced:not(.cover-running) .double-happiness > span,
#envelope.cover-enhanced:not(.cover-running) .double-happiness::before,
#envelope.cover-enhanced:not(.cover-running) .double-happiness::after,
#envelope.cover-enhanced:not(.cover-running) .cover-rule::before,
#envelope.cover-enhanced:not(.cover-running) .cover-rule::after,
#envelope.cover-enhanced:not(.cover-running) .open-button::after,
#envelope.cover-enhanced:not(.cover-running) .cover-spark {
  animation-play-state: paused;
}

@keyframes cover-arrive {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cover-seal-breathe {
  0%, 100% { opacity: .94; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.035); }
}

@keyframes cover-ring-breathe {
  0%, 100% { opacity: .65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.035); }
}

@keyframes cover-line-unfold {
  from { opacity: .2; transform: scaleX(.12); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes cover-button-glint {
  0% { opacity: 0; transform: translateX(-125%) skewX(-25deg); }
  8% { opacity: .65; }
  26% { opacity: .65; transform: translateX(125%) skewX(-25deg); }
  34%, 100% { opacity: 0; transform: translateX(170%) skewX(-25deg); }
}

@keyframes cover-spark-drift {
  0%, 100% { opacity: 0; transform: translateY(4px) scale(.65); }
  35% { opacity: .58; transform: translateY(0) scale(1); }
  65% { opacity: .3; transform: translateY(-5px) scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
  #envelope.cover-enhanced > :is(
    .cover-top, .cover-prelude, .double-happiness, .cover-title,
    .cover-names, .cover-rule, .cover-date, .cover-lunar,
    .cover-time, .cover-action, .cover-bottom
  ),
  #envelope.cover-enhanced .double-happiness > span,
  #envelope.cover-enhanced .double-happiness::before,
  #envelope.cover-enhanced .double-happiness::after,
  #envelope.cover-enhanced .cover-rule::before,
  #envelope.cover-enhanced .cover-rule::after {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  #envelope.cover-enhanced .open-button::after,
  #envelope.cover-enhanced .cover-sparks {
    display: none;
  }
}