body {
  background:
    radial-gradient(circle at 13% 18%, rgb(255 217 223 / 86%) 0 7rem, transparent 7.1rem),
    radial-gradient(circle at 86% 72%, rgb(128 185 216 / 24%) 0 10rem, transparent 10.1rem),
    linear-gradient(155deg, #fffaf0 0 48%, #fff0e7 100%);
}

.site-back {
  position: fixed;
  z-index: 20;
  inset-block-start: max(1rem, env(safe-area-inset-top));
  inset-inline-start: 1rem;
  gap: .5rem;
  padding: .55rem 1rem;
  border: 1px solid rgb(157 63 105 / 24%);
  border-radius: 999px;
  background: rgb(255 250 240 / 94%);
  box-shadow: 0 .45rem 1.5rem rgb(86 43 69 / 13%);
  color: var(--berry);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(.7rem);
}

.card-scroll {
  min-height: auto;
}

.envelope-stage {
  --card-shift: 0svh;
  --card-clip-bottom: 0%;
  --details-progress: 1;
  --flap-angle: -180deg;
  position: relative;
  display: grid;
  min-height: auto;
  place-items: center;
  gap: 1rem;
  padding-block: 6rem 3rem;
  padding-inline: .75rem;
  perspective: 80rem;
}

.card-scroll[data-motion-ready="true"] {
  min-height: 175vh;
  min-height: 175svh;
}

.card-scroll[data-motion-ready="true"] .envelope-stage {
  position: sticky;
  inset-block-start: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 0;
  padding-inline: .75rem;
  overflow: hidden;
}

.envelope,
.envelope-front {
  position: absolute;
  inset-block-start: 52%;
  left: 50%;
  width: min(calc(100vw - 1.5rem), 34rem);
  aspect-ratio: 1.72;
  transform: translate(-50%, -28%);
}

.envelope {
  z-index: 1;
  opacity: 1;
}

.envelope-back {
  position: absolute;
  inset: 0;
  border: .3rem solid rgb(255 255 255 / 72%);
  border-radius: 1.5rem;
  background: #ffc8c4;
  box-shadow: 0 2.25rem 5rem rgb(86 43 69 / 18%);
}

.envelope-flap {
  position: absolute;
  z-index: 2;
  inset: -.05rem 0 auto;
  height: 60%;
  border-radius: 1.4rem 1.4rem .75rem .75rem;
  background: linear-gradient(145deg, #ffded2, var(--peach));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: rotateX(var(--flap-angle));
  transform-origin: 50% 0;
  backface-visibility: visible;
}

.invitation-card {
  margin: 0;
  border: .4rem solid rgb(255 255 255 / 84%);
  border-radius: 1.5rem;
  background: var(--ivory);
  box-shadow: 0 1.4rem 3.5rem rgb(86 43 69 / 18%);
  overflow: hidden;
  text-align: center;
}

.names-card {
  position: relative;
  z-index: 5;
  width: min(calc(100vw - 1.5rem), 31rem);
  clip-path: inset(0 0 var(--card-clip-bottom) 0 round 1.5rem);
  transform: translateY(var(--card-shift));
  will-change: transform, clip-path;
}

.card-scroll[data-motion-ready="true"] .names-card {
  position: absolute;
  inset-block-start: clamp(4.6rem, 9svh, 6rem);
  inset-inline: 0;
  margin-inline: auto;
  transform: translateY(var(--card-shift));
}

.card-photo {
  height: clamp(6.25rem, 14svh, 7.5rem);
  background: url('../assets/media/couple-card.jpg') center 44% / cover no-repeat;
}

.card-copy {
  padding: clamp(.85rem, 2.2svh, 1.2rem) clamp(1rem, 4vw, 2rem) clamp(1rem, 2.5svh, 1.35rem);
}

.blessing,
.invitation-line,
.card-copy h1,
.story-line,
.details-panel address,
.closing-line,
.card-footer p,
.invitation-details,
.invitation-details dd {
  margin: 0;
}

.blessing {
  color: var(--berry);
  font-size: clamp(.82rem, 3.2vw, 1rem);
  font-weight: 700;
}

.invitation-line {
  margin-top: .4rem;
  color: #76435d;
  font-size: clamp(.82rem, 3.1vw, .98rem);
  line-height: 1.55;
}

.card-copy h1 {
  margin-top: .12rem;
  color: #562b45;
  font-size: clamp(2.15rem, 10vw, 3.25rem);
  line-height: 1.12;
  text-wrap: balance;
}

.floral-rule {
  display: block;
  width: 4.5rem;
  height: .65rem;
  margin: .55rem auto .5rem;
  background:
    radial-gradient(ellipse at center, var(--coral) 0 27%, transparent 29%) 50% 50% / 1.1rem .65rem no-repeat,
    linear-gradient(90deg, transparent, var(--sage), transparent) 50% 50% / 100% 1px no-repeat;
}

.story-line {
  color: var(--coral-text);
  font-size: clamp(.82rem, 3.2vw, .98rem);
  font-weight: 700;
  line-height: 1.6;
}

.details-panel {
  position: relative;
  z-index: 3;
  width: min(calc(100vw - 1.5rem), 31rem);
  padding: clamp(1rem, 3.5vw, 1.5rem);
  border: 1px solid rgb(157 63 105 / 16%);
  border-radius: 1.5rem;
  background: rgb(255 250 240 / 97%);
  box-shadow: 0 1.35rem 3.5rem rgb(86 43 69 / 16%);
  opacity: var(--details-progress);
  transform: translateY(calc((1 - var(--details-progress)) * 42svh));
  text-align: center;
  will-change: transform, opacity;
}

.card-scroll[data-motion-ready="true"] .details-panel {
  position: absolute;
  inset-block-start: clamp(27.5rem, 57svh, 31rem);
  inset-inline: 0;
  margin-inline: auto;
  transform: translateY(calc((1 - var(--details-progress)) * 42svh));
}

.invitation-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

.invitation-details div {
  padding: .55rem .4rem;
  border-block: 1px solid rgb(157 63 105 / 18%);
}

.invitation-details dt {
  color: var(--berry);
  font-size: .72rem;
  font-weight: 700;
}

.invitation-details dd {
  margin-top: .15rem;
  color: #562b45;
  font-size: clamp(.94rem, 4vw, 1.15rem);
  font-weight: 700;
}

.details-panel address {
  margin-top: .65rem;
  color: #704159;
  font-size: clamp(.82rem, 3.5vw, .96rem);
  font-style: normal;
  line-height: 1.65;
}

.closing-line {
  margin-top: .45rem;
  color: var(--coral-text);
  font-size: .92rem;
  font-weight: 700;
}

.details-panel .map-button {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: .75rem;
  padding: .65rem 1rem;
  border: 1px solid var(--berry);
  border-radius: 999px;
  background: var(--berry);
  color: white;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}

.envelope-front {
  z-index: 4;
  overflow: hidden;
  border-radius: 1.5rem;
  opacity: 1;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.envelope-fold {
  position: absolute;
  inset: 0;
}

.envelope-fold-right {
  background: #ffb9a9;
  clip-path: polygon(100% 0, 100% 100%, 44% 100%);
}

.envelope-fold-left {
  background: #ffd1c3;
  clip-path: polygon(0 0, 56% 100%, 0 100%);
}

.envelope-fold-bottom {
  background: linear-gradient(165deg, #ffcfbf, #ffb797);
  clip-path: polygon(0 100%, 50% 39%, 100% 100%);
}

.flower-burst {
  position: absolute;
  z-index: 4;
  inset-block-start: clamp(15rem, 34svh, 18rem);
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.flower-burst::before,
.flower-burst::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  border: 2px solid rgb(244 111 103 / 58%);
  border-radius: 50%;
  content: '';
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1);
  pointer-events: none;
  animation-name: burst-ring;
  animation-duration: 900ms;
  animation-timing-function: cubic-bezier(.16, .75, .2, 1);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.flower-burst::after {
  border-color: rgb(143 199 227 / 54%);
  animation-duration: 1100ms;
  animation-delay: 140ms;
}

.flower-burst span {
  position: absolute;
  width: .72rem;
  height: .72rem;
  border-radius: 52% 48% 55% 45%;
  background: var(--coral);
  box-shadow:
    -.32rem 0 0 #ff9da8,
    .32rem 0 0 #ffd06f,
    0 -.32rem 0 #ffb2cf,
    0 .32rem 0 #8fc7e3;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35) rotate(0deg);
  pointer-events: none;
  animation-name: flower-drift;
  animation-duration: 1600ms;
  animation-timing-function: cubic-bezier(.18, .7, .22, 1);
  animation-delay: var(--flower-delay);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.flower-burst span::after {
  position: absolute;
  width: .35rem;
  height: .85rem;
  border-radius: 100% 0 100% 0;
  background: #a9cda0;
  content: '';
  transform: translate(.72rem, .34rem) rotate(40deg);
}

.flower-burst span:nth-child(3n + 2) {
  background: #ffcf71;
  box-shadow:
    -.32rem 0 0 #ffab9f,
    .32rem 0 0 #ef7fa1,
    0 -.32rem 0 #a8d5ec,
    0 .32rem 0 #ffd5df;
}

.flower-burst span:nth-child(3n) {
  background: #8fc7e3;
  box-shadow:
    -.32rem 0 0 #ffb08f,
    .32rem 0 0 #ffd06f,
    0 -.32rem 0 #f48caf,
    0 .32rem 0 #f8cad6;
}

.flower-burst span:nth-child(4n + 1) {
  animation-duration: 1400ms;
}

.flower-burst span:nth-child(4n + 2) {
  animation-duration: 1520ms;
}

.flower-burst span:nth-child(4n + 3) {
  animation-duration: 1740ms;
}

.flower-burst span:nth-child(4n) {
  animation-duration: 1900ms;
}

.envelope-stage[data-auto-reveal="true"][data-stage="opening"] .flower-burst span,
.envelope-stage[data-auto-reveal="true"][data-stage="revealed"] .flower-burst span {
  animation-play-state: running;
}

.envelope-stage[data-auto-reveal="true"][data-stage="opening"] .flower-burst::before,
.envelope-stage[data-auto-reveal="true"][data-stage="opening"] .flower-burst::after,
.envelope-stage[data-auto-reveal="true"][data-stage="revealed"] .flower-burst::before,
.envelope-stage[data-auto-reveal="true"][data-stage="revealed"] .flower-burst::after {
  animation-play-state: running;
}

@keyframes flower-drift {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.05) rotate(0deg);
  }

  6% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.8) rotate(0deg);
  }

  28% {
    opacity: 1;
    transform:
      translate(calc(-50% + var(--flower-x)), calc(-50% + var(--flower-y)))
      scale(1.35)
      rotate(var(--flower-rotate));
  }

  55% {
    opacity: .85;
    transform:
      translate(calc(-50% + var(--flower-x)), calc(-50% + var(--flower-y) + 1rem))
      scale(1.1)
      rotate(calc(var(--flower-rotate) + 40deg));
  }

  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--flower-x)), calc(-50% + var(--flower-y) + 7rem))
      scale(.75)
      rotate(calc(var(--flower-rotate) + 160deg));
  }
}

@keyframes burst-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.1);
  }

  12% {
    opacity: .7;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(8);
  }
}

.flower-stream {
  position: absolute;
  z-index: 2;
  inset-block-start: clamp(23.5rem, 47svh, 25.5rem);
  left: 50%;
  width: 1px;
  height: 1px;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.flower-stream span {
  position: absolute;
  top: 0;
  left: 0;
  width: .56rem;
  height: .56rem;
  border-radius: 50%;
  background: #ffcf71;
  box-shadow:
    -.25rem 0 0 #ff9da8,
    .25rem 0 0 #ffd5df,
    0 -.25rem 0 #8fc7e3,
    0 .25rem 0 #ffb08f;
  opacity: 0;
  pointer-events: none;
  animation-name: flower-pour;
  animation-duration: var(--stream-duration);
  animation-timing-function: cubic-bezier(.32, .08, .48, 1);
  animation-delay: var(--stream-delay);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.flower-stream span:nth-child(3n + 2) {
  background: #f48caf;
  box-shadow:
    -.25rem 0 0 #ffd06f,
    .25rem 0 0 #a8d5ec,
    0 -.25rem 0 #ffab9f,
    0 .25rem 0 #f8cad6;
}

.flower-stream span:nth-child(3n) {
  background: #8fc7e3;
  box-shadow:
    -.25rem 0 0 #ffb2cf,
    .25rem 0 0 #ffd06f,
    0 -.25rem 0 #ff9da8,
    0 .25rem 0 #a9cda0;
}

.envelope-stage[data-details-stage="entering"] .flower-stream,
.envelope-stage[data-details-stage="shown"] .flower-stream {
  opacity: 1;
}

.envelope-stage[data-details-stage="entering"] .flower-stream span,
.envelope-stage[data-details-stage="shown"] .flower-stream span {
  animation-play-state: running;
}

@keyframes flower-pour {
  0% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--stream-origin)), -.75rem)
      scale(.35)
      rotate(0deg);
  }

  10% {
    opacity: .95;
  }

  72% {
    opacity: .82;
  }

  100% {
    transform:
      translate(calc(-50% + var(--stream-origin) + var(--stream-x)), var(--stream-fall))
      scale(.85)
      rotate(var(--stream-rotate));
    opacity: 0;
  }
}

.scroll-cue {
  position: absolute;
  z-index: 8;
  inset-block-end: max(4rem, calc(env(safe-area-inset-bottom) + 1rem));
  left: 50%;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  color: var(--berry);
  font-size: .82rem;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-50%);
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.cue-mark {
  display: grid;
  width: 2.65rem;
  min-height: 2.65rem;
  place-items: center;
  border: 1px solid rgb(157 63 105 / 22%);
  border-radius: 50%;
  background: rgb(255 250 240 / 90%);
  animation: cue-pulse 1400ms ease-in-out infinite;
}

@keyframes cue-pulse {
  50% {
    transform: translateY(.25rem);
  }
}

.envelope-stage[data-stage="closed"] {
  --card-shift: 42svh;
  --card-clip-bottom: 88%;
  --flap-angle: 0deg;
}

.envelope-stage[data-stage="opening"] {
  --card-shift: 0svh;
  --card-clip-bottom: 0%;
  --flap-angle: -180deg;
}

.envelope-stage[data-stage="revealed"] {
  --card-shift: 0svh;
  --card-clip-bottom: 0%;
  --flap-angle: -180deg;
}

.envelope-stage[data-stage="opening"] .names-card,
.envelope-stage[data-stage="revealed"] .names-card {
  transition:
    transform 1050ms cubic-bezier(.22, .7, .2, 1),
    clip-path 1050ms cubic-bezier(.22, .7, .2, 1);
}

.envelope-stage[data-stage="opening"] .envelope-flap,
.envelope-stage[data-stage="revealed"] .envelope-flap {
  transition: transform 900ms cubic-bezier(.22, .7, .2, 1);
}

.envelope-stage[data-stage="opening"] .envelope,
.envelope-stage[data-stage="revealed"] .envelope {
  opacity: 0;
  transform: translate(-50%, -8%) scaleY(.18);
  transition:
    opacity 700ms ease,
    transform 800ms cubic-bezier(.22, .7, .2, 1);
}

.envelope-stage[data-stage="opening"] .envelope-front,
.envelope-stage[data-stage="revealed"] .envelope-front {
  z-index: 1;
  opacity: 0;
}

.envelope-stage[data-stage="revealed"][data-details-stage="hidden"] .scroll-cue {
  opacity: 1;
  visibility: visible;
}

.envelope-stage[data-details-stage="entering"] .scroll-cue {
  opacity: clamp(
    0,
    calc(1 - var(--details-progress) - var(--details-progress) - var(--details-progress) - var(--details-progress) - var(--details-progress) - var(--details-progress) - var(--details-progress) - var(--details-progress) - var(--details-progress) - var(--details-progress)),
    1
  );
  visibility: visible;
}

.envelope-stage[data-details-stage="shown"] .scroll-cue {
  opacity: 0;
  visibility: hidden;
}

.envelope-stage:not([data-stage]) .envelope,
.envelope-stage:not([data-stage]) .envelope-front,
.envelope-stage:not([data-stage]) .flower-burst,
.envelope-stage:not([data-stage]) .flower-stream,
.envelope-stage:not([data-stage]) .scroll-cue {
  display: none;
}

.card-footer {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: min(100% - 2rem, 44rem);
  margin-inline: auto;
  padding: 3rem 1rem 5rem;
  color: #6f4059;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  text-align: center;
}

.card-footer a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.2rem;
  border: 1px solid rgb(157 63 105 / 26%);
  border-radius: 999px;
  color: var(--berry);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}

@media (max-height: 47rem) {
  .card-scroll[data-motion-ready="true"] {
    min-height: auto;
  }

  .card-scroll[data-motion-ready="true"] .envelope-stage {
    position: relative;
    min-height: auto;
    gap: 1rem;
    padding-block: 6rem 3rem;
    overflow: visible;
  }

  .envelope,
  .envelope-front,
  .scroll-cue {
    display: none;
  }

  .flower-burst {
    visibility: hidden;
    opacity: 0;
  }

  .flower-stream {
    display: none;
  }

  .names-card,
  .details-panel,
  .card-scroll[data-motion-ready="true"] .names-card,
  .card-scroll[data-motion-ready="true"] .details-panel {
    position: relative;
    inset: auto;
    left: auto;
    opacity: 1;
    transform: none;
  }

  .names-card,
  .envelope-stage[data-stage] .names-card {
    clip-path: none;
  }

  .card-footer {
    padding-block: 1rem 4rem;
  }
}

@media (max-width: 24rem) {
  .site-back {
    inset-inline-start: .65rem;
    font-size: .77rem;
  }

  .envelope-stage,
  .card-scroll[data-motion-ready="true"] .envelope-stage {
    padding-inline: .75rem;
  }

  .details-panel {
    padding-inline: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-scroll[data-motion-ready="true"] {
    min-height: auto;
  }

  .card-scroll[data-motion-ready="true"] .envelope-stage {
    position: relative;
    min-height: auto;
    gap: 1rem;
    padding-block: 7rem 4rem;
    overflow: visible;
  }

  .envelope,
  .envelope-front,
  .scroll-cue {
    display: none;
  }

  .flower-burst {
    visibility: hidden;
    opacity: 0;
  }

  .flower-stream {
    display: none;
  }

  .names-card,
  .details-panel,
  .card-scroll[data-motion-ready="true"] .names-card,
  .card-scroll[data-motion-ready="true"] .details-panel {
    position: relative;
    inset: auto;
    left: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .names-card,
  .envelope-stage[data-stage] .names-card {
    clip-path: none;
  }

  .cue-mark {
    animation: none;
  }
}