/* Luxury Burgundy (desain 1). Every section is a 720px-wide PSD artboard scaled to the
   screen: 1 PSD px = --u. Positions in js/templates/luxury-burgundy.js are PSD pixels. */

:root {
  /* (ascent - descent) / 2 per font, in em; refined at runtime from the loaded fonts */
  --m-sans: 0.34;
  --m-script: 0.2;
  --m-brush: 0.3;
}

.lb2 {
  --lb-ink: #360d17;
  --lb-paper: #f1e8db;
  --lb-gold: #cba162;
  --lb-sans: 'Google Sans Flex', 'Google Sans', 'Jost', sans-serif;
  --lb-script: 'Italianno', cursive;
  --lb-brush: 'Alex Brush', cursive;
  container-type: inline-size;
  position: relative;
  overflow-x: clip; /* gallery frames bleed past the artboard edges */
  background: #2a0a12;
  color: var(--lb-ink);
  font-family: var(--lb-sans);
}

.lb2-sec {
  --u: calc(100cqw / 720);
  position: relative;
}
.lb2-layer { position: absolute; inset: 0; }

/* page-wide shadow overlay (templates with an "Overlay" PSD folder): sticks to the top of the viewport,
   sits above every section, lets clicks through and repeats down so the slow drift never shows its end */
.lb2-overlay { position: sticky; top: 0; height: 0; z-index: 150; pointer-events: none; --u: calc(100cqw / 720); }
.lb2-overlay-img {
  position: absolute;
  height: calc(var(--u) * var(--ov-h) * 3);
  background-repeat: repeat-y;
  background-size: 100% calc(var(--u) * var(--ov-h));
  mix-blend-mode: multiply;
  pointer-events: none;
  will-change: transform;
}
.lb2-clip { position: absolute; inset: 0; } /* clip-path set inline by the template */
.lb2-divider { -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.lb2-img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.lb2-bg { left: 0 !important; top: 0 !important; }

/* text anchored at its PSD baseline: top = baseline - lead/2 - size * (ascent - descent)/2 */
.lb2-t, .lb2-days {
  position: absolute;
  top: calc(var(--u) * (var(--y) - var(--lead) / 2 - var(--size) * var(--m)));
  font-size: calc(var(--u) * var(--size));
  line-height: calc(var(--u) * var(--lead));
  margin: 0;
}
.lb2-days { display: flex; align-items: baseline; white-space: nowrap; font-weight: 500; }

/* scroll reveal (class added by JS only, so content stays visible if scripts fail).
   `translate`/`scale` are separate from `transform`, which centring and rotation already use. */
.lb2-anim .lb2-rv {
  opacity: 0;
  translate: 0 calc(var(--u) * 34);
  transition:
    opacity .8s ease var(--d, 0s),
    translate 1s cubic-bezier(.2, .75, .25, 1) var(--d, 0s),
    scale 1s cubic-bezier(.2, .75, .25, 1) var(--d, 0s);
}
.lb2-anim .lb2-rv.lb2-img { scale: .96; }
.lb2-anim .lb2-rv.lb2-shown { opacity: 1; translate: 0 0; scale: 1; }
@media (prefers-reduced-motion: reduce) {
  .lb2-anim .lb2-rv { opacity: 1; translate: none; scale: none; transition: none; }
}

/* invisible click targets laid over buttons drawn by the designer */
.lb2-hit {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lb2-hit:focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 2px; }

/* ---------- dress code ---------- */
.lb2-swatch, .lb2-swatch-add { position: absolute; }
.lb2-swatch { box-shadow: inset 0 0 0 1px rgba(54, 13, 23, .08); }

/* ---------- gallery ---------- */
.lb2-slot {
  position: absolute;
  overflow: hidden;
  background: #9aae8f;
  transform-origin: center;
}
.lb2-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- RSVP ---------- */
.lb2-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.lb2-form fieldset:disabled { opacity: .8; }
.lb2-form input[type="text"], .lb2-form textarea, .lb2-pax, .lb2-attend label, .lb2-send, .lb2-status { position: absolute; box-sizing: border-box; }
.lb2-form input[type="text"], .lb2-form textarea {
  margin: 0;
  padding: 0 calc(var(--u) * 28);
  border: 0;
  background: transparent;
  color: var(--lb-ink);
  font: 300 calc(var(--u) * 24) / 1.25 var(--lb-sans);
}
.lb2-form textarea { padding-top: calc(var(--u) * 22); padding-bottom: calc(var(--u) * 16); resize: none; }
.lb2-form input::placeholder, .lb2-form textarea::placeholder { color: var(--lb-ink); opacity: .56; }
.lb2-form input[type="text"]:focus, .lb2-form textarea:focus { outline: none; background: rgba(255, 255, 255, .35); border-radius: calc(var(--u) * 28); }
.lb2-form input[readonly] { opacity: .85; }

.lb2-attend[hidden], .lb2-pax[hidden] { display: none; }
.lb2-attend label { cursor: pointer; }
.lb2-attend input { position: absolute; opacity: 0; pointer-events: none; }
.lb2-attend span, .lb2-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: calc(var(--u) * 2) solid var(--lb-ink);
  border-radius: 999px;
  font: 300 calc(var(--u) * 20) / 1 var(--lb-sans);
  color: var(--lb-ink);
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.lb2-attend input:checked + span { background: var(--lb-ink); color: #fff; }
.lb2-attend input:focus-visible + span, .lb2-send:focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 2px; }
.lb2-send { background: var(--lb-ink); color: #fff; cursor: pointer; padding: 0; }
.lb2-send:disabled { opacity: .6; }
.lb2-pax select {
  width: 100%;
  height: 100%;
  padding: 0 calc(var(--u) * 14);
  border: calc(var(--u) * 2) solid var(--lb-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--lb-ink);
  font: 300 calc(var(--u) * 20) / 1 var(--lb-sans);
}
.lb2-status { margin: 0; font: 300 calc(var(--u) * 18) / 1.3 var(--lb-sans); color: var(--lb-ink); }

/* wishes stay inside the card and scroll instead of growing the section */
.lb2-wishes {
  position: absolute;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(54, 13, 23, .35) transparent;
  font-family: var(--lb-sans);
  color: var(--lb-ink);
}
.lb2-wishes .wish-item { padding: calc(var(--u) * 14) 0; border-bottom: calc(var(--u) * 1.5) solid rgba(54, 13, 23, .15); }
.lb2-wishes .wish-item:first-child { padding-top: 0; }
.lb2-wishes .wish-name { font-weight: 600; font-size: calc(var(--u) * 22); }
.lb2-wishes .wish-msg { font-weight: 300; font-size: calc(var(--u) * 21); line-height: 1.4; margin-top: calc(var(--u) * 4); white-space: pre-line; overflow-wrap: anywhere; }
.lb2-wishes .wish-empty { font-style: normal; font-weight: 300; font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 31); white-space: pre-line; }

/* ---------- guest cover gate ---------- */
.lb2-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  background: #1b0810;
  transition: opacity .6s ease;
}
.lb2-gate-out { opacity: 0; pointer-events: none; }
/* set while the cover is up; removed when the invitation opens */
html.lb2-scroll-lock, html.lb2-scroll-lock body { overflow: hidden; overscroll-behavior: none; }
.lb2-gate { touch-action: none; overscroll-behavior: none; }
.lb2-gate-col { position: relative; width: min(100vw, 480px); height: 100vh; height: 100dvh; overflow: hidden; }
.lb2-gate-art { position: absolute; }
.lb2-gate-art .lb2-sec { --u: calc(100cqw / 720); }

body:has(.inv-page .lb2) { background: #1b0810; }

/* ---------- editor affordances ---------- */
.lb2 [data-prefix]::before { content: attr(data-prefix); }
.editing .lb2 [data-field] { outline: 1.5px dashed transparent; outline-offset: 2px; border-radius: 4px; transition: outline-color .15s; cursor: text; }
.editing .lb2 [data-field]:hover { outline-color: rgba(203, 161, 98, .9); }
.editing .lb2 [data-field]:focus { outline: 1.5px solid var(--lb-gold); background: rgba(203, 161, 98, .14); }
.editing .lb2 [data-display="date"], .editing .lb2 [data-display="href"] { cursor: pointer; }
.editing .lb2 .lb2-hit[data-display="href"] { outline: 1.5px dashed rgba(203, 161, 98, .9); }
.editing .lb2 .lb2-cover-wrap { border-bottom: 6px solid #1b0810; }

/* bottom corner: the top of a section can sit under the previous section's overflowing ornaments,
   which are stacked above it */
.lb2-toggle {
  position: absolute;
  bottom: 10px;
  right: 8px;
  z-index: 5;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 6, 10, .72);
  color: #fff;
  font: 500 11px/1.2 'Jost', sans-serif;
  cursor: pointer;
}
.lb2-hidden-bar {
  position: relative; /* above the neighbouring sections, whose ornaments overflow into the bar */
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: #f1e8db;
  border-top: 1px dashed rgba(54, 13, 23, .3);
  border-bottom: 1px dashed rgba(54, 13, 23, .3);
  font: 400 12px/1.3 'Jost', sans-serif;
  color: #360d17;
}
.lb2-hidden-bar button { border: 0; border-radius: 999px; padding: 5px 12px; background: #360d17; color: #fff; font: inherit; cursor: pointer; }

.lb2-cycle { position: absolute; display: flex; justify-content: space-between; pointer-events: none; z-index: 4; }
.lb2-cycle button {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(54, 13, 23, .78);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.editing .lb2-swatch { cursor: pointer; }
.lb2-swatch-del {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #360d17;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.lb2-swatch:hover .lb2-swatch-del, .lb2-swatch:focus-within .lb2-swatch-del { opacity: 1; }
@media (hover: none) { .lb2-swatch-del { opacity: 1; } }
.lb2-swatch-add {
  border: 2px dashed rgba(54, 13, 23, .45);
  background: rgba(255, 255, 255, .35);
  color: #360d17;
  font-size: 22px;
  cursor: pointer;
}

.editing .lb2-slot { cursor: pointer; }
.lb2-slot-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(54, 13, 23, .78);
  color: #fff;
  font: 500 12px/1.2 'Jost', sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
.lb2-slot.has-photo .lb2-slot-label { opacity: 0; transition: opacity .15s; }
.lb2-slot.has-photo:hover .lb2-slot-label { opacity: 1; }
.lb2-slot.uploading::after {
  content: 'Mengunggah...';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .7);
  color: #360d17;
  font: 500 12px 'Jost', sans-serif;
}