:root {
  --phone-w: 100vw;
  --phone-h: 100dvh;
  --mobile-pagination-clearance: calc(52px + env(safe-area-inset-bottom));
  --pink: #ffbadf;
  --hot-pink: #ff1d5d;
  --white: #ffffff;
  --black: #000000;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  font-family: Impact, "Inter", sans-serif;
}

body {
  display: grid;
  place-items: center;
  --glow-progress: 0;
  transition: background-color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: none;
  opacity: var(--glow-progress);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  body,
  body::after {
    transition: none;
  }
}

body.is-details {
  background: var(--pink);
}

body.is-banquet {
  background: #280009;
}

body.is-dress {
  background: var(--white);
}

.cursor-heart {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: var(--heart-size, 16px);
  height: calc(var(--heart-size, 16px) * 0.8826);
  pointer-events: none;
  background: var(--heart-color, var(--pink));
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--heart-rotate, 0deg)) scale(0.45);
  animation: cursorHeartFly var(--heart-duration, 620ms) ease-out forwards;
  -webkit-mask: url("./assets/block2/pattern-heart.svg") center / contain no-repeat;
  mask: url("./assets/block2/pattern-heart.svg") center / contain no-repeat;
}

@keyframes cursorHeartFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--heart-rotate, 0deg)) scale(0.35);
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--heart-dx, 0px)), calc(-50% + var(--heart-dy, 0px)))
      rotate(calc(var(--heart-rotate, 0deg) + var(--heart-spin, 0deg)))
      scale(var(--heart-end-scale, 0.85));
  }
}

.phone {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  max-height: none;
  overflow: hidden;
  background: transparent;
  border-radius: 0 0 clamp(30px, 9vw, 48px) clamp(30px, 9vw, 48px);
  touch-action: pan-y;
  user-select: none;
  --glow-progress: 0;
  --ui-panel: rgba(255, 255, 255, 0.14);
  --ui-panel-hover: rgba(255, 255, 255, 0.2);
  --ui-dot: rgba(255, 255, 255, 0.28);
  --ui-dot-hover: rgba(255, 255, 255, 0.66);
  --ui-dot-active: #ffffff;
}

.phone::after {
  content: none;
}

.slider {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  display: none;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  width: var(--phone-w);
  height: 100%;
  overflow: hidden;
  background: transparent;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.loader-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: var(--black);
  opacity: 1;
  transition: opacity 220ms ease;
}

.loader-bar {
  position: relative;
  width: min(168px, 44vw);
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.loader-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pink);
  transform: scaleX(var(--loader-progress, 0));
  transform-origin: 0 50%;
  transition: transform 180ms ease-out;
}

.phone.is-loaded .loader-overlay {
  opacity: 0;
  pointer-events: none;
}

.phone.is-details,
.phone.is-dress {
  --ui-panel: rgba(0, 0, 0, 0.12);
  --ui-panel-hover: rgba(0, 0, 0, 0.2);
}

.phone.is-banquet {
  --ui-panel: rgba(255, 255, 255, 0.14);
  --ui-panel-hover: rgba(255, 255, 255, 0.2);
}

.phone.is-dress {
  --ui-panel: rgba(0, 0, 0, 0.22);
  --ui-panel-hover: rgba(0, 0, 0, 0.32);
}

.media {
  position: relative;
  width: 100%;
  height: 49.65%;
  overflow: visible;
  border-radius: 42px;
}

.media > img:first-child,
.media > video:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  overflow: hidden;
}

.media-video img,
.media-video video {
  object-position: top center;
}

.invite-slide {
  background: transparent;
}

.invite-slide .media-video {
  height: 49.65%;
  border-radius: 42px;
}

.invite-slide .media-video img,
.invite-slide .media-video video {
  object-fit: cover;
  object-position: top center;
}

.video-layer {
  position: absolute;
  inset: 0;
  display: none;
}

.desktop-video-glow {
  display: none;
}

.desktop-address,
.dress-photo-glow {
  display: none;
}

.figma-layer {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.invite-text-img {
  left: 20.08%;
  top: 58.4%;
  width: 60.45%;
  height: auto;
}

.invite-time {
  position: absolute;
  left: 66.17%;
  top: 58.4%;
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-size: clamp(11px, calc(var(--phone-w) * 0.03234), 13px);
  font-weight: 600;
  line-height: 1.0769;
  letter-spacing: -0.05em;
  text-align: left;
  text-transform: uppercase;
}

.invite-heart-left {
  left: 7.96%;
  top: 63.62%;
  width: 19.15%;
  height: 7.55%;
}

.invite-heart-mid {
  left: 69.96%;
  top: 64.87%;
  width: 8.46%;
  height: 3.55%;
}

.invite-heart-cluster {
  left: 65.11%;
  top: 84.9%;
  width: 35.32%;
  height: 13.96%;
}

.video-denis,
.video-kristina {
  position: absolute;
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-size: clamp(12px, calc(var(--phone-w) * 0.03731), 15px);
  font-weight: 600;
  line-height: 1.4667;
  letter-spacing: -0.05em;
}

.video-denis {
  left: 6.72%;
  top: 24.19%;
}

.video-arrow {
  left: 14.48%;
  top: 29.78%;
  width: 5.97%;
  height: auto;
}

.video-kristina {
  left: 70.65%;
  top: 82.72%;
}

.video-arrow-kristina {
  left: 72.27%;
  top: 66.01%;
  width: 10.76%;
  height: auto;
}

.video-heart {
  left: 57.87%;
  top: 36.41%;
  width: 7.96%;
  height: auto;
}

.name {
  position: absolute;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.name-left {
  top: 24.2%;
  left: 7%;
}

.name-right {
  right: 13%;
  bottom: 12.6%;
}

.heart {
  position: absolute;
  width: 38px;
  aspect-ratio: 1;
  background: #f7a7d4;
  transform: rotate(-45deg);
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: inherit;
}

.heart::before {
  top: -50%;
  left: 0;
}

.heart::after {
  top: 0;
  left: 50%;
}

.hero-heart {
  top: 36.5%;
  left: 58%;
  width: 27px;
}

.arrow {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 3px solid var(--white);
  border-color: transparent transparent var(--white) var(--white);
  border-radius: 50%;
}

.arrow::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--white);
  border-right: 3px solid var(--white);
}

.arrow-left {
  top: 28.5%;
  left: 13%;
  transform: rotate(-32deg);
}

.arrow-left::after {
  right: 1px;
  bottom: 3px;
  transform: rotate(82deg);
}

.arrow-right {
  right: 18%;
  bottom: 15%;
  transform: rotate(152deg);
}

.arrow-right::after {
  right: 1px;
  bottom: 3px;
  transform: rotate(82deg);
}

.invite-copy {
  position: absolute;
  top: 56.4%;
  left: 0;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  overflow: hidden;
}

.date-lockup {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-left: 42px;
}

.date {
  font-size: clamp(50px, calc(var(--phone-w) * 0.155), 62px);
  line-height: 0.86;
  color: var(--white);
}

.time {
  padding-top: 6px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.12;
  font-weight: 700;
  text-align: left;
}

h1 {
  margin: 0 auto;
  width: 330px;
  max-width: 82%;
  font-size: clamp(48px, calc(var(--phone-w) * 0.15), 60px);
  line-height: 0.86;
  font-weight: 900;
}

.heart-mid {
  left: 8.5%;
  top: 66.2%;
  width: 44px;
  border: 2px solid var(--white);
}

.heart-small {
  right: 23.5%;
  top: 67.4%;
  width: 25px;
  border: 2px solid var(--white);
}

.heart-cluster {
  right: -4%;
  bottom: 2.3%;
  border: 2px solid var(--white);
}

.heart-a {
  width: 46px;
}

.heart-b {
  right: 7%;
  bottom: 0.7%;
  width: 62px;
}

.heart-c {
  right: 14%;
  bottom: 7.7%;
  width: 36px;
}

.details-slide {
  background: transparent;
}

.details-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 34% at 50% 100%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.34) 38%, rgba(255, 255, 255, 0) 76%),
    radial-gradient(120% 72% at 50% 106%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 68%);
}

.details-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 49.66%;
  overflow: hidden;
  border-radius: 48px;
  background: var(--black);
}

.details-bg,
.details-text1,
.details-text2 {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.details-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.venue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 2;
  width: auto;
  height: 32px;
  pointer-events: none;
  user-select: none;
  transform: translateX(-50%);
}

.details-bottom {
  position: absolute;
  left: 0;
  top: 51.03%;
  bottom: var(--mobile-pagination-clearance);
  z-index: 1;
  width: 100%;
  height: auto;
}

.details-text1 {
  left: 33.34%;
  top: calc(50% - ((var(--phone-w) * 0.3201 + var(--phone-w) * 0.2809 + 6px) / 2));
  z-index: 4;
  width: 33.22%;
  height: auto;
}

.details-text2 {
  left: 37.5%;
  top: calc(50% - ((var(--phone-w) * 0.3201 + var(--phone-w) * 0.2809 + 6px) / 2) + var(--phone-w) * 0.3201 + 6px);
  z-index: 4;
  width: 24.36%;
  height: auto;
}

.banquet-slide {
  background: transparent;
}

.banquet-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 49.66%;
  overflow: hidden;
  border-radius: 48px;
  background: #280009;
}

.banquet-bg-photo,
.banquet-address,
.banquet-title {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.banquet-bg-photo {
  left: -5.47%;
  top: -5.76%;
  width: 111.19%;
  height: 106.68%;
  border-radius: inherit;
  object-fit: cover;
  object-position: bottom center;
}

.banquet-address {
  left: 50%;
  bottom: -1px;
  z-index: 3;
  width: auto;
  height: 64px;
  transform: translateX(-50%);
}

.banquet-bottom {
  position: absolute;
  left: 0;
  top: 51.03%;
  bottom: var(--mobile-pagination-clearance);
  z-index: 1;
  width: 100%;
  height: auto;
  overflow: visible;
}

.banquet-title {
  left: 13.29%;
  top: calc(50% - (var(--phone-w) * 0.2486));
  z-index: 2;
  width: 73.59%;
  height: auto;
}

.dot-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.viewport-pattern {
  display: none;
}

.pattern-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0;
  animation: dotBlink 3200ms steps(1, end) infinite;
}

.cream-dot {
  background: #ffe8bd;
}

.image-dot {
  overflow: hidden;
  background-image: url("./assets/block3/pattern bottom.png");
  background-repeat: no-repeat;
  background-size: 402px 440px;
}

.dot-pattern-top .d1 { left: 13.43%; top: 17.74%; animation-delay: 0ms; }
.dot-pattern-top .d2 { left: 82.34%; top: 14.06%; animation-delay: 0ms; }
.dot-pattern-top .d3 { left: 72.64%; top: 65.44%; animation-delay: 820ms; }
.dot-pattern-top .d4 { left: 11.19%; top: 43.32%; animation-delay: 820ms; }
.dot-pattern-top .d5 { left: 72.64%; top: 32.72%; animation-delay: 1640ms; }
.dot-pattern-top .d6 { left: 11.19%; top: 68.89%; animation-delay: 1640ms; }
.dot-pattern-top .d7 { left: 23.13%; top: 60.14%; animation-delay: 0ms; }
.dot-pattern-top .d8 { left: 90.8%; top: 53.23%; animation-delay: 820ms; }

.dot-pattern-bottom .d1 {
  left: 13.43%;
  top: 15.19%;
  animation-delay: 360ms;
  background-position: -54px -77px;
}

.dot-pattern-bottom .d2 {
  left: 82.34%;
  top: 11.45%;
  animation-delay: 360ms;
  background-position: -331px -61px;
}

.dot-pattern-bottom .d3 {
  left: 72.64%;
  top: 63.55%;
  animation-delay: 1180ms;
  background-position: -292px -284px;
}

.dot-pattern-bottom .d4 {
  left: 11.19%;
  top: 41.12%;
  animation-delay: 1180ms;
  background-position: -45px -188px;
}

.dot-pattern-bottom .d5 {
  left: 72.64%;
  top: 30.37%;
  animation-delay: 2000ms;
  background-position: -292px -142px;
}

.dot-pattern-bottom .d6 {
  left: 11.19%;
  top: 67.06%;
  animation-delay: 2000ms;
  background-position: -45px -299px;
}

.dot-pattern-bottom .d7 {
  left: 23.13%;
  top: 58.18%;
  animation-delay: 360ms;
  background-position: -93px -261px;
}

.dot-pattern-bottom .d8 {
  left: 90.8%;
  top: 51.17%;
  animation-delay: 1180ms;
  background-position: -365px -231px;
}

@keyframes dotBlink {
  0%,
  30% {
    opacity: 0;
  }
  31%,
  70% {
    opacity: 1;
  }
  71%,
  100% {
    opacity: 0;
  }
}

.dress-slide {
  background: transparent;
}

.dress-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 49.66%;
  overflow: hidden;
  border-radius: 48px;
  background: #f4e3cd;
}

.dress-photo,
.dress-title {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.dress-photo {
  left: -24%;
  right: auto;
  top: auto;
  bottom: 0;
  z-index: 1;
  width: 148%;
  height: 148%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center bottom;
}

.dress-bottom {
  position: absolute;
  left: 0;
  top: 51.03%;
  bottom: var(--mobile-pagination-clearance);
  z-index: 1;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dress-title {
  left: 35.08%;
  top: calc(50% - ((var(--phone-w) * 0.3439 + 30px + 44px) / 2));
  width: 29.83%;
  height: auto;
}

.dress-copy {
  display: none;
  position: absolute;
  left: 50%;
  top: 47.2%;
  width: 230px;
  margin: 0;
  color: rgba(40, 0, 9, 0.8);
  font-family: "Inter", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.dress-colors {
  position: absolute;
  left: 50%;
  top: calc(50% - ((var(--phone-w) * 0.3439 + 30px + 44px) / 2) + var(--phone-w) * 0.3439 + 30px);
  display: flex;
  gap: 8px;
  width: 304px;
  height: 44px;
  transform: translateX(-50%);
}

.dress-color {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
}

.color-black {
  background: #000000;
}

.color-burgundy {
  background: #551c25;
}

.color-brown {
  background: #543a2d;
}

.color-olive {
  background: #525834;
}

.color-blue {
  background: #c8d8e7;
}

.color-beige {
  background: #daccb5;
}

.heart-pattern {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
}

.details-top .heart-pattern {
  z-index: 4;
}

.pattern-heart {
  position: absolute;
  width: 20.45px;
  height: 18.05px;
  opacity: 0;
  background: currentColor;
  animation: heartBlink 3200ms steps(1, end) infinite;
  will-change: opacity;
  -webkit-mask: url("./assets/block2/pattern-heart.svg") center / contain no-repeat;
  mask: url("./assets/block2/pattern-heart.svg") center / contain no-repeat;
}

.pink-heart {
  color: #ff1654;
}

.white-heart {
  color: var(--white);
}

.details-bottom .white-heart {
  color: transparent;
  background-color: transparent;
  background-image: url("./assets/block2/bg.png");
  background-repeat: no-repeat;
  background-size: 430px 320px;
  background-position: center;
}

.heart-pattern-top .h1 { left: 35.32%; top: 64.98%; animation-delay: 0ms; }
.heart-pattern-top .h2 { left: 83.08%; top: 64.98%; animation-delay: 0ms; }
.heart-pattern-top .h3 { left: 11.44%; top: 51.84%; animation-delay: 820ms; }
.heart-pattern-top .h4 { left: 78.11%; top: 38.94%; animation-delay: 820ms; }
.heart-pattern-top .h5 { left: 8.96%; top: 13.82%; animation-delay: 1640ms; }
.heart-pattern-top .h6 { left: 73.13%; top: 9.68%; animation-delay: 1640ms; }

.heart-pattern-bottom .h1 { left: 20.4%; top: 34.11%; animation-delay: 360ms; }
.heart-pattern-bottom .h2 { left: 35.32%; top: 64.49%; animation-delay: 360ms; }
.heart-pattern-bottom .h3 { left: 83.08%; top: 64.49%; animation-delay: 1180ms; }
.heart-pattern-bottom .h4 { left: 11.44%; top: 51.17%; animation-delay: 1180ms; }
.heart-pattern-bottom .h5 { left: 78.11%; top: 38.08%; animation-delay: 2000ms; }
.heart-pattern-bottom .h6 { left: 8.96%; top: 12.62%; animation-delay: 2000ms; }
.heart-pattern-bottom .h7 { left: 73.13%; top: 8.41%; animation-delay: 360ms; }

@keyframes heartBlink {
  0%,
  30% {
    opacity: 0;
  }
  31%,
  70% {
    opacity: 1;
  }
  71%,
  100% {
    opacity: 0;
  }
}

.pagination {
  position: absolute;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 78px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  background: var(--ui-panel);
  transform: translateX(-50%);
  transform-origin: 50% 50%;
}

.dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.dot::after {
  content: "";
  width: var(--dot-size, 4px);
  height: var(--dot-size, 4px);
  border-radius: inherit;
  background: var(--dot-color, var(--ui-dot));
  transform-origin: 50% 50%;
  transition: transform 160ms ease;
}

.dot.is-active {
  --dot-size: 6px;
  --dot-color: var(--ui-dot-active);
}

.dot:not(.is-active):hover::after,
.dot:not(.is-active):focus-visible::after {
  background: var(--ui-dot-hover);
  transform: scale(1.45);
}

.dot:not(.is-active):hover,
.dot:not(.is-active):focus-visible {
  opacity: 1 !important;
}

.phone.is-loading .pagination {
  display: none;
}

.nav-arrow {
  display: none;
}

@media (max-height: 760px) {
  .phone {
    border-radius: 0 0 34px 34px;
  }

  .invite-copy {
    top: 55%;
  }

  .pagination {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 699px) and (max-height: 980px) {
  .dress-top {
    height: 49.66%;
  }

  .dress-bottom {
    top: 51.03%;
    bottom: var(--mobile-pagination-clearance);
    height: auto;
  }

  .dress-title {
    top: calc(50% - ((var(--phone-w) * 0.3439 + 30px + 44px) / 2));
    width: 29.83%;
    height: auto;
  }

  .dress-copy {
    top: 46.4%;
    width: min(230px, 62vw);
    font-size: 12px;
    line-height: 16px;
  }

  .dress-colors {
    top: calc(50% - ((var(--phone-w) * 0.3439 + 30px + 44px) / 2) + var(--phone-w) * 0.3439 + 30px);
    gap: 7px;
    width: 302px;
    height: 44px;
  }

  .dress-color {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

@media (min-width: 700px) {
  body::after {
    box-shadow: inset 0 4px 82.5px var(--white);
  }

  :root {
    --phone-w: 100vw;
    --phone-h: 100dvh;
    --stage-w: min(100vw, calc(100dvh * 1440 / 1024));
    --stage-h: calc(var(--stage-w) * 1024 / 1440);
    --stage-x: calc((100vw - var(--stage-w)) / 2);
    --stage-y: calc((100dvh - var(--stage-h)) / 2);
  }

  .phone {
    max-height: none;
    border-radius: 0;
    --ui-panel: rgba(255, 255, 255, 0.12);
  }

  .phone.is-dress {
    --ui-panel: rgba(0, 0, 0, 0.22);
    --ui-panel-hover: rgba(0, 0, 0, 0.32);
  }

  .slide {
    width: var(--phone-w);
  }

  .invite-slide::before,
  .details-slide::before,
  .banquet-slide::before {
    content: "";
    position: absolute;
    left: calc(var(--stage-x) + var(--stage-w) * 0.5104);
    top: calc(var(--stage-y) + var(--stage-h) * 0.2324);
    z-index: 0;
    width: calc(var(--stage-w) * 0.3806);
    height: calc(var(--stage-w) * 0.3806);
    border-radius: clamp(30px, calc(var(--stage-w) * 0.03056), 44px);
    background: rgba(255, 255, 255, 0.08);
    filter: blur(150px);
    opacity: 0.5;
    pointer-events: none;
  }

  .details-slide::before {
    opacity: 0.3;
  }

  .details-slide::after {
    content: none;
  }

  .banquet-slide::before {
    opacity: 0.4;
  }

  .invite-slide .media-video,
  .details-top,
  .banquet-top {
    position: absolute;
    left: calc(var(--stage-x) + var(--stage-w) * 0.5104);
    top: calc(var(--stage-y) + var(--stage-h) * 0.2324);
    z-index: 2;
    width: calc(var(--stage-w) * 0.3806);
    height: auto;
    aspect-ratio: 1;
    border-radius: clamp(30px, calc(var(--stage-w) * 0.03056), 44px);
  }

  .invite-slide .media-video {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
  }

  .desktop-video-glow {
    position: absolute;
    left: calc(var(--stage-x) + var(--stage-w) * 0.4761);
    top: calc(var(--stage-y) + var(--stage-h) * 0.1841);
    z-index: 0;
    display: block;
    width: calc(var(--stage-w) * 0.4493);
    height: auto;
    aspect-ratio: 1;
    border-radius: clamp(30px, calc(var(--stage-w) * 0.03056), 44px);
    object-fit: cover;
    object-position: top center;
    filter: blur(220px);
    opacity: 0.68;
    pointer-events: none;
  }

  .invite-slide::before {
    content: none;
  }

  .invite-slide .media-video video {
    left: 0.18%;
    top: -4.2%;
    width: 99.82%;
    height: 108.39%;
    border-radius: clamp(42px, calc(var(--stage-w) * 0.05), 72px);
  }

  .video-denis {
    left: 7.66%;
    top: 18.4%;
    font-size: clamp(16px, calc(var(--stage-w) * 0.01563), 22.5px);
    line-height: 1.4667;
  }

  .video-arrow {
    left: 13.8%;
    top: 24.6%;
    width: 5.97%;
    height: auto;
  }

  .video-heart {
    display: none;
  }

  .video-arrow-kristina {
    left: 75.5%;
    top: 66.79%;
    width: 11.85%;
    height: 17.93%;
  }

  .video-kristina {
    left: 73.72%;
    top: 86.63%;
    font-size: clamp(16px, calc(var(--stage-w) * 0.01563), 22.5px);
    line-height: 1.4667;
  }

  .invite-text-img {
    left: calc(var(--stage-x) + var(--stage-w) * 0.185);
    top: calc(var(--stage-y) + var(--stage-h) * 0.348);
    z-index: 2;
    width: calc(var(--stage-w) * 0.2301);
    height: auto;
  }

  .invite-time {
    left: calc(var(--stage-x) + var(--stage-w) * 0.3717);
    top: calc(var(--stage-y) + var(--stage-h) * 0.3492);
    z-index: 3;
    font-size: clamp(14px, calc(var(--stage-w) * 0.01354), 19.5px);
    line-height: 1.0769;
  }

  .invite-heart-left {
    left: calc(var(--stage-x) + var(--stage-w) * 0.1389);
    top: calc(var(--stage-y) + var(--stage-h) * 0.452);
    z-index: 3;
    width: calc(var(--stage-w) * 0.0781);
    height: auto;
  }

  .invite-heart-mid {
    left: calc(var(--stage-x) + var(--stage-w) * 0.3931);
    top: calc(var(--stage-y) + var(--stage-h) * 0.5149);
    z-index: 3;
    width: calc(var(--stage-w) * 0.0395);
    height: auto;
  }

  .invite-heart-cluster {
    left: calc(var(--stage-x) + var(--stage-w) * 0.3528);
    top: calc(var(--stage-y) + var(--stage-h) * 0.676);
    z-index: 3;
    width: calc(var(--stage-w) * 0.1472);
    height: auto;
  }

  .details-top {
    background: rgba(255, 255, 255, 0.08);
  }

  .details-bg {
    left: -25.55%;
    top: 0;
    width: 151.28%;
    height: 100.36%;
  }

  .venue,
  .banquet-address {
    display: block;
    left: 50%;
    z-index: 4;
    width: auto;
    transform: translateX(-50%);
  }

  .venue {
    bottom: calc(var(--stage-w) * 0.018);
    height: calc(var(--stage-w) * 0.0333);
  }

  .banquet-address {
    bottom: calc(var(--stage-w) * -0.0042);
    height: calc(var(--stage-w) * 0.0666);
  }

  .details-bottom,
  .banquet-bottom {
    position: absolute;
    left: calc(var(--stage-x) + var(--stage-w) * 0.1097);
    top: calc(var(--stage-y) + var(--stage-h) * 0.2324);
    z-index: 2;
    width: calc(var(--stage-w) * 0.3806);
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
  }

  .details-text1 {
    left: 33.34%;
    top: 18.6%;
    width: 33.22%;
    height: auto;
  }

  .details-text2 {
    left: 37.5%;
    top: 51.3%;
    width: 24.36%;
    height: auto;
  }

  .heart-pattern {
    overflow: visible;
  }

  .details-bottom .heart-pattern,
  .banquet-bottom .dot-pattern {
    display: none;
  }

  .viewport-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    pointer-events: none;
  }

  .viewport-pattern .pattern-heart,
  .viewport-pattern .pattern-dot {
    animation-timing-function: steps(1, end);
  }

  .details-viewport-pattern .white-heart {
    color: var(--white);
  }

  .details-viewport-pattern .pink-heart {
    color: transparent;
    background-color: transparent;
    background-image: url("./assets/block2/bg.png");
    background-repeat: no-repeat;
    background-size: 560px 420px;
    background-position: center;
  }

  .banquet-viewport-pattern .cream-dot {
    overflow: hidden;
    background-color: transparent;
    background-image: url("./assets/block3/pattern bottom.png");
    background-repeat: no-repeat;
    background-size: 582px 637px;
  }

  .pattern-heart {
    width: clamp(20px, calc(var(--stage-w) * 0.02031), 29.25px);
    height: clamp(18px, calc(var(--stage-w) * 0.01792), 25.81px);
  }

  .details-viewport-pattern .h1 { left: 7.2%; top: 18.4%; animation-delay: 0ms; }
  .details-viewport-pattern .h2 { left: 39.6%; top: 10.9%; animation-delay: 1640ms; }
  .details-viewport-pattern .h3 { left: 72.4%; top: 16.7%; animation-delay: 820ms; }
  .details-viewport-pattern .h4 { left: 91.2%; top: 39.5%; animation-delay: 1640ms; }
  .details-viewport-pattern .h5 { left: 18.5%; top: 55.2%; animation-delay: 820ms; }
  .details-viewport-pattern .h6 { left: 79.4%; top: 66.6%; animation-delay: 0ms; }
  .details-viewport-pattern .h7 { left: 8.4%; top: 82.9%; animation-delay: 360ms; }
  .details-viewport-pattern .h8 { left: 31.5%; top: 32.6%; animation-delay: 1180ms; }
  .details-viewport-pattern .h9 { left: 52.9%; top: 84.4%; animation-delay: 2000ms; }
  .details-viewport-pattern .h10 { left: 88.1%; top: 78.2%; animation-delay: 1180ms; }
  .details-viewport-pattern .h11 { left: 59.7%; top: 52.7%; animation-delay: 360ms; }
  .details-viewport-pattern .h12 { left: 24.2%; top: 74.1%; animation-delay: 2000ms; }
  .details-viewport-pattern .h13 { left: 69.8%; top: 34.3%; animation-delay: 360ms; }
  .details-viewport-pattern .h14 { left: 3.8%; top: 43.5%; animation-delay: 820ms; }
  .details-viewport-pattern .h15 { left: 47.6%; top: 22.8%; animation-delay: 0ms; }
  .details-viewport-pattern .h16 { left: 83.5%; top: 88.1%; animation-delay: 1640ms; }
  .details-viewport-pattern .h17 { left: 37.7%; top: 64.2%; animation-delay: 1180ms; }
  .details-viewport-pattern .h18 { left: 95.4%; top: 59.6%; animation-delay: 2000ms; }

  .heart-pattern-top .h1 { left: 6.8%; top: 15.4%; }
  .heart-pattern-top .h2 { left: 55.2%; top: 10.8%; }
  .heart-pattern-top .h3 { left: 86.4%; top: 24.2%; }
  .heart-pattern-top .h4 { left: 18.7%; top: 52.8%; }
  .heart-pattern-top .h5 { left: 72.1%; top: 62.5%; }
  .heart-pattern-top .h6 { left: 42.8%; top: 83.1%; }

  .heart-pattern-bottom .h1 { left: 12.6%; top: 30.6%; }
  .heart-pattern-bottom .h2 { left: 35.2%; top: 18.1%; }
  .heart-pattern-bottom .h3 { left: 89.1%; top: 46.7%; }
  .heart-pattern-bottom .h4 { left: 7.9%; top: 76.8%; }
  .heart-pattern-bottom .h5 { left: 59.4%; top: 82.6%; }
  .heart-pattern-bottom .h6 { left: 75.9%; top: 16.3%; }
  .heart-pattern-bottom .h7 { left: 48.5%; top: 57.4%; }

  .banquet-top {
    background: rgba(255, 255, 255, 0.08);
  }

  .banquet-bg-photo {
    left: -4.01%;
    top: -4.56%;
    width: 107.3%;
    height: 111.13%;
    object-position: bottom center;
  }

  .banquet-title {
    left: 13.29%;
    top: 25.14%;
    width: 73.59%;
    height: auto;
  }

  .pattern-dot {
    width: clamp(18px, calc(var(--stage-w) * 0.0181), 26.06px);
    height: clamp(18px, calc(var(--stage-w) * 0.0181), 26.06px);
  }

  .banquet-viewport-pattern .d1 { left: 9.4%; top: 17.8%; animation-delay: 0ms; background-position: -78px -111px; }
  .banquet-viewport-pattern .d2 { left: 34.8%; top: 11.5%; animation-delay: 1640ms; background-position: -479px -88px; }
  .banquet-viewport-pattern .d3 { left: 68.7%; top: 15.9%; animation-delay: 0ms; background-position: -423px -411px; }
  .banquet-viewport-pattern .d4 { left: 91.1%; top: 35.6%; animation-delay: 1640ms; background-position: -65px -272px; }
  .banquet-viewport-pattern .d5 { left: 17.9%; top: 50.8%; animation-delay: 820ms; background-position: -423px -206px; }
  .banquet-viewport-pattern .d6 { left: 78.1%; top: 61.8%; animation-delay: 0ms; background-position: -65px -433px; }
  .banquet-viewport-pattern .d7 { left: 42.9%; top: 84.2%; animation-delay: 820ms; background-position: -135px -378px; }
  .banquet-viewport-pattern .d8 { left: 6.8%; top: 78.3%; animation-delay: 1640ms; background-position: -528px -334px; }
  .banquet-viewport-pattern .d9 { left: 14.2%; top: 32.4%; animation-delay: 360ms; background-position: -78px -111px; }
  .banquet-viewport-pattern .d10 { left: 52.4%; top: 24.2%; animation-delay: 1180ms; background-position: -479px -88px; }
  .banquet-viewport-pattern .d11 { left: 86.6%; top: 52.7%; animation-delay: 0ms; background-position: -423px -411px; }
  .banquet-viewport-pattern .d12 { left: 27.4%; top: 67.8%; animation-delay: 1180ms; background-position: -65px -272px; }
  .banquet-viewport-pattern .d13 { left: 61.2%; top: 80.9%; animation-delay: 360ms; background-position: -423px -206px; }
  .banquet-viewport-pattern .d14 { left: 74.7%; top: 39.1%; animation-delay: 2000ms; background-position: -65px -433px; }
  .banquet-viewport-pattern .d15 { left: 94.1%; top: 76.6%; animation-delay: 0ms; background-position: -135px -378px; }
  .banquet-viewport-pattern .d16 { left: 21.1%; top: 86.8%; animation-delay: 360ms; background-position: -528px -334px; }
  .banquet-viewport-pattern .d17 { left: 4.1%; top: 46.2%; animation-delay: 820ms; background-position: -78px -111px; }
  .banquet-viewport-pattern .d18 { left: 47.8%; top: 54.6%; animation-delay: 0ms; background-position: -479px -88px; }
  .banquet-viewport-pattern .d19 { left: 82.7%; top: 86.3%; animation-delay: 1640ms; background-position: -65px -272px; }
  .banquet-viewport-pattern .d20 { left: 37.2%; top: 39.8%; animation-delay: 1180ms; background-position: -423px -411px; }
  .banquet-viewport-pattern .d21 { left: 57.3%; top: 5.8%; animation-delay: 2000ms; background-position: -423px -206px; }
  .banquet-viewport-pattern .d22 { left: 96.2%; top: 56.4%; animation-delay: 360ms; background-position: -479px -88px; }

  .dot-pattern-top .d1 { left: 9.8%; top: 18.1%; }
  .dot-pattern-top .d2 { left: 51.6%; top: 12.9%; }
  .dot-pattern-top .d3 { left: 84.3%; top: 26.5%; }
  .dot-pattern-top .d4 { left: 22.4%; top: 51.8%; }
  .dot-pattern-top .d5 { left: 68.2%; top: 59.1%; }
  .dot-pattern-top .d6 { left: 38.7%; top: 83.4%; }
  .dot-pattern-top .d7 { left: 93.2%; top: 74.6%; }
  .dot-pattern-top .d8 { left: 5.7%; top: 72.9%; }

  .dot-pattern-bottom .d1 { left: 14.5%; top: 26.7%; background-position: -78px -111px; }
  .dot-pattern-bottom .d2 { left: 42.3%; top: 17.5%; background-position: -479px -88px; }
  .dot-pattern-bottom .d3 { left: 88.7%; top: 41.9%; background-position: -423px -411px; }
  .dot-pattern-bottom .d4 { left: 7.2%; top: 68.6%; background-position: -65px -272px; }
  .dot-pattern-bottom .d5 { left: 58.9%; top: 80.2%; background-position: -423px -206px; }
  .dot-pattern-bottom .d6 { left: 76.1%; top: 22.1%; background-position: -65px -433px; }
  .dot-pattern-bottom .d7 { left: 30.4%; top: 58.7%; background-position: -135px -378px; }
  .dot-pattern-bottom .d8 { left: 95.1%; top: 72.8%; background-position: -528px -334px; }

  .image-dot {
    background-size: 582px 637px;
  }

  .dress-top {
    left: calc(var(--stage-x) + var(--stage-w) * 0.5104);
    top: calc(var(--stage-y) + var(--stage-h) * 0.2324);
    width: calc(var(--stage-w) * 0.3806);
    height: auto;
    aspect-ratio: 1;
    border-radius: clamp(30px, calc(var(--stage-w) * 0.03056), 44px);
  }

  .dress-photo-glow {
    position: absolute;
    left: calc(var(--stage-x) + var(--stage-w) * 0.4306);
    top: calc(var(--stage-y) + var(--stage-h) * 0.1602);
    z-index: 0;
    display: block;
    width: calc(var(--stage-w) * 0.5278);
    height: auto;
    aspect-ratio: 1;
    border-radius: clamp(30px, calc(var(--stage-w) * 0.03056), 44px);
    object-fit: cover;
    object-position: center bottom;
    filter: blur(260px);
    opacity: 0.72;
    pointer-events: none;
  }

  .dress-photo {
    left: -40%;
    top: auto;
    bottom: -4%;
    width: 180%;
    height: 180%;
    object-position: center bottom;
  }

  .dress-bottom {
    left: calc(var(--stage-x) + var(--stage-w) * 0.1097);
    top: calc(var(--stage-y) + var(--stage-h) * 0.2324);
    width: calc(var(--stage-w) * 0.3806);
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
  }

  .dress-title {
    left: 35.08%;
    top: 24.4%;
    width: 29.83%;
    height: auto;
  }

  .dress-copy {
    top: 59.85%;
    width: calc(var(--stage-w) * 0.15625);
    color: rgba(40, 0, 9, 0.8);
    font-size: calc(var(--stage-w) * 0.00903);
    line-height: calc(var(--stage-w) * 0.01389);
  }

  .dress-colors {
    top: 64.3%;
    gap: calc(var(--stage-w) * 0.0071);
    width: calc(var(--stage-w) * 0.289);
    height: calc(var(--stage-w) * 0.0417);
  }

  .dress-color {
    width: calc(var(--stage-w) * 0.0417);
    height: calc(var(--stage-w) * 0.0417);
    flex-basis: calc(var(--stage-w) * 0.0417);
    border-radius: calc(var(--stage-w) * 0.0114);
  }

  .desktop-address {
    position: absolute;
    z-index: 3;
    display: none;
    height: auto;
    pointer-events: none;
    user-select: none;
  }

  .details-desktop-address {
    left: 126.82%;
    top: 106.57%;
    width: 56.46%;
    height: auto;
  }

  .banquet-desktop-address {
    left: 130.9%;
    top: 106.57%;
    width: 47.5%;
    height: auto;
  }

  .pagination {
    bottom: calc(3.13dvh + env(safe-area-inset-bottom));
    width: calc(var(--stage-w) * 0.05972);
    height: calc(var(--stage-w) * 0.02083);
    gap: 0;
    background: var(--ui-panel);
    transition:
      background-color 180ms ease,
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pagination:hover,
  .pagination:focus-within,
  .pagination.is-expanded {
    transform: translateX(-50%) scale(1.5);
  }

  .dot {
    width: calc(var(--stage-w) * 0.0125);
    height: calc(var(--stage-w) * 0.01528);
  }

  .nav-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: calc(var(--stage-w) * 0.04444);
    height: calc(var(--stage-w) * 0.04444);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--ui-panel);
    color: var(--white);
    transform: translateY(-50%);
    transition: opacity 180ms ease, background-color 180ms ease;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-arrow:focus,
  .nav-arrow:focus-visible {
    outline: 0;
    box-shadow: none;
  }

  .nav-arrow::before {
    content: "";
    position: relative;
    width: calc(var(--stage-w) * 0.00764);
    height: calc(var(--stage-w) * 0.00764);
    border-top: calc(var(--stage-w) * 0.00125) solid currentColor;
    border-right: calc(var(--stage-w) * 0.00125) solid currentColor;
  }

  .nav-prev {
    left: calc(var(--phone-w) * 0.03056);
  }

  .nav-prev::before {
    left: 2px;
    transform: rotate(-135deg);
  }

  .nav-next {
    right: calc(var(--phone-w) * 0.03056);
  }

  .nav-next::before {
    left: -2px;
    transform: rotate(45deg);
  }

  .nav-arrow:hover {
    background: var(--ui-panel-hover);
  }

  .nav-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
}