/**
 * Hero - Animated (Gradient) — standalone styles.
 * Forked from hero-animated.css/hero-animated-standalone.css structural rules,
 * scoped to its own class names, with NO background-color declaration —
 * the background is the native Gutenberg gradient/color applied to this
 * block instance (emitted via get_block_wrapper_attributes() as an inline
 * style on the <section>), so nothing here should override it.
 */

.hero-animated-gradient {
  align-items: center;
  display: flex;
  min-height: 90svh;
  overflow: hidden;
  position: relative;
}

.hero-animated-gradient svg {
  display: none;
}

.hero-animated-gradient__canvas {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.hero-animated-gradient__content {
  position: relative;
  width: 100%;
  z-index: 10;
}

.hero-animated-gradient__embed iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.hero-animated-gradient__right video {
  display: block;
  max-width: 100%;
}

/* Word-highlight swipe effect — ported verbatim from hero-animated-standalone.css
   so the .fx-wrap animation behaves identically to the original block. */
@-webkit-keyframes fx-swipe {
  0% { width: 0 }
  100% { width: calc(100% + .4em) }
}
@keyframes fx-swipe {
  0% { width: 0 }
  100% { width: calc(100% + .4em) }
}
.fx-wrap {
  line-height: 1;
}
.fx-wrap span,
.fx-wrap a {
  display: inline-block;
  line-height: inherit;
  position: relative;
}
.fx-wrap span::before,
.fx-wrap a::before {
  background-color: var(--fx-color);
  border-radius: 0;
  content: "";
  height: calc(100% + .2em);
  left: -.2em;
  position: absolute;
  top: -.1em;
  width: 0;
  z-index: -1;
}
.fx-wrap span.is-active::before,
.fx-wrap a.is-active::before {
  -webkit-animation: fx-swipe .6s cubic-bezier(.58, 1.07, .36, 1.28) forwards;
  animation: fx-swipe .6s cubic-bezier(.58, 1.07, .36, 1.28) forwards;
}

/* CTA button — driven by the Button Style ACF fields via CSS custom properties,
   set inline on the CTA wrapper div. Fallback values below match the theme's
   default .button mixin exactly, so leaving all fields blank is unchanged. */
.hero-animated-gradient .hag-cta-button {
  background-color: var(--hag-btn-bg, #f56a00);
  border: 3px solid var(--hag-btn-border, #f56a00);
  border-radius: 0;
  color: var(--hag-btn-text, #07142a);
  display: table;
  font-weight: 500;
  letter-spacing: -0.16px;
  line-height: 16px;
  padding: 12px;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hero-animated-gradient .hag-cta-button:hover {
  background-color: var(--hag-btn-bg-hover, transparent);
  border-color: var(--hag-btn-border-hover, var(--hag-btn-border, #f56a00));
  color: var(--hag-btn-text-hover, var(--hag-btn-text, #07142a));
}