/* =====================================================================
   Wedding invitation - burgundy, green, gold, ivory
   ===================================================================== */

:root {
  --brown: #7b2d42;
  --brown-72: rgba(123, 45, 66, 0.72);
  --brown-40: rgba(123, 45, 66, 0.4);
  --brown-20: rgba(123, 45, 66, 0.2);
  --brown-10: rgba(123, 45, 66, 0.1);
  --green: #2d5a3d;
  --cream: #f5efe0;
  --cream-70: rgba(245, 239, 224, 0.7);
  --cream-45: rgba(245, 239, 224, 0.45);
  --cream-40: rgba(245, 239, 224, 0.4);
  --paper: #f5efe0;
  --blush: #f0d8dc;
  --btn-text: #f5efe0;
  --gold: #c9a84c;
  --muted: #9a6070;

  --font-serif: "Times New Roman", Times, serif;
  --font-bask: Baskerville, "Libre Baskerville", "Times New Roman", serif;
  --font-script: "Viaoda Libre", "The Nautigal", cursive;
  --font-amp: "Ms Madi", cursive;
  --font-nautigal: "The Nautigal", cursive;
  --font-playfair: "Playfair Display", "Times New Roman", serif;
  --font-lora: "Lora", "Times New Roman", serif;

  --shadow-card: 4px 4px 2px rgba(0, 0, 0, 0.25);
  --shadow-decor: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.25));
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: #3d1822;
  color: var(--brown);
  font-family: var(--font-serif);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ol, ul, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }

.flip-x { transform: scaleX(-1); }

/* --------------------------------------------------------------------
   Floating decoration
   -------------------------------------------------------------------- */
@keyframes dbrFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--float, -8px)); }
}

.float {
  display: block;
  animation: dbrFloat var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}

.decor {
  position: absolute;
  display: block;
  pointer-events: none;
}

.decor img {
  width: 100%;
  max-width: none;
  object-fit: contain;
  filter: var(--shadow-decor);
}

/* --------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------- */
.page {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow-x: clip;
  opacity: 0;
  transition: opacity 0.8s ease 0.2s;
}

.page.is-visible { opacity: 1; }

.invite {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  background: var(--paper);
  color: var(--brown);
}

.invite__paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/img/paper.webp") left top / 666px 1000px repeat;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

.invite > * { position: relative; z-index: 1; }

@media (min-width: 768px) {
  .invite {
    max-width: 900px;
    border: 1px solid rgba(123, 45, 66, 0.13);
  }
}

/* --------------------------------------------------------------------
   Shared typography
   -------------------------------------------------------------------- */
.section-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--brown);
}

.section-title--sm { font-size: 16px; }

.card__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 28px;
  border: 1px solid var(--brown);
  border-radius: 999px;
  background: var(--brown);
  color: var(--btn-text);
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  transition: transform 0.2s ease;
}

.btn-pill:hover { transform: scale(1.03); }

.btn-pill--sm {
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: clip;
  padding: 40px 24px 48px;
  text-align: center;
}

.hero__castle {
  position: absolute;
  top: 3%;
  left: -59%;
  width: 208%;
  max-width: none;
  object-fit: contain;
  opacity: 0.15;
  pointer-events: none;
}

.hero__eyebrow {
  position: relative;
  z-index: 1;
  font-family: var(--font-playfair);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__ornament {
  position: relative;
  z-index: 1;
  width: 68px;
  margin-top: 28px;
  object-fit: contain;
}

.hero__envelope {
  position: relative;
  z-index: 1;
  width: 66%;
  max-width: 300px;
  margin-top: 32px;
}

.hero__envelope-inner {
  position: relative;
  aspect-ratio: 292 / 341;
}

.hero__env-back,
.hero__env-cover {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
  pointer-events: none;
}

.hero__env-back { inset: 0; z-index: 10; }
.hero__env-cover { top: 43.1%; z-index: 30; }

.hero__photo-wrap {
  position: absolute;
  left: 12%;
  top: 18%;
  z-index: 20;
  width: 79.5%;
}

.hero__photo {
  aspect-ratio: 232 / 206;
  border: 5px solid #fff;
  background: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  transform: rotate(3.92deg);
  overflow: hidden;
}

.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.hero__decor--flower { left: 65.8%; top: 69.5%; z-index: 35; width: 54.5%; }
.hero__decor--flower8 { left: -12%; top: 33.1%; z-index: 36; width: 39.4%; }
.hero__decor--string { left: 14.4%; top: 12.3%; z-index: 37; width: 22.3%; }

.hero__names {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 330px;
  margin-top: 26%;
}

.hero__name-row { position: relative; width: 100%; }

.hero__name-lines {
  position: absolute;
  inset: 8px 0 auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 11%;
  pointer-events: none;
}

.hero__name-lines img { width: 9%; max-width: 40px; object-fit: contain; }

.hero__name {
  position: relative;
  font-family: var(--font-script);
  font-size: clamp(30px, 10.2vw, 45px);
  line-height: 1;
}

.hero__amp {
  display: block;
  font-family: var(--font-amp);
  font-size: clamp(38px, 11.3vw, 50px);
  line-height: 1;
  color: var(--gold);
}

@media (min-width: 768px) {
  .hero__eyebrow { font-size: 18px; }
  .hero__ornament { width: 86px; }
  .hero__envelope { max-width: 390px; }
  .hero__photo { border-width: 7px; }
  .hero__names { max-width: 420px; }
}

/* --------------------------------------------------------------------
   Dark cards
   -------------------------------------------------------------------- */
.card-section {
  position: relative;
  isolation: isolate;
  width: 88%;
  max-width: 420px;
  margin: 0 auto;
}

.card-section--reception { margin-bottom: 16px; }
.card-section--schedule { margin: 16px auto; }

.card-section__decor { z-index: 20; }
.card-section__decor--left-1 { left: -35%; top: 53.3%; width: 50.2%; }
.card-section__decor--right-1 { left: 85%; top: 25.4%; width: 52.2%; transform: rotate(10deg); }
.card-section__decor--left-2 { left: -28%; top: 21.8%; width: 45%; }
.card-section__decor--right-2 { left: 75.6%; top: 71.8%; width: 53.1%; transform: rotate(-16.74deg); }
.card-section__decor--right-3 { left: 78.9%; bottom: 5%; width: 45%; }

.card {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  padding: 36px 20px 40px;
  text-align: center;
  color: var(--cream);
  background: var(--brown);
  box-shadow: var(--shadow-card);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("../assets/img/paper.webp") center / cover;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

.card--reception,
.card--schedule { border-radius: 10px; padding: 36px 20px; }
.card--reception { background: var(--green); }
.card--schedule { padding: 36px 24px; }

.card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.card__inner--left { gap: 16px; padding: 0 8px; align-items: stretch; }

@media (min-width: 768px) {
  .card-section { max-width: 560px; }
  .card-section__decor--left-1 { left: -25%; top: 50%; width: 45.2%; }
  .card-section__decor--right-1 { left: 80%; top: 15%; width: 50.2%; }
  .card-section__decor--left-2 { left: -30.5%; top: 25%; }
  .card-section__decor--right-2 { width: 45%; }
  .card-section__decor--right-3 { width: 30%; }
}

/* Parents */
.parents {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 16px;
  font-family: var(--font-bask);
  font-size: 12px;
}

.parents__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.parents__label { color: var(--cream-70); }
.parents__name { font-weight: 600; overflow-wrap: anywhere; }

.parents__divider {
  align-self: center;
  width: 1px;
  height: 50px;
  background: var(--cream-40);
}

.card__announce {
  font-family: var(--font-bask);
  font-size: 12px;
  line-height: 1.5;
}

/* Couple */
.couple {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.couple__name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  min-height: 80px;
  font-family: var(--font-script);
  font-size: 38px;
  font-weight: 400;
  line-height: 52px;
  white-space: nowrap;
}

.couple__amp {
  font-family: var(--font-amp);
  font-size: 35px;
  line-height: 1;
  color: var(--gold);
}

/* Event */
.event {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: var(--font-bask);
}

.event__header {
  font-size: 16px;
  line-height: 1.5;
  color: var(--cream-70);
}

.event__header::first-line { text-transform: uppercase; }

.event__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 190px;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream-70);
}

.event__meta--narrow { max-width: 170px; font-size: 13px; }

.date-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--cream);
}

.date-block__day {
  font-family: var(--font-bask);
  font-size: 50px;
  line-height: 1;
}

.date-block__sep {
  width: 1px;
  height: 46px;
  background: var(--cream-45);
}

.date-block__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: left;
}

.date-block__right--reception { font-size: 12px; }
.date-block__right--reception .date-block__year { font-size: 18px; }

@media (min-width: 768px) {
  .card__announce { font-size: 13px; }
  .couple { gap: 16px; }
  .couple__name { line-height: 60px; }
  .event { gap: 20px; }
  .event__header { font-size: 18px; }
  .event__meta { max-width: 220px; font-size: 14px; }
  .event__meta--narrow { font-size: 15px; }
  .date-block__day { font-size: 57px; }
  .date-block__right { font-size: 18px; }
  .date-block__right--reception { font-size: 16px; }
  .date-block__right--reception .date-block__year { font-size: 24px; }
}

/* --------------------------------------------------------------------
   Gallery / carousel
   -------------------------------------------------------------------- */
.gallery {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: clip;
  padding: 40px 24px;
}

.gallery__line {
  position: absolute;
  top: 42px;
  z-index: 2;
  width: 11.8%;
  max-width: 49px;
  object-fit: contain;
  pointer-events: none;
}

.gallery__line--l { left: 13.9%; }
.gallery__line--r { right: 13.9%; }

.carousel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  margin-top: 20px;
}

.carousel__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 340px;
  perspective: 1000px;
  touch-action: pan-y;
  user-select: none;
}

.carousel__item {
  position: absolute;
  height: 92%;
  aspect-ratio: 0.75 / 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 1.1s ease-in-out, opacity 1.1s ease-in-out;
  will-change: transform, opacity;
}

.carousel__item.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 20px 25px -5px rgba(0, 0, 0, 0.1); }

.carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 239, 224, 0.6);
  color: var(--brown);
  font-size: 22px;
  line-height: 1;
  transform: translateY(-50%);
  transition: background 0.2s;
}

.carousel__arrow:hover { background: var(--cream); }
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.25;
  transition: width 0.3s, opacity 0.3s;
}

.carousel__dot:hover { opacity: 0.4; }
.carousel__dot.is-active { width: 24px; opacity: 0.7; }

@media (min-width: 768px) {
  .carousel { max-width: 600px; }
  .carousel__stage { height: 520px; }
  .carousel__arrow { display: flex; }
}

/* --------------------------------------------------------------------
   Reception / countdown / calendar
   -------------------------------------------------------------------- */
.reception {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: var(--font-bask);
}

.reception__heading {
  font-family: var(--font-bask);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
}

.times {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 16px;
}

.times__item { display: flex; flex-direction: column; align-items: center; }

.times__label {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream-70);
}

.times__value {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 500;
}

.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  color: var(--cream-70);
}

.countdown__title {
  font-family: var(--font-bask);
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}

.countdown__value {
  margin-top: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.calendar-wrap {
  margin-top: 12px;
  max-width: 100%;
  padding: 8px 16px 16px;
  border-radius: 10px;
  background: var(--blush);
  overflow: hidden;
}

.calendar {
  width: 280px;
  max-width: 100%;
  color: var(--brown);
  font-family: var(--font-serif);
}

.calendar__month {
  padding: 10px 0;
  border-bottom: 1px solid rgba(123, 45, 66, 0.27);
  font-family: var(--font-nautigal);
  font-size: 25px;
  line-height: 1.2;
  text-align: center;
}

.calendar__weekdays,
.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar__weekdays {
  border-bottom: 2px solid var(--brown);
  font-size: 10px;
  font-weight: 500;
  opacity: 0.6;
}

.calendar__weekdays span { padding: 6px 0; text-align: center; }

.calendar__days {
  row-gap: 2px;
  padding: 8px 4px;
}

.calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  font-size: 12px;
}

.calendar__day--marked {
  position: relative;
}

.calendar__heart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
}

.calendar__heart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--gold);
}

.calendar__heart span {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.calendar-link {
  display: inline-flex;
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rsvp-cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .reception { gap: 20px; }
  .reception__heading { font-size: 26px; }
  .times__value { font-size: 20px; }
  .countdown__value { font-size: 18px; }
  .calendar { width: 330px; }
  .calendar__weekdays { font-size: 11px; }
  .calendar__day { height: 34px; font-size: 13px; }
  .calendar__heart { width: 30px; height: 28px; }
  .calendar__heart span { font-size: 12px; }
}

/* --------------------------------------------------------------------
   Venue
   -------------------------------------------------------------------- */
.venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
}

.venue__address {
  max-width: 250px;
  margin-top: -8px;
  font-family: var(--font-bask);
  font-size: 12px;
  line-height: 1.6;
  color: var(--brown-72);
}

.venue__map {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 340 / 260;
  border-radius: 12px;
  overflow: hidden;
  background: #e5e3dd;
}

.venue__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.venue__directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  font-family: var(--font-bask);
  font-size: 14px;
  font-weight: 600;
  color: var(--brown-72);
  text-decoration: none;
  transition: transform 0.2s;
}

.venue__directions:hover { transform: scale(1.03); }

@media (min-width: 768px) {
  .venue { gap: 20px; }
  .venue__address { max-width: 440px; font-size: 14px; }
  .venue__map { max-width: 560px; aspect-ratio: 560 / 320; }
  .venue__directions { font-size: 16px; }
}

/* --------------------------------------------------------------------
   Dress code
   -------------------------------------------------------------------- */
.dresscode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 24px;
}

.dresscode__text {
  margin-top: -16px;
  font-size: 14px;
  text-align: center;
}

.dresscode__colors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.dresscode__swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.dresscode__swatch--light { border: 1.5px solid rgba(123, 45, 66, 0.19); }

@media (min-width: 768px) {
  .dresscode { padding: 48px 40px; }
  .dresscode__text { font-size: 16px; }
  .dresscode__colors { gap: 24px; }
  .dresscode__swatch { width: 48px; height: 48px; }
}

/* --------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------- */
.timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  row-gap: 32px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  text-align: left;
}

.timeline__item { display: contents; }

.timeline__time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  padding-top: 2px;
  font-size: 16px;
  letter-spacing: 0.025em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--cream);
}

.timeline__icon {
  flex-shrink: 0;
  width: var(--icon, 44px);
  height: var(--icon, 44px);
  object-fit: contain;
}

.timeline__axis {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.timeline__axis::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -32px;
  bottom: -32px;
  width: 1px;
  background: var(--cream-40);
  transform: translateX(-50%);
}

.timeline__item:first-child .timeline__axis::before { top: 50%; }
.timeline__item:last-child .timeline__axis::before { bottom: 50%; }

.timeline__dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 2px rgba(245, 239, 224, 0.13);
}

.timeline__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cream-70);
}

@media (min-width: 768px) {
  .timeline { column-gap: 32px; row-gap: 40px; }
  .timeline__time { font-size: 17px; }
  .timeline__axis::before { top: -40px; bottom: -40px; }
  .timeline__label { font-size: 15px; }
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px 32px;
  text-align: center;
}

.footer__text { font-size: 11px; }
.footer__credit { font-size: 12px; opacity: 0.5; }

@media (min-width: 768px) {
  .footer__text { font-size: 13px; }
}

/* --------------------------------------------------------------------
   Music button
   -------------------------------------------------------------------- */
.music {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s;
}

.page.is-visible .music { opacity: 1; transform: none; }

.music__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(to bottom right, rgba(123, 45, 66, 0.8), var(--brown), rgba(123, 45, 66, 0.87));
  box-shadow: inset 0 0 0 2px var(--gold);
}

.music__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(to top right, rgba(255, 255, 255, 0.3), transparent 50%);
}

.music.is-playing .music__ring { animation: spinCd 3s linear infinite; }

.music__bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.music__bars i {
  display: block;
  width: 3px;
  height: 20%;
  border-radius: 1px;
  background: #fff;
}

.music.is-playing .music__bars i:nth-child(1) { animation: dance 0.4s ease-in-out infinite; }
.music.is-playing .music__bars i:nth-child(2) { animation: dance 0.4s ease-in-out 0.1s infinite; }
.music.is-playing .music__bars i:nth-child(3) { animation: dance 0.4s ease-in-out 0.2s infinite; }
.music.is-playing .music__bars i:nth-child(4) { animation: dance 0.4s ease-in-out 0.3s infinite; }

.music:not(.is-playing) .music__bars i:nth-child(odd) { height: 60%; }
.music:not(.is-playing) .music__bars i:nth-child(even) { height: 35%; }

@keyframes spinCd { to { transform: rotate(360deg); } }
@keyframes dance { 0%, 100% { height: 20%; } 50% { height: 100%; } }

/* --------------------------------------------------------------------
   Envelope intro
   -------------------------------------------------------------------- */
.envelope {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(to bottom right, #9a3d52, #7b2d42, #2d5a3d);
}

.envelope.is-leaving { animation: envelopeAway 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.envelope.is-gone { display: none; }

.envelope__ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.envelope__ambient span {
  position: absolute;
  top: -30px;
  animation: ambientFall var(--dur, 20s) ease-in-out var(--delay, 0s) infinite;
}

.envelope__card-wrap {
  position: relative;
  z-index: 10;
  width: 310px;
}

.envelope__seal {
  position: absolute;
  left: 50%;
  top: 50px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #7b2d42, #3d1822);
  box-shadow: 0 4px 20px rgba(123, 45, 66, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  animation: sealPulse 2s ease-in-out infinite;
}

.envelope.is-leaving .envelope__seal { animation: sealBreak 0.7s ease-out forwards; }

.envelope__card {
  position: relative;
  border-radius: 8px;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 40px rgba(123, 45, 66, 0.15);
}

.envelope__card-bg {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--blush) 40%, var(--cream));
  border: 1px solid rgba(123, 45, 66, 0.15);
  clip-path: inset(0 round 8px);
}

.envelope__flower {
  position: absolute;
  width: auto;
  height: 144px;
  max-width: none;
  opacity: 0.8;
  pointer-events: none;
}

.envelope__flower--tl {
  top: -10%;
  left: -35px;
  transform: translateX(-6%) rotate(25deg);
}

.envelope__flower--br {
  bottom: -10%;
  right: -35px;
  transform: translateX(6%) scaleX(-1) rotate(25deg);
}

.envelope__content {
  position: relative;
  z-index: 10;
  padding: 112px 24px 56px;
  text-align: center;
}

.envelope__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
  font-family: var(--font-script);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--brown);
}

.envelope__name { display: block; }

.envelope__amp {
  display: block;
  font-family: var(--font-bask);
  font-size: 18px;
  line-height: 1;
}

.envelope__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.envelope__line { width: 40px; height: 1px; }
.envelope__line--l { background: linear-gradient(to right, transparent, var(--gold)); }
.envelope__line--r { background: linear-gradient(to left, transparent, var(--gold)); }
.envelope__fleuron { font-size: 14px; color: var(--gold); }

.envelope__date,
.envelope__invite {
  font-family: var(--font-lora);
  font-size: 18px;
  color: var(--brown-72);
}

.envelope__date { margin-bottom: 20px; }
.envelope__invite { margin-bottom: 32px; font-weight: 300; }

.envelope__open {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 32px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--brown);
  color: var(--cream);
  font-family: var(--font-lora);
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(123, 45, 66, 0.35);
  user-select: none;
  transition: transform 0.2s;
}

.envelope__open:hover { transform: scale(1.04); }

.envelope__shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 32px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine { 0% { left: -100%; } 50%, 100% { left: 100%; } }

@keyframes sealPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 4px 20px rgba(123, 45, 66, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3); }
  50% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 6px 35px rgba(123, 45, 66, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3); }
}

@keyframes sealBreak {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; filter: brightness(1); }
  30% { transform: translate(-50%, -50%) scale(1.15) rotate(5deg); opacity: 0.9; filter: brightness(1.3); }
  60% { transform: translate(-50%, -50%) scale(1.05) rotate(-3deg); opacity: 0.5; filter: brightness(1.5); }
  100% { transform: translate(-50%, -50%) scale(0) rotate(15deg); opacity: 0; filter: brightness(2); }
}

@keyframes envelopeAway {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  15% { transform: translateY(10px) rotate(0.5deg); opacity: 1; }
  100% { transform: translateY(-120vh) rotate(-2deg); opacity: 0; }
}

@keyframes ambientFall {
  0% { transform: translateY(-8vh) translateX(0) rotate(0); opacity: 0; }
  10% { opacity: 0.5; }
  50% { transform: translateY(48vh) translateX(var(--sway, 20px)) rotate(180deg); opacity: 0.6; }
  92% { opacity: 0.45; }
  100% { transform: translateY(105vh) translateX(0) rotate(360deg); opacity: 0; }
}

@media (min-width: 640px) {
  .envelope__card-wrap { width: 340px; }
  .envelope__names { font-size: 36px; }
  .envelope__amp { font-size: 20px; }
}

@media (min-width: 768px) {
  .envelope__card-wrap { width: 520px; }
  .envelope__flower { height: 280px; }
  .envelope__flower--tl { top: -20%; transform: translateX(-11%) rotate(25deg); }
  .envelope__flower--br { bottom: auto; top: 53%; transform: translateX(11%) scaleX(-1) rotate(25deg); }
  .envelope__content { padding: 96px 32px 32px; }
}

@media (min-width: 1024px) {
  .envelope__card-wrap { width: 600px; }
}

/* --------------------------------------------------------------------
   Modals (native <dialog>)
   -------------------------------------------------------------------- */
.modal {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brown);
}

.modal::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); }
.modal[open] { display: flex; align-items: center; justify-content: center; }

.modal__box {
  position: relative;
  width: calc(100% - 32px);
  max-width: 400px;
  padding: 32px 24px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  animation: modalIn 0.25s ease-out;
}

.modal__close {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: #555;
  font-size: 14px;
  line-height: 1;
}

.modal__close:hover { background: rgba(0, 0, 0, 0.12); }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* RSVP */
.modal--rsvp { font-family: "Inter", system-ui, -apple-system, sans-serif; color: #1f1f1f; }

.rsvp__title { font-family: "Montserrat", system-ui, sans-serif; font-size: 22px; font-weight: 700; }
.rsvp__subtitle { margin-top: 6px; font-size: 14px; line-height: 1.45; color: #555; }
.rsvp__form { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }

.rsvp__field { display: flex; flex-direction: column; gap: 8px; }
.rsvp__field > span,
.rsvp__field > legend { margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.rsvp__field legend { padding: 0; }

.rsvp__field input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  outline: none;
}

.rsvp__field input[type="text"]:focus { border-color: var(--brown); box-shadow: 0 0 0 3px var(--brown-10); }

.rsvp__option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  background: #fafafa;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.rsvp__option input { position: absolute; opacity: 0; pointer-events: none; }

.rsvp__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e9e9e9;
  color: #777;
  font-size: 13px;
  transition: background 0.2s, color 0.2s;
}

.rsvp__option:has(input:checked) { border-color: var(--brown); background: var(--blush); }
.rsvp__option:has(input:checked) .rsvp__option-icon { background: var(--brown); color: #fff; }

.rsvp__submit {
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--brown);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.2s, transform 0.2s;
}

.rsvp__submit:disabled { background: #c9a3ab; cursor: not-allowed; }
.rsvp__submit:not(:disabled):hover { transform: translateY(-1px); }

.rsvp__thanks { margin-top: 24px; font-size: 15px; line-height: 1.5; text-align: center; }

/* Lightbox */
.modal--lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }

.modal--lightbox[open] {
  flex-direction: column;
  align-items: center;
  padding: 40px 8px 16px;
  color: #fff;
}

.lightbox__close {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 20px;
}

.lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }

.lightbox__counter {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  font-family: system-ui, sans-serif;
  font-size: 14px;
}

.lightbox__stage {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1024px;
  min-height: 0;
  padding: 0 32px;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  user-select: none;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  transform: translateY(-50%);
}

.lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--next { right: 0; }

.lightbox__thumbs {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  max-width: 90vw;
  margin-top: 12px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  overflow-x: auto;
  scrollbar-width: none;
}

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

.lightbox__thumb {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}

.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: 1; }
.lightbox__thumb.is-active { opacity: 1; outline: 2px solid var(--brown); outline-offset: 2px; transform: scale(1.05); }

@media (min-width: 640px) {
  .modal--lightbox[open] { padding: 48px 16px 24px; }
  .lightbox__thumb { width: 64px; height: 64px; border-radius: 8px; }
  .lightbox__nav { font-size: 40px; width: 48px; height: 48px; }
}

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