/*
  hero-curtain-main: custom loader

  The panel reveals the page by shrinking away from its right edge (left
  edge stays pinned at 0) using clip-path rather than transform, because a
  transform on this element would make it the containing block for any
  position:fixed descendant  which would drag the logo along with the
  panel instead of letting it stay put. The logo is fixed to the true
  viewport center and never moves; only how much of it is covered by the
  panel changes as the panel clips away.
*/

.hero-curtain-main {
  background: #e0fb00;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  /* duration, easing, delay, fill-mode  kept in one shorthand on purpose:
     the `animation` shorthand resets every sub-property it doesn't
     mention, so a separate `animation-delay` declared before it (as it
     was) gets silently zeroed out the moment this line is added. */
  animation: slideLeft 800ms ease-in-out 350ms forwards;
}

.hero-curtain-main img {
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  height: auto;
}

@keyframes slideLeft {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

.hero-curtain-main picture img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 563.538px;
  height: 99px;
  aspect-ratio: 74/13;
}

@media (max-width: 767px) {
  .hero-curtain-main picture img {
    height: 40px;
    width: auto;
    aspect-ratio: auto;
  }
}

/* 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 bottom-left -> top-right -> bottom-right -> back
   to bottom-left, looping. 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: 136.44%;
}

#animate-hero-v1 .c-section-comp-inner {
  height: calc(100svh - 75px) !important;
  min-height: 500px !important;
}

@media (min-width: 768px) {
  #animate-hero-v1 .c-section-comp-inner {
    height: calc(100vh - 100px) !important;
    min-height: 700px !important;
  }

  .navigation-header.has-utility-nav
    ~ div
    #animate-hero-v1
    .c-section-comp-inner {
    height: calc(100vh - 135px) !important;
  }

  #animate-hero-v1 .c-section-comp-container {
    height: 100%;
  }

  .aem-AuthorLayer-Edit #animate-hero-v1 .c-section-comp-inner {
    max-height: 1000px;
  }
}

#animate-hero-v1 .c-section-comp-inner {
  --hero-gradient-x: 0%;
  --hero-gradient-y: 136.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 12000ms infinite ease;
}

@keyframes heroAmbientGradient {
  /* Position 1: bottom-left -> Position 2: top-right ->
     Position 3: bottom-right -> back to Position 1. */
  0%,
  100% {
    --hero-gradient-x: 0%;
    --hero-gradient-y: 136.44%;
    animation-timing-function: ease-in;
  }
  33.333% {
    --hero-gradient-x: 100%;
    --hero-gradient-y: 25.44%;
    /* --hero-gradient-y: -55.44%; */
    animation-timing-function: ease-in;
  }
  66.666% {
    --hero-gradient-x: 100%;
    --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: 136.44%;
  }
}

/* Toggled by script.js's hero-controls pause/play button. */
#animate-hero-v1.hero-gradient-paused .c-section-comp-inner {
  animation-play-state: paused;
}

#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 0rem 0rem !important;
  height: 100%;
}

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

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

#animate-hero-v1 .images .cmp-images {
  padding: 0 !important;
  margin-bottom: 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 {
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 0;
  height: 220px;
  width: auto;
  margin-left: auto;
}

#animate-hero-v1 .button {
  order: 3;
  position: static;
  margin-top: 3.2rem;
  z-index: 2;
  margin-top: auto;
  /* Hidden until script.js fades/slides it in once the description has
     finished revealing — prevents a flash of the CTA in its final
     position before the animation runs. If JS never runs, the safety-net
     timeout in script.js forces this back to 1. */
  opacity: 0;
}

#animate-hero-v1 .button > .button-cmp {
  margin-bottom: 25px;
}

#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;
  flex-basis: 100%;
}

#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;
  margin-bottom: 0;
}

#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: 400;
  font-size: clamp(40px, 6vw, 90px);
  line-height: 120%;
  letter-spacing: -0.02em;
  margin-bottom: 1.6rem;
  /* Hidden until script.js splits it into line/fade spans and reveals it 
     prevents a flash of the plain, unanimated text on load. If JS never
     runs, the safety-net timeout in script.js forces this back to 1. */
  opacity: 0;
}

/* Per-line + per-letter reveal used by the heading animation (script.js). */
#animate-hero-v1 .span__title {
  display: inline;
  will-change: transform, opacity;
}

#animate-hero-v1 .span__title-fade1 {
  will-change: opacity;
}

#animate-hero-v1 .component-header__description {
  max-width: 100%;
  font-size: 1.6rem;
  line-height: 140%;
  /* Hidden until script.js fades it in once the title animation finishes 
     prevents it from showing before/during the title reveal. If JS never
     runs, the safety-net timeout in script.js forces this back to 1. */
  opacity: 0;
}

#animate-hero-v1 .button .grid-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#animate-hero-v1 .button .button-cmp__wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#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:active {
  background-color: transparent;
  border-color: transparent;
}

#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;
  gap: 0;
}

#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.6rem;
  font-weight: 500;
  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: 24px;
  height: 24px;
  margin-left: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--invescoBlue, #000ad2);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Hero controls — pause/play button for the ambient gradient animation.
   Moved into place (right after .button) by script.js.
   -------------------------------------------------------------------------- */
#animate-hero-v1 .hero-controls {
  order: 4;
  margin-top: 1.6rem;
  position: absolute;
  bottom: 25px;
  right: 25px;
  z-index: 100;
}

#animate-hero-v1 .hero-controls__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#animate-hero-v1 .hero-controls__button:hover {
  opacity: 0.85;
}

#animate-hero-v1 .hero-controls__circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background: transparent;
}

#animate-hero-v1 .hero-controls__pause,
#animate-hero-v1 .hero-controls__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#animate-hero-v1 .hero-controls__pause img,
#animate-hero-v1 .hero-controls__play img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Shown by default, since the animation is playing until the button is clicked. */
#animate-hero-v1 .hero-controls__play {
  display: none;
}

#animate-hero-v1 .hero-controls--paused .hero-controls__pause {
  display: none;
}

#animate-hero-v1 .hero-controls--paused .hero-controls__play {
  display: flex;
}

/* --------------------------------------------------------------------------
   Desktop / tablet (≥768px)  copy + CTA in a left grid column (CTA
   pinned to the bottom of that column via row sizing, no absolute
   positioning), image in a right grid column whose left edge is the
   column boundary itself  not a computed/absolute offset.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #animate-hero-v1 .c-section-comp-container {
    /* minmax(0, ...) on both tracks on purpose: without the explicit 0
       floor, a track's content can inflate it past its intended size 
       here that would let .hero (which spans both columns, see below)
       push column 2 wider than its own clamp(). Column 2's width is the
       same 768px->1348px fluid scale used before, just expressed as a
       grid track instead of an absolute box. Row 1 (copy content) is 1fr
       so it absorbs all the extra vertical space, pushing row 2 (CTA) to
       the bottom  same mechanism that used to require
       position:absolute + bottom. */
    flex-direction: column;
    padding: 0 !important;
    overflow: visible;
    display: flex;
  }

  #animate-hero-v1 .hero {
    /* Spans both columns so its text keeps using its own max-width cap
       (below) instead of being squeezed to column 1's width  column 1's
       track only matters for sizing .button, which is much narrower than
       either cap so it's never at risk of colliding with the image. */
    margin: 0;
    padding: 0;
  }

  #animate-hero-v1 .images {
    position: absolute;
    width: 100%;
    left: 0;
  }

  #animate-hero-v1.hero-image__top .images {
    top: 0;
  }

  #animate-hero-v1.hero-image__bottom .images {
    bottom: 0;
  }

  #animate-hero-v1 .hero-controls {
    bottom: 48px;
    right: 48px;
  }

  #animate-hero-v1 .hero-controls__button,
  #animate-hero-v1 .hero-controls__circle {
    width: 32px;
    height: 32px;
  }

  #animate-hero-v1 .images .cmp-images figure {
    max-width: 50%;
    margin-left: auto;
  }
  #animate-hero-v1 .images .cmp-images {
    width: 100%;
    max-width: 100%;
  }

  #animate-hero-v1 .images .cmp-images__image {
    max-width: 110%;
    object-position: unset;
    width: auto;
    margin-left: auto;
    position: relative;
    height: 80vh;
    object-fit: cover;
    overflow: visible;
  }

  #animate-hero-v1.hero-image__bottom .images .cmp-images__image {
    height: 95vh;
  }

  .aem-AuthorLayer-Edit #animate-hero-v1 .images .cmp-images__image {
    max-height: 500px;
  }

  #animate-hero-v1 .button {
    margin: 0;
    order: 3;
    padding: 0;
    margin-top: auto;
    margin-bottom: 120px;
    width: 100%;
  }

  #animate-hero-v1 .cmp-hero__wrapper--content {
    /* Only top padding remains here  it pushes the copy down without
       affecting .images, which sits in its own grid column starting flush
       at the top of row 1. Left inset now lives on the container so the
       CTA (a grid-row-2 sibling of .hero, not a descendant of it) lines
       up with the same left edge automatically. */
    padding: 120px 0 0 0 !important;
    margin: 0 !important;
  }

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

  #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), 9rem);
    line-height: 110%;
    letter-spacing: -0.04em;
    margin-bottom: 3.2rem;
    width: 100%;
  }

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

  #animate-hero-v1 .button .text-cta {
    font-size: clamp(1.4rem, calc(0.8rem + 4.2vw), 2.8rem);
  }

  #animate-hero-v1 .button .inv-icon {
    width: 48px;
    height: 48px;
    font-size: 2.4rem;
  }
}