/* =========================================================
   Comunidade Yeshuá — Página Inicial
   ========================================================= */

html, body{ height:100%; }

.hero-home{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: #100405;
}

/* background image + overlays */
.hero-bg{
  position:absolute;
  inset:0;
  background-image: url('../images/hero-sacred-heart.jpg');
  background-size: cover;
  background-position: center 20%;
  filter: saturate(1.05);
  transform: scale(1.02);
  animation: bgBreathe 18s ease-in-out infinite;
}
@keyframes bgBreathe{
  0%,100%{ transform: scale(1.02); }
  50%{ transform: scale(1.08); }
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 38%, rgba(107,20,32,.25), rgba(16,4,5,.75) 55%, rgba(10,3,4,.95) 100%);
}
.hero-vignette{
  position:absolute; inset:0;
  box-shadow: inset 0 0 200px 80px rgba(0,0,0,.75);
  pointer-events:none;
}

/* floating gold particles */
.particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.particle{
  position:absolute;
  bottom:-10px;
  width: 5px; height:5px;
  border-radius:50%;
  background: var(--color-gold-light, #f3d98b);
  opacity:.55;
  animation: floatUp linear infinite;
  box-shadow: 0 0 8px 2px rgba(243,217,139,.6);
}
@keyframes floatUp{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.6; }
  100%{ transform: translateY(-110vh) translateX(20px); opacity:0; }
}

.hero-content{
  position: relative;
  z-index: 5;
  text-align:center;
  color: #faf5ea;
  padding: 40px 24px;
  max-width: 720px;
}

.hero-crown{
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: .78rem;
  color: #d4af37;
  margin-bottom: 18px;
  opacity:0;
  animation: fadeInUp 1.2s ease .3s forwards;
}

.hero-brand{
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  line-height:1.05;
  margin: 0 0 6px;
  color:#fff;
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
  opacity:0;
  animation: fadeInUp 1.2s ease .5s forwards;
}
.hero-brand span{ color:#d4af37; display:block; font-size: .5em; letter-spacing:6px; font-family:'Montserrat',sans-serif; margin-top:8px; }

/* heart button */
.heart-wrapper{
  position: relative;
  width: 230px;
  height: 230px;
  margin: 38px auto 30px;
  cursor: pointer;
  opacity:0;
  animation: fadeInUp 1.2s ease .7s forwards;
}
.heart-glow{
  position:absolute;
  inset:-40px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,.55), transparent 65%);
  animation: pulseGlow 2.6s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ transform: scale(.9); opacity:.6; }
  50%{ transform: scale(1.15); opacity:1; }
}
.heart-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border: 1px solid rgba(212,175,55,.5);
  animation: ringExpand 2.6s ease-out infinite;
}
@keyframes ringExpand{
  0%{ transform: scale(.85); opacity:.9; }
  100%{ transform: scale(1.35); opacity:0; }
}
.heart-img{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  background-image: url('../images/sacred-heart-alt.jpg');
  background-size: cover;
  background-position: center 18%;
  border: 3px solid var(--color-gold, #d4af37);
  box-shadow: 0 0 50px rgba(212,175,55,.55), 0 20px 60px rgba(0,0,0,.6);
  animation: heartBeat 2.2s ease-in-out infinite;
  transition: transform .3s ease;
}
@keyframes heartBeat{
  0%, 100%{ transform: scale(1); }
  15%{ transform: scale(1.05); }
  30%{ transform: scale(1); }
  45%{ transform: scale(1.07); }
  60%{ transform: scale(1); }
}
.heart-wrapper:hover .heart-img{ transform: scale(1.1); }

.heart-hint{
  position:absolute;
  bottom: -46px;
  left:50%;
  transform: translateX(-50%);
  font-family:'Montserrat',sans-serif;
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform:uppercase;
  color: rgba(250,245,234,.75);
  white-space:nowrap;
}
.heart-hint i{ display:block; text-align:center; margin-top:6px; animation: bounce 1.6s infinite; color:#d4af37; }
@keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

.hero-message{
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-style: italic;
  color: #f3d98b;
  margin-top: 60px;
  opacity:0;
  animation: fadeInUp 1.2s ease .9s forwards;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.hero-verse{
  font-family:'Montserrat',sans-serif;
  font-size: .78rem;
  letter-spacing: 2px;
  color: rgba(250,245,234,.6);
  margin-top: 10px;
  opacity:0;
  animation: fadeInUp 1.2s ease 1.1s forwards;
}

@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}

.scroll-cue{
  position:absolute;
  bottom: 28px;
  left:50%;
  transform: translateX(-50%);
  z-index: 5;
  color: rgba(250,245,234,.65);
  font-size: 1.3rem;
  animation: bounce 1.8s infinite;
}

/* ---------- Below-fold sections on homepage ---------- */
.welcome-section{
  background: var(--color-cream);
  padding: 100px 0;
  text-align:center;
}
.welcome-section .divider{ margin-top: 6px; }
.welcome-section p.lead{
  max-width: 700px;
  margin: 0 auto 20px;
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--color-ink-soft);
}

.teaser-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 24px;
  margin-top: 50px;
}
.teaser-card{
  background:#fff;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  text-align:left;
  transition: transform .35s ease, box-shadow .35s ease;
  cursor:pointer;
}
.teaser-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-strong); }
.teaser-card .teaser-img{
  height: 180px;
  background-size: cover;
  background-position: center;
  position:relative;
}
.teaser-card .teaser-img::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(43,24,16,.55));
}
.teaser-card .teaser-body{ padding: 20px 22px 26px; }
.teaser-card h3{ font-size: 1.2rem; margin-bottom:8px; }
.teaser-card p{ color: var(--color-ink-soft); font-size:.92rem; line-height:1.6; margin:0; }
.teaser-card .teaser-icon{
  position:absolute;
  bottom: -20px; left: 20px;
  width: 44px; height:44px;
  border-radius:50%;
  background: var(--color-gold);
  display:flex; align-items:center; justify-content:center;
  color: var(--color-wine-dark);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  font-size: 1.05rem;
}
.teaser-card .teaser-body{ padding-top: 30px; }

.cta-band{
  background: linear-gradient(120deg, var(--color-wine-dark), var(--color-wine));
  color: #faf5ea;
  text-align:center;
  padding: 90px 0;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:'';
  position:absolute; inset:0;
  background-image: url('../images/stained-glass-texture.jpg');
  background-size: cover;
  opacity:.12;
  mix-blend-mode: screen;
}
.cta-band h2{ color:#fff; }
.cta-band p{ max-width:600px; margin:0 auto 30px; color: rgba(250,245,234,.85); font-size:1.05rem; }

@media (max-width: 640px){
  .heart-wrapper{ width: 175px; height:175px; margin-top: 20px; }
  .hero-message{ margin-top: 44px; font-size: 1.3rem; }
}