@font-face {
  font-family: "Bodega Script";
  src: url("./assets/font/Bodega-Script.otf") format("opentype");
  font-display: swap;
}

:root {
  --bg: #edf1f6;
  --ink: #7a97bb;
  --ink-strong: #506e95;
  --shadow-soft: 0 18px 30px rgba(78, 93, 119, 0.2);
  --shadow-rich: 0 26px 44px rgba(70, 87, 113, 0.32);
  --ease-lux: cubic-bezier(0.22, 0.9, 0.18, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  font-family: "Times New Roman", serif;
}

.experience {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.backdrop {
  position: absolute;
  inset: 0;
  background: url("./assets/textures/bg-new.png") center / cover no-repeat;
  z-index: -2;
}

.topbar {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 50;
}

.rewrap {
  border: 1px solid rgba(101, 128, 165, 0.34);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink-strong);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 360ms var(--ease-lux), box-shadow 360ms var(--ease-lux), opacity 300ms ease;
  backdrop-filter: blur(6px);
}

.rewrap:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(98, 126, 163, 0.26);
}

.rewrap.hidden {
  opacity: 0;
  pointer-events: none;
}

.intro {
  position: absolute;
  inset: auto 0 auto;
  top: clamp(14px, 3.4vh, 42px);
  text-align: center;
  z-index: 30;
  transition: opacity 900ms var(--ease-lux), transform 900ms var(--ease-lux);
  pointer-events: none;
}

.intro.hidden {
  opacity: 0;
  transform: translateY(-24px);
  pointer-events: none;
}

.invite-script {
  margin: 0;
  font-family: "Bodega Script", "Times New Roman", serif;
  font-size: clamp(2.05rem, 5.5vw, 5.1rem);
  font-weight: 400;
  color: var(--ink);
  text-shadow: 0 9px 24px rgba(116, 145, 186, 0.22);
}

.invite-script-image {
  display: block;
  width: min(38vw, 520px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.stage {
  position: relative;
  min-height: 100dvh;
}

.envelope-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(58vw, 620px);
  aspect-ratio: 1.33 / 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 1600px;
  z-index: 15;
  transition: transform 1300ms var(--ease-lux), opacity 900ms var(--ease-lux);
}

.envelope-wrap.showcase {
  top: 73%;
}

.envelope-wrap:active {
  transform: translate(-50%, -50%) scale(0.996);
}

.envelope-wrap.disabled {
  pointer-events: none;
}

.envelope-wrap.complete {
  transform: translate(-50%, -54%) scale(0.92);
  z-index: 8;
}

.envelope-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1750ms cubic-bezier(0.2, 0.74, 0.15, 1);
}

.envelope-3d.hidden {
  opacity: 0;
  transition: opacity 520ms var(--ease-lux);
}

.envelope-3d.flipped {
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  filter: drop-shadow(var(--shadow-soft));
}

.envelope-front {
  transform: translateX(-50%);
}

.envelope-back {
  transform: rotateY(180deg);
}

.envelope-open {
  position: absolute;
  width: 105%;
  left: 50%;
  bottom: -2%;
  transform: translateX(-50%) translateY(12px) scale(0.96);
  opacity: 0;
  filter: drop-shadow(var(--shadow-soft));
  transition: opacity 780ms var(--ease-lux), transform 980ms var(--ease-lux);
  z-index: 1;
}

.envelope-open.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1.02);
}

.bundle {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: min(45vw, 430px);
  transform: translate(-50%, 38%) scale(0.78);
  opacity: 0;
  transition: transform 1300ms var(--ease-lux), opacity 900ms var(--ease-lux);
  z-index: 3;
}

.bundle.rise {
  opacity: 1;
  transform: translate(-50%, -8%) scale(1.17);
}

.stack {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(var(--shadow-rich));
}

.cards-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.card {
  position: absolute;
  left: 50%;
  top: 58%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  z-index: 5;
  filter: drop-shadow(0 14px 24px rgba(92, 108, 132, 0.25));
  transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.74);
  transition: transform 520ms var(--ease-lux), filter 650ms var(--ease-lux), opacity 320ms ease;
  pointer-events: none;
}

.cards-layer.visible:not(.settled) .card {
  pointer-events: auto;
  animation: scatter 1220ms var(--delay) cubic-bezier(0.15, 0.9, 0.2, 1) forwards;
}

.cards-layer.rewrapping .card {
  animation: gather 620ms var(--delay) cubic-bezier(0.42, 0, 0.58, 1) forwards;
  pointer-events: none;
}

.cards-layer.settled .card {
  pointer-events: auto;
  opacity: 1;
  animation: none;
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1);
  transition: transform 520ms var(--ease-lux), filter 650ms var(--ease-lux), opacity 320ms ease;
}

.cards-layer.settled .card.focused {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.45) rotate(0deg);
  animation: none;
}

.card img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  transition: transform 260ms var(--ease-lux), filter 260ms var(--ease-lux);
  image-rendering: auto;
  transform: translateZ(0);
}

.cards-layer.visible .card:hover:not(.focused) {
  filter: drop-shadow(0 20px 36px rgba(64, 81, 108, 0.4));
}

.cards-layer.visible .card:hover:not(.focused) img {
  transform: scale(1.03);
  filter: brightness(1.02);
}

.cards-layer.visible .card-vip:hover:not(.focused) img {
  transform: none;
  filter: none;
}

.cards-layer.visible .card-vip:hover:not(.focused) {
  filter: drop-shadow(0 14px 24px rgba(92, 108, 132, 0.25));
}

.card.focused {
  left: 50%;
  top: 50%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.45) rotate(0deg);
  z-index: 50;
  filter: drop-shadow(0 26px 46px rgba(66, 82, 106, 0.46));
  animation: none;
  cursor: default;
}

.card-invitation {
  width: clamp(297px, 32.4vw, 486px);
  --tx: -2.8vw;
  --ty: -2vh;
  --rot: -2.2deg;
  --delay: 30ms;
}

@media (min-width: 861px) {
  .card-invitation {
    width: clamp(327px, 35.6vw, 535px);
  }
}

.card-details {
  width: clamp(262px, 27.5vw, 412px);
  --tx: 19vw;
  --ty: -2vh;
  --rot: 3.2deg;
  --delay: 150ms;
}

.card-rsvp {
  width: clamp(238px, 25vw, 375px);
  --tx: -20vw;
  --ty: -1vh;
  --rot: -5deg;
  --delay: 230ms;
}

.card-vip {
  width: clamp(200px, 20vw, 300px);
  --tx: 40%;
  --ty: 19vh;
  --rot: 1deg;
  --delay: 310ms;
}

.card-vip.focused {
  transform: translate(-50%, -50%) scale(1.74) rotate(0deg);
}

.cards-layer.settled .card-invitation.focused,
.card-invitation.focused {
  top: 53%;
  transform: translate(-50%, -50%) scale(1.22) rotate(0deg);
}

.oval-flip {
  position: relative;
  display: block;
  width: 100%;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.oval-front,
.oval-back {
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  transition: transform 940ms cubic-bezier(0.2, 0.88, 0.2, 1), opacity 460ms var(--ease-lux);
}

.oval-front {
  position: relative;
  opacity: 1;
  transform: rotateY(0deg);
}

.oval-back {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: rotateY(-180deg);
}

.card-vip.show-back .oval-front {
  opacity: 0;
  transform: rotateY(180deg);
}

.card-vip.show-back .oval-back {
  opacity: 1;
  transform: rotateY(0deg);
}

.card-vip:not(.focused) .oval-front {
  opacity: 1;
  transform: rotateY(0deg);
}

.card-vip:not(.focused) .oval-back {
  opacity: 0;
  transform: rotateY(-180deg);
}

.url-hotspot {
  position: absolute;
  display: block;
  z-index: 4;
  left: 10%;
  top: 78%;
  width: 80%;
  height: 16%;
  pointer-events: none;
  cursor: pointer;
}

.card-details .url-hotspot {
  left: 14%;
  top: 60.5%;
  width: 72%;
  height: 10%;
}

.card-rsvp .url-hotspot {
  left: 16%;
  top: 45%;
  width: 68%;
  height: 10%;
}

.card.focused .url-hotspot {
  pointer-events: auto;
}

@keyframes scatter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.72);
  }

  55% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 1.08), calc(var(--ty) * 1.08)) rotate(calc(var(--rot) * 1.15)) scale(1.03);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1);
  }
}

@keyframes gather {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1);
  }

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

@media (max-width: 860px) {
  .intro {
    top: 22%;
  }

  .topbar {
    top: auto;
    bottom: 14px;
    right: auto;
    left: 14px;
  }

  .rewrap {
    font-size: 12px;
    padding: 8px 11px;
  }

  .invite-script-image {
    width: min(78vw, 440px);
  }

  .envelope-wrap {
    width: min(86vw, 530px);
    top: 59%;
  }

  .envelope-wrap.showcase {
    top: 75%;
  }

  .bundle {
    width: min(58vw, 340px);
  }

  .card.focused {
    transform: translate(-50%, -50%) scale(1.45);
  }

  .card-invitation.focused {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
  }

  .card-details.focused {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.6) rotate(0deg);
  }

  .card-invitation {
    --tx: 0vw;
    --ty: -12.5vh;
    --rot: -1deg;
  }

  .card-details {
    --tx: 25vw;
    --ty: 9vh;
    --rot: 4deg;
  }

  .card-rsvp {
    --tx: -25vw;
    --ty: 8vh;
    --rot: -4deg;
  }

  .card-vip {
    --tx: 20vw;
    --ty: 21.6vh;
  }

}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}