/* hero banner at top of Home/About/Help pages. bg image/gradient is set
   per theme (see .hero in each theme-*.css) -- this file is just the layout */

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 5.5rem 0;
  text-align: center;
}

/* blurred circles for bg decoration -- some themes hide these with
   display:none if they use a photo instead (theme-white.css). using
   opacity instead of baking transparency into the color since there's
   no text in these to worry about fading */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  background: var(--color-accent);
  opacity: .55;
  pointer-events: none;
}

.hero::before {
  width: 320px;
  height: 320px;
  top: -140px;
  left: -80px;
}

.hero::after {
  width: 260px;
  height: 260px;
  bottom: -120px;
  right: -60px;
  background: #fff;
  opacity: .25;
}

.hero .container {
  text-align: center;
  position: relative;
  z-index: 1;
  animation: hero-rise var(--transition-slow) both;
}

.hero h1 {
  color: #fff;
}


.hero p {
  color: rgba(255, 255, 255, .88);
  max-width: 620px;
  margin-inline: auto;
  font-size: 1.15rem;
}

.hero .btn {
  margin-top: 1.2rem;
  background: #fff;
  color: var(--color-primary-dark);
}

.hero .btn:hover {
  box-shadow: var(--shadow-lg);
}

/* fade + rise animation the hero text plays once on page load */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}