/* ==========================================================================
   The Wonder of Christmas (christmas.html). The stage artwork comes from
   events.css; this file lays out the page. On load the curtains draw back
   (CSS only); with reduced motion the stage is simply open.
   ========================================================================== */

/* ---------- The stage ---------- */

.xs-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--ivory);
  background: #16051f;
}
.xs-hero__art { position: absolute; inset: 0; }
.xs-hero__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(22, 5, 31, 0.92) 0%, rgba(22, 5, 31, 0.45) 40%, rgba(22, 5, 31, 0) 65%);
}
.xs-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: calc(var(--header-h) + 3rem) clamp(3.5rem, 9vh, 6.5rem);
  text-align: center;
}
.xs-label { margin: 0 0 1.25rem; font: 500 var(--step-0)/1 var(--sans); letter-spacing: 0.02em; color: var(--gold); }
.xs-title {
  margin: 0 auto;
  max-width: 12ch;
  font: 400 clamp(3.4rem, 1rem + 7.4vw, 9.4rem)/0.92 var(--serif);
  letter-spacing: -0.04em;
  text-wrap: balance;
  text-shadow: 0 0.04em 0.6em rgba(22, 5, 31, 0.6);
}
.xs-sub { margin: 1rem 0 0; font: italic 400 var(--step-2)/1.25 var(--serif); color: var(--ivory-soft); }
.xs-when { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1rem; margin: 2rem 0 0; font: 500 var(--step-0)/1.3 var(--sans); color: var(--gold); }
.xs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem; }

/* Curtains draw back as the page opens; the star brightens a beat later */
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .xs-hero .ev-art__curtain--l { animation: xs-open-l 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both; }
  html:not(.reduce-motion) .xs-hero .ev-art__curtain--r { animation: xs-open-r 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both; }
  html:not(.reduce-motion) .xs-hero .ev-art__star,
  html:not(.reduce-motion) .xs-hero .ev-art__beam { animation: xs-glow 2.2s ease-out 1.2s both; }
  html:not(.reduce-motion) .xs-hero__inner > * { animation: xs-rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
  html:not(.reduce-motion) .xs-hero__inner > :nth-child(1) { animation-delay: 1.3s; }
  html:not(.reduce-motion) .xs-hero__inner > :nth-child(2) { animation-delay: 1.45s; }
  html:not(.reduce-motion) .xs-hero__inner > :nth-child(3) { animation-delay: 1.6s; }
  html:not(.reduce-motion) .xs-hero__inner > :nth-child(4) { animation-delay: 1.75s; }
  html:not(.reduce-motion) .xs-hero__inner > :nth-child(5) { animation-delay: 1.9s; }
}
@keyframes xs-open-l { from { transform: translateX(48%); } to { transform: none; } }
@keyframes xs-open-r { from { transform: translateX(-48%); } to { transform: none; } }
@keyframes xs-glow { from { opacity: 0; } to { opacity: 1; } }
@keyframes xs-rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

/* ---------- Story ---------- */

.xs-story, .xs-together { padding-block: clamp(5rem, 3rem + 8vw, 10rem); background: var(--midnight); color: var(--ivory); }
.xs-together { background: linear-gradient(180deg, var(--midnight) 0, var(--aubergine) var(--fade), var(--aubergine) calc(100% - var(--fade)), var(--midnight) 100%); }
.xs-story__grid, .xs-together__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter); align-items: start; }
.xs-h2 { grid-column: 1 / span 5; margin: 0; font: 400 var(--step-4)/1 var(--serif); letter-spacing: -0.03em; color: var(--ivory); }
.xs-story__text, .xs-together__text { grid-column: 7 / span 6; }
.xs-story__text p, .xs-together__text p { margin: 0 0 1.25rem; max-width: 38ch; font: 400 var(--step-1)/1.6 var(--sans); color: var(--ivory-soft); }
.xs-story__text .xs-story__lead { font: italic 400 var(--step-2)/1.35 var(--serif); color: var(--ivory); }

/* ---------- The heart of it ---------- */

.xs-heart {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 4rem + 9vw, 12rem);
  background: var(--midnight);
  color: var(--ivory);
  text-align: center;
}
.xs-heart__light {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(60rem, 130vw);
  aspect-ratio: 1;
  translate: -50% -45%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(246, 214, 160, 0.22), rgba(230, 166, 79, 0.06) 55%, rgba(230, 166, 79, 0));
  pointer-events: none;
}
.xs-heart__inner { position: relative; }
.xs-heart__label { margin: 0 0 2rem; font: 500 var(--step-0)/1 var(--sans); letter-spacing: 0.02em; color: var(--gold); }
.xs-verse { max-width: 40rem; margin: 0 auto; }
.xs-verse blockquote { margin: 0; }
.xs-verse p { margin: 0; font: italic 400 clamp(1.7rem, 1rem + 1.9vw, 2.9rem)/1.3 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.xs-verse figcaption { margin-top: 1.75rem; font: 400 var(--step-0)/1.4 var(--sans); color: var(--ivory-soft); }
.xs-verse cite { font-style: normal; font-weight: 500; color: var(--gold); }
.xs-heart__text { max-width: 36rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; font: 400 var(--step-1)/1.6 var(--sans); color: var(--ivory-soft); }

/* ---------- Visitor details (ivory panel) ---------- */

.xs-visit__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter); align-items: start; }
.xs-visit__intro { grid-column: 1 / span 5; }
.xs-visit__intro h2 { margin: 0 0 1rem; font: 400 var(--step-4)/1 var(--serif); letter-spacing: -0.03em; }
.xs-visit__intro p { margin: 0; font-size: var(--step-1); line-height: 1.5; }
.xs-facts { grid-column: 7 / span 6; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.xs-facts > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.xs-facts dt { font: 500 var(--step--1)/1.6 var(--sans); letter-spacing: 0.02em; color: var(--gold-deep); }
.xs-facts dd { margin: 0; font: 400 var(--step-1)/1.4 var(--serif); color: var(--ink); }
.xs-facts__note { display: block; margin-top: 0.35rem; font: 500 var(--step--1)/1.4 var(--sans); color: var(--ink-soft); }
.xs-visit__actions { grid-column: 7 / span 6; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }

@media (max-width: 960px) {
  .xs-hero .ev-art__curtain { width: 30%; }
  .xs-h2, .xs-story__text, .xs-together__text, .xs-visit__intro, .xs-facts, .xs-visit__actions { grid-column: 1 / -1; }
  .xs-story__grid, .xs-together__grid, .xs-visit__grid { grid-template-columns: minmax(0, 1fr); }
  .xs-facts > div { grid-template-columns: 5.5rem 1fr; }
}