/* ------------------------------------------------------------------
   Index hero: cinematic worship hero, centered composition.
   Video background with poster fallback, floating ember layer,
   centered heading + description stack.
   ------------------------------------------------------------------ */

/* ---------- stage ---------- */
.hero { min-height: 100vh; background: var(--bg); }
.hero-stage { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; background: #11100f; }
.hero-poster, .hero-video, .hero-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-poster { z-index: -3; background-image: url('../assets/img/hero-worship.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; filter: grayscale(1) contrast(1.04) brightness(.68); transform: scale(1.02); }
/* No-JS fallback: serve the small hero frame on phones. */
@media (max-width: 720px) {
  .hero-poster { background-image: url('../assets/img/hero-worship-480.jpg'); }
}
.hero-video { z-index: -2; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.08) brightness(.68); transition: opacity .6s var(--ease-out); }
.hero-stage.video-ready .hero-video { opacity: 1; }
.hero-scrim { z-index: -1; background: radial-gradient(ellipse 92% 82% at 50% 44%, rgba(10,9,8,.32) 0%, rgba(10,9,8,.8) 100%), linear-gradient(180deg, rgba(10,9,8,.58) 0%, rgba(10,9,8,.14) 42%, rgba(10,9,8,.55) 100%); }
.hero-grid { position: absolute; inset: 0 4.2vw; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.hero-grid span { border-left: 1px solid rgba(216,74,67,.34); }
.hero-grid span:last-child { border-right: 1px solid rgba(216,74,67,.34); }

/* floating layer: KIE-generated steam and embers, screen blended */
.hero-float { position: absolute; inset: -10% -6%; z-index: 0; pointer-events: none; background: url('../assets/img/hero-float.webp') center / cover no-repeat; mix-blend-mode: screen; opacity: .5; animation: float-drift 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes float-drift { from { transform: translate3d(-1.2%, -.8%, 0) scale(1.04) rotate(-.8deg); } to { transform: translate3d(1.2%, 1%, 0) scale(1.1) rotate(1.1deg); } }

/* ---------- centered content stack ---------- */
.hero-content { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 104px 8.5vw 84px; }
/* Small-screen mobile chrome (URL bar) collapses and expands: use the
dynamic viewport unit so the hero never jumps or leaves a gap. */
@supports (min-height: 100dvh) {
  .hero, .hero-stage, .hero-content { min-height: 100dvh; }
}
/* Don't let content sit under a phone's home indicator or the URL bar overlay. */
.hero-content { padding-top: calc(104px + env(safe-area-inset-top, 0px)); padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.hero-eyebrow { justify-content: center; margin-bottom: 30px; }
.hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 34px; height: 1px; background: currentColor; }
.hero-content h1 { max-width: 18ch; margin: 0; color: var(--ink); font-size: clamp(110px, 16vw, 280px); font-weight: 900; letter-spacing: -.015em; line-height: .78; text-shadow: var(--tshadow); }
.hero-content h1 em { color: var(--signal); font-style: normal; }
.hero-content h1::after { content: ''; display: block; width: clamp(80px, 10vw, 150px); height: 5px; margin: 26px auto 0; background: linear-gradient(90deg, var(--signal), var(--gold)); }
.hero-subline { max-width: 52ch; margin: 32px auto 0; color: var(--ink); font-size: clamp(16px, 1.6vw, 21px); line-height: 1.6; text-shadow: var(--tshadow); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: center; margin-top: 44px; }
.hero-meta { margin: 52px auto 0; color: var(--muted); }

/* entrance (JS present only) */
.js .hero-eyebrow { animation: hero-in .9s var(--ease-out) both; }
.js .hero-content h1 { animation: hero-in 1s var(--ease-out) .08s both; }
.js .hero-subline { animation: hero-in .9s var(--ease-out) .18s both; }
.js .hero-actions { animation: hero-in .9s var(--ease-out) .3s both; }
.js .hero-meta { animation: hero-in .9s var(--ease-out) .42s both; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero-content { padding-left: 6vw; padding-right: 6vw; }
}

@media (max-width: 720px) {
  .hero-grid { inset: 0 20px; grid-template-columns: repeat(2, 1fr); }
  .hero-grid span:nth-child(3), .hero-grid span:nth-child(4) { display: none; }
  .hero-content { padding: 96px 20px 64px; }
  .hero-content { padding-top: calc(96px + env(safe-area-inset-top, 0px)); padding-left: calc(20px + env(safe-area-inset-left, 0px)); padding-right: calc(20px + env(safe-area-inset-right, 0px)); padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .hero-eyebrow { font-size: 11px; letter-spacing: .1em; }
  .hero-eyebrow::before, .hero-eyebrow::after { width: 20px; }
  .hero-content h1 { font-size: clamp(88px, 24vw, 160px); }
  .hero-subline { max-width: 30ch; font-size: 16px; }
  .hero-actions { width: min(320px, 100%); flex-direction: column; gap: 18px; }
  .hero-actions .gold-button { width: 100%; }
  .hero-actions .bracket-link { justify-content: center; width: 100%; }
  .hero-meta { font-size: 11px; }
  .hero-float { opacity: .32; }
}
/* Short / landscape viewports: keep the H1 centered without pushing
content off-screen; cap the poster/video on very small screens. */
@media (max-height: 560px) {
  .hero-content { padding-top: 96px; padding-bottom: 40px; }
  .hero-subline { max-width: 46ch; }
  .hero-meta { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-eyebrow, .js .hero-content h1, .js .hero-subline, .js .hero-actions, .js .hero-meta { animation: none; }
  .hero-float { animation: none; }
}