/* ZOE 2026 — front page: the forest walk.
   Scene/atmosphere layers + butterfly path (theme chrome injected via
   wp_body_open) and the chapter/clearing section styles the home-page
   patterns key into. Ported from the mockup's index.html. */

/* ═══ THE SCENE — fixed forest behind everything ═══ */
#zoe-scene video {
  position: absolute; inset: -4%; width: 108%; max-width: none; height: 108%;
  object-fit: cover; transform-origin: center 60%;
  will-change: transform, opacity; transition: opacity 2.6s ease;
}
#zoe-forest2 { opacity: 0; }

.zoe-rays { position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen; opacity: .4; }
.zoe-rays::before, .zoe-rays::after {
  content: ''; position: absolute; top: -25%; left: 16%; width: 36%; height: 140%;
  background: linear-gradient(100deg, transparent 22%, rgba(231,205,142,.17) 46%, transparent 72%);
  filter: blur(7px); animation: zoeraysway 12s ease-in-out infinite alternate;
}
.zoe-rays::after {
  left: 52%; width: 42%; animation-duration: 16s; animation-delay: -6s;
  background: linear-gradient(80deg, transparent 24%, rgba(231,205,142,.12) 50%, transparent 76%);
}
@keyframes zoeraysway { from { opacity: .55; transform: rotate(10deg) translateX(-3%); } to { opacity: 1; transform: rotate(14deg) translateX(4%); } }

.zoe-fog {
  position: absolute; left: -20%; width: 140%; height: 46vh; bottom: -8vh; pointer-events: none;
  background: radial-gradient(60% 90% at 50% 100%, rgba(190,205,170,.15), transparent 70%);
  filter: blur(24px); animation: zoefogdrift 28s ease-in-out infinite alternate;
}
.zoe-fog.f2 { bottom: 18vh; height: 30vh; opacity: .55; animation-duration: 36s; animation-delay: -14s; }
@keyframes zoefogdrift { from { transform: translateX(-6%); } to { transform: translateX(7%); } }

.zoe-fg { position: absolute; pointer-events: none; filter: blur(16px); opacity: .9; will-change: transform; }
.zoe-fg.l { left: -14vw; top: -18vh; width: 46vw; height: 62vh; background: radial-gradient(60% 60% at 30% 30%, rgba(7,12,6,.95), transparent 70%); }
.zoe-fg.r { right: -16vw; bottom: -20vh; width: 52vw; height: 68vh; background: radial-gradient(60% 60% at 70% 70%, rgba(7,12,6,.95), transparent 70%); }

.zoe-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 90% at 50% 32%, transparent 34%, rgba(6,12,5,.5) 100%),
    linear-gradient(to bottom, rgba(13,33,61,.42) 0%, rgba(6,12,5,.12) 30%, rgba(6,12,5,.2) 60%, rgba(10,15,7,.72) 100%);
}
.zoe-deep { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(120% 100% at 50% 40%, transparent 30%, rgba(4,9,4,.65) 100%); }
.zoe-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(90% 70% at 50% 58%, rgba(231,205,142,.36), rgba(155,105,37,.12) 45%, transparent 75%); }
#zoe-scene .zoe-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ PROGRESS "PATH" with chapter markers ═══ */
.zoe-path { position: fixed; top: 0; right: 26px; bottom: 0; width: 2px; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.zoe-path.show { opacity: 1; }
.zoe-path .track { position: absolute; top: 12vh; bottom: 12vh; left: 0; width: 1px; background: rgba(231,205,142,.18); }
.zoe-path .fill { position: absolute; top: 12vh; left: 0; width: 1px; height: 0; background: linear-gradient(var(--zoe-gold-hi), var(--zoe-gold)); box-shadow: 0 0 8px rgba(231,205,142,.6); }
.zoe-path .bud {
  position: absolute; top: 12vh; left: 0; width: 28px; height: 24px; margin: -12px 0 0 -14px; background: var(--zoe-gold-hi);
  -webkit-mask: url('../img/butterfly.png') center/contain no-repeat;
  mask: url('../img/butterfly.png') center/contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(231,205,142,.95));
  animation: zoepflutter 1.7s ease-in-out infinite;
}
@keyframes zoepflutter { 0%, 100% { transform: rotate(-6deg) scaleX(1); } 50% { transform: rotate(7deg) scaleX(.82); } }
.zoe-path .dot { position: absolute; left: 0; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; border: 1px solid rgba(231,205,142,.45); background: rgba(9,17,28,.6); transition: .6s; }
.zoe-path .dot.lit { background: var(--zoe-gold-hi); border-color: var(--zoe-gold-hi); box-shadow: 0 0 10px rgba(231,205,142,.85); }
@media (max-width: 760px) {
  .zoe-path { right: 13px; }
  .zoe-path .bud { width: 20px; height: 17px; margin: -9px 0 0 -10px; }
  .zoe-path .dot.lit { box-shadow: 0 0 6px rgba(231,205,142,.85); }
}

/* desktop: nav links leave the bar once you set off (the side rail takes over) */
@media (min-width: 761px) {
  body.home .zoe-bar.scrolled .zoe-bar-links .wp-block-navigation-item__content { opacity: 0; pointer-events: none; }
}
@media (max-width: 760px) {
  body.home .zoe-bar { background: linear-gradient(rgba(6,12,5,0), rgba(6,12,5,0)); border-bottom: 1px solid transparent; transition: background .5s, border-color .5s; }
  body.home .zoe-bar.scrolled { background: linear-gradient(rgba(6,12,5,.66), rgba(6,12,5,.66)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom-color: rgba(231,205,142,.28); }
}

/* ═══ CHAPTERS ═══ */
.zoe-chapter { min-height: 86vh; display: flex; align-items: center; justify-content: center; padding: 10vh 32px; position: relative; }
.zoe-threshold { min-height: 100vh; }
.zoe-clearing {
  max-width: 940px; width: 100%; text-align: center; padding: 66px 76px;
  background: rgba(9,17,28,.44); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(231,205,142,.34); border-radius: 4px;
  box-shadow: 0 40px 90px rgba(0,0,0,.5), inset 0 0 60px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(80px) scale(.985);
  transition: opacity 1.5s cubic-bezier(.22,.8,.3,1), transform 1.5s cubic-bezier(.22,.8,.3,1);
}
.zoe-clearing.in { opacity: 1; transform: none; }
.zoe-clearing.zoe-wide { max-width: 1120px; }
.zoe-clearing.zoe-bare { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; }
.zoe-clearing > * {
  opacity: 0; transform: translateY(28px); filter: blur(5px);
  transition: opacity 1.2s cubic-bezier(.22,.8,.3,1), transform 1.2s cubic-bezier(.22,.8,.3,1), filter 1.2s cubic-bezier(.22,.8,.3,1);
}
.zoe-clearing.in > * { opacity: 1; transform: none; filter: none; }
.zoe-clearing.in > :nth-child(2) { transition-delay: .15s; }
.zoe-clearing.in > :nth-child(3) { transition-delay: .3s; }
.zoe-clearing.in > :nth-child(4) { transition-delay: .45s; }
.zoe-clearing.in > :nth-child(5) { transition-delay: .6s; }
.zoe-clearing.in > :nth-child(6) { transition-delay: .72s; }
.zoe-clearing.in > :nth-child(7) { transition-delay: .84s; }
.zoe-clearing.in > :nth-child(8) { transition-delay: .94s; }
.zoe-clearing.in > :nth-child(9) { transition-delay: 1.02s; }
.zoe-clearing.in > :nth-child(10) { transition-delay: 1.1s; }

.zoe-clearing h2 { font-family: var(--zoe-display); font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.02; color: var(--zoe-cream); margin: 18px 0; }
.zoe-clearing h2 em { font-family: var(--zoe-serif); font-style: italic; color: var(--zoe-gold-hi); }
.zoe-clearing p { font-family: var(--zoe-serif); font-size: clamp(1.3rem, 1.65vw, 1.7rem); line-height: 1.64; color: var(--zoe-grain); margin: 0; }
.zoe-clearing p + p { margin-top: 18px; }
/* Eyebrow lines are paragraphs here (spans in the mockup), so out-specific
   the .zoe-clearing p sizing that would otherwise inflate them. */
.zoe-clearing p.zoe-eyebrow { font-family: var(--zoe-serif); font-size: .84rem; line-height: 1.62; color: var(--zoe-gold-hi); }

/* ═══ 1 · Threshold (hero) ═══ */
.zoe-chapter.zoe-threshold { padding-top: 0; padding-bottom: 0; }
.zoe-threshold .zoe-clearing {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none;
  max-width: 1400px; padding: 0 20px 8vh;
  display: flex; flex-direction: column; align-items: center;
}
.zoe-hero-screen { min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 90px; }
.zoe-hero-title { width: min(1240px, 94vw, 128vh); margin: 0 auto; }
.zoe-hero-title img { filter: drop-shadow(0 6px 34px rgba(155,105,37,.6)); animation: zoeheroglow 5s ease-in-out 1s infinite; }
/* The mockup's hero lines sit tight (10px rhythm) — override the ~19px
   flow gap WP injects between clearing children. */
.zoe-clearing p.zoe-hero-sub { font-family: var(--zoe-body); font-size: clamp(1.7rem, 3.8vw, 2.5rem); color: var(--zoe-cream); margin: 0 !important; }
.zoe-hero-conf { margin: 0 0 10px !important; color: var(--zoe-cream); }
.zoe-hero-loc { margin: 10px 0 0 !important; color: var(--zoe-cream); }
.zoe-cue { margin-top: -4vh; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: var(--zoe-gold-hi); transition: opacity .9s ease; }
.zoe-cue.away { opacity: 0; }
.zoe-cue span { font-family: var(--zoe-serif); font-weight: 600; font-size: .7rem; letter-spacing: .34em; text-transform: uppercase; }
.zoe-cue i { width: 1px; height: 52px; background: linear-gradient(var(--zoe-gold-hi), transparent); animation: zoepulse 2.2s ease-in-out infinite; }
@keyframes zoeheroglow { 0%, 100% { filter: drop-shadow(0 4px 22px rgba(155,105,37,.5)); } 50% { filter: drop-shadow(0 4px 54px rgba(155,105,37,.95)); } }
@keyframes zoepulse { 0%, 100% { opacity: .4; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.25); } }

/* ═══ 2 · Letter ═══ */
/* Comms 2026-07-23: inverted from the mockup — heading gold, "greatest story"
   (the em) cream. Everywhere else keeps cream headings + gold ems. */
.zoe-letter h2 { margin-bottom: 38px; color: var(--zoe-gold-hi); }
.zoe-letter h2 em { color: var(--zoe-cream); }
.zoe-sig-line { margin-top: 22px !important; }
.zoe-quote-line { font-style: italic; color: var(--zoe-gold-hi) !important; }
.zoe-sig {
  height: 28px; width: 148px; margin: 12px auto 0; background: var(--zoe-gold-hi);
  -webkit-mask: url('../img/pastorlesliesignature.png') center/contain no-repeat;
  mask: url('../img/pastorlesliesignature.png') center/contain no-repeat;
}

/* ═══ Scripture chapters (pullquote) ═══ */
.zoe-scripture-ch .zoe-clearing { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; max-width: 1100px; }
.zoe-scripture { border: 0; padding: 0; margin: 0; }
.zoe-scripture blockquote { border: 0; padding: 0; margin: 0; }
.zoe-scripture blockquote p {
  font-family: var(--zoe-display); font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.3;
  color: var(--zoe-cream); text-shadow: 0 3px 7px rgba(0,0,0,.55), 0 4px 40px rgba(0,0,0,.65);
  font-style: normal; margin: 0;
  text-wrap: balance; /* mockup balances scripture lines — changes where they break */
}
.zoe-scripture blockquote p em { font-family: var(--zoe-serif); font-style: italic; color: var(--zoe-gold-hi); }
/* "flip" variant (all 4 interludes): serif-italic cream base; em = blackletter in gold.
   Highlighted word = <em>, no class needed. A gold serif-italic word is still available
   as .zoe-gold on a span, but the design rule is gothic = gold, serif italic = cream. */
.zoe-scripture-ch.zoe-flip blockquote p { font-family: var(--zoe-serif); font-style: italic; }
.zoe-scripture-ch.zoe-flip blockquote p em { font-family: var(--zoe-display); font-style: normal; color: var(--zoe-gold-hi); }
.zoe-scripture blockquote p .zoe-gold, .zoe-scripture blockquote p em.zoe-gold { color: var(--zoe-gold-hi); }
.zoe-scripture cite {
  display: block; margin-top: 28px; font-family: var(--zoe-serif); font-weight: 600; font-style: normal;
  letter-spacing: .4em; text-transform: uppercase; font-size: .78rem; color: var(--zoe-gold-hi);
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}

/* ═══ 4 · Details rows ═══ */
.zoe-rows { margin-top: 10px; }
.zoe-row { padding: 34px 0; border-bottom: 1px solid rgba(231,205,142,.16); }
.zoe-row:last-child { border: 0; }
.zoe-row p { margin: 0; }
.zoe-d { font-family: var(--zoe-serif); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; font-size: .84rem !important; color: var(--zoe-gold-hi) !important; }
.zoe-t { font-family: var(--zoe-display) !important; font-size: 2rem !important; color: var(--zoe-cream) !important; }
.zoe-s { font-family: var(--zoe-serif); font-style: italic; font-size: 1.3rem !important; color: var(--zoe-grain); opacity: .9; }
.zoe-row-body { margin-top: 16px !important; font-size: 1.25rem !important; }
.zoe-address { margin-top: 22px !important; font-size: 1.25rem !important; }

/* ═══ 6 · Speakers ═══ */
.zoe-guests-ch h2 { margin-bottom: 48px; }
.zoe-guests { display: flex; flex-direction: column; align-items: center; gap: 110px; }
.zoe-guest { width: min(788px, 100%); }
.zoe-frame { aspect-ratio: 1 / 1; max-width: 520px; margin: 0 auto; overflow: hidden; border: 1px solid var(--zoe-gold-hi); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.zoe-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.zoe-gn { font-family: var(--zoe-body) !important; font-size: 1.85rem !important; color: var(--zoe-cream) !important; margin-top: 24px !important; }
.zoe-gr { font-family: var(--zoe-serif); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: .8rem !important; color: var(--zoe-gold-hi) !important; margin-top: 8px !important; }
.zoe-gbio { margin-top: 18px !important; font-size: clamp(1.15rem, 1.4vw, 1.4rem) !important; line-height: 1.62; text-align: center; }
@media (max-width: 760px) {
  .zoe-gr .zoe-cred { display: block; }
  .zoe-gr .zoe-dot { display: none; }
}

/* ═══ 8 · Rates ═══ */
.zoe-rates-ch h2 { margin-bottom: 56px; }
.zoe-tiers { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 0 0 44px; }
/* These groups are flex/grid here but "flow" to WP, which injects
   margin-block-start on every sibling after the first — that margin
   skews flex stretch (first item taller) and grid alignment. Gap owns
   the spacing; kill the injected margins. */
.zoe-tiers > *, .zoe-guests > *, .zoe-ig-grid > * { margin: 0 !important; }
.zoe-tier { min-width: 150px; padding: 20px 24px; border: 1px solid rgba(231,205,142,.3); background: rgba(9,17,28,.35); }
/* The mockup's chips have zero inner margins (global reset) — kill the
   editor's flow-layout gaps so every chip sizes identically. */
.zoe-tier p { margin: 0 !important; }
.zoe-tier-label { font-family: var(--zoe-serif); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .74rem !important; color: var(--zoe-gold-hi) !important; }
.zoe-amt { font-family: var(--zoe-display) !important; font-size: 3rem !important; color: var(--zoe-cream) !important; }
.zoe-amt sup { font-size: .55em; vertical-align: .5em; color: inherit; }
.zoe-tier-note { font-family: var(--zoe-serif); font-style: italic; color: var(--zoe-grain); opacity: .85; font-size: .95rem !important; }
.zoe-rates-ch .zoe-btn .wp-block-button__link { padding: 13px 32px; font-size: .78rem; }

/* ═══ 10 · Foundation ═══ */
.zoe-foundation-ch h2 { margin-bottom: 44px; }
@media (min-width: 761px) { .zoe-foundation-ch h2 { white-space: nowrap; } }

/* ═══ 11 · Finale ═══ */
.zoe-finale { padding-bottom: 6vh; }
/* Finale — same drop shadow as the verses; serif italic with a gold opening */
.zoe-finale h2 { font-family: var(--zoe-serif); font-style: italic; color: var(--zoe-cream); text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.zoe-finale h2 .zoe-gold { color: var(--zoe-gold-hi); font-family: var(--zoe-display); font-style: normal; }
.zoe-finale-btns { margin-top: 26px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ═══ 12 · Instagram ═══ */
.zoe-insta-ch { min-height: auto; padding: 6vh 32px 14vh; }
.zoe-insta-ch .zoe-clearing { max-width: 1340px; padding-left: 20px; padding-right: 20px; }
.zoe-ig-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 28px; }
.zoe-ig-grid figure { position: relative; aspect-ratio: 1 / 1; overflow: hidden; margin: 0; background: var(--zoe-green); }
.zoe-ig-grid figure a { display: block; width: 100%; height: 100%; }
.zoe-ig-grid figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.zoe-ig-grid figure.zoe-contain img { object-fit: contain; padding: 12%; }
.zoe-ig-grid figure:hover img { transform: scale(1.06); }
.zoe-ig-follow { margin-top: 26px; justify-content: center; }

/* ═══ Mobile ═══ */
@media (max-width: 760px) {
  .zoe-chapter { min-height: 0; padding: 8vh 20px; }
  .zoe-clearing { padding: 44px 26px; }
  .zoe-guests { gap: 64px; }
  /* stacked rate chips are content-width in the mockup (uneven — comms
     feedback); uniform full width when they stack */
  .zoe-tier { width: 100%; }

  .zoe-chapter.zoe-threshold { padding-left: 0; padding-right: 0; }
  .zoe-threshold .zoe-clearing { padding-left: 0; padding-right: 0; }
  .zoe-hero-screen { padding-top: 0; }
  .zoe-hero-title { width: 100vw; max-width: 100vw; transform: scale(1.47); }

  .zoe-chapter.zoe-insta-ch { padding-left: 0; padding-right: 0; }
  .zoe-insta-ch .zoe-clearing { padding-left: 0; padding-right: 0; }
  .zoe-ig-grid { display: flex; overflow-x: auto; gap: 10px; padding: 0 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .zoe-ig-grid::-webkit-scrollbar { display: none; }
  .zoe-ig-grid figure { flex: 0 0 74vw; scroll-snap-align: center; }
  .zoe-ig-follow .wp-block-button__link { padding: 13px 32px; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .zoe-rays, .zoe-rays::before, .zoe-rays::after, .zoe-fog, .zoe-hero-title img, .zoe-cue i, .zoe-path .bud { animation: none; }
  #zoe-forest { transition: none; }
  .zoe-clearing, .zoe-clearing > * { transition-duration: .01s; filter: none; }
}