/* A living timestamp and a few falling paper blossoms, with the photograph leading. */
#hero-carousel .wedding-countdown {
  gap: 5px;
  white-space: nowrap;
  letter-spacing: .3px;
  text-shadow: 0 1px 7px #27110dd9;
}
#hero-carousel #countdown-prefix { font-size: 10px; }
#hero-carousel #countdown-unit { font-size: 10px; }
#hero-carousel .countdown-clock {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: 4px;
}
#hero-carousel .countdown-clock[hidden] { display: none; }
#hero-carousel .countdown-clock b {
  min-width: 2ch;
  font: 400 18px/1.1 Georgia, var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-align: center;
}
#hero-carousel .countdown-clock > span { font: 400 9px/1.2 var(--sans); }
#hero-carousel .hero-heading { z-index: 4; }

.hero-falling {
  position: absolute;
  z-index: 2;
  inset: calc(56px + env(safe-area-inset-top)) 0 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 78%, transparent);
}
#invite[data-atmosphere=running] .hero-falling { opacity: 1; }
.hero-falling-piece {
  position: absolute;
  top: -16px;
  left: var(--fall-x);
  width: 12px;
  height: calc(100% + 16px);
  color: var(--fall-color);
  animation: wedding-paper-fall var(--fall-duration) var(--fall-delay) linear infinite;
  animation-play-state: paused;
}
.hero-falling-piece > svg {
  display: block;
  width: var(--fall-size);
  height: var(--fall-size);
  fill: currentColor;
  animation: wedding-paper-turn var(--turn-duration) ease-in-out infinite alternate;
  animation-play-state: paused;
}
#invite[data-atmosphere=running] .hero-falling-piece,
#invite[data-atmosphere=running] .hero-falling-piece > svg { animation-play-state: running; }
@keyframes wedding-paper-fall {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .8; }
  82% { opacity: .65; }
  100% { transform: translate3d(var(--fall-drift), 100%, 0); opacity: 0; }
}
@keyframes wedding-paper-turn {
  from { transform: rotate(-28deg) rotateY(0); }
  to { transform: rotate(135deg) rotateY(65deg); }
}
@media (max-width: 360px) {
  #hero-carousel .wedding-countdown { gap: 4px; letter-spacing: 0; }
  #hero-carousel #countdown-prefix { font-size: 9px; }
  #hero-carousel .countdown-clock { gap: 3px; margin-left: 2px; }
  #hero-carousel .countdown-clock b { font-size: 16px; }
  .hero-falling-piece:nth-child(n+10) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-falling { display: none; transition: none; }
  .hero-falling-piece, .hero-falling-piece > svg { animation: none; }
}