/* ==========================================================================
   Revised preview (preview.html), built on Concept A
   Loaded after site.css and concepts.css (which supplies the palette,
   .btn--gold and .btn--xl). Everything here is scoped to .pv-* classes.
   Rules: words, invitation and service time are visible from the first
   frame; the footage leads; text stays clear of the figure and the light.
   ========================================================================== */

/* ---------- Hero ---------- */

.pv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--midnight);
  color: var(--on-dark);
}

/* The footage fills the right two-thirds, so its centre (the woman and the
   light ahead of her) sits at about 67% across, well clear of the words */
.pv-hero__media { position: absolute; inset: 0 0 0 34%; z-index: -2; }
.pv-hero__media .media { position: absolute; inset: 0; background: var(--midnight); }
.pv-hero__media .media__parallax { inset: 0; }
.pv-hero__media .media img,
.pv-hero__media .media video { object-position: 50% 50%; }
.pv-hero .media--hero { animation: pv-settle 3.5s var(--ease-out) both; }
@keyframes pv-settle { from { transform: scale(1.04); } }

/* Still shown until the video plays (and whenever it can't) */
.placeholder--quiet { position: absolute; inset: 0; transition: opacity 1s ease; }
.pv-hero .placeholder--quiet {
  background:
    radial-gradient(42% 58% at 50% 50%, rgba(246, 214, 160, 0.16), rgba(246, 214, 160, 0) 70%),
    radial-gradient(70% 80% at 50% 45%, #4f1c66, var(--midnight) 80%);
}
.pv-hero .scene__door { width: 13%; min-width: 5.5rem; bottom: 20%; }
.pv-hero .scene__floor { height: 20%; }
.pv-hero .scene__rays { width: 46%; height: 22%; opacity: 0.55; }

/* Soft gold light where the footage's own light sits: a whisper, not a filter */
.pv-hero__light {
  position: absolute;
  left: 50%; top: 42%;
  width: 62%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(246, 214, 160, 0.2), rgba(230, 166, 79, 0.07) 55%, rgba(230, 166, 79, 0));
  mix-blend-mode: screen;
  pointer-events: none;
  animation: pv-breathe 9s ease-in-out infinite alternate;
}
@keyframes pv-breathe { to { opacity: 0.7; transform: translate(-50%, -50%) scale(1.06); } }

/* Purple grade: midnight under the words, royal purple where it meets the footage */
.pv-hero__grade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--midnight) 0%, #2d0c3d 24%, rgba(75, 29, 96, 0.9) 34%, rgba(105, 45, 133, 0.5) 42%, rgba(105, 45, 133, 0.18) 50%, rgba(105, 45, 133, 0) 58%),
    linear-gradient(0deg, rgba(37, 10, 49, 0.7) 0%, rgba(37, 10, 49, 0) 24%),
    linear-gradient(180deg, rgba(37, 10, 49, 0.6) 0%, rgba(37, 10, 49, 0) 16%),
    radial-gradient(38% 46% at 100% 100%, rgba(105, 45, 133, 0.5), rgba(105, 45, 133, 0) 70%);
}

.pv-hero__motes {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pv-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + 2vh);
  padding-bottom: 4vh;
}
.pv-hero__copy { max-width: 46vw; }

.pv-hero__church { margin: 0 0 1.4rem; }
.pv-hero__church strong {
  display: block;
  font: 500 var(--step-1)/1.2 var(--serif);
  color: var(--ivory);
}
.pv-hero__church span { font-size: var(--step--1); color: var(--on-dark-soft); }

.pv-hero__title {
  margin: 0 0 1.3rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(2.6rem, 0.4rem + 4.7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.pv-hero__title .hl { white-space: nowrap; }
.pv-hero__title .hl--em { padding-left: 0.45em; }

.pv-hero__lede {
  margin: 0 0 1.5rem;
  font-size: var(--step-1);
  line-height: 1.45;
  color: #ece1f1;
}
.pv-hero__invite {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  margin: 0 0 1.6rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(230, 166, 79, 0.6);
  border-radius: 999px;
  background: rgba(37, 10, 49, 0.4);
  font-size: var(--step-0);
  line-height: 1.35;
  color: var(--ivory);
}
.pv-hero__invite strong { color: var(--gold); font-weight: 600; }
.pv-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.pv-hero__where { margin: 1.1rem 0 0; font-size: var(--step--1); color: var(--on-dark-soft); }

.pv-hero .video-toggle { right: 1.25rem; bottom: 1.25rem; }

/* Headline: a slight settle and one glint of sunlight. Always fully readable. */
html:not(.reduce-motion) .pv-hero .hl__text { animation: hl-settle 1.4s var(--ease-out) both; animation-delay: calc(var(--i) * 0.12s); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html:not(.reduce-motion) .pv-hero .hl__text {
    color: transparent;
    background: linear-gradient(105deg, var(--ivory) 0 42%, #ffe6b8 48%, #fffaf0 50%, var(--ivory) 56% 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: hl-settle 1.4s var(--ease-out) both, hl-glint 2.4s ease-in-out both;
    animation-delay: calc(var(--i) * 0.12s), calc(var(--i) * 0.25s + 0.5s);
  }
}

/* ---------- Shared section type ---------- */

.pv-h2 {
  margin: 0;
  font: 500 var(--step-4)/1 var(--serif);
  letter-spacing: -0.03em;
  color: var(--aubergine);
}
.pv-eyebrow {
  margin: 0 0 0.9rem;
  font: italic 400 var(--step-1)/1.2 var(--serif);
  color: var(--gold);
}

/* ---------- Welcome (ivory, compact) ---------- */

.pv-welcome { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }
.pv-welcome__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem var(--gutter);
  align-items: start;
}
.pv-welcome .pv-h2 { grid-column: 1 / span 6; max-width: 12ch; }
.pv-welcome__text { grid-column: 8 / span 5; padding-top: 0.6rem; }
.pv-welcome__text p { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.pv-welcome__verse {
  grid-column: 8 / span 5;
  margin: 0.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gold);
  color: var(--gold-deep);
}
.pv-welcome__verse p { margin: 0 0 0.5rem; font: italic 400 var(--step-1)/1.4 var(--serif); }
.pv-welcome__verse cite { font-style: normal; font-size: var(--step--1); color: var(--ink-soft); }

/* ---------- What we gather around (varied proportions) ---------- */

.pv-gather { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); background: var(--lavender); }
.pv-gather .pv-h2 { margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.pv-gather__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3rem var(--gutter);
  align-items: start;
}
.pv-item h3 { margin: 1.25rem 0 0.5rem; font: 500 var(--step-2)/1.1 var(--serif); color: var(--aubergine); }
.pv-item p { margin: 0 0 0.75rem; color: var(--ink-soft); max-width: 30rem; }
.pv-item__img { position: relative; overflow: hidden; border-radius: 0.75rem; }
.pv-item--worship { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.pv-item--worship .pv-item__img { aspect-ratio: 4 / 5.2; border-radius: 999px 999px 0.75rem 0.75rem; }
.pv-item--word { grid-column: 7 / span 6; }
.pv-item--word .pv-item__img { aspect-ratio: 3 / 2; }
.pv-item--prayer { grid-column: 7 / span 3; }
.pv-item--prayer .pv-item__img { aspect-ratio: 1; }
.pv-item--fellowship { grid-column: 10 / span 3; }
.pv-item--fellowship .pv-item__img { aspect-ratio: 1; }
/* Quiet plates while photographs are on their way */
.pv-gather .placeholder--quiet { background: radial-gradient(80% 70% at 75% 15%, rgba(230, 166, 79, 0.28), rgba(230, 166, 79, 0) 60%), linear-gradient(160deg, #cfb3dc, #9d6fb4); }
.pv-item--worship .placeholder--quiet { background: radial-gradient(70% 50% at 50% 20%, rgba(246, 214, 160, 0.45), rgba(246, 214, 160, 0) 70%), linear-gradient(180deg, #7b3b98, var(--aubergine)); }

/* ---------- Pastors (royal purple) ---------- */

.pv-pastors {
  padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(230, 166, 79, 0.14), rgba(230, 166, 79, 0) 60%),
    linear-gradient(160deg, var(--royal), #4b1d60);
  color: var(--on-dark);
}
.pv-pastors__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem var(--gutter);
  align-items: center;
}
.pv-pastors__photo { grid-column: 1 / span 5; aspect-ratio: 4 / 5; border-radius: 1.25rem; max-height: 38rem; }
.pv-pastors__photo .placeholder--quiet {
  display: grid;
  place-items: center;
  background: linear-gradient(170deg, #4f1d66, var(--aubergine));
}
.plate-mark { width: 18%; max-width: 4.5rem; color: var(--gold); opacity: 0.85; }
.pv-pastors__text { grid-column: 7 / span 6; }
.pv-pastors__text h2 {
  margin: 0 0 1.5rem;
  font: 500 var(--step-4)/1 var(--serif);
  letter-spacing: -0.03em;
}
.pv-pastors__text h2 span { display: block; font-style: italic; }
.pv-pastors__text p { max-width: 32rem; font-size: var(--step-1); line-height: 1.5; color: #ece1f1; }

/* ---------- Sunday (midnight plum, compact) ---------- */

.pv-sunday {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--aubergine);
  color: var(--on-dark);
  border-top: 1px solid rgba(230, 166, 79, 0.25);
}
.pv-sunday__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem var(--gutter);
  align-items: end;
}
.pv-sunday__grid > :first-child { grid-column: 1 / span 6; }
.pv-sunday h2 { font: 500 var(--step-4)/1 var(--serif); letter-spacing: -0.03em; }
.pv-sunday h2 span { color: var(--gold); white-space: nowrap; }
.pv-sunday__info { grid-column: 8 / span 5; }
.pv-sunday__info address { margin-bottom: 0.8rem; font: 400 var(--step-2)/1.15 var(--serif); }
.pv-sunday__info p { color: var(--on-dark-soft); }
.pv-sunday .actions { margin-top: 1.5rem; }

/* ---------- Prayer and giving (ivory) ---------- */

.pv-invite { padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.pv-invite__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; }
.pv-invite__item h2 { margin: 0 0 1rem; font: 500 var(--step-3)/1.05 var(--serif); letter-spacing: -0.02em; color: var(--aubergine); }
.pv-invite__item p { max-width: 30rem; color: var(--ink-soft); margin-bottom: 1.5rem; }
.pv-invite__item + .pv-invite__item { padding-left: 2.5rem; border-left: 1px solid var(--gold); }

/* ---------- Mobile ---------- */

@media (max-width: 960px) {
  /* Footage on top, words beneath it, all within one screen */
  .pv-hero { display: flex; flex-direction: column; height: 100svh; min-height: 36rem; }
  .pv-hero__media { position: relative; inset: auto; flex: 1 1 auto; min-height: 15rem; }
  .pv-hero__media::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 34%;
    background: linear-gradient(0deg, var(--midnight), rgba(37, 10, 49, 0));
    pointer-events: none;
  }
  .pv-hero__media .media img,
  .pv-hero__media .media video { object-position: 50% 30%; }
  .pv-hero .scene__door { width: 22%; bottom: 18%; }
  .pv-hero__light { width: 110%; top: 46%; }
  .pv-hero__grade {
    background:
      linear-gradient(180deg, rgba(37, 10, 49, 0.65) 0%, rgba(37, 10, 49, 0) 14%),
      radial-gradient(60% 40% at 0% 55%, rgba(105, 45, 133, 0.45), rgba(105, 45, 133, 0) 70%);
  }
  .pv-hero__inner { flex: none; min-height: 0; display: block; margin-top: -2.25rem; padding-top: 0; padding-bottom: 1.25rem; }
  .pv-hero__copy { max-width: none; }
  .pv-hero__church { margin-bottom: 0.8rem; }
  .pv-hero__church strong { font-size: var(--step-0); }
  .pv-hero__title { font-size: clamp(2.1rem, 10.2vw, 3.6rem); margin-bottom: 0.8rem; }
  .pv-hero__title .hl--em { padding-left: 0; }
  .pv-hero__lede { font-size: var(--step-0); margin-bottom: 0.9rem; }
  .pv-hero__invite { margin-bottom: 1rem; padding: 0.5rem 0.9rem; font-size: 0.92rem; }
  .pv-hero__actions { flex-wrap: nowrap; gap: 0.6rem; }
  .pv-hero__actions .btn { flex: 1 1 auto; padding-inline: 0.9rem; }
  .pv-hero__where { margin-top: 0.75rem; }
  .pv-hero .video-toggle { top: calc(var(--header-h) + 0.75rem); bottom: auto; }

  .pv-welcome__grid, .pv-pastors__grid, .pv-sunday__grid { grid-template-columns: 1fr; }
  .pv-welcome .pv-h2, .pv-welcome__text, .pv-welcome__verse,
  .pv-pastors__photo, .pv-pastors__text,
  .pv-sunday__grid > :first-child, .pv-sunday__info { grid-column: 1 / -1; }
  .pv-welcome__text { padding-top: 0; }

  .pv-gather__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; }
  .pv-item--worship, .pv-item--word { grid-column: 1 / -1; grid-row: auto; }
  .pv-item--prayer { grid-column: 1; }
  .pv-item--fellowship { grid-column: 2; }
  .pv-item--worship .pv-item__img { aspect-ratio: 4 / 4.4; }
  .pv-item--prayer h3, .pv-item--fellowship h3 { font-size: var(--step-1); }
  .pv-item--prayer p, .pv-item--fellowship p { font-size: var(--step--1); }

  .pv-pastors__photo { width: min(80%, 22rem); }

  .pv-invite__grid { grid-template-columns: 1fr; }
  .pv-invite__item + .pv-invite__item { padding-left: 0; padding-top: 2rem; border-left: 0; border-top: 1px solid var(--gold); }
}

/* Short laptop screens: tighten the hero so everything sits in one view */
@media (min-width: 961px) and (max-height: 760px) {
  .pv-hero__church { margin-bottom: 1rem; }
  .pv-hero__title { font-size: clamp(2.6rem, 0.4rem + 4.3vw, 5.2rem); margin-bottom: 1rem; }
  .pv-hero__lede { margin-bottom: 1.1rem; }
  .pv-hero__invite { margin-bottom: 1.2rem; }
}

/* ---------- Reduced motion: a polished still ---------- */

.reduce-motion .pv-hero .media--hero,
.reduce-motion .pv-hero__light,
.reduce-motion .pv-hero .hl__text { animation: none !important; }
.reduce-motion .pv-hero__motes { display: none; }

/* ==========================================================================
   Door hero ("The door is open. You are welcome here.")
   A once-through film: the door opens, a hand is offered, the scene holds.
   ========================================================================== */

.pv-hero--door .pv-hero__media { inset: 0 0 0 42%; }
.pv-hero--door .media--hero { animation: none; }
.pv-hero--door .pv-hero__copy { max-width: 41vw; }
.pv-hero--door .pv-hero__title { font-size: clamp(2.6rem, 0.4rem + 4.1vw, 5.4rem); }
.pv-hero--door .pv-hero__grade {
  background:
    linear-gradient(90deg, var(--midnight) 0%, #2b0b3b 32%, rgba(70, 26, 90, 0.8) 41%, rgba(90, 38, 114, 0.35) 47%, rgba(105, 45, 133, 0) 55%),
    linear-gradient(0deg, rgba(37, 10, 49, 0.55) 0%, rgba(37, 10, 49, 0) 20%),
    linear-gradient(180deg, rgba(37, 10, 49, 0.6) 0%, rgba(37, 10, 49, 0) 16%);
}
/* Quiet dark ground behind the film: no stand-in imagery */
.pv-door__frame { position: absolute; inset: 0; background: linear-gradient(180deg, #2a0c37, #1c0726); }
.pv-door img, .pv-door video { object-position: 50% 50%; }
/* While the film is set to play, hold back the final-frame still so the
   sequence starts from the closed door rather than jumping backwards */
.pv-door.is-sequence img { opacity: 0 !important; }

/* Review notes: only on this computer's preview, only where a file is missing */
.is-local [data-awaiting].is-awaiting::after {
  content: attr(data-awaiting);
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(82%, 22rem);
  padding: 0.9rem 1.1rem;
  border: 1px dashed rgba(255, 247, 235, 0.55);
  border-radius: 0.75rem;
  background: rgba(37, 10, 49, 0.65);
  color: var(--ivory);
  font: 500 0.8rem/1.45 var(--sans);
  text-align: center;
}

/* ---------- Supporting film: walking into the light ---------- */

.pv-journey { padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }
.pv-journey__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem var(--gutter);
  align-items: center;
}
.pv-journey__film { grid-column: 1 / span 7; position: relative; }
.pv-journey__media { aspect-ratio: 16 / 10; border-radius: 1rem; overflow: hidden; }
.pv-journey__media .media__parallax { inset: 0; }
.pv-journey .placeholder--quiet { background: linear-gradient(160deg, #4b1d60, var(--aubergine)); }
.pv-journey .video-toggle { right: 1rem; bottom: 1rem; }
.pv-journey__text { grid-column: 9 / span 4; }
.pv-journey__text .pv-h2 { margin-bottom: 1.5rem; font-size: var(--step-3); line-height: 1.05; }
.pv-journey__text > p { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.pv-journey .pv-welcome__verse { margin: 1.5rem 0; }

@media (max-width: 960px) {
  .pv-hero--door .pv-hero__media { inset: auto; }
  .pv-hero--door .pv-hero__copy { max-width: none; }
  .pv-hero--door .pv-hero__title { font-size: clamp(2.1rem, 10.2vw, 3.6rem); }
  .pv-hero--door .pv-hero__grade { background: linear-gradient(180deg, rgba(37, 10, 49, 0.6) 0%, rgba(37, 10, 49, 0) 14%); }
  .pv-journey__grid { grid-template-columns: 1fr; }
  .pv-journey__film, .pv-journey__text { grid-column: 1 / -1; }
  .pv-journey__media { aspect-ratio: 4 / 4.4; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .pv-hero--door .pv-hero__title { font-size: clamp(2.6rem, 0.4rem + 3.8vw, 4.8rem); }
}
.pv-hero__media .pv-door img, .pv-hero__media .pv-door video { object-position: 50% 45%; }