/* ==========================================================================
   HOME HERO: "Bold & Majestic" (November 2026 redesign)
   The logo is split into three pieces in img/brand/ so each can be sized,
   colored and animated on its own:
     wg-cross.png   the brushstroke cross (used huge, faded, bleeding off the corner)
     wg-letters.png "WRI_HTS" and "BAPTIST CHURCH" (shown in cream)
     wg-grove.png   the gold script "grove" (writes itself in, with a glow)
   Each piece is already colored (gold cross, cream letters, gold script).
   To change the photo, swap img/hero-grove-worship.jpg.
   ========================================================================== */

.hero-grand {
  --grand-gold: #F2B84B;
  --grand-cream: #FAF6EF;
  --grand-ink: #141210;
  min-height: min(920px, 100svh);
  background: var(--grand-ink);
  text-align: center;
}
.hero-grand::before { display: none; }

/* Photo, darkening layers and the giant cross */
.hero-grand .grand-photo,
.hero-grand .grand-shade,
.hero-grand .grand-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-grand .grand-photo {
  background: url('img/hero-grove-worship.jpg') center 30% / cover no-repeat;
  filter: saturate(0.75);
  animation: grand-zoom 24s ease-out both;
}
.hero-grand .grand-shade { background: rgba(20, 18, 16, 0.68); }
.hero-grand .grand-fade {
  background: linear-gradient(180deg,
    rgba(20, 18, 16, 0.85) 0%,
    rgba(20, 18, 16, 0) 22%,
    rgba(20, 18, 16, 0) 62%,
    rgba(20, 18, 16, 0.94) 100%);
}
.hero-grand .grand-cross {
  position: absolute;
  left: -14%;
  top: -30%;
  width: min(1150px, 110vw);
  aspect-ratio: 751 / 1087;
  background: url('img/brand/wg-cross.png') center / contain no-repeat;
  opacity: 0.26;
  transform: rotate(-8deg);
  transform-origin: 30% 20%;
  pointer-events: none;
  animation: grand-drift 16s ease-in-out infinite alternate;
}

/* Layout: everything centered under the big wordmark */
.hero-grand .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 56px;
  padding-bottom: 48px;
}

/* The wordmark */
.hero-grand .grand-wordmark {
  position: relative;
  width: clamp(290px, 70vw, 1000px);
  aspect-ratio: 1600 / 636;
  margin: 0 0 28px;
}
.hero-grand .grand-wordmark .sr-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hero-grand .grand-layer {
  position: absolute;
  inset: 0;
}
.hero-grand .grand-layer.letters {
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 20px 30px rgba(0, 0, 0, 0.55));
  animation: grand-rise 1.2s ease-out 0.1s both;
}
.hero-grand .grand-layer.script {
  filter: drop-shadow(0 3px 0 rgba(120, 70, 0, 0.55)) drop-shadow(0 0 26px rgba(242, 189, 85, 0.55));
}
.hero-grand .grand-ink {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-grand .letters .grand-ink {
  background: url('img/brand/wg-letters.png') center / contain no-repeat;
}
.hero-grand .script .grand-ink {
  background: url('img/brand/wg-grove.png') center / contain no-repeat;
  animation: grand-write 2.4s cubic-bezier(.6, 0, .2, 1) 0.5s both;
}

/* The welcome line and everything below it fade up after the script writes in */
.hero-grand .grand-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  animation: grand-rise 1.2s ease-out 1.6s both;
}
.hero-grand .grand-welcome {
  margin: 0 0 14px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  color: var(--white);
}
.hero-grand .grand-welcome em { color: var(--grand-gold); font-style: italic; }
.hero-grand .hero-sub { margin-left: auto; margin-right: auto; margin-bottom: 32px; }
.hero-grand .hero-now { margin: 0 auto 32px; text-align: left; }
.hero-grand .hero-ctas { justify-content: center; margin-bottom: 48px; }
.hero-grand .hero-meta { width: 100%; margin: 0 auto; }
.hero-grand .hero-meta-item .label { color: var(--grand-gold); }

@keyframes grand-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes grand-drift {
  from { transform: rotate(-8deg) translateY(0); }
  to   { transform: rotate(-5deg) translateY(28px); }
}
@keyframes grand-write {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes grand-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-grand .grand-photo,
  .hero-grand .grand-cross,
  .hero-grand .grand-layer.letters,
  .hero-grand .script .grand-ink,
  .hero-grand .grand-after { animation: none; }
}

@media (max-width: 860px) {
  .hero-grand .grand-shade { background: rgba(20, 18, 16, 0.74); }
  .hero-grand .grand-cross { left: -38%; top: -12%; width: 150vw; }
  .hero-grand .hero-content { padding-top: 40px; }
  .hero-grand .grand-wordmark { width: 92%; margin-bottom: 20px; }
}