@import url("./.impeccable/build/scaffold/layout.css");

:root {
  color-scheme: light;
  --ivory: #ece5d9;
  --ivory-light: #f7f2e9;
  --ink: #221f1b;
  --gold: #755a2d;
  --gold-bright: #c7aa74;
  --wine: #6f281f;
  --wine-dark: #4e1712;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; background: #d8d0c5; }

body {
  margin: 0;
  min-width: 320px;
  background: #d8d0c5;
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 2px;
  transform: scaleY(var(--scroll-progress, 0));
  transform-origin: top;
  background: var(--gold);
  pointer-events: none;
}

.heart-fireworks {
  position: fixed;
  inset: 0;
  z-index: 29;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

button, a { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 5px;
}

::selection { color: var(--ivory-light); background: var(--wine); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.music-control {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, calc((100vw - 480px) / 2 + 16px));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(111, 40, 31, 0.48);
  border-radius: 50%;
  color: var(--wine);
  background: rgba(247, 242, 233, 0.94);
  box-shadow: 0 8px 24px rgba(54, 38, 27, 0.16);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(0.9);
  cursor: pointer;
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out), background-color 0.25s ease;
}

body.invitation-open .music-control { opacity: 1; pointer-events: auto; transform: none; }
.music-control:hover { background: #fffaf1; }
.music-control:active { transform: scale(0.94); }
.music-control__disc { display: grid; place-items: center; width: 38px; height: 38px; }
.music-control__disc svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.music-control.is-playing .music-control__disc { animation: record-spin 7s linear infinite; }
.music-control__bars { position: absolute; right: 3px; bottom: 2px; display: flex; align-items: end; gap: 2px; width: 13px; height: 12px; padding: 2px; border-radius: 6px; background: var(--wine); }
.music-control__bars i { width: 2px; height: 3px; border-radius: 2px; background: var(--ivory-light); transform-origin: bottom; }
.music-control.is-playing .music-control__bars i { animation: music-bar 0.8s ease-in-out infinite alternate; }
.music-control.is-playing .music-control__bars i:nth-child(2) { animation-delay: -0.35s; }
.music-control.is-playing .music-control__bars i:nth-child(3) { animation-delay: -0.6s; }
.music-control:not(.is-playing) .music-control__bars i { height: 2px; }

.invitation-shell {
  position: relative;
  width: min(100%, 480px);
  margin-inline: auto;
  background: var(--ivory);
  box-shadow: 0 18px 60px rgba(46, 34, 26, 0.2);
  overflow: hidden;
}

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background: var(--ivory-light);
}

.paper-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.34;
  background-image:
    repeating-linear-gradient(97deg, transparent 0 7px, rgba(87, 66, 42, 0.025) 8px, transparent 9px),
    repeating-linear-gradient(3deg, transparent 0 11px, rgba(255, 255, 255, 0.34) 12px, transparent 13px);
}

.botanical {
  position: absolute;
  top: -3%;
  right: -6%;
  width: 42%;
  z-index: 0;
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate3d(12px, -12px, 0);
  transition: opacity 1.4s 1s var(--ease-out), transform 1.6s 1s var(--ease-out);
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: 80%;
  margin-top: -3vh;
  text-align: center;
}

.family-line {
  margin: 0 0 clamp(2.2rem, 7vh, 4rem);
  font-family: "Aboreto", serif;
  font-size: clamp(0.58rem, 2.2vw, 0.72rem);
  letter-spacing: 0.24em;
  line-height: 1.7;
  color: #6d5635;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s 0.65s var(--ease-out), transform 1s 0.65s var(--ease-out);
}

.couple-names {
  display: grid;
  justify-items: center;
  gap: clamp(0.55rem, 2vh, 1rem);
  margin: 0;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
}

.couple-names span {
  display: block;
  font-size: clamp(3.1rem, 15vw, 5.25rem);
  opacity: 0;
  filter: blur(7px);
  transform: translateY(24px);
  transition: opacity 1s var(--ease-out), filter 1.4s var(--ease-out), transform 1.4s var(--ease-out);
}

.couple-names span:first-child { transition-delay: 0.45s; }
.couple-names span:last-child { transition-delay: 0.62s; }

.couple-names b {
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: clamp(2.1rem, 9vw, 3.1rem);
  font-weight: 400;
  font-style: italic;
  opacity: 0;
  transform: scale(0.72) rotate(-9deg);
  transition: opacity 0.8s 0.55s var(--ease-out), transform 1.2s 0.55s var(--ease-out);
}

.hero-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: clamp(2rem, 6vh, 3.5rem) 0 0;
  font-family: "Aboreto", serif;
  font-size: clamp(1.5rem, 6vw, 2rem);
  letter-spacing: 0.2em;
  color: #634c2e;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s 0.82s var(--ease-out), transform 1.1s 0.82s var(--ease-out);
}

.hero-date i { width: 30px; height: 1px; background: var(--gold); }

.hero-place {
  margin: 1.1rem 0 0;
  color: #5f5549;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s 0.96s var(--ease-out), transform 1.1s 0.96s var(--ease-out);
}

.curtain {
  position: absolute;
  inset-block: -8%;
  z-index: 4;
  width: 68%;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.78), rgba(213,201,183,0.55) 38%, rgba(255,255,255,0.88) 75%, rgba(176,157,133,0.24)),
    repeating-linear-gradient(94deg, transparent 0 18px, rgba(101,80,54,0.035) 19px, transparent 34px);
  box-shadow: 0 22px 70px rgba(56, 41, 29, 0.16);
  transition: transform 1.8s var(--ease-out), filter 1.5s var(--ease-out);
}

.curtain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,0.72) 38%, transparent 55%);
  transform: translateX(-20%);
}

.curtain--left { left: -18%; clip-path: ellipse(75% 68% at 24% 50%); }
.curtain--right { right: -18%; clip-path: ellipse(75% 68% at 76% 50%); transform: scaleX(-1); }

.seal {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  border-radius: 48% 52% 45% 55% / 54% 45% 55% 46%;
  color: #dec79c;
  background: radial-gradient(circle at 38% 34%, #9a4436 0, var(--wine) 42%, var(--wine-dark) 100%);
  box-shadow: 0 9px 22px rgba(55, 20, 15, 0.28), inset 0 0 0 4px rgba(221,177,128,0.11);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.7s var(--ease-out), box-shadow 0.25s ease;
}

.seal:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 12px 28px rgba(55, 20, 15, 0.34), inset 0 0 0 4px rgba(221,177,128,0.16); }
.seal:active { transform: translate(-50%, -50%) scale(0.96); }
.seal__edge { position: absolute; inset: 8px; border: 1px solid rgba(226, 199, 151, 0.42); border-radius: inherit; }
.seal svg { width: 42px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.seal__label { position: absolute; bottom: -30px; width: 100px; color: #6f5b3d; font-size: 0.72rem; letter-spacing: 0.24em; }

.scroll-cue {
  position: absolute;
  top: auto;
  bottom: max(28px, env(safe-area-inset-bottom));
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #755d3a;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s 1.5s var(--ease-out), transform 1.1s 1.5s var(--ease-out);
}

.scroll-cue span { font-size: 0.7rem; letter-spacing: 0.24em; }
.scroll-cue svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; animation: float-down 1.8s 2.3s ease-in-out infinite; }

.hero.is-open .curtain--left { transform: translate3d(-64%, 8%, 0) rotate(-3deg); filter: brightness(1.04); }
.hero.is-open .curtain--right { transform: translate3d(64%, 8%, 0) scaleX(-1) rotate(-3deg); filter: brightness(1.04); }
.hero.is-open .seal { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.72) rotate(12deg); }
.hero.is-open .seal__label { opacity: 0; }
.hero.is-open .botanical, .hero.is-open .family-line, .hero.is-open .couple-names span,
.hero.is-open .couple-names b, .hero.is-open .hero-date, .hero.is-open .hero-place, .hero.is-open .scroll-cue {
  opacity: 1;
  filter: none;
  transform: none;
}

.section {
  position: relative;
  padding: clamp(5.5rem, 18vw, 8.5rem) 8%;
  background: var(--ivory-light);
}

.section-mark {
  margin: 0 0 2.2rem;
  color: var(--gold);
  font-family: "Aboreto", serif;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
}

.invitation-intro { min-height: 82svh; display: grid; align-content: center; }
.invitation-intro h2, .closing h2 {
  max-width: 10em;
  margin: 0;
  font-size: clamp(2.25rem, 10vw, 3.75rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.04em;
}
.intro-copy { margin: 3.2rem 0 0 18%; color: #645a50; font-size: 0.9rem; line-height: 2.2; letter-spacing: 0.12em; }

.thread { position: absolute; top: 0; right: 12%; width: 1px; height: 28%; background: #d1c2a9; }
.thread span { position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--wine); transform: translate(-50%, 50%); }

.photo-wide { padding: 0 8% clamp(5.5rem, 18vw, 8rem); }
.photo-wide .natural-photo { width: 100%; }
.photo-note { margin: 1.5rem 0 0 auto; color: var(--gold); text-align: right; font-size: 0.72rem; letter-spacing: 0.2em; }

.photo-story { padding-top: 0; }
.photo-frame {
  position: relative;
  overflow: hidden;
  color: #5d554c;
  border: 1px solid rgba(91, 76, 59, 0.32);
  border-radius: 12px;
  background: #cec9c1;
}
.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.65s var(--ease-out);
}
.photo-frame.is-visible img { filter: saturate(1); }
.story-caption { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.2rem; align-items: start; margin-top: 1.6rem; }
.story-caption > span { color: var(--gold); font-family: "Aboreto", serif; font-size: 0.62rem; letter-spacing: 0.22em; }
.story-caption p { margin: 0; color: #5c5349; font-size: 0.85rem; line-height: 1.9; letter-spacing: 0.12em; }

.event { overflow: hidden; }
.event::after { content: ""; position: absolute; left: 12%; right: -25%; top: 41%; height: 1px; background: rgba(154, 122, 70, 0.44); transform: rotate(-14deg); }
.event-date-large { display: flex; align-items: center; gap: 1rem; margin: 0; color: var(--ink); font-family: "Aboreto", serif; font-size: clamp(4rem, 22vw, 7rem); font-weight: 400; line-height: 1; }
.event-date-large i { flex: 1; min-width: 42px; height: 1px; background: var(--gold); }
.event-day { margin: 1rem 0 0; color: #6b6054; font-size: 0.72rem; letter-spacing: 0.16em; }
.event-time { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; margin: 7rem 0 4.5rem; }
.time { font-family: "Aboreto", serif; font-size: 2.2rem; }
.time-rule { height: 1px; background: var(--gold); }
.time-label { font-size: 1rem; letter-spacing: 0.18em; }
.venue-block { position: relative; z-index: 1; display: grid; grid-template-columns: 46px 1fr; gap: 1.2rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid rgba(154, 122, 70, 0.36); border-bottom: 1px solid rgba(154, 122, 70, 0.36); background: var(--ivory-light); }
.venue-block svg { width: 38px; fill: none; stroke: var(--gold); stroke-width: 1.25; }
.venue-block h3 { margin: 0 0 0.45rem; font-size: 1.45rem; font-weight: 400; letter-spacing: 0.15em; }
.venue-block p { margin: 0; color: #655a50; font-size: 0.76rem; letter-spacing: 0.13em; }

.map-card {
  position: relative;
  z-index: 2;
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(117, 90, 45, 0.34);
  border-radius: 14px;
  background: #e2dacd;
  box-shadow: 0 14px 36px rgba(69, 50, 34, 0.12);
}

.wedding-map {
  position: relative;
  width: 100%;
  height: clamp(230px, 64vw, 290px);
  overflow: hidden;
  background:
    linear-gradient(rgba(117, 90, 45, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 90, 45, 0.08) 1px, transparent 1px),
    #ded6c9;
  background-size: 28px 28px;
}

.map-placeholder {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.8rem;
  color: #655a50;
  background: #ded6c9;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}

.map-fallback-frame {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.map-placeholder span {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(111, 40, 31, 0.28);
  border-top-color: var(--wine);
  border-radius: 50%;
  animation: record-spin 1s linear infinite;
}

.map-placeholder p { margin: 0; font-size: 0.72rem; letter-spacing: 0.12em; }
.map-card.is-ready .map-placeholder { opacity: 0; visibility: hidden; }
.map-card.is-error .map-placeholder span { animation: none; border-color: var(--wine); }
.map-card.is-error .map-placeholder span::after { content: ""; display: block; width: 1px; height: 12px; margin: 7px auto 0; background: var(--wine); }

.map-card__details {
  display: grid;
  gap: 1.2rem;
  padding: 1.25rem;
  background: var(--ivory-light);
}

.map-card__label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--gold);
  font-family: "Aboreto", serif;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
}

.map-card__details strong { display: block; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.08em; }
.map-card__details p { margin: 0.45rem 0 0; color: #655a50; font-size: 0.7rem; line-height: 1.7; letter-spacing: 0.05em; }

.map-open-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 0.9rem;
  border: 1px solid rgba(111, 40, 31, 0.55);
  color: var(--wine);
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.map-open-link:hover { color: var(--ivory-light); background: var(--wine); }
.map-open-link svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.copy-address { display: flex; align-items: center; justify-content: center; gap: 0.7rem; width: 100%; min-height: 50px; margin-top: 1.5rem; border: 1px solid var(--wine); color: var(--wine); background: transparent; font: inherit; font-size: 0.8rem; letter-spacing: 0.16em; cursor: pointer; transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.copy-address:hover { color: var(--ivory-light); background: var(--wine); }
.copy-address:active { transform: scale(0.985); }
.copy-address svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.copy-status { min-height: 1.5em; margin: 0.75rem 0 0; color: #655a50; text-align: center; font-size: 0.7rem; letter-spacing: 0.12em; }

.gallery-essay { display: flex; flex-direction: column; gap: clamp(3.5rem, 14vw, 6rem); padding-top: 1rem; }
.natural-photo { position: relative; margin: 0; overflow: hidden; }
.natural-photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.94);
  border-radius: 12px;
  transition: filter 0.65s var(--ease-out);
}
.natural-photo.is-visible img { filter: saturate(1); }
.natural-photo figcaption { margin-top: 1rem; color: #62574c; font-size: 0.72rem; line-height: 1.8; letter-spacing: 0.16em; }

.red-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.red-photo-pair__caption {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0;
  color: #62574c;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.8;
  letter-spacing: 0.16em;
}

.closing { display: grid; min-height: 92svh; align-content: center; text-align: center; }
.closing .section-mark { margin-bottom: 2.4rem; }
.closing h2 { max-width: none; }
.closing-names { margin: 3.5rem 0 0; font-size: 1.05rem; letter-spacing: 0.16em; }
.closing-names i { margin-inline: 0.8rem; color: var(--gold); font-family: Georgia, serif; font-size: 1.6rem; font-weight: 400; }
.closing-date { margin: 1rem 0 0; color: #695c4f; font-family: "Aboreto", serif; font-size: 0.78rem; letter-spacing: 0.22em; }
.closing-flower { width: 92px; margin: 3.6rem auto 0; fill: none; stroke: var(--gold); stroke-width: 1; }

.reveal { opacity: 0; filter: blur(5px); transform: translateY(26px); transition: opacity 0.9s var(--ease-out), filter 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.is-visible { opacity: 1; filter: none; transform: none; }

.photo-reveal.reveal {
  opacity: 0.28;
  filter: blur(9px);
  transform: translateY(18px) scale(0.985);
  transition: opacity 1.5s var(--ease-out), filter 1.5s var(--ease-out), transform 1.5s var(--ease-out);
}

.photo-reveal.reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

@keyframes float-down { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes record-spin { to { transform: rotate(360deg); } }
@keyframes music-bar { from { transform: scaleY(0.55); } to { transform: scaleY(2.4); } }

@media (min-width: 600px) {
  body { padding-block: 28px; }
  .hero { min-height: min(844px, calc(100svh - 56px)); border-radius: 2px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .hero { min-height: 620px; }
  .hero-copy { margin-top: -150px; }
  .couple-names span { font-size: 3.1rem; }
}

@media (max-width: 350px) {
  .gallery-essay { gap: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .curtain, .seal, .botanical, .family-line, .couple-names span, .couple-names b,
  .hero-date, .hero-place, .scroll-cue, .reveal {
    transition: none;
  }
  .scroll-cue svg { animation: none; }
  .music-control__disc, .music-control__bars i { animation: none !important; }
  .map-placeholder span { animation: none; }
  .reveal { opacity: 1; filter: none; transform: none; }
  .photo-reveal.reveal { opacity: 1; filter: none; transform: none; }
  .heart-fireworks { display: none; }
  .photo-frame img, .natural-photo img { transition: none; transform: none; filter: none; }
}