/* A reusable engraved mark, drawn as paths rather than font glyphs. */
.wedding-mark { display: inline-flex; width: 68px; height: 68px; align-items: center; justify-content: center; color: #80613b; flex: 0 0 auto; }
.wedding-mark svg { display: block; width: 100%; height: 100%; }
footer .wedding-mark { width: 80px; height: 80px; color: #d6bc91; }

/* The default is a complete static composition, including without JavaScript. */
.eclipse-section {
  --scene-sky: #251d19;
  --scene-text: #f5ead8;
  --moon-x: 0px;
  --moon-y: 0px;
  --corona: .8;
  --contact: .2;
  --night-lights: 1;
  --stars: .7;
  --copy-reveal: 1;
  padding: 0;
  overflow: clip;
  background: linear-gradient(#d8c1a1, #715642 20%, #251d19 70%);
  color: var(--scene-text);
}
.eclipse-stage {
  position: relative;
  min-height: 780px;
  padding: 70px 20px 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.celestial-scene { width: 380px; height: 330px; position: relative; flex: 0 0 auto; }
.orbital-ring { position: absolute; inset: 25px 40px; border: 1px solid #d9b67d44; border-radius: 50%; transform: rotate(-28deg) scaleX(1.12); }
.solar-disc, .lunar-disc, .eclipse-corona { position: absolute; width: 190px; height: 190px; left: 95px; top: 70px; border-radius: 50%; }
.solar-disc { background: #ffe3a5; box-shadow: 0 0 20px #fbd49266; }
.lunar-disc { width: 186px; height: 186px; margin: 2px; background: var(--scene-sky); transform: translate(var(--moon-x), var(--moon-y)); }
.eclipse-corona { box-shadow: 0 0 22px 9px #fbdc9a66, 0 0 85px 28px #dca55e30; opacity: var(--corona); }
.contact-light { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff6dc; top: 204px; left: 274px; box-shadow: 0 0 13px 5px #ffe5a5b3, 0 0 30px 9px #eac28566; opacity: var(--contact); }
.eclipse-copy { position: relative; z-index: 2; color: #f5ead8; opacity: var(--copy-reveal); }
.eclipse-copy h2 { margin-top: 22px; }
.eclipse-copy>p:last-child { font-family: var(--serif); font-style: italic; font-size: 23px; margin-top: 18px; opacity: .8; }
.eclipse-stars { position: absolute; inset: 0; pointer-events: none; opacity: var(--stars); }
.eclipse-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e6c994; box-shadow: 0 0 8px #e6c99488; }
.eclipse-stars i:nth-child(1) { left: 17%; top: 25%; }
.eclipse-stars i:nth-child(2) { left: 28%; top: 58%; width: 2px; height: 2px; }
.eclipse-stars i:nth-child(3) { left: 72%; top: 19%; }
.eclipse-stars i:nth-child(4) { left: 84%; top: 48%; width: 2px; height: 2px; }
.eclipse-stars i:nth-child(5) { left: 12%; top: 65%; width: 2px; height: 2px; }
.eclipse-stars i:nth-child(6) { left: 65%; top: 66%; }
.eclipse-stars i:nth-child(7) { left: 43%; top: 11%; width: 2px; height: 2px; }
.evening-lights { position: absolute; bottom: 0; left: 0; width: 100%; height: 165px; overflow: visible; opacity: var(--night-lights); pointer-events: none; }
.light-wire, .light-drops { fill: none; stroke: #b08c5866; stroke-width: .8; }
.light-bulbs { fill: #ffe1a0; filter: drop-shadow(0 0 5px #f7bd65) drop-shadow(0 0 14px #c88e40); }

/* A short sticky scene gives the eclipse room to unfold. The browser retains
   normal wheel/touch/keyboard scrolling; no input interception or timers. */
@media (prefers-reduced-motion: no-preference) {
  .eclipse-enhanced { height: 155svh; min-height: 1040px; background: var(--scene-sky); }
  .eclipse-enhanced .eclipse-stage { position: sticky; top: 0; height: 100svh; min-height: 650px; padding-top: 25px; padding-bottom: 155px; }
}
@media (max-width: 760px) {
  .wedding-mark { width: 56px; height: 56px; }
  .celestial-scene { width: 300px; height: 290px; }
  .orbital-ring { inset: 30px 24px; }
  .solar-disc, .lunar-disc, .eclipse-corona { left: 55px; top: 50px; }
  .contact-light { left: 234px; top: 184px; }
  .eclipse-stage { min-height: 680px; padding-top: 30px; padding-bottom: 140px; }
  .eclipse-copy .eyebrow { font-size: 8px; }
  .eclipse-copy h2 { font-size: clamp(43px, 10vw, 64px); }
  .eclipse-copy>p:last-child { font-size: 21px; }
  .evening-lights { height: 120px; }
  .eclipse-enhanced { min-height: 940px; }
  .eclipse-enhanced .eclipse-stage { min-height: 610px; padding-bottom: 125px; }
}
@media (prefers-reduced-motion: reduce) {
  .eclipse-section { height: auto; min-height: 0; }
  .eclipse-stage { position: relative; }
}