/* ---- base (no-JS / progressive-enhancement) layout ---- */
/* Without JS, this is a plain stacked page: a static monogram header, then sections in flow. */
#monogram-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1rem 2rem;
  background: radial-gradient(120% 100% at 50% 30%, var(--bg) 0%, var(--bg-soft) 100%);
}

#monogram-zoom {
  width: min(70vmin, 620px);
  aspect-ratio: 1 / 1;
}

#monogram-zoom svg {
  width: 100%;
  height: 100%;
}

main { position: relative; z-index: 2; }

.view-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 5rem;
}

.view-section .card { width: min(100%, 640px); }

#home .home-copy {
  text-align: center;
  padding: 1rem 1rem 4rem;
  max-width: 42em;
  margin: 0 auto;
}

.home-copy .names {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0.4em 0 0.2em;
}
.home-copy .names span { color: var(--gold); font-style: italic; font-weight: 400; }

.home-copy .date-line {
  color: var(--text-dim);
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.home-copy .welcome-blurb {
  margin-top: 1.4em;
  color: var(--text);
  line-height: 1.7;
  font-size: 1.05rem;
}

/* ---- JS-enhanced: full-viewport monogram, with the sections over it ---- */
/* Layers, back to front: #ribbon-under-layer (a moving piece that runs under
   the rest of the mark), the monogram, #ribbon-over-layer (a moving piece
   over it), the sections, the nav. The page background sits on the body so
   the layer under the mark has it behind it too. */
html.js-enhanced body {
  background: radial-gradient(120% 100% at 50% 30%, var(--bg) 0%, var(--bg-soft) 100%) fixed;
}

html.js-enhanced #monogram-stage {
  position: fixed;
  inset: 0;
  padding: 0;
  z-index: 1;
  overflow: hidden;
  background: transparent;
}

/* The SVG fills the whole viewport and the camera works purely through its
   viewBox (see js/zoom-animation.js). At rest it frames the full mark at ~90%
   of the viewport height, faint, as a watermark behind the home copy. */
html.js-enhanced #monogram-zoom {
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
}

/* The mark's colour is a mixed tint (--mark-fill, set by js/zoom-animation.js:
   watermark-pale at rest, deepening to peacock as a section opens) rather
   than a faded opacity: everything stays opaque, so overlapping pieces can't
   stack into darker patches. Each piece also gets a thin page-coloured edge,
   so where one crosses another it reads as a gap, like the drawn crossings.
   The default is the watermark tint (MARK_REST_OPACITY in js/config.js). */
html.js-enhanced { --mark-fill: rgb(209, 226, 232); }
html.js-enhanced #monogram path {
  fill: var(--mark-fill) !important;
  stroke: var(--bg);
  stroke-width: 5px;
  vector-effect: non-scaling-stroke;
  paint-order: stroke;
  stroke-linejoin: round;
}

.ribbon-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#ribbon-under-layer { z-index: 0; }
#ribbon-over-layer { z-index: 2; }
.ribbon-layer .fill { fill: var(--mark-fill); }
.ribbon-layer .gap {
  fill: none;
  stroke: var(--bg);
  stroke-width: 5px;
  vector-effect: non-scaling-stroke;
}

html.js-enhanced main { z-index: 3; }

html.js-enhanced .view-section {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  flex-direction: column;
  justify-content: flex-start; /* never center-clip overflow: see note below */
  padding: clamp(5.5rem, 8vh, 7rem) 1.25rem 3rem;
  /* the home copy's fade; a section's opacity follows its scene instead
     (js/nav.js sets it frame by frame) */
  transition: opacity 500ms ease;
}
/* justify-content:flex-start (rather than center) is deliberate: a centered flex
   item taller than its container has its overflow clipped unreachably at the
   start edge in Chrome/Firefox. Top-aligning + scrolling avoids that entirely,
   which matters here since the RSVP iframe can be much taller than the viewport. */

html.js-enhanced #home.view-section {
  justify-content: center;
}

html.js-enhanced .view-section.is-active {
  opacity: 1;
  pointer-events: auto;
}

html.js-enhanced.motion-simple .view-section {
  transition: opacity 220ms ease;
}

/* The band the section's piece becomes is the content's surface, so the
   card itself is just the content's layout: no fill, corners or shadow.
   (Without JS it keeps its own peacock panel; see css/base.css.) The band
   runs off the top and bottom of the window and stays put while long
   content, like the RSVP form, scrolls over it. */
html.js-enhanced .view-section .card {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}