/* Wedding T8 — Light Blue Curtain Invite */

:root {
  --wed8-sky: #eaf4fb;
  --wed8-sky-deep: #d4e8f5;
  --wed8-paper: #f7fbfe;
  --wed8-navy: #1e3a5f;
  --wed8-ink: #24344a;
  --wed8-ink-soft: #4a6080;
  --wed8-cornflower: #5b8fc7;
  --wed8-dusty: #6a8fa8;
  --wed8-teal: #5d7f8c;
  --wed8-gold: #c4a46a;
  --wed8-curtain-deep: #2a4a6e;
  --wed8-curtain-mid: #3d6a96;
  --wed8-curtain-light: #5a8ab8;
  --wed8-curtain-hilite: #7aa8cc;
  --wed8-shadow: rgba(30, 58, 95, 0.18);
  --wed8-radius: 18px;
  --wed8-font-display: "Cormorant Garamond", Georgia, serif;
  --wed8-font-script: "Great Vibes", cursive;
  --wed8-font-mono: "Allura", cursive;
  --wed8-font-body: "Nunito", system-ui, sans-serif;
  --wed8-font-numeral: "Playfair Display", Georgia, serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--wed8-sky);
  color: var(--wed8-ink);
  font-family: var(--wed8-font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}

/* ── Opening loader ── */

.wed8-opening-loader {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: var(--wed8-sky);
  background-image:
    radial-gradient(ellipse at 18% 14%, rgba(122, 168, 204, 0.28), transparent 44%),
    radial-gradient(ellipse at 86% 82%, rgba(91, 143, 199, 0.18), transparent 48%),
    linear-gradient(165deg, #f4f9fd 0%, var(--wed8-sky) 46%, var(--wed8-sky-deep) 100%);
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.wed8-opening-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wed8-opening-loader-card {
  position: relative;
  width: min(88vw, 19.5rem);
  padding: 2rem 1.4rem 1.45rem;
  border-radius: 16px;
  text-align: center;
  color: var(--wed8-ink);
  background:
    radial-gradient(ellipse at 20% 12%, rgba(207, 228, 244, 0.7), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f5fafe 55%, #e8f2fa 100%);
  border: 1px solid rgba(91, 143, 199, 0.28);
  box-shadow:
    0 18px 40px rgba(30, 58, 95, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

.wed8-opening-loader-card::before,
.wed8-opening-loader-card::after {
  content: "";
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  border: 1.5px solid rgba(196, 164, 106, 0.55);
  pointer-events: none;
}

.wed8-opening-loader-card::before {
  top: 0.7rem;
  left: 0.7rem;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 6px;
}

.wed8-opening-loader-card::after {
  right: 0.7rem;
  bottom: 0.7rem;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 6px;
}

.wed8-opening-loader-mono {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.28rem;
  margin: 0 0 0.35rem;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-mono);
  font-size: clamp(2.4rem, 10vw, 3rem);
  line-height: 1;
}

.wed8-opening-loader-amp {
  font-family: var(--wed8-font-display);
  font-size: 0.42em;
  font-style: italic;
  color: var(--wed8-cornflower);
  transform: translateY(-0.12em);
}

.wed8-opening-loader-ornament {
  margin: 0 0 0.7rem;
  color: var(--wed8-gold);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  opacity: 0.9;
  animation: wed8LoaderPulse 1.8s ease-in-out infinite;
}

.wed8-opening-loader-text {
  margin: 0 0 1rem;
  color: var(--wed8-ink-soft);
  font-family: var(--wed8-font-display);
  font-size: clamp(1rem, 3.4vw, 1.12rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.wed8-opening-loader-bar {
  width: 72%;
  max-width: 12rem;
  height: 4px;
  margin: 0 auto 0.85rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(91, 143, 199, 0.18);
}

.wed8-opening-loader-fill {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9fc4e4, var(--wed8-cornflower) 55%, #3d6a96);
  box-shadow: 0 0 10px rgba(91, 143, 199, 0.35);
  transition: width 0.28s ease;
}

.wed8-opening-loader-hint {
  margin: 0;
  color: var(--wed8-dusty);
  font-family: var(--wed8-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  opacity: 0.85;
  animation: wed8LoaderHint 2.2s ease-in-out infinite;
}

@keyframes wed8LoaderPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wed8LoaderHint {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.95;
  }
}

.wed8-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Sessions ── */

.wed8-session {
  display: none;
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.wed8-session.is-active {
  display: flex;
  flex-direction: column;
  animation: wed8FadeIn 0.55s ease both;
}

.wed8-session-0.is-active {
  animation: none;
}

.wed8-session-2.is-active {
  animation: wed8FadeIn 0.55s ease both;
}

@keyframes wed8FadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Session 0: Curtains ── */

.wed8-session-0 {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
}

.wed8-session-0.is-active {
  display: flex;
  animation: none;
}

.wed8-session-0.is-dismissed {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}

.wed8-curtain-stage {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: transparent;
}

/* Solid white behind the curtains (replaces blue hero session). Fades out as they open
   so the hero frame can fade in underneath. */
.wed8-curtain-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #ffffff;
  opacity: 1;
  transition: opacity 2s cubic-bezier(0.33, 0.1, 0.25, 1);
  pointer-events: none;
}

.wed8-session-0.is-open .wed8-curtain-stage::before {
  opacity: 0;
}

.wed8-curtain-rod {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  z-index: 6;
  background: linear-gradient(
    180deg,
    #d8c48a 0%,
    #b8974e 40%,
    #8a6d35 70%,
    #c4a46a 100%
  );
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.35);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 2.4s cubic-bezier(0.22, 0.82, 0.18, 1),
    visibility 2.4s cubic-bezier(0.22, 0.82, 0.18, 1);
  will-change: opacity;
}

.wed8-curtain-rod::before,
.wed8-curtain-rod::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 35%, #efe0b0, #8a6d35 70%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.wed8-curtain-rod::before {
  left: 10px;
}

.wed8-curtain-rod::after {
  right: 10px;
}

.wed8-session-0.is-open .wed8-curtain-rod {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wed8-curtain-glow {
  position: absolute;
  inset: 18% 22% 22%;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), transparent 68%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 1.2s ease;
}

.wed8-session-0.is-open .wed8-curtain-glow {
  opacity: 0;
}

.wed8-curtain {
  position: absolute;
  top: 12px;
  bottom: 0;
  width: 54%;
  z-index: 3;
  overflow: hidden;
  will-change: transform;
}

.wed8-curtain-left {
  left: 0;
  transform-origin: left center;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
  animation: wed8CurtainSwayLeft 7.5s ease-in-out infinite;
}

.wed8-curtain-right {
  right: 0;
  transform-origin: right center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%);
  animation: wed8CurtainSwayRight 8.2s ease-in-out infinite;
}

.wed8-curtain-pleats {
  position: absolute;
  inset: -4% -8%;
  width: 116%;
  height: 108%;
  background:
    repeating-linear-gradient(
      90deg,
      var(--wed8-curtain-deep) 0px,
      var(--wed8-curtain-mid) 14px,
      var(--wed8-curtain-light) 28px,
      var(--wed8-curtain-hilite) 38px,
      var(--wed8-curtain-mid) 52px,
      var(--wed8-curtain-deep) 66px
    );
  background-size: 66px 100%;
  box-shadow: inset 0 30px 40px rgba(0, 0, 0, 0.18);
  will-change: background-position, transform;
}

.wed8-curtain-left .wed8-curtain-pleats {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  animation: wed8PleatDriftLeft 5.8s ease-in-out infinite;
}

.wed8-curtain-right .wed8-curtain-pleats {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  animation: wed8PleatDriftRight 6.4s ease-in-out infinite;
}

.wed8-curtain-pleats::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 18%,
    transparent 78%,
    rgba(0, 0, 0, 0.22) 100%
  );
  pointer-events: none;
}

.wed8-curtain-pleats::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 10px,
      rgba(255, 255, 255, 0.08) 16px,
      transparent 22px,
      transparent 34px,
      rgba(0, 0, 0, 0.12) 42px,
      transparent 50px,
      transparent 66px
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.18),
      transparent 18%,
      transparent 82%,
      rgba(0, 0, 0, 0.18)
    );
  background-size: 66px 100%, 100% 100%;
  pointer-events: none;
  animation: wed8PleatSheen 4.8s ease-in-out infinite;
}

.wed8-session-0.is-open .wed8-curtain-left {
  animation: wed8CurtainOpenLeft 2.4s cubic-bezier(0.22, 0.82, 0.18, 1) forwards;
}

.wed8-session-0.is-open .wed8-curtain-right {
  animation: wed8CurtainOpenRight 2.4s cubic-bezier(0.22, 0.82, 0.18, 1) forwards;
}

.wed8-session-0.is-open .wed8-curtain-pleats,
.wed8-session-0.is-open .wed8-curtain-pleats::after {
  animation: none;
}

@keyframes wed8CurtainOpenLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-105%);
  }
}

@keyframes wed8CurtainOpenRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(105%);
  }
}

@keyframes wed8CurtainSwayLeft {
  0%,
  100% {
    transform: translateX(0) skewX(0deg);
  }
  50% {
    transform: translateX(-1.2%) skewX(-0.6deg);
  }
}

@keyframes wed8CurtainSwayRight {
  0%,
  100% {
    transform: translateX(0) skewX(0deg);
  }
  50% {
    transform: translateX(1.2%) skewX(0.6deg);
  }
}

@keyframes wed8PleatDriftLeft {
  0%,
  100% {
    background-position: 0 0;
    transform: translateX(0) scaleX(1);
  }
  50% {
    background-position: 18px 0;
    transform: translateX(-1.5%) scaleX(1.02);
  }
}

@keyframes wed8PleatDriftRight {
  0%,
  100% {
    background-position: 0 0;
    transform: translateX(0) scaleX(1);
  }
  50% {
    background-position: -18px 0;
    transform: translateX(1.5%) scaleX(1.02);
  }
}

@keyframes wed8PleatSheen {
  0%,
  100% {
    background-position: 0 0, 0 0;
    opacity: 0.85;
  }
  50% {
    background-position: 14px 0, 0 0;
    opacity: 1;
  }
}

/* Curtain tie / tassel */

.wed8-tie-wrap {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.75s ease,
    transform 0.75s ease,
    visibility 0.75s ease;
  will-change: opacity, transform;
}

.wed8-session-0.is-open .wed8-tie-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px) scale(0.92);
}

.wed8-tie {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transform-origin: top center;
  animation: wed8TieSwing 2.8s ease-in-out infinite;
}

.wed8-tie:active,
.wed8-tie.is-dragging {
  cursor: grabbing;
  animation: none;
}

.wed8-tie-cord {
  display: block;
  width: 3px;
  height: var(--wed8-tie-pull, 72px);
  min-height: 48px;
  max-height: 42vh;
  background: linear-gradient(90deg, #8a6d35, #e8d5a0 45%, #b8974e 55%, #6e5628);
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  transition: height 0.05s linear;
}

.wed8-tie.is-dragging .wed8-tie-cord {
  transition: none;
}

.wed8-tie-knot {
  width: 18px;
  height: 14px;
  margin-top: -2px;
  border-radius: 40% 40% 50% 50%;
  background: radial-gradient(circle at 40% 35%, #efe0b0, #8a6d35 72%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.wed8-tie-tassel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -1px;
}

.wed8-tie-tassel-head {
  position: relative;
  width: 30px;
  height: 24px;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 244, 210, 0.95) 0%, transparent 42%),
    radial-gradient(circle at 68% 62%, rgba(90, 69, 32, 0.35) 0%, transparent 48%),
    linear-gradient(165deg, #efdfb0 0%, #d4b56a 28%, #b8974e 58%, #7a5e2e 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.4),
    inset 0 -3px 4px rgba(0, 0, 0, 0.22),
    0 3px 8px rgba(30, 58, 95, 0.3);
  z-index: 2;
}

.wed8-tie-tassel-head::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 5px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 190, 0.55), transparent);
  opacity: 0.7;
}

.wed8-tie-tassel-neck {
  position: relative;
  width: 22px;
  height: 10px;
  margin-top: -5px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      #6e5628 0 2px,
      #e8d5a0 2px 4px,
      #b8974e 4px 6px,
      #8a6d35 6px 8px
    ),
    linear-gradient(180deg, #d4b56a, #6e5628);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.25);
  z-index: 3;
}

.wed8-tie-tassel-fringe {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  width: 36px;
  height: 104px;
  margin-top: -2px;
  padding-top: 2px;
  overflow: visible;
}

.wed8-tie-strand {
  display: block;
  width: 2.5px;
  border-radius: 999px;
  transform-origin: top center;
  background: linear-gradient(
    180deg,
    #e8d5a0 0%,
    #c4a46a 28%,
    #8a6d35 68%,
    #5a4520 100%
  );
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
  animation: wed8StrandSway 2.8s ease-in-out infinite;
}

.wed8-tie-strand:nth-child(1) { height: 82px; animation-delay: -0.1s; animation-duration: 2.9s; }
.wed8-tie-strand:nth-child(2) { height: 96px; animation-delay: -0.35s; animation-duration: 3.1s; }
.wed8-tie-strand:nth-child(3) { height: 88px; animation-delay: -0.55s; animation-duration: 2.7s; }
.wed8-tie-strand:nth-child(4) { height: 102px; animation-delay: -0.2s; animation-duration: 3.2s; }
.wed8-tie-strand:nth-child(5) { height: 92px; animation-delay: -0.7s; animation-duration: 2.85s; }
.wed8-tie-strand:nth-child(6) { height: 104px; animation-delay: -0.4s; animation-duration: 3s; }
.wed8-tie-strand:nth-child(7) { height: 90px; animation-delay: -0.15s; animation-duration: 2.75s; }
.wed8-tie-strand:nth-child(8) { height: 100px; animation-delay: -0.6s; animation-duration: 3.15s; }
.wed8-tie-strand:nth-child(9) { height: 86px; animation-delay: -0.45s; animation-duration: 2.95s; }
.wed8-tie-strand:nth-child(10) { height: 98px; animation-delay: -0.25s; animation-duration: 3.05s; }
.wed8-tie-strand:nth-child(11) { height: 80px; animation-delay: -0.5s; animation-duration: 2.8s; }

.wed8-tie-strand:nth-child(odd) {
  background: linear-gradient(
    180deg,
    #f0e0b4 0%,
    #d4b56a 30%,
    #9a7840 70%,
    #6e5628 100%
  );
}

.wed8-tie.is-dragging .wed8-tie-strand {
  animation: none;
}

@keyframes wed8StrandSway {
  0%,
  100% {
    transform: rotate(-3deg) translateX(0);
  }
  50% {
    transform: rotate(3deg) translateX(0.4px);
  }
}

@keyframes wed8TieSwing {
  0%,
  100% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(7deg);
  }
}

.wed8-tie-hint {
  margin: 14px 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--wed8-navy);
  font-family: var(--wed8-font-display);
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px var(--wed8-shadow);
  animation: wed8HintPulse 2.2s ease-in-out infinite;
}

@keyframes wed8HintPulse {
  0%,
  100% {
    opacity: 0.75;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(3px);
  }
}

/* ── Session 1: Hero ── */

.wed8-session-1 {
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wed8-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 2.4s cubic-bezier(0.33, 0.1, 0.25, 1),
    transform 2.7s cubic-bezier(0.22, 0.82, 0.18, 1);
  will-change: opacity, transform;
}

.wed8-session-1.is-bg-in .wed8-hero-bg {
  opacity: 1;
  transform: scale(1);
}

.wed8-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.wed8-petals {
  position: fixed;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

.wed8-petals.is-active {
  opacity: 1;
  visibility: visible;
}

.wed8-petal {
  position: absolute;
  top: -14vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  animation: wed8PetalFall linear infinite;
  will-change: transform, opacity;
  filter: drop-shadow(0 1px 2px rgba(30, 58, 95, 0.1));
}

@keyframes wed8PetalFall {
  0% {
    transform: translate3d(0, -10vh, 0) rotate(0deg) scale(var(--petal-scale, 1));
    opacity: 0;
  }
  8% {
    opacity: var(--petal-opacity, 0.3);
  }
  25% {
    transform: translate3d(calc(var(--petal-drift) * 0.3), 22vh, 0)
      rotate(calc(var(--petal-spin) * 0.25)) scale(var(--petal-scale, 1));
  }
  55% {
    transform: translate3d(calc(var(--petal-drift) * 0.65), 55vh, 0)
      rotate(calc(var(--petal-spin) * 0.55)) scale(var(--petal-scale, 1));
  }
  82% {
    opacity: var(--petal-opacity, 0.3);
  }
  100% {
    transform: translate3d(var(--petal-drift), 112vh, 0)
      rotate(var(--petal-spin)) scale(var(--petal-scale, 1));
    opacity: 0;
  }
}

.wed8-hero-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(92vw, 420px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(24px, 6vh, 48px) 20px clamp(7.5rem, 22vh, 12rem);
  text-align: center;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.wed8-session-1.is-content-in .wed8-hero-content {
  opacity: 1;
}

.wed8-hero-kicker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(3.4rem, 11vw, 4.8rem);
  margin: clamp(1.1rem, 3.5vh, 1.85rem) 0 1.1rem;
}

.wed8-invite,
.wed8-monogram-quote {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  color: var(--wed8-ink-soft);
  font-family: var(--wed8-font-display);
  font-style: italic;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-50% + 8px));
  transition:
    opacity 0.9s ease,
    transform 0.9s ease,
    visibility 0.9s ease;
  pointer-events: none;
}

.wed8-invite {
  box-sizing: border-box;
  top: calc(50% + clamp(1.35rem, 4.2vh, 2.15rem));
  width: min(92vw, 22rem);
  max-width: 92vw;
  padding: 0 clamp(1.85rem, 8vw, 3.2rem);
  font-size: clamp(0.95rem, 3.1vw, 1.12rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
}

.wed8-invite.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 1em;
  margin-left: 0.08em;
  vertical-align: -0.08em;
  background: currentColor;
  animation: wed8CaretBlink 0.8s steps(1) infinite;
}

.wed8-invite.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}

.wed8-monogram-quote {
  width: max-content;
  max-width: 92vw;
  font-size: clamp(1.1rem, 3.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: none;
  white-space: nowrap;
}

.wed8-session-1.is-monogram-letters-in:not(.is-monogram-out):not(.is-names-in) .wed8-monogram-quote {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}

.wed8-session-1.is-monogram-out .wed8-monogram-frame,
.wed8-session-1.is-monogram-out .wed8-monogram-letters {
  opacity: 0;
}

@keyframes wed8CaretBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.wed8-hero-title-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(12rem, 42vw, 17rem);
  margin: clamp(0.55rem, 1.8vh, 1rem) 0 0.6rem;
  text-align: center;
}

.wed8-monogram {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(58vw, 240px);
  aspect-ratio: 3 / 4;
  margin: 0;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-mono);
  font-size: clamp(3.4rem, 13vw, 4.8rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.wed8-session-1.is-monogram-in .wed8-monogram {
  opacity: 1;
  visibility: visible;
}

.wed8-session-1.is-monogram-out .wed8-monogram {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.wed8-monogram-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 0;
  opacity: 0;
  transform: scale(1.22);
  transition:
    opacity 1.35s cubic-bezier(0.22, 0.82, 0.18, 1),
    transform 1.45s cubic-bezier(0.22, 0.82, 0.18, 1);
  will-change: opacity, transform;
}

.wed8-session-1.is-monogram-in .wed8-monogram-frame {
  opacity: 1;
  transform: scale(1);
}

.wed8-monogram-letters {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  transition:
    opacity 1.25s ease,
    transform 1.35s cubic-bezier(0.18, 0.9, 0.2, 1.02);
  will-change: opacity, transform;
}

.wed8-session-1.is-monogram-letters-in .wed8-monogram-letters {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.wed8-monogram-groom,
.wed8-monogram-bride {
  display: block;
  line-height: 0.72;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.wed8-monogram-groom {
  transform: translateX(-0.18em);
}

.wed8-monogram-bride {
  transform: translateX(0.18em);
}

.wed8-couple-names {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08em;
  width: 100%;
  margin: clamp(0.45rem, 1.4vh, 0.85rem) 0 0;
  color: var(--wed8-navy);
  font-family: "Allura", "Pinyon Script", cursive;
  font-size: clamp(2.85rem, 12vw, 4.15rem);
  font-weight: 400;
  line-height: 1.05;
  text-align: center;
  opacity: 0;
}

.wed8-session-1.is-names-in .wed8-couple-names {
  opacity: 1;
}

.wed8-name {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 1.05em;
  opacity: 0;
}

.wed8-name.is-ready {
  opacity: 1;
}

.wed8-name-groom {
  transform: translateX(clamp(-1.1rem, -5vw, -2.2rem));
}

.wed8-name-bride {
  transform: translateX(clamp(1.1rem, 5vw, 2.2rem));
}

body.wed8-names-center .wed8-name-groom,
body.wed8-names-center .wed8-name-bride,
body.wed8-names-center.wed8-bride-first .wed8-name-groom,
body.wed8-names-center.wed8-bride-first .wed8-name-bride {
  transform: none;
}

body.wed8-bride-first .wed8-name-bride {
  transform: translateX(clamp(-1.1rem, -5vw, -2.2rem));
}

body.wed8-bride-first .wed8-name-groom {
  transform: translateX(clamp(1.1rem, 5vw, 2.2rem));
}

body.wed8-bride-first .wed8-monogram-bride {
  transform: translateX(-0.18em);
}

body.wed8-bride-first .wed8-monogram-groom {
  transform: translateX(0.18em);
}

.wed8-name-amp {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0.9em;
  margin: 0.22em 0 0.48em;
  font-family: var(--wed8-font-display);
  font-size: 0.38em;
  font-style: italic;
  font-weight: 500;
  color: transparent;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  opacity: 1;
}

.wed8-name-amp.is-visible {
  animation: wed8AmpReveal 0.75s ease forwards;
}

.wed8-name-amp.is-settled,
.wed8-session-1.is-names-settled .wed8-name-amp.is-visible {
  animation: none;
  color: var(--wed8-cornflower);
  opacity: 1;
}

@keyframes wed8AmpReveal {
  from {
    color: transparent;
    opacity: 0;
  }
  to {
    color: var(--wed8-cornflower);
    opacity: 1;
  }
}

.wed8-hero-date {
  display: none;
}

#wed8-to-details {
  position: absolute;
  left: 50%;
  bottom: clamp(5.1rem, 13.5vh, 7.2rem);
  z-index: 8;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  margin-top: 0;
  min-height: 44px;
  padding: 0.62rem 1.45rem;
  font-size: 0.88rem;
  white-space: nowrap;
  width: max-content;
  max-width: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 0.7s ease,
    transform 0.7s ease,
    box-shadow 0.25s ease;
}

.wed8-session-1.is-cta-in #wed8-to-details {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.wed8-drop-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0);
}

.wed8-drop-letter.is-dropping {
  animation: wed8LetterDrop 2.1s cubic-bezier(0.22, 0.78, 0.24, 1) forwards;
  animation-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}

.wed8-drop-letter.is-settled,
.wed8-session-1.is-names-settled .wed8-drop-letter {
  opacity: 1;
  transform: translateY(0);
  animation: none !important;
}

@keyframes wed8LetterDrop {
  0% {
    opacity: 0;
    transform: translateY(var(--drop-from, -120px));
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.wed8-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--wed8-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.wed8-btn:active {
  transform: scale(0.98);
}

.wed8-btn-primary {
  background: linear-gradient(180deg, var(--wed8-curtain-light), var(--wed8-curtain-deep));
  color: #fff;
  box-shadow: 0 8px 22px rgba(42, 74, 110, 0.28);
}

.wed8-btn-outline {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(61, 106, 150, 0.35);
  color: var(--wed8-navy);
}

.wed8-btn-wave {
  --wed8-wave-fill: #cfe4f4;
  --wed8-wave-fill-deep: #bdd8ef;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 50px;
  padding: 0.8rem 1.85rem;
  border-color: rgba(90, 138, 184, 0.45);
  background: #f4f9fd;
  color: var(--wed8-navy);
  box-shadow: 0 8px 20px rgba(61, 106, 150, 0.14);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.wed8-btn-wave::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23cfe4f4'/%3E%3Cstop offset='100%25' stop-color='%23bdd8ef'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 58 C48 34 84 82 132 58 S216 34 264 58 S348 82 396 58 S480 34 528 58 S576 82 600 58 L600 120 L0 120 Z'/%3E%3Cpath fill='none' stroke='%2390b6d6' stroke-width='2.4' stroke-linecap='round' opacity='0.55' d='M0 58 C48 34 84 82 132 58 S216 34 264 58 S348 82 396 58 S480 34 528 58 S576 82 600 58'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .wed8-btn-primary:hover {
    box-shadow: 0 10px 26px rgba(42, 74, 110, 0.36);
  }

  .wed8-btn-outline:hover {
    background: #fff;
  }

  .wed8-btn-wave:hover {
    box-shadow: 0 10px 24px rgba(61, 106, 150, 0.2);
  }

  .wed8-btn-wave:hover::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23c2dcf0'/%3E%3Cstop offset='100%25' stop-color='%23b1d0e9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 58 C48 34 84 82 132 58 S216 34 264 58 S348 82 396 58 S480 34 528 58 S576 82 600 58 L600 120 L0 120 Z'/%3E%3Cpath fill='none' stroke='%2385adce' stroke-width='2.4' stroke-linecap='round' opacity='0.6' d='M0 58 C48 34 84 82 132 58 S216 34 264 58 S348 82 396 58 S480 34 528 58 S576 82 600 58'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat;
  }
}

.wed8-btn-wave-label {
  position: relative;
  z-index: 2;
}

/* Mute */

.wed8-mute-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  color: var(--wed8-navy);
  box-shadow: 0 4px 14px var(--wed8-shadow);
  cursor: pointer;
  font-size: 1.05rem;
}

.wed8-mute-btn[hidden],
.wed8-back-btn[hidden] {
  display: none !important;
}

.wed8-mute-btn .wed8-mute-icon {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.wed8-mute-btn.is-muted::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2.5px;
  border-radius: 999px;
  background: #d64545;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%) rotate(-42deg);
  pointer-events: none;
}

/* ── Session 2: Details ── */

.wed8-session-2 {
  position: relative;
  overflow: hidden;
  background: #e7f1f8;
}

.wed8-details-bg {
  position: fixed;
  inset: -28px 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(ellipse 90% 55% at 8% 12%, rgba(122, 168, 204, 0.38), transparent 58%),
    radial-gradient(ellipse 75% 50% at 92% 88%, rgba(61, 106, 150, 0.22), transparent 55%),
    radial-gradient(ellipse 55% 40% at 70% 18%, rgba(196, 164, 106, 0.12), transparent 60%),
    radial-gradient(ellipse 70% 45% at 40% 70%, rgba(255, 255, 255, 0.55), transparent 62%),
    linear-gradient(165deg, #eef6fb 0%, #dfeaF5 45%, #d2e4f1 100%);
}

.wed8-details-bg::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 22% 68%, rgba(90, 138, 184, 0.14) 0 11%, transparent 12%),
    radial-gradient(circle at 78% 28%, rgba(125, 170, 205, 0.16) 0 14%, transparent 15%),
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.28) 0 18%, transparent 19%),
    repeating-linear-gradient(
      -22deg,
      transparent 0 34px,
      rgba(255, 255, 255, 0.1) 34px 35px
    );
  opacity: 0.95;
  transform: rotate(-2deg);
}

.wed8-details-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, transparent 68%),
    radial-gradient(ellipse 120% 40% at 50% -5%, rgba(255, 255, 255, 0.45), transparent 55%);
  mix-blend-mode: soft-light;
}

.wed8-details-frame {
  position: fixed;
  inset: -20px 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.7s ease 0.12s;
}

.wed8-session-2.is-revealed .wed8-details-frame {
  opacity: 1;
}

.wed8-details-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.wed8-details-scroll {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease 0.08s, transform 0.55s ease 0.08s;
}

.wed8-session-2.is-revealed .wed8-details-scroll {
  opacity: 1;
  transform: translateY(0);
}

.wed8-details-inner {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: clamp(48px, 10vh, 72px) clamp(18px, 5vw, 28px) clamp(72px, 14vh, 110px);
}

.wed8-details-topbar {
  min-height: 42px;
  margin-bottom: 8px;
}

.wed8-back-btn {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 50;
  border: 0;
  background: rgba(255, 255, 255, 0.78);
  color: var(--wed8-navy);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-family: var(--wed8-font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px var(--wed8-shadow);
}

.wed8-details-header {
  text-align: center;
  padding: 12px 8px 8px;
}

.wed8-details-title {
  margin: 0;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-script);
  font-size: clamp(2.8rem, 10vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Scroll reveals (details session) */

.wed8-scroll-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.78s ease,
    transform 0.78s ease;
  will-change: opacity, transform;
}

.wed8-scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wed8-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: min(230px, 74%);
  margin: 1.2rem auto 0;
  background: none;
}

.wed8-ornament::before,
.wed8-ornament::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 143, 199, 0.55), rgba(61, 106, 150, 0.95));
}

.wed8-ornament::after {
  background: linear-gradient(90deg, rgba(61, 106, 150, 0.95), rgba(91, 143, 199, 0.55), transparent);
}

.wed8-ornament-mark {
  flex: 0 0 auto;
  color: var(--wed8-curtain-mid);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.18em;
  background: none;
}

.wed8-section-title {
  margin: 0 0 0.9rem;
  text-align: center;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.wed8-celebration-msg {
  margin: 1.35rem auto 0.35rem;
  max-width: 28rem;
  padding: 0 0.75rem;
  color: var(--wed8-ink-soft);
  font-family: var(--wed8-font-display);
  font-size: clamp(1.05rem, 3.8vw, 1.28rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.55;
  text-align: center;
}

/* Couple frame */

.wed8-couple-frame {
  --wed8-frame-bleed: clamp(18px, 5vw, 28px);
  display: flex;
  justify-content: center;
  width: calc(100% + (2 * var(--wed8-frame-bleed)));
  max-width: none;
  margin: 1.2rem calc(-1 * var(--wed8-frame-bleed)) 1.8rem;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
}

.wed8-couple-frame-shell {
  position: relative;
  width: 82%;
  max-width: 420px;
}

/* Opt-in: larger couple details frame */
body.wed8-couple-frame-lg .wed8-couple-frame-shell {
  width: 94%;
  max-width: 480px;
}

body.wed8-couple-frame-lg .wed8-couple-frame-content {
  left: 11%;
  right: 11%;
  top: 11%;
  bottom: 10%;
  gap: 1.05rem;
}

.wed8-couple-frame-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transform: none;
}

.wed8-couple-frame-content {
  position: absolute;
  z-index: 2;
  left: 13%;
  right: 13%;
  top: 13%;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  text-align: center;
  padding: 0.35rem 0.2rem;
}

.wed8-couple-block {
  width: 100%;
}

.wed8-couple-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.2rem 0 0.25rem;
  color: var(--wed8-curtain-mid);
  font-family: var(--wed8-font-script);
  font-size: clamp(1.55rem, 5.5vw, 1.9rem);
  font-weight: 400;
  line-height: 1;
}

.wed8-person-role {
  margin: 0 0 0.2rem;
  color: var(--wed8-cornflower);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wed8-person-name {
  margin: 0 0 0.35rem;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-script);
  font-size: clamp(1.7rem, 7vw, 2.15rem);
  font-weight: 400;
  line-height: 1.05;
}

.wed8-person-prefix {
  margin: 0;
  color: var(--wed8-dusty);
  font-family: var(--wed8-font-display);
  font-size: 0.82rem;
  font-style: italic;
}

.wed8-person-parents {
  margin: 0.12rem 0 0.28rem;
  color: var(--wed8-ink);
  font-family: var(--wed8-font-display);
  font-size: clamp(1.05rem, 3.8vw, 1.18rem);
  font-weight: 500;
  line-height: 1.3;
}

.wed8-person-meta {
  margin: 0.15rem 0 0;
  color: var(--wed8-ink-soft);
  font-family: var(--wed8-font-display);
  font-size: clamp(0.98rem, 3.5vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.35;
}

/* Date + countdown curtain reveal */

.wed8-reveal-stage {
  --wed8-reveal-bleed: clamp(18px, 5vw, 28px);
  position: relative;
  width: calc(100% + (2 * var(--wed8-reveal-bleed)));
  margin: 0.85rem calc(-1 * var(--wed8-reveal-bleed)) 0.45rem;
  padding: 1.4rem 0 0.75rem;
  overflow: hidden;
  box-sizing: border-box;
}

.wed8-reveal-content {
  position: relative;
  z-index: 1;
  padding: 0.5rem var(--wed8-reveal-bleed) 0.35rem;
}

.wed8-reveal-curtains {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.wed8-reveal-curtain {
  position: absolute;
  top: -4%;
  bottom: -4%;
  width: 58%;
  height: 108%;
  object-fit: cover;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: left, right;
}

.wed8-reveal-curtain-left {
  left: 0;
  right: auto;
  object-position: right center;
  transition: left 3.05s cubic-bezier(0.33, 0.08, 0.2, 1);
}

.wed8-reveal-curtain-right {
  right: 0;
  left: auto;
  object-position: left center;
  transition: right 3.05s cubic-bezier(0.33, 0.08, 0.2, 1);
}

.wed8-reveal-stage.is-open .wed8-reveal-curtain-left {
  /* Keep about 5rem of curtain on the left edge. */
  left: calc(-58% + 5rem);
}

.wed8-reveal-stage.is-open .wed8-reveal-curtain-right {
  /* Keep about 5rem of curtain on the right edge. */
  right: calc(-58% + 5rem);
}

/* Save the date title */

.wed8-save-the-date {
  display: flex;
  justify-content: center;
  margin: 0 auto 0.85rem;
  padding: 0 0.75rem;
}

.wed8-save-the-date-img {
  display: block;
  width: min(78%, 280px);
  height: auto;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Date showcase */

.wed8-date-showcase {
  margin: 0 auto 0.9rem;
  padding: 0.2rem 0.75rem 0.15rem;
  text-align: center;
  color: var(--wed8-navy);
}

.wed8-date-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 0 0.85rem;
  color: var(--wed8-curtain-deep);
  font-family: var(--wed8-font-display);
  font-size: clamp(0.92rem, 3.2vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.wed8-date-rule {
  display: block;
  width: clamp(2.6rem, 12vw, 4rem);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(42, 74, 110, 0.7),
    transparent
  );
}

.wed8-date-weekday-text {
  flex: 0 0 auto;
}

.wed8-date-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.65rem;
  margin: 0 0 0.8rem;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-display);
  font-size: clamp(1.45rem, 5.4vw, 1.95rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
}

.wed8-date-day,
.wed8-date-year {
  font-family: var(--wed8-font-numeral);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.06em;
}

.wed8-date-month {
  font-weight: 700;
}

.wed8-date-day {
  font-size: 1.12em;
}

.wed8-date-day sup {
  font-family: var(--wed8-font-numeral);
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.1em;
  vertical-align: super;
  margin-left: 0.1em;
}

.wed8-date-sep {
  color: rgba(42, 74, 110, 0.45);
  font-weight: 400;
  letter-spacing: 0;
}

.wed8-date-time {
  margin: 0;
  color: var(--wed8-curtain-deep);
  font-family: var(--wed8-font-numeral);
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wed8-reveal-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: min(220px, 72%);
  margin: 1.15rem auto 1.05rem;
}

.wed8-reveal-divider::before,
.wed8-reveal-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 143, 199, 0.55), rgba(61, 106, 150, 0.95));
}

.wed8-reveal-divider::after {
  background: linear-gradient(90deg, rgba(61, 106, 150, 0.95), rgba(91, 143, 199, 0.55), transparent);
}

.wed8-reveal-divider-mark {
  flex: 0 0 auto;
  color: var(--wed8-curtain-mid);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.9;
}

/* Events */

.wed8-events {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 1.2rem;
  text-align: center;
}

.wed8-events-ornament {
  display: block;
  width: min(72%, 280px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.wed8-events-ornament-top {
  margin: 0 0 0.85rem;
}

.wed8-events-ornament-bottom {
  margin: 1.15rem 0 0;
  transform: scaleY(-1);
}

.wed8-events-title {
  margin: 0 0 1.05rem;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-script);
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.15;
}

.wed8-event-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.wed8-event-row {
  display: grid;
  grid-template-columns: 7.75rem 1.35rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.15rem 0.25rem;
  text-align: left;
  background: none;
  border: 0;
  box-shadow: none;
}

/* Opt-in: more room between event label and floral mark */
body.wed8-events-label-gap .wed8-event-row {
  grid-template-columns: 8.5rem 1.35rem minmax(0, 1fr);
  column-gap: 0.95rem;
}

body.wed8-events-label-gap .wed8-event-floral {
  margin-left: -0.35rem;
}

.wed8-event-label {
  margin: 0;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-display);
  font-size: clamp(1.05rem, 3.6vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.wed8-event-floral {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 1.35rem;
  margin-left: -0.85rem;
  color: var(--wed8-curtain-mid);
}

.wed8-event-floral-mark {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--wed8-curtain-mid);
}

.wed8-event-when {
  min-width: 0;
  margin-left: -0.7rem;
}

.wed8-event-date {
  margin: 0;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-display);
  font-size: clamp(1.08rem, 3.7vw, 1.28rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
}

.wed8-event-meta {
  margin: 0.22rem 0 0;
  color: var(--wed8-ink-soft);
  font-family: var(--wed8-font-display);
  font-size: clamp(0.84rem, 2.9vw, 0.98rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  font-variant-numeric: lining-nums;
}

/* Venues */

.wed8-venues {
  margin: 0 0 2.2rem;
  text-align: center;
}

.wed8-venues-title {
  margin: 0 0 2.35rem;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-script);
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.15;
}

.wed8-venue-shell {
  position: relative;
  width: min(100%, 440px);
  margin: 1.85rem auto 0;
  padding: 2.15rem 1.15rem 1.45rem;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(244, 249, 253, 0.92));
  border: 1.5px solid rgba(91, 143, 199, 0.3);
  box-shadow:
    0 12px 28px rgba(30, 58, 95, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.wed8-venue-tabs {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.28rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid rgba(91, 143, 199, 0.32);
  box-shadow: 0 8px 18px rgba(30, 58, 95, 0.12);
  transform: translate(-50%, -50%);
}

.wed8-venue-tab {
  appearance: none;
  margin: 0;
  min-height: 2.35rem;
  padding: 0.45rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wed8-ink-soft);
  font-family: var(--wed8-font-display);
  font-size: clamp(0.92rem, 3.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wed8-venue-tab:hover {
  color: var(--wed8-navy);
}

.wed8-venue-tab.is-active {
  background: linear-gradient(180deg, var(--wed8-curtain-light), var(--wed8-curtain-deep));
  color: #fff;
  box-shadow: 0 6px 14px rgba(42, 74, 110, 0.22);
}

.wed8-venue-panels {
  width: 100%;
  margin: 0 auto;
}

.wed8-venue-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: wed8FadeIn 0.35s ease both;
}

.wed8-venue-panel.is-active {
  display: flex;
}

.wed8-venue-when {
  margin: 0.35rem 0 0.85rem;
  color: var(--wed8-navy);
  font-size: clamp(0.92rem, 3.1vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}

.wed8-venue-day,
.wed8-venue-time-sep {
  font-family: var(--wed8-font-display);
  font-style: italic;
  font-weight: 600;
}

.wed8-venue-time {
  font-family: var(--wed8-font-mono);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  -webkit-text-stroke: 0.35px currentColor;
  paint-order: stroke fill;
}

.wed8-venue-art-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto 0.9rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.wed8-venue-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 270px;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.wed8-venue-panel[data-venue-key="reception"] .wed8-venue-art {
  width: 94%;
  max-height: 245px;
  margin: 0 auto;
}

.wed8-venue-address {
  margin: 0 0 0.95rem;
  max-width: 22rem;
  color: var(--wed8-ink);
  font-family: var(--wed8-font-display);
  font-size: clamp(1.18rem, 4vw, 1.38rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.4;
}

.wed8-venue-directions {
  display: inline-flex;
  width: fit-content;
  min-height: 50px;
  padding: 0.8rem 1.85rem;
  font-size: 0.95rem;
}

/* Countdown */

.wed8-countdown {
  margin: 0.2rem 0 0;
  padding: 0 0.5rem;
  text-align: center;
}

.wed8-countdown-title {
  margin: 0 0 1rem;
}

.wed8-countdown-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35rem;
  max-width: 100%;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(-18px);
  transition:
    opacity 3.1s ease,
    clip-path 4s cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 3.3s ease;
  will-change: opacity, clip-path, transform;
}

.wed8-countdown-row.is-in {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateX(0);
}

.wed8-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 3.2rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

.wed8-countdown-value {
  display: block;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-numeral);
  font-size: clamp(2rem, 8.5vw, 2.85rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}

.wed8-countdown-label {
  display: block;
  margin-top: 0.4rem;
  color: var(--wed8-dusty);
  font-family: var(--wed8-font-display);
  font-size: clamp(0.68rem, 2.4vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wed8-countdown-colon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.05em;
  color: var(--wed8-curtain-mid);
  font-family: var(--wed8-font-numeral);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  opacity: 0.7;
}

.wed8-add-calendar {
  display: flex;
  width: fit-content;
  margin: 0.35rem auto 0.15rem;
}

/* Enquiries */

.wed8-enquiries {
  margin: 0.35rem 0 2rem;
  text-align: center;
}

.wed8-enquiries-title {
  margin: 0 0 0.4rem;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-script);
  font-size: clamp(2.2rem, 7.5vw, 2.95rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.15;
}

.wed8-enquiries-subtitle {
  margin: 0 auto 0.95rem;
  max-width: 22rem;
  color: var(--wed8-ink-soft);
  font-family: var(--wed8-font-display);
  font-size: clamp(0.95rem, 3.2vw, 1.08rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.wed8-enquiry-phones {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem 1.25rem;
  white-space: nowrap;
}

.wed8-enquiry-phone {
  display: inline-block;
  flex: 0 0 auto;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-display);
  font-size: clamp(1.15rem, 3.9vw, 1.5rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(61, 106, 150, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.wed8-enquiry-phone:hover {
  color: var(--wed8-curtain-deep);
  border-bottom-color: rgba(42, 74, 110, 0.55);
}

/* Closing invite */

.wed8-closing-invite {
  margin: 0.25rem auto 0.55rem;
  max-width: 28rem;
  padding: 0 0.75rem;
  text-align: center;
}

.wed8-closing-invite-text {
  margin: 0;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-script);
  font-size: clamp(1.85rem, 6.5vw, 2.55rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

/* Wishes */

.wed8-wishes {
  text-align: center;
  padding: 0.15rem 0 1rem;
}

.wed8-wishes .wed8-ornament {
  margin-top: 0.45rem;
}

.wed8-wishes-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  color: var(--wed8-navy);
  font-family: var(--wed8-font-display);
  font-size: clamp(1.2rem, 3.8vw, 1.45rem);
  font-style: italic;
  line-height: 1.45;
}

.wed8-wishes-label {
  display: block;
  white-space: nowrap;
  font-weight: 500;
}

.wed8-wishes-names {
  display: block;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.wed8-wishes-name,
.wed8-wishes-sep {
  display: inline-block;
  opacity: 0;
  transform: translateY(-14px);
}

.wed8-wishes.is-visible .wed8-wishes-name,
.wed8-wishes.is-visible .wed8-wishes-sep {
  animation: wed8NameDrop 0.58s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
  animation-delay: calc(0.42s + (var(--wed8-name-i, 0) * 0.32s));
}

.wed8-wishes-sep {
  margin-right: 0.3em;
}

.wed8-wishes-sep-amp {
  margin-left: 0.12em;
  margin-right: 0.3em;
}

@keyframes wed8NameDrop {
  0% {
    opacity: 0;
    transform: translateY(-16px);
  }
  70% {
    opacity: 1;
    transform: translateY(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduce motion */

@media (prefers-reduced-motion: reduce) {
  .wed8-tie {
    animation: none;
  }

  .wed8-tie-hint {
    animation: none;
  }

  .wed8-curtain-left,
  .wed8-curtain-right,
  .wed8-curtain-pleats,
  .wed8-curtain-pleats::after {
    animation: none;
  }

  .wed8-session.is-active {
    animation: none;
  }

  .wed8-invite,
  .wed8-monogram-quote,
  .wed8-monogram,
  .wed8-monogram-letters,
  .wed8-monogram-frame,
  .wed8-couple-names,
  .wed8-drop-letter,
  #wed8-to-details,
  .wed8-details-scroll,
  .wed8-details-frame,
  .wed8-celebration-msg,
  .wed8-couple-frame,
  .wed8-countdown-row,
  .wed8-reveal-curtain,
  .wed8-scroll-reveal {
    transition: none;
    animation: none !important;
  }

  .wed8-celebration-msg,
  .wed8-couple-frame,
  .wed8-countdown-row,
  .wed8-opening-loader-ornament,
  .wed8-opening-loader-hint {
    animation: none !important;
  }

  .wed8-details-bg,
  .wed8-details-frame {
    transform: none !important;
    will-change: auto;
  }

  .wed8-scroll-reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .wed8-wishes-name,
  .wed8-wishes-sep {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .wed8-reveal-stage.is-open .wed8-reveal-curtain-left,
  .wed8-reveal-curtain-left {
    left: calc(-58% + 5rem);
    transform: none;
  }

  .wed8-reveal-stage.is-open .wed8-reveal-curtain-right,
  .wed8-reveal-curtain-right {
    right: calc(-58% + 5rem);
    transform: none;
  }

  .wed8-petals {
    display: none;
  }
}