/* Layers and scenes for the immersive invitation. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

.fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 45; pointer-events: none; }
.fx.over { z-index: 65; }

/* Hero: a frame drawn with lines, layers in 3D */
.hero { position: relative; overflow: hidden; perspective: 1400px; }
.hero-bg {
  position: absolute; inset: -20% -10%; z-index: 0;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(255, 252, 244, 0.9), rgba(246, 239, 227, 0) 70%),
    url("/img/tex/paper-ivory.jpg") center / cover;
  opacity: 0.9;
}
.hero .frame { position: relative; z-index: 1; border: 0; outline: 0; transform-style: preserve-3d; will-change: transform; }
.frame .fl { position: absolute; background: var(--line-strong); display: block; }
.frame .fl.t, .frame .fl.b { left: 0; right: 0; height: 1px; }
.frame .fl.l, .frame .fl.r { top: 0; bottom: 0; width: 1px; }
.frame .fl.t { top: 0; } .frame .fl.b { bottom: 0; } .frame .fl.l { left: 0; } .frame .fl.r { right: 0; }
.frame .fl.in { background: var(--line); }
.frame .fl.t.in { top: 9px; left: 9px; right: 9px; } .frame .fl.b.in { bottom: 9px; left: 9px; right: 9px; }
.frame .fl.l.in { left: 9px; top: 9px; bottom: 9px; } .frame .fl.r.in { right: 9px; top: 9px; bottom: 9px; }
.frame .layer { transform-style: preserve-3d; }
.lead .wd { display: inline-block; overflow: hidden; padding: 0.08em 0.06em 0.22em; margin: -0.08em -0.06em -0.22em; vertical-align: bottom; }
.lead .wd > span { display: inline-block; }
.names .ch { display: inline-block; }
.names > span:not(.amp) { display: block; }

/* Hello photo: the image moves inside its card */
.photo-card .ph { width: 100%; height: 100%; overflow: hidden; }
.photo-card .ph img { will-change: transform; }

/* The big date */
.bigdate {
  position: relative; overflow: hidden; height: 108vh; min-height: 620px;
  display: grid; align-content: center; gap: 0;
  background: var(--wine-900); color: var(--on-wine);
}
.bd-bg { position: absolute; inset: -25% 0; background: url("/img/tex/satin-burgundy.jpg") center / cover; opacity: 0.85; }
.bigdate::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 50%, transparent, rgba(30, 4, 10, 0.55)); pointer-events: none; }
.bd-row { position: relative; z-index: 1; white-space: nowrap; text-align: center; line-height: 0.82; will-change: transform; }
.bd-a, .bd-c { font: 300 clamp(150px, 46vw, 420px)/0.82 var(--f-display); letter-spacing: -0.02em; }
.bd-row .out { color: transparent; -webkit-text-stroke: 1px rgba(236, 220, 189, 0.45); margin: 0 0.12em; }
.bd-row .solid { color: var(--cream); margin: 0 0.12em; }
.bd-b { font-size: clamp(90px, 26vw, 250px); color: var(--champagne); z-index: 2; margin: -0.18em 0 -0.08em; text-shadow: 0 10px 40px rgba(20, 2, 8, 0.6); }
.bd-c { font-size: clamp(110px, 30vw, 300px); }
.bd-cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 9vh; text-align: center; color: var(--on-wine-2); }

/* Story: ghost years behind, a drawn thread between */
.mx .story::before { display: none; }
.story { overflow: visible; }
.thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.thread path { fill: none; stroke: var(--wine-500); stroke-width: 1.2; stroke-linecap: round; opacity: 0.55; }
.moment-row { position: relative; }
.ghost-yr {
  position: absolute; z-index: 0; top: -10%; font: italic 300 clamp(110px, 34vw, 230px)/1 var(--f-display);
  color: transparent; -webkit-text-stroke: 1px rgba(92, 22, 38, 0.13); pointer-events: none; white-space: nowrap;
}
.moment-row:nth-child(odd) .ghost-yr { right: -6%; }
.moment-row:nth-child(even) .ghost-yr { left: -6%; }
.moment-row .txt { position: relative; z-index: 1; }
.polaroid { will-change: transform; }

/* Golden hour */
.golden { position: relative; height: 125vh; min-height: 680px; overflow: hidden; background: var(--wine-950); color: #fff7ea; display: grid; place-items: center; }
.g-img { position: absolute; inset: 0; overflow: hidden; }
.g-img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.g-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 8, 16, 0.75), rgba(42, 8, 16, 0.15) 45%, rgba(42, 8, 16, 0.7)); }
.g-text { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); }
.g-text .caps { color: rgba(255, 247, 234, 0.8); }
.g2 { font-size: clamp(58px, 16vw, 132px); color: #fff7ea; text-shadow: 0 8px 40px rgba(20, 2, 8, 0.55); margin: 12px 0 20px; }
.g3 { font: italic 400 clamp(19px, 4.6vw, 26px)/1.4 var(--f-body); color: rgba(255, 247, 234, 0.85); }
.g-lace { position: absolute; z-index: 3; left: -5%; right: -5%; bottom: -40px; height: 150px; background: url("/img/tex/lace-band.jpg") center / auto 100% repeat-x; transform: rotate(-2.5deg); box-shadow: 0 -10px 30px rgba(20, 2, 8, 0.4); }

/* Lace ribbon across the page */
.lace-band { position: relative; z-index: 2; height: 120px; margin: -50px 0; overflow: hidden; transform: rotate(-2deg); box-shadow: 0 12px 30px rgba(20, 2, 8, 0.35), 0 -6px 20px rgba(20, 2, 8, 0.2); }
.lb-track { width: 300%; height: 100%; background: url("/img/tex/lace-band.jpg") 0 50% / auto 100% repeat-x; will-change: transform; }

/* Names ribbon */
.marquee { overflow: hidden; background: var(--wine-900); color: var(--cream); padding: 22px 0; border-top: 1px solid var(--line-on-wine); border-bottom: 1px solid var(--line-on-wine); }
.mq-track { display: inline-flex; align-items: center; gap: 34px; white-space: nowrap; will-change: transform; }
.mq-track span { font: 400 clamp(30px, 7vw, 54px)/1 var(--f-display); letter-spacing: 0.08em; text-transform: uppercase; }
.mq-track span i { font: 400 1.25em/0.8 var(--f-script); text-transform: none; color: var(--champagne); }
.mq-track b { color: var(--champagne); display: grid; }

/* Deckled paper edges where one sheet meets another */
.deckle { position: absolute; left: 0; top: -15px; width: 100%; height: 16px; z-index: 3; filter: drop-shadow(0 -5px 5px rgba(42, 8, 16, 0.16)); pointer-events: none; }

/* Countdown digits roll */
.count .digits b { position: relative; display: block; overflow: hidden; height: 1.05em; }
.count .digits b .fv { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }

/* Dress swatches shimmer like fabric */
.swatches i { position: relative; overflow: hidden; }
.swatches i::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%); transform: translateX(-120%); animation: sheen 4.5s var(--ease-in-out) infinite; }
.swatches figure:nth-child(2) i::after { animation-delay: 0.3s; } .swatches figure:nth-child(3) i::after { animation-delay: 0.6s; }
.swatches figure:nth-child(4) i::after { animation-delay: 0.9s; } .swatches figure:nth-child(5) i::after { animation-delay: 1.2s; }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* RSVP: the card comes out of an envelope */
.rsvp-wrap { position: relative; max-width: 560px; margin: 0 auto; padding-bottom: 150px; }
.rsvp-wrap .rsvp-card { position: relative; z-index: 1; will-change: transform; }
.rsvp-pocket {
  position: absolute; z-index: 2; left: -12px; right: -12px; bottom: 0; height: 190px;
  background: linear-gradient(180deg, #6a1a2c, #4b111f);
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 20px 40px rgba(20, 2, 8, 0.5);
}
.rsvp-pocket::after { content: ""; position: absolute; inset: 0; background: var(--paper-grain); opacity: 0.5; mix-blend-mode: overlay; }

/* Finale */
.foot-seal { width: 120px; margin: 0 auto 18px; filter: drop-shadow(0 10px 14px rgba(42, 8, 16, 0.35)); }
.foot .script { font-size: clamp(54px, 15vw, 90px); }

@media (prefers-reduced-motion: reduce) { .fx { display: none; } .swatches i::after { animation: none; } }
@media (min-width: 760px) {
  .bigdate { height: 120vh; }
  .ghost-yr { font-size: 260px; }
  .lace-band { height: 150px; }
}