/* =========================================================
   Hero fluid/water interaction
   Loaded in addition to css/style.css, only on the homepage.
   Scoped to .hero-fluid so it cannot affect any other page.
   ========================================================= */

.hero.hero-fluid{
  position:relative;
  overflow:hidden;
  min-height:640px;
  background:var(--gradient-hero);
}
.hero.hero-fluid::before{
  display:none; /* replaced by the fluid canvas itself */
}

#heroFluidMount{
  position:absolute;
  inset:0;
  z-index:1;
}
#heroFluidMount canvas{
  display:block;
  width:100%;
  height:100%;
}

.hero-fluid-overlay{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:640px;
  padding:56px 6vw 130px;
  pointer-events:none;
}
.hero-fluid-overlay .eyebrow{
  color:var(--purple-200);
  pointer-events:auto;
  margin-top:28px;
}
.hero-fluid-overlay .eyebrow::before{
  background:var(--purple-200);
}

.hero-fluid-spacer{
  flex:1;
}

.hero-fluid-bottom{
  max-width:640px;
}
.hero-fluid-bottom p{
  color:var(--purple-100);
  font-size:18px;
  line-height:1.5;
  margin-bottom:0;
}
.hero-fluid-bottom .hero-actions{
  display:flex;
  gap:16px;
  margin-top:28px;
  flex-wrap:wrap;
  pointer-events:auto;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width:860px){
  /* Bottom padding must clear .stats-strip's -56px overlap onto the hero,
     otherwise the opaque white stats card covers the CTA buttons. */
  .hero-fluid-overlay{padding:22px 20px 86px;min-height:480px;}
  .hero.hero-fluid{min-height:480px;}
  .hero-fluid-overlay .eyebrow{margin-top:8px;}
  .hero-fluid-bottom{max-width:100%;}
  .hero-fluid-bottom p{font-size:15px;line-height:1.45;}
  .hero-fluid-bottom .hero-actions{margin-top:14px;gap:10px;}
  .hero-fluid-bottom .hero-actions .btn{padding:9px 16px;font-size:13px;}
}

@media (max-width:480px){
  .hero-fluid-overlay{min-height:500px;padding-bottom:92px;}
  .hero.hero-fluid{min-height:500px;}
  .hero-fluid-bottom p{font-size:14px;}
}