/* CUSTOM CODE GOES HERE */

/* ==========================================================================
   Hero section (#animate-hero-v1) — restyle to match end-result.png /
   end-result-mobile-with-notes.png.
   Mobile-first: base rules below are the ≤767px layout (stacked, image on
   top via flex `order`, no HTML reordering). @media (min-width: 768px)
   switches to the side-by-side desktop layout (copy left, image bled right).
   ========================================================================== */

/* Ambient background: uses the exact design gradient (size + color ramp).
   Its center point cycles top-left -> top-right -> bottom-right ->
   bottom-left -> back to top-left, looping over 30s. Registering --gx/--gy
   via @property is what makes the gradient's own position animatable
   smoothly (plain custom properties only snap between keyframes). */
@property --hero-gradient-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --hero-gradient-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -36.44%;
}

#animate-hero-v1 .c-section-comp-inner {
  --hero-gradient-x: 0%;
  --hero-gradient-y: -36.44%;
  background-color: #1057ba;
  background-image: radial-gradient(
    154.61% 130.61% at var(--hero-gradient-x) var(--hero-gradient-y),
    #5df3f0 0%,
    #3fdbe9 23.64%,
    #30cfe6 35.46%,
    #21c3e3 47.27%,
    #1da8d9 60.46%,
    #198dcf 73.64%,
    #1472c4 86.82%,
    #1057ba 100%
  ) !important;
  background-repeat: no-repeat;
  animation: heroAmbientGradient 20000ms infinite;
}

@keyframes heroAmbientGradient {
  /* top-left -> top-right -> bottom-right -> bottom-left -> top-left.
     Each corner is overshot by ~36%, matching the design's own overshoot
     on its bottom-left export value. */
  0%,
  100% {
    --hero-gradient-x: 0%;
    --hero-gradient-y: -36.44%;
    animation-timing-function: ease-in;
  }
  25% {
    --hero-gradient-x: 100%;
    --hero-gradient-y: -36.44%;
    animation-timing-function: ease-in;
  }
  50% {
    --hero-gradient-x: 100%;
    --hero-gradient-y: 136.44%;
    animation-timing-function: ease-in;
  }
  75% {
    --hero-gradient-x: 0%;
    --hero-gradient-y: 136.44%;
    animation-timing-function: ease-in;
  }
}

@media (prefers-reduced-motion: reduce) {
  #animate-hero-v1 .c-section-comp-inner {
    animation: none;
    --hero-gradient-x: 0%;
    --hero-gradient-y: -36.44%;
  }
}

#animate-hero-v1 {
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Mobile base (≤767px) — image, copy and CTA stacked via flex `order`.
   -------------------------------------------------------------------------- */

#animate-hero-v1 .c-section-comp-container {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 2.4rem 4rem !important;
}

#animate-hero-v1 .hero {
  order: 2;
  position: relative;
  z-index: 2;
  width: 100%;
}

#animate-hero-v1 .images {
  order: 1;
  position: static;
  width: min(36rem, 92vw);
  aspect-ratio: 360 / 220;
  overflow: hidden;
  margin: 0 -2.4rem 4rem auto;
  pointer-events: none;
}

#animate-hero-v1 .images .cmp-images {
  padding: 0 !important;
}

#animate-hero-v1 .images .grid-row {
  margin: 0;
  width: 100%;
}

#animate-hero-v1 .images .grid-row > div {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

#animate-hero-v1 .images .cmp-images__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 0;
}

#animate-hero-v1 .button {
  order: 3;
  position: static;
  margin-top: 3.2rem;
  z-index: 2;
}

#animate-hero-v1 .cmp-hero__wrapper--content {
  height: auto !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

#animate-hero-v1 .cmp-hero__wrapper--content .grid-row {
  justify-content: flex-start !important;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#animate-hero-v1 .component-header {
  text-align: left !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#animate-hero-v1 .component-header__title-container {
  align-items: flex-start !important;
  text-align: left;
}

#animate-hero-v1 .component-header__eyebrow {
  font-size: 1rem;
  line-height: 130%;
  letter-spacing: 0.12rem;
  margin-bottom: 3.2rem !important;
}

#animate-hero-v1 .component-header__title {
  display: block;
  font-family: "InvescoEditor", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 4rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
}

#animate-hero-v1 .component-header__description {
  max-width: 100%;
  font-size: 1.2rem;
  line-height: 140%;
}

/* CTA: plain text link + circular icon badge (shared visual treatment) */
#animate-hero-v1 .button .btn-cmp {
  --background-color: transparent;
  --border-color: transparent;
  --text-color: var(--invescoBlue, #000ad2);
  padding: 0;
  max-width: none;
  width: auto;
  overflow: visible;
}

#animate-hero-v1 .button .btn-cmp:hover {
  --background-color-hover: transparent;
  opacity: 0.85;
}

#animate-hero-v1 .button .btn-cmp__inner {
  justify-content: flex-start;
  gap: 1rem;
  overflow: visible;
  max-width: none;
}

#animate-hero-v1 .button .btn-cmp__inner__text {
  order: 1;
  width: auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  padding-top: 0;
  padding-bottom: 0;
}

#animate-hero-v1 .button .text-cta {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 130%;
  color: var(--invescoBlue, #000ad2);
}

#animate-hero-v1 .button .inv-icon {
  order: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.8rem;
  height: 2.8rem;
  margin-left: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--invescoBlue, #000ad2);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Desktop / tablet (≥768px) — copy left, image bled right, CTA pinned
   near the bottom via absolute positioning.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #animate-hero-v1 .c-section-comp-container {
    display: block;
    padding: 0 !important;
  }

  /* Fluid scaling between the 768px and 1348px reference viewports, so
     nothing overlaps at the narrow end of the desktop range and the
     original values still land at ~1348px and up. */
  #animate-hero-v1 .images {
    order: initial;
    position: absolute;
    top: 0;
    right: 2rem;
    z-index: 1;
    width: clamp(26rem, calc(-21.7rem + 62.1vw), 62rem);
    max-width: 52%;
    aspect-ratio: auto;
    overflow: visible;
    margin: 0;
  }

  #animate-hero-v1 .images .cmp-images__image {
    height: auto;
    object-fit: unset;
    object-position: unset;
  }

  #animate-hero-v1 .button {
    order: initial;
    position: absolute;
    left: clamp(8rem, calc(-13.2rem + 27.6vw), 24rem);
    bottom: 6rem;
    margin-top: 0;
  }

  #animate-hero-v1 .cmp-hero__wrapper--content {
    padding: 6rem 0 22rem clamp(8rem, calc(-13.2rem + 27.6vw), 24rem) !important;
    margin: 0 !important;
  }

  #animate-hero-v1 .component-header {
    max-width: clamp(34rem, calc(-11rem + 58.6vw), 68rem);
  }

  #animate-hero-v1 .component-header__eyebrow {
    font-size: 1.4rem;
    letter-spacing: 0.17rem;
    margin-bottom: 4.8rem !important;
  }

  #animate-hero-v1 .component-header__title {
    font-weight: 400;
    font-size: clamp(4rem, calc(0.8rem + 4.2vw), 6.4rem);
    line-height: 110%;
    letter-spacing: -0.04em;
    margin-bottom: 3.2rem;
  }

  #animate-hero-v1 .component-header__description {
    max-width: clamp(20rem, calc(-22.4rem + 55.2vw), 52rem);
    font-size: 2rem;
  }

  #animate-hero-v1 .button .text-cta {
    font-size: 1.8rem;
  }

  #animate-hero-v1 .button .inv-icon {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.4rem;
  }
}