:root {
  --midnight: #121018;
  --plum: #2A1C2E;
  --parchment: #E7D8BF;
  --rose: #B98783;
  --leaf: #66765A;
  --silver: #C9C3B6;
  --wine: #4A1F2A;
  --orchid: #D9A7C7;
  --mx: 50vw;
  --my: 45vh;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--parchment);
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(217, 167, 199, 0.18), transparent 18rem),
    radial-gradient(circle at 80% 15%, rgba(185, 135, 131, 0.16), transparent 28rem),
    linear-gradient(135deg, var(--midnight), var(--plum) 48%, var(--midnight));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 34%, rgba(201, 195, 182, 0.08) 35%, transparent 37% 100%),
    radial-gradient(ellipse at 50% 105%, rgba(201, 195, 182, 0.14), transparent 46%);
  mix-blend-mode: screen;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: #E7D8BF;
  opacity: 0;
  animation: cameraFlash 1.4s ease-out .2s 1;
}

.spotlight {
  position: fixed;
  left: var(--mx);
  top: var(--my);
  width: 24rem;
  height: 14rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  transform: translate(-50%, -50%) rotate(-12deg);
  background:
    radial-gradient(ellipse, rgba(231, 216, 191, 0.18), rgba(217, 167, 199, 0.09) 42%, transparent 70%);
  filter: blur(8px);
  mix-blend-mode: screen;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: .15;
  background-image:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.9) 0 1px, transparent 1.5px);
  background-size: 3px 3px, 5px 5px;
  mix-blend-mode: overlay;
}

.botanical-shadows {
  position: fixed;
  inset: -20vh -10vw;
  overflow: hidden;
  pointer-events: none;
  filter: blur(1px);
  opacity: .42;
}

.leaf {
  position: absolute;
  width: 42vw;
  height: 16vw;
  border: 1px solid rgba(102, 118, 90, .35);
  border-radius: 100% 0 100% 0;
  background: linear-gradient(90deg, transparent, rgba(102, 118, 90, .24), transparent);
  transform-origin: center;
}

.leaf::after {
  content: "";
  position: absolute;
  inset: 50% 5% auto 5%;
  border-top: 1px solid rgba(201, 195, 182, .28);
}

.leaf-one { left: -5vw; top: 12vh; animation: driftOne 21s ease-in-out infinite alternate; }
.leaf-two { right: -9vw; top: 34vh; transform: rotate(120deg); animation: driftTwo 25s ease-in-out infinite alternate; }
.leaf-three { left: 25vw; bottom: -3vh; transform: rotate(-24deg); animation: driftThree 28s ease-in-out infinite alternate; }

.salon { position: relative; z-index: 2; min-height: 100vh; padding: 2rem clamp(1rem, 4vw, 4rem) 4rem; }

.invitation-tabs {
  position: fixed;
  top: 1.2rem;
  right: clamp(1rem, 4vw, 4rem);
  z-index: 10;
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
}

.invitation-tabs a, .seal, .close-room {
  color: var(--parchment);
  text-decoration: none;
  font-family: "Marcellus", Georgia, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .72rem;
  border: 1px solid rgba(201, 195, 182, .38);
  background: rgba(42, 28, 46, .44);
  border-radius: 999px;
  padding: .65rem .9rem;
  box-shadow: inset 0 0 18px rgba(201, 195, 182, .08);
  backdrop-filter: blur(10px);
}

.tableau {
  min-height: 58vh;
  display: grid;
  align-content: end;
  padding-top: 7rem;
  padding-bottom: 3rem;
}

.eyebrow, .card-meta, .stamp, .guestbook-strip span, .room-key {
  font-family: "Marcellus", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  color: var(--silver);
}

h1 {
  margin: .1rem 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(4.8rem, 17vw, 15rem);
  line-height: .74;
  letter-spacing: .045em;
  color: var(--parchment);
  text-shadow: 0 0 1px #fff, 0 0 40px rgba(217, 167, 199, .24), 0 16px 42px rgba(0,0,0,.6);
  animation: revealWordmark 2.2s cubic-bezier(.2,.8,.1,1) both;
}

.whisper {
  max-width: 44rem;
  margin: 1.35rem 0 1.8rem;
  color: rgba(231, 216, 191, .76);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.35rem, 2.8vw, 2.4rem);
}

.seal { cursor: pointer; width: max-content; color: var(--orchid); }

.invitation-deck {
  position: relative;
  min-height: 86vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(5rem, auto);
  gap: clamp(.85rem, 2vw, 1.6rem);
  perspective: 1200px;
}

.card, .guestbook-strip {
  position: relative;
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid rgba(201, 195, 182, .36);
  background:
    linear-gradient(135deg, rgba(231, 216, 191, .11), transparent 32%),
    linear-gradient(160deg, rgba(74, 31, 42, .9), rgba(42, 28, 46, .82));
  box-shadow: 0 28px 80px rgba(0,0,0,.46), inset 0 0 0 1px rgba(231,216,191,.06);
  padding: clamp(1.1rem, 2.3vw, 2rem);
  min-height: 18rem;
  transform: translateY(50px) rotate(var(--rot, 0deg));
  opacity: 0;
  animation: slideInvitations .9s cubic-bezier(.16,.8,.22,1) forwards;
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
  cursor: pointer;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(217,167,199,.26), transparent 18rem),
    repeating-linear-gradient(115deg, transparent 0 18px, rgba(201,195,182,.035) 19px 20px);
  opacity: .2;
  mix-blend-mode: screen;
}

.card::after {
  content: "✦";
  position: absolute;
  right: 1rem;
  top: .8rem;
  color: var(--silver);
  opacity: .54;
  text-shadow: 0 0 16px var(--orchid);
}

.card:hover, .card.is-hovered {
  transform: translateY(-12px) rotate(calc(var(--rot, 0deg) * .45)) rotateX(4deg) rotateY(-5deg) scale(1.025);
  border-color: rgba(217, 167, 199, .72);
  box-shadow: 0 38px 110px rgba(0,0,0,.58), 0 0 44px rgba(217,167,199,.17), inset 0 0 34px rgba(201,195,182,.12);
}

.chrome-border {
  position: absolute;
  inset: .7rem;
  border-radius: 1rem;
  border: 1px solid rgba(201, 195, 182, .28);
  pointer-events: none;
}

.chrome-border::before, .chrome-border::after {
  content: "";
  position: absolute;
  width: 4.5rem;
  height: 1.2rem;
  border-top: 1px solid rgba(201,195,182,.56);
  border-radius: 100% 0;
}

.chrome-border::before { left: 1rem; top: -.1rem; transform: rotate(-12deg); }
.chrome-border::after { right: 1rem; bottom: -.1rem; transform: rotate(168deg); }

.main-card { --rot: -4deg; grid-column: 1 / span 6; grid-row: 1 / span 4; animation-delay: .18s; }
.rsvp-slip { --rot: 5deg; grid-column: 7 / span 3; grid-row: 1 / span 3; animation-delay: .3s; }
.token-card { --rot: -8deg; grid-column: 10 / span 3; grid-row: 2 / span 3; border-radius: 50%; aspect-ratio: 1; min-height: 19rem; animation-delay: .42s; }
.orbit-card { --rot: 3deg; grid-column: 2 / span 4; grid-row: 5 / span 3; animation-delay: .54s; }
.terrace-card { --rot: -2deg; grid-column: 6 / span 5; grid-row: 4 / span 4; animation-delay: .66s; }

.guestbook-strip {
  grid-column: 4 / span 8;
  grid-row: 8 / span 1;
  min-height: auto;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(231,216,191,.74);
  animation-delay: .78s;
}

.card h2 {
  position: relative;
  margin: 1rem 0 .5rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4.4vw, 4.9rem);
  font-weight: 600;
  line-height: .88;
  color: var(--parchment);
}

.rsvp-slip h2, .token-card h2 { font-size: clamp(1.8rem, 3vw, 3.1rem); }

.poetic {
  position: relative;
  max-width: 28rem;
  color: rgba(231,216,191,.7);
  line-height: 1.55;
  opacity: .58;
  transform: translateY(.4rem);
  transition: opacity .45s ease, transform .45s ease;
}

.card:hover .poetic, .card.is-hovered .poetic { opacity: 1; transform: translateY(0); }

.photo-fragment, .photo-token {
  position: relative;
  min-height: 10rem;
  margin: 1rem 0;
  border-radius: .7rem;
  border: .55rem solid rgba(231,216,191,.86);
  color: rgba(18,16,24,.7);
  display: grid;
  place-items: end start;
  padding: .7rem;
  overflow: hidden;
  filter: sepia(.35) saturate(.7) contrast(.9);
  background:
    radial-gradient(circle at 65% 35%, rgba(231,216,191,.65), transparent 10%),
    linear-gradient(135deg, rgba(102,118,90,.48), rgba(185,135,131,.35)),
    var(--silver);
}

.photo-fragment::before, .photo-token::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18,16,24,.35), transparent 45%, rgba(231,216,191,.28)), radial-gradient(circle at 20% 85%, rgba(74,31,42,.55), transparent 32%);
  transform: translateX(-70%);
  transition: transform .7s ease;
}

.card:hover .photo-fragment::before, .card:hover .photo-token::before, .card.is-hovered .photo-fragment::before, .card.is-hovered .photo-token::before { transform: translateX(0); }

.bar-photo { min-height: 13rem; background: linear-gradient(40deg, rgba(102,118,90,.55), rgba(231,216,191,.55)), var(--silver); }
.orbit-photo { min-height: 11rem; background: linear-gradient(120deg, rgba(74,31,42,.72), rgba(185,135,131,.45)), var(--silver); }
.terrace-photo { min-height: 14rem; background: radial-gradient(circle at 72% 22%, rgba(217,167,199,.62), transparent 15%), linear-gradient(140deg, rgba(18,16,24,.45), rgba(102,118,90,.42)), var(--silver); }

.photo-token {
  width: 72%;
  aspect-ratio: 1;
  min-height: auto;
  margin: 1rem auto;
  border-radius: 50%;
  place-items: center;
}

.photo-fragment span, .photo-token span { position: relative; font-family: "Marcellus", serif; text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; }
.stamp { display: inline-block; margin-top: 1rem; color: var(--orchid); transform: rotate(-6deg); }
.thread { position: absolute; width: 12rem; height: 1px; right: -4rem; bottom: 2rem; background: linear-gradient(90deg, transparent, var(--silver), transparent); transform: rotate(-34deg); }
.wax-moon { position: absolute; width: 4rem; height: 4rem; right: 1.4rem; bottom: 1.2rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--orchid), var(--wine)); box-shadow: inset 0 0 20px rgba(18,16,24,.45), 0 0 28px rgba(217,167,199,.24); opacity: .75; }

.room-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr);
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(1.2rem, 5vw, 5rem);
  background: radial-gradient(circle at var(--mx) var(--my), rgba(217,167,199,.2), transparent 20rem), linear-gradient(135deg, rgba(18,16,24,.97), rgba(42,28,46,.96));
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .75s cubic-bezier(.16,.8,.22,1), opacity .55s ease;
}

.room-overlay.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.close-room { position: absolute; top: 1.2rem; right: 1.2rem; cursor: pointer; }

.room-photo {
  align-self: stretch;
  border: 1.1rem solid rgba(231,216,191,.88);
  border-radius: 1.4rem;
  background: var(--room-bg, linear-gradient(135deg, var(--leaf), var(--rose)));
  box-shadow: 0 40px 120px rgba(0,0,0,.58), inset 0 0 80px rgba(18,16,24,.24);
  filter: sepia(.35) saturate(.75);
  position: relative;
  overflow: hidden;
}

.room-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(18,16,24,.45), transparent 45%, rgba(231,216,191,.22)), repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.04) 8px); animation: curtainWipe 8s ease-in-out infinite alternate; }
.room-copy { align-self: end; padding-bottom: 5vh; }
.room-copy h2 { margin: .4rem 0 1rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(3.2rem, 8vw, 8rem); line-height: .8; font-weight: 600; }
.room-copy p { color: rgba(231,216,191,.78); font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.8; max-width: 42rem; }

@keyframes cameraFlash { 0% { opacity: 0; } 8% { opacity: .95; } 16% { opacity: .08; } 23% { opacity: .55; } 100% { opacity: 0; } }
@keyframes revealWordmark { from { opacity: 0; filter: blur(14px); transform: translateY(1rem) scale(.96); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes slideInvitations { to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); } }
@keyframes driftOne { to { transform: translate(8vw, 8vh) rotate(18deg); } }
@keyframes driftTwo { to { transform: translate(-9vw, 3vh) rotate(102deg); } }
@keyframes driftThree { to { transform: translate(5vw, -9vh) rotate(-38deg); } }
@keyframes curtainWipe { from { transform: translateX(-8%); } to { transform: translateX(8%); } }

@media (max-width: 900px) {
  .invitation-tabs { position: relative; right: auto; top: auto; margin-bottom: 2rem; }
  .tableau { min-height: 48vh; padding-top: 2rem; }
  .invitation-deck { display: block; min-height: auto; }
  .card, .guestbook-strip { margin: 1.2rem 0; min-height: 18rem; }
  .token-card { border-radius: 1.35rem; aspect-ratio: auto; }
  .guestbook-strip { display: block; }
  .room-overlay { grid-template-columns: 1fr; overflow-y: auto; }
  .room-photo { min-height: 48vh; }
}