:root {
  color-scheme: dark;
  --ink: #fff8ea;
  --gold: #eacb88;
  --night: #080715;
  --progress: 0;
  --bride-zoom: 0;
  --groom-zoom: 0;
  --couple-zoom: 0;
  --gallery-zoom: 0;
  --timeline-zoom: 0;
  --event-zoom: 0;
  --closing-zoom: 0;
}

* { box-sizing: border-box; }

img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

html {
  width: 100%;
  min-height: 100%;
  background: var(--night);
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

button { font: inherit; }

.cover {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(99, 65, 152, .25), transparent 35%),
    linear-gradient(180deg, #070611 0%, #100b23 62%, #090713 100%);
  transition: opacity 1.15s ease, visibility 1.15s;
}

.cover::before,
.cover::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,239,193,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(194,176,255,.75) 0 1px, transparent 1.5px);
  background-position: 0 0, 27px 39px;
  background-size: 79px 79px, 113px 113px;
  opacity: .42;
}

.cover::after { filter: blur(10px); opacity: .18; transform: scale(1.15); }

.invitation-opened .cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cover-planet {
  position: absolute;
  width: min(118vw, 780px);
  top: 3vh;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 38px rgba(185,141,255,.28));
  opacity: .82;
  transition: transform 1.35s cubic-bezier(.18,.78,.22,1), opacity 1.1s ease;
}

.invitation-opened .cover-planet {
  transform: translateX(-50%) scale(2.25);
  opacity: 0;
}

.cover-copy {
  position: relative;
  z-index: 2;
  width: min(88vw, 430px);
  margin-top: 24vh;
  text-align: center;
  text-shadow: 0 3px 24px rgba(0,0,0,.65);
}

.eyebrow {
  margin: 0 0 16px;
  font: 500 10px/1.5 Arial, sans-serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
}

h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(48px, 15vw, 82px);
  line-height: .88;
  letter-spacing: -.055em;
}

.amp {
  display: block;
  margin: .16em 0 .08em;
  font-size: .42em;
  line-height: 1;
  font-style: italic;
  color: var(--gold);
}

.date {
  margin: 22px 0 28px;
  font: 400 11px/1.5 Arial, sans-serif;
  letter-spacing: .22em;
  color: rgba(255,248,234,.82);
}

.open-button {
  min-width: 172px;
  padding: 14px 24px;
  border: 1px solid rgba(234,203,136,.62);
  border-radius: 999px;
  background: rgba(10,8,25,.36);
  color: var(--ink);
  letter-spacing: .12em;
  text-transform: uppercase;
  font: 600 10px/1 Arial, sans-serif;
  backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: 0 0 0 7px rgba(234,203,136,.035), 0 14px 45px rgba(0,0,0,.28);
}

.open-button:focus-visible { outline: 2px solid #fff3c7; outline-offset: 5px; }

.snap-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  width: 100dvw;
  height: 100svh;
  overflow: hidden;
  background: #070611;
  touch-action: none;
}

.canvas {
  position: relative;
  width: 100%;
  min-width: 100%;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #090719;
}

.layer {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  transform-origin: center;
}

.painting {
  inset: -8%;
  width: 116%;
  max-width: none;
  height: 116%;
  object-fit: cover;
  object-position: 50% 56%;
  transform: scale(calc(1 + var(--progress) * .18));
  filter: saturate(.94) contrast(1.03) brightness(.84);
}

.veil {
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 52%, transparent 17%, rgba(4,3,14,.08) 49%, rgba(4,3,14,.48) 100%),
    linear-gradient(180deg, rgba(3,3,12,.38), transparent 30%, transparent 70%, rgba(3,3,12,.48));
}

.hero-planet {
  z-index: 3;
  width: min(130vw, 900px);
  left: 50%;
  top: -15%;
  opacity: calc(.68 - var(--progress) * .7);
  transform: translateX(-50%) scale(calc(.82 + var(--progress) * 1.85));
  filter: drop-shadow(0 0 44px rgba(194,158,255,.22));
}

.island-left {
  z-index: 5;
  width: min(62vw, 500px);
  left: -22%;
  bottom: -8%;
  opacity: calc(.92 - var(--progress) * .5);
  transform: translate3d(calc(var(--progress) * -7vw), calc(var(--progress) * 6vh), 0)
    scale(calc(.9 + var(--progress) * .32));
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.42));
}

.island-right {
  z-index: 5;
  width: min(49vw, 390px);
  right: -20%;
  top: 18%;
  opacity: calc(.68 - var(--progress) * .42);
  transform: scaleX(-1) translate3d(calc(var(--progress) * -8vw), calc(var(--progress) * -4vh), 0)
    scale(calc(.72 + var(--progress) * .28));
  filter: blur(.2px) drop-shadow(0 12px 40px rgba(0,0,0,.42));
}

.stars {
  inset: 0;
  z-index: 6;
  opacity: calc(.75 - var(--progress) * .25);
  background-image:
    radial-gradient(circle, rgba(255,238,187,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(209,188,255,.82) 0 1px, transparent 1.5px);
  background-size: 89px 89px, 127px 127px;
  background-position: 13px 5px, 42px 31px;
  transform: scale(calc(1 + var(--progress) * .28));
}

.scene-copy {
  position: absolute;
  z-index: 8;
  left: 50%;
  width: min(84vw, 430px);
  text-align: center;
  text-shadow: 0 3px 26px rgba(0,0,0,.75);
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .8s ease, transform 1.1s cubic-bezier(.18,.78,.22,1);
}

.intro-copy {
  top: 57%;
}

.intro-copy h2 {
  margin: 0 0 10px;
  font-weight: 400;
  font-size: clamp(31px, 10vw, 54px);
  line-height: 1;
}

.intro-copy p,
.verse p {
  margin: 0;
  font: 400 11px/1.8 Arial, sans-serif;
  letter-spacing: .12em;
  color: rgba(255,248,234,.8);
}

.verse {
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.verse blockquote {
  margin: 0 0 18px;
  font-size: clamp(22px, 7vw, 35px);
  line-height: 1.26;
  font-style: italic;
}

.profile-scene {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}

.snap-stage[data-scene="0"] .intro-copy,
.snap-stage[data-scene="1"] .verse,
.snap-stage[data-scene="2"] .bride-scene,
.snap-stage[data-scene="3"] .groom-scene,
.snap-stage[data-scene="4"] .couple-scene,
.snap-stage[data-scene="5"] .gallery-scene,
.snap-stage[data-scene="6"] .timeline-scene,
.snap-stage[data-scene="7"] .event-scene,
.snap-stage[data-scene="8"] .closing-scene {
  opacity: 1;
}

.snap-stage[data-scene="0"] .intro-copy {
  transform: translateX(-50%) translateY(0);
}

.snap-stage[data-scene="1"] .verse {
  transform: translateX(-50%) translateY(-50%);
}

.profile-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 70%, rgba(112, 70, 157, .2), transparent 34%),
    linear-gradient(180deg, rgba(6, 5, 17, .38), rgba(7, 5, 20, .78));
  backdrop-filter: blur(2px);
}

.profile-halo {
  position: absolute;
  width: min(120vw, 780px);
  max-width: none;
  opacity: .34;
  filter: blur(.3px) drop-shadow(0 0 48px rgba(194,158,255,.3));
}

.bride-halo {
  top: 7%;
  left: -43%;
  transform: rotate(-15deg) scale(calc(.72 + var(--bride-zoom) * .25));
}

.groom-halo {
  top: 5%;
  right: -43%;
  transform: rotate(15deg) scaleX(-1) scale(calc(.72 + var(--groom-zoom) * .25));
}

.profile-person {
  position: absolute;
  z-index: 2;
  bottom: -7%;
  height: min(68svh, 690px);
  max-width: 78vw;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 22px 46px rgba(0,0,0,.6));
  transform-origin: center bottom;
}

.bride-person {
  right: -4%;
  transform: translateY(calc((1 - var(--bride-zoom)) * 5vh))
    scale(calc(.88 + var(--bride-zoom) * .12));
}

.groom-person {
  left: -4%;
  transform: translateY(calc((1 - var(--groom-zoom)) * 5vh))
    scale(calc(.88 + var(--groom-zoom) * .12));
}

.profile-copy {
  position: absolute;
  z-index: 4;
  top: 14%;
  width: min(61vw, 330px);
  text-shadow: 0 4px 26px rgba(0,0,0,.82);
}

.bride-copy { left: 8%; text-align: left; }
.groom-copy { right: 8%; text-align: right; }

.profile-copy .eyebrow { margin-bottom: 12px; }

.profile-copy h2 {
  margin: 0 0 20px;
  color: #fff9ed;
  font-weight: 400;
  font-size: clamp(43px, 13vw, 72px);
  line-height: .8;
  letter-spacing: -.045em;
}

.profile-copy h2 em {
  color: var(--gold);
  font-size: .48em;
  font-weight: 400;
}

.profile-copy > p:not(.eyebrow) {
  margin: 0;
  color: rgba(255,248,234,.72);
  font: 400 10px/1.75 Arial, sans-serif;
  letter-spacing: .08em;
}

.profile-copy .parents {
  color: rgba(255,248,234,.95) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

.next-scene-copy {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: 50%;
  width: min(84vw, 430px);
  opacity: clamp(0, calc((var(--progress) - .91) * 12), 1);
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow: 0 4px 28px rgba(0,0,0,.85);
}

.next-scene-copy h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(33px, 10vw, 56px);
  line-height: 1;
}

.couple-scene {
  position: absolute;
  inset: 0;
  z-index: 16;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 58%, rgba(126, 78, 172, .28), transparent 32%),
    linear-gradient(180deg, rgba(5,4,15,.32), rgba(5,4,15,.78));
  transition: opacity 1s ease;
}

.couple-orbit {
  position: absolute;
  left: 50%;
  top: 53%;
  width: min(125vw, 840px);
  aspect-ratio: 1;
  border: 1px solid rgba(234,203,136,.32);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(234,203,136,.025),
    0 0 90px rgba(161,112,219,.22),
    inset 0 0 90px rgba(161,112,219,.09);
  transform: translate(-50%, -50%) rotate(-18deg) scale(calc(.78 + var(--couple-zoom) * .18));
}

.couple-orbit::before,
.couple-orbit::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(191,166,246,.16);
  border-radius: 50%;
}

.couple-orbit::after { inset: 29%; border-color: rgba(234,203,136,.21); }

.couple-copy {
  position: absolute;
  z-index: 4;
  top: 10%;
  left: 50%;
  width: min(88vw, 520px);
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 4px 28px rgba(0,0,0,.86);
}

.couple-copy h2 {
  margin: 0 0 12px;
  font-weight: 400;
  font-size: clamp(42px, 12vw, 76px);
  line-height: .92;
  letter-spacing: -.05em;
}

.couple-copy h2 em { color: var(--gold); font-size: .58em; font-weight: 400; }

.couple-copy > p:last-child {
  margin: 0 auto;
  max-width: 350px;
  color: rgba(255,248,234,.78);
  font: 400 11px/1.7 Arial, sans-serif;
  letter-spacing: .08em;
}

.couple-person {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -7%;
  height: min(70svh, 720px);
  max-width: 94vw;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 25px 48px rgba(0,0,0,.62));
  transform: translateX(-50%) translateY(calc((1 - var(--couple-zoom)) * 5vh))
    scale(calc(.87 + var(--couple-zoom) * .13));
  transform-origin: center bottom;
}

.gallery-scene {
  position: absolute;
  inset: 0;
  z-index: 18;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 47%, rgba(112,69,157,.32), transparent 34%),
    linear-gradient(180deg, rgba(5,4,15,.42), rgba(5,4,15,.9));
  transition: opacity 1s ease;
}

.snap-stage[data-scene="5"] .gallery-scene { pointer-events: auto; }

.timeline-scene {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: #07151b;
  transition: opacity 1s ease;
}

.timeline-painting,
.timeline-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.timeline-painting {
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) brightness(.72) contrast(1.06);
  transform: scale(calc(1.035 - var(--timeline-zoom) * .035));
  transition: transform 1.25s cubic-bezier(.18,.78,.22,1);
}

.timeline-shade {
  background:
    radial-gradient(circle at 50% 54%, rgba(6,24,30,.08) 0 20%, rgba(4,12,20,.48) 76%),
    linear-gradient(180deg, rgba(3,10,18,.68), rgba(3,14,20,.22) 38%, rgba(3,9,16,.72));
}

.timeline-heading {
  position: absolute;
  z-index: 2;
  top: max(7%, calc(env(safe-area-inset-top) + 34px));
  left: 50%;
  width: min(88vw, 520px);
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 4px 28px rgba(0,0,0,.9);
}

.timeline-heading .eyebrow { margin-bottom: 10px; }

.timeline-heading h2 {
  margin: 0 0 7px;
  font-weight: 400;
  font-size: clamp(38px, 11vw, 68px);
  line-height: .9;
}

.timeline-heading > p:last-child {
  margin: 0;
  color: rgba(255,248,234,.68);
  font: 500 9px/1.5 Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.love-timeline {
  position: absolute;
  z-index: 3;
  top: 27%;
  bottom: 8%;
  left: 50%;
  width: min(84vw, 560px);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(-50%) scale(calc(.96 + var(--timeline-zoom) * .04));
  transform-origin: center;
}

.love-timeline::before {
  content: "";
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(234,203,136,.78) 10%, rgba(184,224,215,.72) 90%, transparent);
  box-shadow: 0 0 16px rgba(234,203,136,.55);
}

.love-timeline li {
  position: absolute;
  left: 50%;
  width: 50%;
  min-height: 72px;
}

.love-timeline li:nth-child(1) { top: 1%; }
.love-timeline li:nth-child(2) { top: 28%; }
.love-timeline li:nth-child(3) { top: 55%; }
.love-timeline li:nth-child(4) { top: 82%; }

.love-timeline li:nth-child(odd) {
  padding-right: 31px;
  transform: translateX(-100%);
  text-align: right;
}

.love-timeline li:nth-child(even) {
  padding-left: 31px;
  text-align: left;
}

.timeline-star {
  position: absolute;
  top: 1px;
  color: #f2d99c;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 0 8px #fff0be, 0 0 22px rgba(234,203,136,.82);
}

.love-timeline li:nth-child(odd) .timeline-star { right: -9px; }
.love-timeline li:nth-child(even) .timeline-star { left: -8px; }

.love-timeline time {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: .22em;
}

.love-timeline h3 {
  margin: 0 0 4px;
  color: #fff9ed;
  font-size: clamp(17px, 5vw, 24px);
  font-weight: 400;
  line-height: 1.05;
  text-shadow: 0 3px 20px rgba(0,0,0,.9);
}

.love-timeline p {
  margin: 0;
  color: rgba(255,248,234,.7);
  font: 400 9px/1.45 Arial, sans-serif;
  letter-spacing: .03em;
}

.event-scene {
  position: absolute;
  inset: 0;
  z-index: 22;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: #090d19;
  transition: opacity 1s ease;
}

.event-painting,
.event-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.event-painting {
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) brightness(.72) contrast(1.06);
  transform: scale(calc(1.045 - var(--event-zoom) * .045));
  transition: transform 1.25s cubic-bezier(.18,.78,.22,1);
}

.event-shade {
  background:
    radial-gradient(circle at 50% 50%, rgba(10,10,24,.1), rgba(4,5,14,.54) 75%),
    linear-gradient(180deg, rgba(4,5,14,.66), rgba(4,5,14,.1) 30%, rgba(4,5,14,.56));
}

.event-heading {
  position: absolute;
  z-index: 2;
  top: max(6.5%, calc(env(safe-area-inset-top) + 30px));
  left: 50%;
  width: min(88vw, 520px);
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 4px 28px rgba(0,0,0,.92);
}

.event-heading .eyebrow { margin-bottom: 9px; }

.event-heading h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(38px, 11vw, 68px);
  line-height: .9;
}

.event-list {
  position: absolute;
  z-index: 3;
  top: 23%;
  bottom: 7%;
  left: 50%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  width: min(84vw, 510px);
  transform: translateX(-50%) scale(calc(.96 + var(--event-zoom) * .04));
  transform-origin: center;
}

.event-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(234,203,136,.38);
  border-radius: 50% / 14%;
  background: linear-gradient(135deg, rgba(12,18,33,.78), rgba(14,9,27,.56));
  box-shadow: inset 0 0 52px rgba(236,207,150,.045), 0 18px 55px rgba(0,0,0,.36);
  backdrop-filter: blur(8px);
  text-align: center;
}

.event-card::before,
.event-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234,203,136,.56));
}

.event-card::before { left: 0; }
.event-card::after { right: 0; transform: scaleX(-1); }

.event-card-reception {
  border-color: rgba(224,173,171,.42);
  background: linear-gradient(135deg, rgba(27,13,31,.7), rgba(15,15,32,.66));
}

.event-number {
  position: absolute;
  top: 12px;
  right: 18px;
  margin: 0;
  color: rgba(234,203,136,.38);
  font: 600 9px/1 Arial, sans-serif;
  letter-spacing: .16em;
}

.event-copy { padding: 14px 40px; }
.event-copy .eyebrow { margin-bottom: 5px; font-size: 7px; }

.event-copy h3 {
  margin: 0 0 7px;
  color: #fff9ed;
  font-size: clamp(25px, 7vw, 38px);
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 3px 22px rgba(0,0,0,.9);
}

.event-date,
.event-time,
.event-place { margin: 0; }

.event-date {
  color: rgba(255,248,234,.78);
  font: 600 8px/1.5 Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.event-time {
  margin: 4px 0 6px;
  color: var(--gold);
  font-size: 16px;
  font-style: italic;
}

.event-place {
  color: rgba(255,248,234,.72);
  font: 400 10px/1.45 Arial, sans-serif;
  letter-spacing: .04em;
}

.closing-scene {
  position: absolute;
  inset: 0;
  z-index: 24;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: #100d1d;
  transition: opacity 1s ease;
}

.closing-painting,
.closing-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.closing-painting {
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) brightness(.78) contrast(1.03);
  transform: scale(calc(1.05 - var(--closing-zoom) * .05));
  transition: transform 1.25s cubic-bezier(.18,.78,.22,1);
}

.closing-shade {
  background:
    radial-gradient(circle at 50% 63%, rgba(211,157,160,.14), transparent 28%),
    linear-gradient(180deg, rgba(7,6,18,.6), rgba(8,6,19,.05) 44%, rgba(6,5,15,.72));
}

.closing-copy {
  position: absolute;
  z-index: 4;
  top: max(7%, calc(env(safe-area-inset-top) + 34px));
  left: 50%;
  width: min(86vw, 520px);
  transform: translateX(-50%) translateY(calc((1 - var(--closing-zoom)) * 12px));
  text-align: center;
  text-shadow: 0 4px 28px rgba(0,0,0,.94);
}

.closing-copy .eyebrow { margin-bottom: 10px; }

.closing-copy h2 {
  margin: 0 0 12px;
  color: #fff9ed;
  font-weight: 400;
  font-size: clamp(42px, 12vw, 74px);
  line-height: .9;
}

.closing-copy > p:not(.eyebrow):not(.closing-signature) {
  max-width: 420px;
  margin: 0 auto;
  color: rgba(255,248,234,.76);
  font: 400 10px/1.65 Arial, sans-serif;
  letter-spacing: .04em;
}

.closing-signature {
  margin: 11px 0 0;
  color: var(--gold);
  font-size: clamp(18px, 5vw, 26px);
  font-style: italic;
}

.closing-signature em { color: rgba(255,248,234,.86); font-weight: 400; }

.closing-orbit {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -20%;
  width: min(116vw, 780px);
  aspect-ratio: 1;
  border: 1px solid rgba(234,203,136,.31);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(218,158,173,.22), inset 0 0 70px rgba(234,203,136,.06);
  transform: translateX(-50%) scale(calc(.92 + var(--closing-zoom) * .08));
}

.closing-couple {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2%;
  height: min(57svh, 620px);
  max-width: 92vw;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.66));
  transform: translateX(-50%) translateY(calc((1 - var(--closing-zoom)) * 5vh)) scale(calc(.9 + var(--closing-zoom) * .1));
  transform-origin: center bottom;
}

.studio-credit {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255,248,234,.62);
  font: 500 8px/1 Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 3px 12px rgba(0,0,0,.95);
}

.studio-credit strong { color: var(--gold); font-weight: 600; }

.gallery-heading {
  position: absolute;
  z-index: 5;
  top: 7%;
  left: 50%;
  width: min(88vw, 500px);
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 4px 26px rgba(0,0,0,.85);
}

.gallery-heading h2 {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: clamp(40px, 12vw, 72px);
  line-height: .9;
}

.gallery-heading > p:last-child {
  margin: 0;
  color: rgba(255,248,234,.66);
  font: 500 9px/1.6 Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gallery-stack {
  position: absolute;
  inset: 22% 0 17%;
  touch-action: pan-x;
  user-select: none;
  transform: scale(calc(.96 + var(--gallery-zoom) * .04));
  transform-origin: center center;
}

.gallery-card {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(68vw, 320px);
  height: min(49svh, 510px);
  padding: 7px 7px 26px;
  border: 1px solid rgba(234,203,136,.42);
  background: rgba(243,231,213,.94);
  box-shadow: 0 22px 56px rgba(0,0,0,.58), 0 0 38px rgba(147,99,202,.11);
  cursor: pointer;
  opacity: .48;
  transform: translate3d(calc(-50% + var(--mobile-offset)), -50%, 0) scale(.86);
  transition: transform .55s cubic-bezier(.18,.78,.22,1), opacity .45s ease, filter .35s ease;
}

.gallery-card.is-current { z-index: 3; opacity: 1; transform: translate3d(calc(-50% + var(--mobile-offset)), -50%, 0) scale(1); }
.gallery-card.is-near { z-index: 2; }
.gallery-card.is-far { opacity: 0; pointer-events: none; }

.gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gallery-card span {
  position: absolute;
  right: 10px;
  bottom: 7px;
  color: #443657;
  font: 600 8px/1 Arial, sans-serif;
  letter-spacing: .16em;
}

.gallery-card.is-current:hover,
.gallery-card.is-current:focus-visible {
  transform: translate3d(calc(-50% + var(--mobile-offset)), calc(-50% - 6px), 0) scale(1.015);
}
.gallery-card:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.gallery-controls {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 9.5%;
  display: flex;
  align-items: center;
  gap: 20px;
  transform: translateX(-50%);
}

.gallery-controls button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(234,203,136,.48);
  border-radius: 50%;
  background: rgba(8,7,21,.48);
  color: var(--ink);
  font: 400 16px/1 Arial, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.gallery-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.gallery-controls p {
  min-width: 62px;
  margin: 0;
  color: rgba(255,248,234,.54);
  font: 600 9px/1 Arial, sans-serif;
  letter-spacing: .15em;
  text-align: center;
}

.gallery-controls strong { color: var(--gold); font-weight: 600; }

.gallery-pagination {
  position: absolute;
  z-index: 7;
  bottom: 5.5%;
  left: 50%;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}

.gallery-pagination span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,248,234,.3);
  transition: width .35s ease, border-radius .35s ease, background .35s ease;
}

.gallery-pagination span.active { width: 16px; border-radius: 999px; background: var(--gold); }

.gallery-lightbox {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(4,3,12,.9);
  backdrop-filter: blur(12px);
}

.gallery-lightbox figure {
  position: relative;
  z-index: 2;
  width: min(86vw, 520px);
  max-height: 84svh;
  margin: 0;
}

.gallery-lightbox figure img {
  display: block;
  width: 100%;
  max-height: 78svh;
  border: 1px solid rgba(234,203,136,.55);
  object-fit: contain;
  box-shadow: 0 26px 70px rgba(0,0,0,.72);
}

.gallery-lightbox figcaption {
  padding-top: 10px;
  text-align: center;
  color: rgba(255,248,234,.65);
  font: 600 9px/1 Arial, sans-serif;
  letter-spacing: .18em;
}

.lightbox-close {
  position: absolute;
  z-index: 3;
  top: max(15px, env(safe-area-inset-top));
  right: max(15px, env(safe-area-inset-right));
  width: 39px;
  height: 39px;
  border: 1px solid rgba(255,248,234,.45);
  border-radius: 50%;
  background: rgba(8,7,21,.45);
  color: #fff;
  font: 300 24px/1 Arial, sans-serif;
  cursor: pointer;
}

.gesture-note {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: max(23px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  color: rgba(255,248,234,.68);
  font: 600 9px/1 Arial, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .5s ease;
}

.gesture-note::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 20px;
  margin: 0 10px -7px 0;
  background: linear-gradient(var(--gold), transparent);
}

.snap-stage[data-scene="5"] .gesture-note,
.snap-stage[data-scene="8"] .gesture-note { opacity: 0; }

.scene-dots {
  position: absolute;
  z-index: 25;
  top: 50%;
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-50%);
}

.scene-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid rgba(255,248,234,.5);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.scene-dots button.active {
  border-color: var(--gold);
  background: var(--gold);
  transform: scale(1.45);
}

.scene-dots button:focus-visible { outline: 2px solid white; outline-offset: 4px; }

.scene-status {
  position: absolute;
  z-index: 25;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255,248,234,.52);
  font: 500 8px/1 Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.scroll-note {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  opacity: max(0, calc(.7 - var(--progress) * 2.4));
  color: rgba(255,248,234,.72);
  font: 500 9px/1 Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.scroll-note::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 22px;
  margin: 0 10px -8px 0;
  background: linear-gradient(var(--gold), transparent);
}

.end-space { height: 28vh; background: linear-gradient(#070611, #0b0819); }

@media (min-width: 760px) {
  .painting { object-position: 50% 60%; }
  .island-left { left: -8%; width: min(45vw, 590px); }
  .island-right { right: -8%; width: min(36vw, 470px); }
  .cover-copy { margin-top: 31vh; }
  .profile-person { height: min(76svh, 790px); max-width: 60vw; }
  .bride-person { right: 8%; }
  .groom-person { left: 8%; }
  .profile-copy { top: 22%; width: min(38vw, 400px); }
  .bride-copy { left: 13%; }
  .groom-copy { right: 13%; }
  .couple-person { height: min(78svh, 820px); }
  .couple-copy { top: 12%; }
  .gallery-stack { inset: 23% 0 16%; }
  .gallery-card {
    width: min(31vw, 330px);
    height: min(54svh, 560px);
    transform: translate3d(calc(-50% + var(--desktop-offset)), -50%, 0) scale(.88);
  }
  .gallery-card.is-current { transform: translate3d(calc(-50% + var(--desktop-offset)), -50%, 0) scale(1); }
  .gallery-card.is-current:hover,
  .gallery-card.is-current:focus-visible { transform: translate3d(calc(-50% + var(--desktop-offset)), calc(-50% - 6px), 0) scale(1.015); }
  .love-timeline { width: min(72vw, 620px); }
  .love-timeline li:nth-child(odd) { padding-right: 42px; }
  .love-timeline li:nth-child(even) { padding-left: 42px; }
  .event-list { width: min(62vw, 560px); }
  .closing-couple { height: min(64svh, 720px); }
  .closing-copy { top: max(8%, calc(env(safe-area-inset-top) + 40px)); }
}

@media (max-height: 690px) {
  .timeline-heading { top: max(5%, calc(env(safe-area-inset-top) + 22px)); }
  .love-timeline { top: 25%; bottom: 7%; }
  .love-timeline p { display: none; }
  .event-heading { top: max(4.5%, calc(env(safe-area-inset-top) + 20px)); }
  .event-list { top: 20%; bottom: 6%; gap: 10px; }
  .event-copy { padding-block: 10px; }
  .event-copy h3 { margin-bottom: 5px; }
  .event-time { margin-block: 3px 4px; }
  .closing-copy { top: max(5%, calc(env(safe-area-inset-top) + 24px)); }
  .closing-copy h2 { margin-bottom: 8px; }
  .closing-copy > p:not(.eyebrow):not(.closing-signature) { font-size: 9px; }
  .closing-couple { height: min(54svh, 530px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover, .cover-planet { transition-duration: .01ms; }
  .painting, .hero-planet, .island-left, .island-right, .stars { transform: none !important; }
}