/* ════════════════════════════════════════════════════════════
   "Tradition of Faith" glow — sibling to the theme-song mist.
   A soft, cool gray-white CLOUD of light on the RIGHT of the hero,
   at the same height as the mist on the left. No rainfall: it simply
   brightens and dims on a very slow pulse, with very fuzzy, cloudlike
   edges. Hovering anywhere over it reveals a translucent plaque with
   the Foundation title + a link to read the story.

   Layering mirrors the mist, so it never steals clicks from the cards:
     • the glow veil sits BELOW the cards (z-index 1) and is the hover
       target — cards occlude it and stay clickable;
     • the plaque sits ABOVE the cards (z-index 5) when revealed.
   .faith-glow itself has no z-index/transform so it creates no stacking
   context that would trap the plaque beneath the cards.
   ════════════════════════════════════════════════════════════ */

.faith-glow {
  position: absolute;
  top: 46%;                                /* lowered to match the top of the left mist cloud */
  right: 4%;
  width: clamp(190px, 18vw, 250px);
  height: clamp(190px, 18vw, 240px);       /* taller than wide */
  pointer-events: none;
  outline: none;
}

/* Let hover fall THROUGH the hero content to the veil, while keeping the
   oval cards (the only interactive content) clickable — same routing the
   mist relies on. Harmless/idempotent if the mist already set these. */
.home-hero__content { pointer-events: none; }
.oval-card { pointer-events: auto; }

/* ── Glow veil (in front of the clouds, behind the cards) ── */
.faith-glow__veil {
  position: absolute;
  inset: 0;
  z-index: 1;                /* above the hero photo/overlay, below the cards */
  pointer-events: auto;      /* hovering ANY part of this reveals the plaque */
  filter: blur(22px);        /* heavy blur → very fuzzy, cloudlike */
  /* Cloud-blob silhouette with a very gradual center→edge falloff. */
  -webkit-mask-image: radial-gradient(62% 60% at 50% 48%, #000 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.22) 70%, transparent 100%);
  mask-image: radial-gradient(62% 60% at 50% 48%, #000 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.22) 70%, transparent 100%);
}

.faith-glow__veil > span {
  position: absolute;
  inset: -16%;
  pointer-events: none;
}

/* Cool gray-to-white base haze, matching the mist's tone (no warm gold).
   Very gradual center→edge falloff. Breathes gently in sync with the core. */
.faith-glow__fog {
  background: radial-gradient(circle at 50% 46%,
    rgba(252, 253, 255, 0.368) 0%,
    rgba(246, 249, 253, 0.253) 32%,
    rgba(240, 244, 250, 0.127) 60%,
    transparent 90%);
  animation: faith-fog-breathe 5s ease-in-out infinite;
}

/* Brighter inner core — this is what "brightens"; it clearly pulses.
   Many gradient stops → a smooth, gradual glow from a bright center. */
.faith-glow__core {
  background: radial-gradient(circle at 50% 46%,
    rgba(255, 255, 255, 1) 0%,
    rgba(253, 254, 255, 0.828) 16%,
    rgba(248, 251, 255, 0.506) 38%,
    rgba(241, 246, 253, 0.219) 64%,
    transparent 100%);
  animation: faith-pulse 5s ease-in-out infinite;
}

/* Slow but DEFINITE pulse — a clear brighten-and-grow, then dim-and-shrink. */
@keyframes faith-pulse {
  0%, 100% { opacity: 0.56; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.10); }
}

/* The surrounding haze breathes with it, so the whole cloud pulses. */
@keyframes faith-fog-breathe {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}

/* ── Reveal plaque — same translucent cloud as the mist plaque ──
   Anchored near the cloud's right edge, opening LEFTWARD so it stays on
   screen. The fill + frosted blur live on a ::before layer so its edges can
   be feathered (radial mask) without fading the text on top. */
.faith-glow__panel {
  position: absolute;
  top: 50%;
  right: -14px;
  left: auto;
  z-index: 5;                /* above the cards when revealed */
  transform: translate(0, -46%) scale(0.96);
  width: 446px;
  max-width: 86vw;
  padding: 40px 46px;        /* generous, so the paragraph sits inside the solid core */
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

/* Fill + frosted blur on a ::before layer so the edge can be feathered
   (radial mask) without fading the text. Generous inset + a larger solid
   core keep the whole paragraph on opaque cloud while the rim stays fuzzy. */
.faith-glow__panel::before {
  content: '';
  position: absolute;
  inset: -10px;
  z-index: -1;
  background: rgba(255, 253, 248, 0.66);   /* translucent cloud, opaque enough to read on */
  border-radius: 48% 52% 47% 53% / 60% 58% 42% 40%;
  /* NOTE: no backdrop-filter — Safari/iPad renders it as a hard rectangle that
     ignores this mask, which showed as a faint box. The radial mask below gives
     the soft feathered edge; everything outside it stays fully transparent. */
  /* soft, fuzzy cloud edge — same technique as the mist plaque */
  -webkit-mask-image: radial-gradient(72% 68% at 50% 50%, #000 66%, transparent 100%);
  mask-image: radial-gradient(72% 68% at 50% 50%, #000 66%, transparent 100%);
}

.faith-glow:hover .faith-glow__panel,
.faith-glow:focus-within .faith-glow__panel,
.faith-glow.is-open .faith-glow__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%) scale(1);
  pointer-events: auto;
}

/* On reveal, calm the pulse so the text reads against a steady glow. */
.faith-glow:hover .faith-glow__core,
.faith-glow:focus-within .faith-glow__core,
.faith-glow.is-open .faith-glow__core {
  animation-play-state: paused;
  opacity: 0.92;
}

.faith-glow__content { position: relative; }

.faith-glow__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: #1b2a4a;            /* navy, matching the mist plaque title */
  margin: 0 0 14px;
  text-shadow: 0 1px 5px rgba(255, 255, 255, 0.7);
}

/* A faint gold rule under the title, echoing the site's section dividers */
.faith-glow__title::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--color-gold-500), transparent);
}

/* The paragraph — deliberately classic Times New Roman */
.faith-glow__body {
  font-family: 'Times New Roman', Times, Georgia, serif;
  font-size: 17.5px;
  line-height: 1.62;
  color: #241810;
  text-align: center;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.7);
}

/* X to close the pinned ("fixed") view — only shown once clicked open */
.faith-glow__close {
  position: absolute;
  top: 0;
  right: 4px;
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 2;
  transition: color var(--transition-fast);
}
.faith-glow__close:hover { color: var(--text-primary); }
.faith-glow.is-open .faith-glow__close { display: block; }

/* Admin "Edit" button (injected by page-editor.js) — moved to the top-left
   so it doesn't sit under the X. Visible only for signed-in admins. */
.faith-glow__content .btn-block-edit { left: 8px; right: auto; }

/* keyboard focus ring */
.faith-glow:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ── Respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .faith-glow__fog, .faith-glow__core { animation: none; }
}

/* ── Small screens ──
   Mirror the mist's collapse: a compact, tappable glow chip in the open
   corner (top-right here); the plaque opens downward into view. */
@media (max-width: 960px) {
  .faith-glow {
    top: 10px;
    right: 10px;
    left: auto;
    width: 48px;
    height: 48px;
  }

  .faith-glow__veil {
    -webkit-mask-image: none;
    mask-image: none;
    filter: none;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(248, 251, 255, 0.6), rgba(228, 238, 250, 0.2) 60%, transparent 80%);
    /* no box-shadow / backdrop-filter — both render as a faint box on iPad */
    animation: faith-pulse 9s ease-in-out infinite;
  }
  .faith-glow__veil > span { display: none; }

  .faith-glow__panel {
    top: 56px;
    left: auto;
    right: 0;
    width: 290px;
    max-width: 88vw;
    padding: 22px 24px;
    transform: translate(0, -8px) scale(0.97);
  }
  .faith-glow:hover .faith-glow__panel,
  .faith-glow:focus-within .faith-glow__panel,
  .faith-glow.is-open .faith-glow__panel {
    transform: translate(0, 0) scale(1);
  }
  .faith-glow__title { font-size: 21px; }
  .faith-glow__body { font-size: 16px; }
}