.wedding-tableau {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #b8e4ed;
}

.wedding-tableau__background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

.wedding-tableau__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wedding-tableau__achievement {
  position: absolute;
  z-index: 6;
  top: max(10px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  width: min(36vw, 190px);
  aspect-ratio: 250 / 63;
  filter: drop-shadow(0 2px 0 rgb(69 28 14 / 32%));
  pointer-events: none;
  user-select: none;
  animation: wedding-tableau-achievement-arrive 560ms steps(5, end) 220ms both;
}

.wedding-tableau__achievement-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.wedding-tableau__clock {
  position: absolute;
  z-index: 6;
  top: max(10px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  width: min(53vw, 230px);
  aspect-ratio: 1384 / 1136;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
}

.wedding-tableau__clock-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: var(--tableau-clock-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.wedding-tableau__clock-date,
.wedding-tableau__clock-time {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #42170b;
  background: linear-gradient(#fff0b4 0 50%, #f8cf82 50%);
  box-shadow:
    inset 0 1px #fff8cf,
    inset 0 -1px #cf8131;
  font-family: "Microsoft YaHei", "SimHei", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    1px 0 #fff0bd,
    0 1px #d68e42,
    1px 1px #d68e42;
  white-space: nowrap;
}

.wedding-tableau__clock-date {
  top: 7.5%;
  left: 36.5%;
  width: 58%;
  height: 18%;
  font-size: 0.88rem;
}

.wedding-tableau__clock-time {
  top: 45.5%;
  left: 36.5%;
  width: 58%;
  height: 17%;
  font-size: 0.94rem;
}

.wedding-tableau__clock-gold {
  position: absolute;
  z-index: 1;
  top: 80.2%;
  left: 22.7%;
  display: grid;
  width: 65.8%;
  height: 14.2%;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1.4%;
  font-variant-numeric: tabular-nums;
}

.wedding-tableau__clock-gold-digit {
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  color: transparent;
  background-image:
    var(--tableau-digit-font-image),
    linear-gradient(#fff0b4 0 48%, #f6ce7e 48% 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: var(--clock-digit-x) 3.7037%, center;
  background-size: 1600% 2800%, 100% 100%;
  box-shadow:
    inset 1px 0 #ffe7a0,
    inset -1px 0 #d58a34,
    inset 0 -1px #b86b29;
  font-size: 0;
  image-rendering: pixelated;
}

.wedding-tableau__venue,
.wedding-tableau__couple,
.wedding-tableau__vows {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.wedding-tableau__venue {
  z-index: 1;
  bottom: max(28svh, 180px);
  width: min(90vw, 520px);
  aspect-ratio: 1.42;
  filter: drop-shadow(0 4px 0 rgb(44 73 61 / 22%));
  animation: wedding-tableau-venue-arrive 900ms steps(6, end) 120ms both;
}

.wedding-tableau__couple {
  z-index: 3;
  bottom: max(18svh, 82px);
  width: min(46vw, 220px);
  aspect-ratio: 1.12;
  filter: drop-shadow(0 4px 0 rgb(44 73 61 / 28%));
  animation: wedding-tableau-couple-arrive 760ms steps(6, end) 420ms both;
}

.wedding-tableau__vows {
  z-index: 4;
  bottom: max(1.2svh, 8px);
  display: grid;
  width: min(60vw, 300px);
  grid-template-rows: repeat(2, auto);
  gap: 4px;
  filter: drop-shadow(0 3px 0 rgb(61 28 15 / 24%));
  animation: wedding-tableau-vows-arrive 720ms steps(6, end) 680ms both;
}

.wedding-tableau__vow {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

.wedding-tableau__arch,
.wedding-tableau__flower-column,
.wedding-tableau__butterfly,
.wedding-tableau__person {
  position: absolute;
  display: block;
  background-image: var(--tableau-decoration-image);
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.wedding-tableau__arch {
  z-index: 2;
  bottom: 0;
  left: 12%;
  width: 76%;
  aspect-ratio: 1173 / 979;
  background-position: 50.74% 38.54%;
  background-size: 174.6% 209.2%;
}

.wedding-tableau__flower-column {
  z-index: 3;
  bottom: 0;
  width: 8.5%;
  aspect-ratio: 142 / 309;
  background-size: 1442.254% 662.783%;
}

.wedding-tableau__flower-column--left {
  left: -1.5%;
  background-position: 15.215% 61.472%;
}

.wedding-tableau__flower-column--right {
  right: -1.5%;
  background-position: 85.467% 62.22%;
}

.wedding-tableau__butterfly {
  --butterfly-frame-animation: wedding-tableau-butterfly-purple-frames;
  --butterfly-frame-duration: 480ms;
  z-index: 4;
  aspect-ratio: 90 / 103;
  background-size: 2275.556% 1988.35%;
  animation:
    var(--butterfly-frame-animation) var(--butterfly-frame-duration) steps(1, end) infinite,
    wedding-tableau-butterfly-float 2.4s steps(2, end) infinite alternate;
}

.wedding-tableau__butterfly--left {
  --butterfly-frame-animation: wedding-tableau-butterfly-white-frames;
  top: 13%;
  left: 4%;
  width: 7%;
}

.wedding-tableau__butterfly--center {
  --butterfly-frame-animation: wedding-tableau-butterfly-purple-frames;
  top: 2%;
  left: 67%;
  width: 8%;
  animation-delay: -180ms, -1.1s;
}

.wedding-tableau__butterfly--right {
  --butterfly-frame-animation: wedding-tableau-butterfly-pink-frames;
  --butterfly-frame-duration: 520ms;
  top: 19%;
  right: 4%;
  width: 7%;
  aspect-ratio: 142 / 103;
  background-size: 1442.254% 1988.35%;
  animation-delay: -340ms, -600ms;
}

.wedding-tableau__person {
  z-index: 1;
  bottom: 0;
}

.wedding-tableau__person--groom {
  left: 9%;
  width: 32%;
  aspect-ratio: 180 / 412;
  background-position: 3.801% 100%;
  background-size: 1137.778% 497.087%;
}

.wedding-tableau__person--bride {
  left: 50%;
  width: 42%;
  aspect-ratio: 232 / 386;
  background-position: 21.641% 98.436%;
  background-size: 882.759% 530.57%;
}

.wedding-tableau__pet {
  position: absolute;
  z-index: 2;
  bottom: 0;
  display: block;
  background-image: var(--tableau-pet-image);
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.wedding-tableau__pet--cat {
  left: 94%;
  width: 24%;
  aspect-ratio: 137 / 175;
  background-position: 27.159% 84.357%;
  background-size: 1494.891% 1170.286%;
}

@keyframes wedding-tableau-venue-arrive {
  from {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes wedding-tableau-couple-arrive {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes wedding-tableau-achievement-arrive {
  from {
    opacity: 0;
    transform: translateX(-12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes wedding-tableau-vows-arrive {
  from {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes wedding-tableau-butterfly-white-frames {
  0%,
  100% {
    background-position: 3.626% 1.645%;
  }

  25%,
  75% {
    background-position: 14.147% 0.668%;
  }

  50% {
    background-position: 24.668% 0%;
  }
}

@keyframes wedding-tableau-butterfly-purple-frames {
  0%,
  100% {
    background-position: 3.626% 12.236%;
  }

  25%,
  75% {
    background-position: 14.147% 11.26%;
  }

  50% {
    background-position: 24.668% 10.591%;
  }
}

@keyframes wedding-tableau-butterfly-pink-frames {
  0%,
  100% {
    background-position: 64.533% 11.26%;
  }

  50% {
    background-position: 75.341% 10.591%;
  }
}

@keyframes wedding-tableau-butterfly-float {
  to {
    transform: translateY(-5px);
  }
}

@media (min-width: 768px) {
  .wedding-tableau__clock-date {
    font-size: 1rem;
  }

  .wedding-tableau__achievement {
    width: min(30vw, 210px);
  }

  .wedding-tableau__clock-time {
    font-size: 1.05rem;
  }

  .wedding-tableau__venue {
    bottom: max(26svh, 195px);
    width: min(68vw, 620px);
  }

  .wedding-tableau__couple {
    bottom: max(18svh, 96px);
    width: min(30vw, 250px);
  }

  .wedding-tableau__vows {
    width: min(38vw, 320px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wedding-tableau__venue,
  .wedding-tableau__couple,
  .wedding-tableau__achievement,
  .wedding-tableau__vows,
  .wedding-tableau__butterfly {
    animation: none;
  }
}