:root {
  --bg-white: #ffffff;
  --ink-primary: #2c2025;
  --ink-secondary: #6f5b63;
  --ink-muted: #968189;

  --gold-rich: #b5874a;
  --gold-light: #d9b882;
  --gold-hairline: rgba(181, 135, 74, 0.36);
  --gold-hairline-soft: rgba(181, 135, 74, 0.2);

  --rose-accent: #c56282;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
}

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

html,
body {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--bg-white);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   1. LUXURY ENVELOPE OPENING INTRO
========================================================= */
.envelope-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: radial-gradient(circle at center, #ffffff 0%, #fdfbf8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.envelope-overlay.is-revealing {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}

.envelope-overlay.is-done {
  display: none;
}

.envelope-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  animation: envelopeFloatIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.envelope {
  position: relative;
  width: min(420px, 84vw);
  aspect-ratio: 440 / 310;
  perspective: 1400px;
  cursor: pointer;
  filter: drop-shadow(0 24px 55px rgba(82, 54, 62, 0.14));
}

.envelope-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, #fffdf9 0%, #f6efe6 100%);
  border: 1px solid var(--gold-hairline);
  border-radius: 6px;
}

.envelope-letter {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 8%;
  bottom: 8%;
  z-index: 2;
  background: #ffffff;
  border: 1px solid var(--gold-hairline);
  border-radius: 4px;
  padding: 0.75rem;
  box-shadow: 0 6px 24px rgba(82, 54, 62, 0.08);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 1.1s ease;
}

.envelope-letter__border {
  width: 100%;
  height: 100%;
  border: 1px solid var(--gold-hairline-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  padding: 0.75rem;
}

.envelope-letter__eyebrow {
  font-family: var(--font-sans);
  font-size: clamp(0.62rem, 1.8vw, 0.76rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-rich);
}

.envelope-letter__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.55rem, 4.5vw, 2.3rem);
  color: var(--ink-primary);
}

.envelope-overlay.is-letter-rising .envelope-letter {
  transform: translateY(-56%) scale(1.04);
  box-shadow: 0 18px 42px rgba(82, 54, 62, 0.14);
}

.envelope-pocket {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 6px;
  overflow: hidden;
}

.envelope-pocket-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 56%;
  z-index: 4;
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.3, 0.72, 0.1, 1);
  pointer-events: none;
}

.envelope-flap-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(82, 54, 62, 0.08));
}

.envelope-overlay.is-flap-open .envelope-flap {
  transform: rotateX(176deg);
}

.envelope-overlay.is-flap-behind .envelope-flap {
  z-index: 1;
}

.wax-seal {
  position: absolute;
  top: 52%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: clamp(54px, 12vw, 66px);
  height: clamp(54px, 12vw, 66px);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #eccca2 0%, #c89756 58%, #9e7136 100%);
  box-shadow:
    0 8px 20px rgba(130, 88, 36, 0.34),
    inset 0 2px 5px rgba(255, 255, 255, 0.45),
    inset 0 -3px 6px rgba(96, 62, 18, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.55s ease, opacity 0.55s ease;
}

.wax-seal__ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 248, 235, 0.55);
}

.wax-seal__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  color: #fffaf0;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(90, 56, 14, 0.4);
}

.envelope-overlay.is-unsealing .wax-seal {
  opacity: 0;
  transform: translate(-50%, -62%) scale(1.18);
  pointer-events: none;
}

.envelope-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-secondary);
  letter-spacing: 0.04em;
  transition: opacity 0.45s ease;
}

.envelope-overlay.is-unsealing .envelope-hint {
  opacity: 0;
}

/* =========================================================
   2. FULL-BLEED EDGE-TO-EDGE WHITE VIEWPORT INVITATION
========================================================= */
#scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

.viewport-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.2rem, 2.8vh, 2.2rem) clamp(1.2rem, 4vw, 3.5rem) clamp(4.8rem, 12vh, 8.6rem);
}

.edge-frame {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 1s ease 0.12s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.edge-frame--outer {
  inset: clamp(10px, 1.5vh, 18px);
  border: 1px solid var(--gold-hairline);
}

.edge-frame--inner {
  inset: clamp(16px, 2.3vh, 26px);
  border: 1px solid var(--gold-hairline-soft);
}

body.is-revealed .edge-frame {
  opacity: 1;
  transform: scale(1);
}

.silk-sheen {
  position: fixed;
  inset: -40% -20%;
  z-index: 1;
  background: linear-gradient(
    115deg,
    transparent 44%,
    rgba(217, 184, 130, 0.065) 49%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(217, 184, 130, 0.06) 52%,
    transparent 57%
  );
  transform: translateX(-110%);
  animation: silkSweep 9.5s ease-in-out infinite;
  pointer-events: none;
}

/* =========================================================
   3. CENTERED EDITORIAL CONTENT (GENEROUS TYPOGRAPHY)
========================================================= */
.invite-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(14px);
  opacity: 0;
  transition:
    opacity 1s ease 0.22s,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;
}

body.is-revealed .invite-content {
  opacity: 1;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(0);
}

.monogram-crest {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(0.55rem, 1.6vh, 1.25rem);
}

.crest-line {
  width: clamp(32px, 6vw, 68px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light));
}

.crest-line:last-child {
  background: linear-gradient(90deg, var(--gold-light), transparent);
}

.crest-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 6vh, 54px);
  height: clamp(42px, 6vh, 54px);
  border-radius: 50%;
  border: 1px solid var(--gold-hairline);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.15rem, 2.3vh, 1.4rem);
  color: var(--gold-rich);
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 16px rgba(181, 135, 74, 0.1);
}

/* Title Block */
.title-block {
  margin-bottom: clamp(0.6rem, 1.8vh, 1.35rem);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.74rem, 1.5vh, 0.95rem);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: clamp(0.25rem, 0.8vh, 0.55rem);
}

.main-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3.15rem, min(8.6vw, 12.2vh), 6.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  background: linear-gradient(
    110deg,
    #2c2025 15%,
    #5f3a47 45%,
    #9f723b 54%,
    #2c2025 85%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldTextShimmer 10s ease-in-out infinite;
}

/* Save the Date — Large & Prominent */
.save-date-row {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.65rem, 2vw, 1.35rem);
  margin-bottom: clamp(1.35rem, 3.6vh, 2.8rem);
}

.save-date-rule {
  width: clamp(18px, 4.5vw, 52px);
  height: 1px;
  background: var(--gold-hairline);
}

.save-date-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.05rem, min(3vw, 3.8vh), 2.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-rich);
}

/* Large Live Countdown */
.countdown-section {
  width: 100%;
  max-width: 760px;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.8vw, 1.25rem);
  width: 100%;
}

.time-card {
  position: relative;
  padding: clamp(0.45rem, 1.4vh, 1rem) 0.4rem;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.time-card:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(clamp(0.5rem, 1.8vw, 1.25rem) * -0.5);
  top: 22%;
  height: 52%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold-hairline), transparent);
}

.time-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(3rem, min(7.6vw, 11.2vh), 6.2rem);
  line-height: 0.94;
  color: var(--ink-primary);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), color 0.24s ease;
}

.time-card--days .time-value {
  color: var(--rose-accent);
}

.time-value.is-ticking {
  transform: translateY(-2px) scale(1.03);
  color: var(--gold-rich);
}

.time-label {
  margin-top: clamp(0.35rem, 1vh, 0.65rem);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.66rem, 1.35vh, 0.84rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.countdown-meta {
  margin-top: clamp(0.85rem, 2.2vh, 1.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.45rem, 1.1vh, 0.75rem);
}

.countdown-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vh, 1.48rem);
  color: var(--ink-secondary);
}

.gold-progress {
  width: min(360px, 78%);
  height: 2px;
  background: rgba(181, 135, 74, 0.16);
  border-radius: 999px;
  overflow: hidden;
}

.gold-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-light), var(--rose-accent));
  transition: width 0.7s ease;
}

/* =========================================================
   4. KEYFRAMES
========================================================= */
@keyframes envelopeFloatIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gentleFloatBottom {
  0% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(-50%, -4px);
  }
}

@keyframes silkSweep {
  0%, 18% {
    transform: translateX(-110%);
  }
  58%, 100% {
    transform: translateX(120%);
  }
}

@keyframes goldTextShimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* =========================================================
   5. RESPONSIVE (MOBILE & COMPACT SCREENS, ZERO SCROLL)
========================================================= */
@media (max-width: 680px) {
  .viewport-canvas {
    padding: 3.4rem 1.25rem clamp(5rem, 12vh, 6.8rem);
  }

  .save-date-row {
    gap: 0.5rem;
  }

  .save-date-rule {
    width: 14px;
  }

  .save-date-text {
    font-size: clamp(0.92rem, 3.8vw, 1.25rem);
    letter-spacing: 0.11em;
  }

  .countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    max-width: 350px;
    margin: 0 auto;
  }

  .time-card:not(:last-child)::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}