.wp-block-cover__image-background:before {
	background: #0000;
	background: linear-gradient(157deg,rgba(0, 0, 0, 1) 11%, rgba(255, 255, 255, 1) 58%);
}

/* ============================================
   SITE ANIMATIONS
   Add this via Appearance > Customize > Additional CSS
   ============================================ */

/* Respect users who've asked their OS to reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 1. HERO SECTION ---------- */
/* Matches your actual markup: <div class="wp-block-cover ... home_hero">
   containing an h2 headline, two paragraphs, and a "Contact Us" button
   in a second Jetpack Layout Grid column. */

.home_hero {
  overflow: hidden;
}

.home_hero h2 {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 0.8s ease-out 0.1s forwards;
}

.home_hero p:nth-of-type(1) {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 0.8s ease-out 0.3s forwards;
}

.home_hero p:nth-of-type(2) {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 0.8s ease-out 0.45s forwards;
}

.home_hero .wp-block-button__link {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp 0.8s ease-out 0.6s forwards;
}

/* Subtle slow zoom on the background photo for extra polish */
.home_hero .wp-block-cover__image-background {
  animation: heroImageZoom 12s ease-out forwards;
}

@keyframes heroImageZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 2. SCROLL REVEAL ---------- */
/* JS toggles .is-visible on these once they enter the viewport (see animations.js) */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: stagger children of a reveal container, e.g. a row of cards.
   Add .reveal-stagger to the parent and .reveal-on-scroll to each child. */
.reveal-stagger .reveal-on-scroll:nth-child(1) { transition-delay: 0s; }
.reveal-stagger .reveal-on-scroll:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger .reveal-on-scroll:nth-child(3) { transition-delay: 0.24s; }
.reveal-stagger .reveal-on-scroll:nth-child(4) { transition-delay: 0.36s; }
.reveal-stagger .reveal-on-scroll:nth-child(5) { transition-delay: 0.48s; }
.reveal-stagger .reveal-on-scroll:nth-child(6) { transition-delay: 0.6s; }

/* ---------- 3. HOVER EFFECTS ---------- */

/* Buttons: subtle lift + shadow (Astra's own button class + block buttons) */
.ast-button,
a.ast-custom-button,
.wp-block-button__link,
input#et_pb_contact_submit,
button:not(.jetpack-contact-form input[type="submit"]) {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ast-button:hover,
a.ast-custom-button:hover,
.wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Buttons inside these cards ("Learn More") get the lift treatment too
   via the .wp-block-button__link rule above already. */

/* Nav links: underline slide-in (exact Astra markup: <a class="menu-link">
   inside #ast-hf-menu-1 / .main-header-menu) */
#ast-desktop-header .main-header-menu a.menu-link {
  position: relative;
  text-decoration: none;
}

#ast-desktop-header .main-header-menu a.menu-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

#ast-desktop-header .main-header-menu a.menu-link:hover::after {
  transform: scaleX(1);
}


/* ---------- 4. CONTACT FORM TYPOGRAPHY FIX ---------- */
/* Browsers apply their own small default font to <input>, <textarea>,
   and <button> elements that does NOT automatically inherit your theme's
   body font. This forces Jetpack's contact form fields to match the
   font your paragraphs already use, whatever that is set to in Astra's
   Customizer (so it stays correct even if you change the site font later). */
 
.wp-block-jetpack-contact-form label,
.wp-block-jetpack-contact-form input,
.wp-block-jetpack-contact-form textarea,
.wp-block-jetpack-contact-form .grunion-field-label,
.wp-block-jetpack-contact-form .grunion-field {
  font: inherit;
  color: inherit;
  line-height: 1.5;
}
 
/* Placeholder text doesn't inherit automatically either */
.wp-block-jetpack-contact-form input::placeholder,
.wp-block-jetpack-contact-form textarea::placeholder {
  font: inherit;
  opacity: 0.6;
}
 
/* Slightly larger touch targets to match the now-larger text
   (Jetpack's default padding was sized for the old smaller font) */
.wp-block-jetpack-contact-form input.grunion-field,
.wp-block-jetpack-contact-form textarea.grunion-field {
  padding: 0.65em 0.85em;
  border-radius: 6px;
}
 
/* Labels: give required-field labels a touch of visual weight so
   they read as labels rather than body copy */
.wp-block-jetpack-contact-form .grunion-field-label {
  font-weight: 600;
  margin-bottom: 0.3em;
  display: inline-block;
}