/* HPACE — force animations when html[data-animations="on"] (site default).
   Overrides OS prefers-reduced-motion for branded motion effects. */

html[data-animations="on"] .hp-marquee__track--forward,
html[data-animations="on"] .hp-marquee__track--reverse,
html[data-animations="on"] .hp-roadmap.is-marquee .hp-roadmap__track {
  animation-play-state: running !important;
}

html[data-animations="on"] .hp-marquee:hover .hp-marquee__track--forward,
html[data-animations="on"] .hp-marquee:hover .hp-marquee__track--reverse,
html[data-animations="on"] .hp-roadmap.is-marquee:hover .hp-roadmap__track,
html[data-animations="on"] .hp-roadmap.is-marquee:focus-within .hp-roadmap__track,
html[data-animations="on"] .hp-roadmap.is-marquee.is-paused .hp-roadmap__track {
  animation-play-state: paused !important;
}

html[data-animations="on"] .hp-tech-orbit__ring,
html[data-animations="on"] .hp-tech-orbit__path-spin,
html[data-animations="on"] .hp-tech-orbit__core,
html[data-animations="on"] .hp-tech-orbit__glow,
html[data-animations="on"] .hp-tech-orbit__ring--1 .hp-tech-orbit__tag,
html[data-animations="on"] .hp-tech-orbit__ring--2 .hp-tech-orbit__tag {
  animation-play-state: running !important;
}

html[data-animations="on"] .hp-preloader__ring::before,
html[data-animations="on"] .hp-preloader__ring::after,
html[data-animations="on"] .hp-preloader__logo {
  animation-play-state: running !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-animations="on"] .hp-marquee__track--forward {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    animation: hp-marquee-forward 38s linear infinite !important;
  }

  html[data-animations="on"] .hp-marquee--single .hp-marquee__track--forward {
    animation: hp-marquee-forward 52s linear infinite !important;
  }

  html[data-animations="on"] .hp-marquee__track--reverse {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    transform: translateX(-50%) !important;
    animation: hp-marquee-reverse 42s linear infinite !important;
  }

  html[data-animations="on"] .hp-marquee__list[aria-hidden="true"] {
    display: flex !important;
  }

  html[data-animations="on"] .hp-marquee__fade {
    display: block !important;
  }

  html[data-animations="on"] .hp-roadmap.is-marquee .hp-roadmap__track {
    display: flex !important;
    width: max-content !important;
    animation: hp-roadmap-marquee 70s linear infinite !important;
  }

  @media (min-width: 768px) {
    html[data-animations="on"] .hp-roadmap.is-marquee .hp-roadmap__track {
      animation-duration: 58s !important;
    }
  }

  @media (min-width: 1200px) {
    html[data-animations="on"] .hp-roadmap.is-marquee .hp-roadmap__track {
      animation-duration: 52s !important;
    }
  }

  html[data-animations="on"] .hp-roadmap__set[aria-hidden="true"] {
    display: flex !important;
  }

  html[data-animations="on"] .hp-roadmap.is-marquee .hp-roadmap__fade {
    display: block !important;
  }

  html[data-animations="on"] .hp-tech-orbit__ring {
    animation: hp-orbit-spin 36s linear infinite !important;
  }

  html[data-animations="on"] .hp-tech-orbit__ring--2 {
    animation: hp-orbit-spin 48s linear infinite reverse !important;
  }

  html[data-animations="on"] .hp-tech-orbit__ring--1 .hp-tech-orbit__tag {
    animation: hp-orbit-tag-counter 36s linear infinite !important;
  }

  html[data-animations="on"] .hp-tech-orbit__ring--2 .hp-tech-orbit__tag {
    animation: hp-orbit-tag-counter 48s linear infinite reverse !important;
  }

  html[data-animations="on"] .hp-tech-orbit.is-live .hp-tech-orbit__ring--1 .hp-tech-orbit__tag {
    animation:
      hp-orbit-tag-in 0.65s var(--hp-ease) both,
      hp-orbit-tag-counter 36s linear infinite !important;
  }

  html[data-animations="on"] .hp-tech-orbit.is-live .hp-tech-orbit__ring--2 .hp-tech-orbit__tag {
    animation:
      hp-orbit-tag-in 0.65s var(--hp-ease) both,
      hp-orbit-tag-counter 48s linear infinite reverse !important;
  }

  html[data-animations="on"] .hp-tech-orbit__path-spin--1 {
    animation: hp-orbit-path-spin 60s linear infinite !important;
  }

  html[data-animations="on"] .hp-tech-orbit__path-spin--2 {
    animation: hp-orbit-path-spin 80s linear infinite reverse !important;
  }

  html[data-animations="on"] .hp-tech-orbit__core {
    animation: hp-orbit-core-pulse 4s ease-in-out infinite !important;
  }

  html[data-animations="on"] .hp-tech-orbit__glow {
    animation: hp-orbit-glow-pulse 5s ease-in-out infinite !important;
  }

  html[data-animations="on"] .hp-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s var(--hp-ease), transform 0.65s var(--hp-ease) !important;
  }

  html[data-animations="on"] .hp-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  html[data-animations="on"] .hp-intro__video {
    display: block !important;
  }

  html[data-animations="on"] .hp-intro__scroll-line {
    animation: hp-scroll-line 2.4s ease-in-out infinite !important;
    opacity: 1 !important;
  }

  html[data-animations="on"] #hp-canvas-bg {
    display: block !important;
  }

  html[data-animations="on"] #hp-preloader-canvas {
    display: block !important;
  }

  html[data-animations="on"] .hp-preloader__logo {
    animation: hp-preloader-logo-pulse 2.4s ease-in-out infinite !important;
  }

  html[data-animations="on"] .hp-preloader__ring::before {
    animation: hp-preloader-spin 1.1s linear infinite !important;
  }

  html[data-animations="on"] .hp-preloader__ring::after {
    animation: hp-preloader-spin 1.8s linear infinite reverse !important;
  }

  html[data-animations="on"] .hp-404__orb--a {
    animation: hp-404-drift-a 14s ease-in-out infinite alternate !important;
  }

  html[data-animations="on"] .hp-404__orb--b {
    animation: hp-404-drift-b 18s ease-in-out infinite alternate !important;
  }

  html[data-animations="on"] .hp-404__orb--c {
    animation: hp-404-drift-c 11s ease-in-out infinite alternate !important;
  }
}

/* Debug: ?hp_debug_anim=1 — outline animated blocks */
html[data-hp-anim-debug="1"] .hp-marquee__track,
html[data-hp-anim-debug="1"] .hp-roadmap.is-marquee .hp-roadmap__track,
html[data-hp-anim-debug="1"] .hp-tech-orbit__ring,
html[data-hp-anim-debug="1"] .hp-reveal.is-visible {
  outline: 1px dashed rgba(0, 148, 255, 0.45);
}

/* ========== PARALLAX (hp-parallax.js) ========== */
.hp-parallax-host {
  overflow: hidden;
  isolation: isolate;
}

.hp-parallax-layer {
  backface-visibility: hidden;
  transform-origin: center center;
}

/*
 * Pre-scale on desktop so boot never jumps 1 → 1.14 when JS attaches translate.
 * (Case images stay unscaled until JS — they have reveal transitions.)
 * Mobile / reduced-motion media queries below reset this.
 */
@media (min-width: 768px) {
  html[data-animations="on"] .hp-intro__video,
  html[data-animations="on"] .hp-intro__bg {
    transform: scale(1.14);
  }

  html[data-animations="on"] .hp-pagehead__glow,
  html[data-animations="on"] .hp-outstaff-hero__glow,
  html[data-animations="on"] .hp-niches-hero__glow {
    transform: scale(1.06);
  }
}

/* JS owns transform (translate + scale). Kill transitions that fight it. */
html.hp-parallax-on .hp-parallax-layer {
  will-change: transform;
  transition: none !important;
}

/* Case hero reveal used CSS transform+transition — disable while parallax runs */
html.hp-parallax-on .hp-case-hero__media > img.hp-parallax-layer,
html.hp-parallax-on .hp-case-hero.is-visible .hp-case-hero__media > img.hp-parallax-layer {
  transition: none !important;
}

html.hp-parallax-off .hp-parallax-layer {
  /* keep pre-scale via rules above; only drop will-change */
  will-change: auto;
}

.hp-pagehead {
  position: relative;
  overflow: clip;
}

@supports not (overflow: clip) {
  .hp-pagehead {
    overflow: hidden;
  }
}

.hp-pagehead__glow {
  position: absolute;
  inset: -30% -15% auto;
  height: 70%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background: radial-gradient(
    ellipse 55% 50% at 70% 20%,
    color-mix(in srgb, var(--hp-accent) 22%, transparent),
    transparent 70%
  );
}

.hp-pagehead__inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  html.hp-parallax-on .hp-parallax-layer {
    transform: none !important;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.hp-parallax-on .hp-parallax-layer,
  html.hp-parallax-off .hp-parallax-layer {
    transform: none !important;
    will-change: auto;
  }

  .hp-pagehead__glow {
    display: none;
  }
}