:root {
  --lacquer-plum: #141026;
  --black-violet: #241236;
  --jasmine-cream: #FFF4DC;
  --champagne-foil: #D9A441;
  --pearl-blush: #F7A8C4;
  --opal-cyan: #A7F0FF;
  --orchid-ink: #8E4DE8;
  --deep-orchid: #5E2A6E;
  --bubble-gradient: linear-gradient(135deg, #141026 0%, #5E2A6E 38%, #F7A8C4 72%, #A7F0FF 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--jasmine-cream);
  background: var(--lacquer-plum);
  font-family: Manrope, Inter, system-ui, -apple-system, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(247, 168, 196, .18), transparent 24rem),
    radial-gradient(circle at 82% 20%, rgba(167, 240, 255, .13), transparent 22rem),
    radial-gradient(circle at 45% 82%, rgba(142, 77, 232, .23), transparent 28rem),
    linear-gradient(110deg, rgba(20, 16, 38, .92), rgba(36, 18, 54, .75));
  z-index: -3;
}

.silk-noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255, 244, 220, .7) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(117deg, transparent 0 18px, rgba(217, 164, 65, .16) 19px, transparent 21px);
}

.ceremony-nav {
  position: fixed;
  z-index: 30;
  top: 24px;
  right: 28px;
  display: flex;
  gap: 18px;
  font: 700 10px/1 Manrope, sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.ceremony-nav a {
  color: rgba(255, 244, 220, .72);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(217, 164, 65, .35);
  transition: color .4s ease, border-color .4s ease, transform .4s ease;
}

.ceremony-nav a:hover {
  color: var(--opal-cyan);
  border-color: var(--pearl-blush);
  transform: translateY(3px);
}

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(78px, 8vw, 118px) clamp(22px, 6vw, 86px);
  display: grid;
  align-items: center;
  isolation: isolate;
}

.chamber::after {
  content: attr(data-scene);
  position: absolute;
  left: clamp(22px, 4vw, 54px);
  bottom: 28px;
  color: rgba(217, 164, 65, .45);
  font: 700 clamp(46px, 10vw, 150px)/.8 Fraunces, Georgia, serif;
  letter-spacing: .08em;
  z-index: -1;
}

.salon {
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(94, 42, 110, .54), transparent 38rem),
    radial-gradient(circle at 55% 45%, rgba(167, 240, 255, .12), transparent 19rem),
    linear-gradient(160deg, #141026 0%, #241236 67%, #141026 100%);
}

.hero-bubble {
  width: min(78vmin, 720px);
  height: min(78vmin, 720px);
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 47% 53% 44% 56% / 54% 42% 58% 46%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 244, 220, .28), transparent 12%),
    radial-gradient(circle at 68% 70%, rgba(167, 240, 255, .25), transparent 18%),
    var(--bubble-gradient);
  box-shadow:
    inset 18px 16px 58px rgba(255, 244, 220, .16),
    inset -26px -22px 60px rgba(20, 16, 38, .56),
    0 0 0 1px rgba(167, 240, 255, .42),
    0 45px 140px rgba(0, 0, 0, .56);
  animation: breathe 9s ease-in-out infinite;
}

.hero-bubble::before,
.story-bubble::before,
.wandering-bubble::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: inherit;
  border: 1px solid rgba(255, 244, 220, .34);
  background: linear-gradient(125deg, rgba(255,255,255,.23), transparent 32%, rgba(167, 240, 255, .16) 55%, transparent 72%);
  filter: blur(.2px);
}

.soap-gloss {
  position: absolute;
  width: 36%;
  height: 15%;
  top: 13%;
  left: 18%;
  border-radius: 50%;
  transform: rotate(-24deg);
  background: linear-gradient(90deg, rgba(255,244,220,.56), rgba(167,240,255,.05));
  filter: blur(1px);
}

.hero-bubble h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  font: 650 clamp(48px, 9vw, 132px)/.78 Fraunces, Georgia, serif;
  letter-spacing: .055em;
  text-align: center;
  color: rgba(255, 244, 220, .88);
  text-shadow: 0 1px 0 rgba(217, 164, 65, .55), 0 12px 30px rgba(20, 16, 38, .72);
  mix-blend-mode: screen;
}

.engraved-copy {
  position: absolute;
  z-index: 2;
  bottom: 21%;
  width: 70%;
  margin: 0;
  color: rgba(255, 244, 220, .74);
  font: italic 500 clamp(18px, 2.2vw, 31px)/1.2 "Cormorant Garamond", Georgia, serif;
  text-align: center;
}

.jasmine { position: absolute; inset: 10%; z-index: 1; opacity: .78; }
.jasmine path, .jasmine circle { fill: none; stroke: var(--jasmine-cream); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.jasmine .leaf { fill: rgba(94, 42, 110, .36); stroke: rgba(167, 240, 255, .72); }
.jasmine .bud-head path:first-child { fill: rgba(255, 244, 220, .18); }
.pollen-stars circle, .pollen-stars path { fill: var(--champagne-foil); stroke: none; }

.moon-stamp, .orbit-note, .section-label {
  font: 700 11px/1.5 Manrope, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(217, 164, 65, .72);
}

.moon-stamp { position: absolute; top: 9%; left: 8%; }
.moon-stamp span { color: rgba(255, 244, 220, .5); }
.orbit-note { position: absolute; border: 1px solid rgba(217, 164, 65, .35); border-radius: 999px; padding: 12px 17px; background: rgba(20, 16, 38, .22); backdrop-filter: blur(12px); }
.note-one { left: 12%; bottom: 22%; transform: rotate(-12deg); }
.note-two { right: 9%; top: 30%; transform: rotate(14deg); }

.wandering-bubble {
  position: fixed;
  z-index: 10;
  width: clamp(88px, 12vw, 164px);
  height: clamp(88px, 12vw, 164px);
  left: 8vw;
  top: 72vh;
  border-radius: 55% 45% 64% 36% / 43% 58% 42% 57%;
  display: grid;
  place-items: center;
  color: rgba(255, 244, 220, .8);
  font: 650 clamp(17px, 2vw, 29px) Fraunces, serif;
  background: radial-gradient(circle at 32% 18%, rgba(255,244,220,.32), transparent 15%), rgba(167, 240, 255, .06);
  border: 1px solid rgba(167, 240, 255, .36);
  box-shadow: inset -12px -16px 30px rgba(247, 168, 196, .13), 0 0 38px rgba(167, 240, 255, .16);
  pointer-events: none;
  transition: transform .1s linear;
}

.tunnel {
  background:
    radial-gradient(circle at 80% 30%, rgba(247, 168, 196, .22), transparent 22rem),
    linear-gradient(136deg, #141026 0%, #5E2A6E 44%, #241236 100%);
}

.tunnel h2, .table-copy h2, .canopy h2 {
  margin: 0;
  font: 650 clamp(44px, 8vw, 116px)/.9 Fraunces, Georgia, serif;
  letter-spacing: .02em;
  color: var(--jasmine-cream);
}

h2 em { color: var(--pearl-blush); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }

.bubble-chain {
  position: relative;
  min-height: 48vh;
  margin-top: 7vh;
}

.story-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(167, 240, 255, .42);
  box-shadow: inset 12px 15px 38px rgba(255,244,220,.12), inset -20px -25px 44px rgba(20,16,38,.44), 0 30px 80px rgba(20,16,38,.42);
  animation: breathe 11s ease-in-out infinite;
}

.story-bubble span { display: block; font: 700 clamp(32px, 5vw, 76px)/1 Fraunces, serif; color: var(--jasmine-cream); }
.story-bubble small { display: block; margin-top: 10px; color: rgba(255,244,220,.64); font: 700 10px Manrope, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.crystal { width: 31vw; height: 31vw; max-width: 330px; max-height: 330px; left: 0; top: 1vh; border-radius: 44% 56% 52% 48% / 45% 43% 57% 55%; background: rgba(167, 240, 255, .09); }
.pearl { width: 25vw; height: 25vw; max-width: 268px; max-height: 268px; left: 29%; top: 18vh; border-radius: 60% 40% 47% 53% / 61% 44% 56% 39%; background: radial-gradient(circle, rgba(255,244,220,.2), rgba(247,168,196,.09)); animation-delay: -3s; }
.gum { width: 34vw; height: 22vw; max-width: 390px; max-height: 250px; right: 18%; top: 3vh; border-radius: 64% 36% 71% 29% / 50% 68% 32% 50%; background: rgba(247, 168, 196, .12); animation-delay: -6s; }
.invisible { width: 23vw; height: 23vw; max-width: 230px; max-height: 230px; right: 1%; top: 24vh; border-radius: 43% 57% 36% 64% / 56% 45% 55% 44%; background: rgba(255,255,255,.025); animation-delay: -8s; }

.vine-trace { position: absolute; inset: auto 0 6% 0; width: 100%; height: 48%; pointer-events: none; }
.draw-path { fill: none; stroke: var(--champagne-foil); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawVine 5.4s ease-in-out infinite alternate; }

.table {
  grid-template-columns: minmax(280px, 1fr) minmax(280px, .8fr);
  gap: 6vw;
  background:
    radial-gradient(ellipse at 34% 54%, rgba(217, 164, 65, .18), transparent 28rem),
    linear-gradient(150deg, #241236 0%, #141026 55%, #5E2A6E 100%);
}

.mirror-platter {
  position: relative;
  min-height: 68vh;
  border-radius: 48% 52% 45% 55% / 52% 45% 55% 48%;
  background: radial-gradient(ellipse at 43% 48%, rgba(255,244,220,.18), rgba(167,240,255,.07) 36%, rgba(20,16,38,.25) 58%, transparent 64%);
  border: 1px solid rgba(217, 164, 65, .35);
  box-shadow: inset 0 0 70px rgba(167,240,255,.09), 0 42px 120px rgba(0,0,0,.38);
}

.platter-rim { position: absolute; inset: 8%; border-radius: inherit; border: 1px dashed rgba(255,244,220,.27); }
.date-card {
  position: absolute;
  width: clamp(180px, 22vw, 290px);
  padding: 24px;
  border: 1px solid rgba(217,164,65,.48);
  background: linear-gradient(135deg, rgba(255,244,220,.9), rgba(247,168,196,.72));
  color: var(--black-violet);
  box-shadow: 0 24px 55px rgba(20,16,38,.45);
}
.date-card b, .date-card span { display: block; font: 700 10px Manrope, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.date-card strong { display: block; margin-top: 20px; font: 700 42px/.85 Fraunces, serif; color: var(--deep-orchid); }
.card-one { left: 18%; top: 18%; transform: rotate(-10deg); }
.card-two { right: 9%; bottom: 17%; transform: rotate(11deg); }
.atomizer { position: absolute; width: 76px; height: 138px; right: 24%; top: 14%; border: 1px solid rgba(167,240,255,.55); border-radius: 38px 38px 14px 14px; background: linear-gradient(rgba(167,240,255,.12), rgba(247,168,196,.1)); }
.atomizer::before { content: ""; position: absolute; width: 58px; height: 20px; left: 9px; top: -21px; border: 1px solid rgba(217,164,65,.55); border-radius: 12px 12px 3px 3px; }

.table-copy p, .final-whisper {
  max-width: 560px;
  color: rgba(255, 244, 220, .72);
  font: italic 500 clamp(22px, 2.5vw, 34px)/1.25 "Cormorant Garamond", Georgia, serif;
}

.canopy {
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 9%, rgba(255,244,220,.18), transparent 16rem),
    radial-gradient(circle at 64% 55%, rgba(247,168,196,.2), transparent 24rem),
    linear-gradient(180deg, #141026 0%, #241236 42%, #5E2A6E 100%);
}
.canopy-vines { position: absolute; inset: 4% 4% auto; height: 45vh; opacity: .9; }
.jasmine-spray { width: 100%; height: 100%; overflow: visible; }
.flower path { fill: rgba(255,244,220,.88); stroke: rgba(217,164,65,.65); stroke-width: 1; }
.flower circle { fill: var(--champagne-foil); }
.small { transform-box: fill-box; transform-origin: center; opacity: .82; }
.rising-cards { position: absolute; inset: auto 8% 8%; display: flex; justify-content: space-around; pointer-events: none; }
.mini-card { padding: 15px 19px; border-radius: 50px; border: 1px solid rgba(167,240,255,.35); background: rgba(255,244,220,.08); color: rgba(255,244,220,.76); font: 700 11px Manrope, sans-serif; letter-spacing: .25em; text-transform: uppercase; animation: rise 8s ease-in-out infinite; }
.mini-card:nth-child(2) { animation-delay: -2.7s; }
.mini-card:nth-child(3) { animation-delay: -5s; }

.liquid-lens { transform-style: preserve-3d; will-change: transform, border-radius; }

@keyframes breathe {
  0%, 100% { transform: scale(1) rotate(0deg); border-radius: 47% 53% 44% 56% / 54% 42% 58% 46%; }
  45% { transform: scale(1.035, .975) rotate(1.8deg); border-radius: 59% 41% 62% 38% / 41% 61% 39% 59%; }
  72% { transform: scale(.982, 1.025) rotate(-1.2deg); border-radius: 39% 61% 47% 53% / 60% 37% 63% 40%; }
}

@keyframes drawVine { to { stroke-dashoffset: 0; } }
@keyframes rise { 0%, 100% { transform: translateY(22px) rotate(-4deg); opacity: .45; } 50% { transform: translateY(-34px) rotate(5deg); opacity: .95; } }

@media (max-width: 820px) {
  .ceremony-nav { left: 18px; right: 18px; justify-content: space-between; gap: 6px; font-size: 8px; }
  .table { grid-template-columns: 1fr; }
  .bubble-chain { min-height: 72vh; }
  .story-bubble { min-width: 150px; min-height: 150px; }
  .pearl { left: 12%; top: 25vh; }
  .gum { right: 2%; top: 14vh; }
  .invisible { right: 12%; top: 45vh; }
  .wandering-bubble { opacity: .55; }
}