/* =====================================================================
   Growth Pathways — motion (marketing pages)
   Loaded only on the eight marketing pages by inc/gp-motion.php.
   Colors are the kit's own values; blue is allowed as an accent in the
   heroes by David's decision of 24 September 2026.
   ===================================================================== */
:root {
  --gp-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --gp-signal: #2456E8;
  --gp-sigmid: #4C7FE8;
}

/* ---------- Hero: layers ---------- */
.gp-hero-motion { position: relative; }
/* The canvas sits right after Elementor's video container (which carries the
   overlay as its ::before), so the paint order is video, overlay, particles,
   then the copy. Nothing else in the hero is repositioned. */
.gp-hero-motion .gp-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.8;
}
@media (max-width: 959px) { .gp-hero-motion .gp-hero-canvas { opacity: 0.45; } }
.gp-hero-motion .elementor-background-video-container {
  animation: gp-media-in 2600ms var(--gp-ease) both;
  transform-origin: center;
}
@keyframes gp-media-in { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- Hero: headline words ---------- */
.gp-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.gp-w__i { display: inline-block; }

/* rise: each word climbs into place */
.gp-style-rise .gp-w__i { transform: translateY(105%); transition: transform 900ms var(--gp-ease); }
.gp-style-rise.gp-in .gp-w__i { transform: none; }

/* blur: words sharpen out of a haze */
.gp-style-blur .gp-w { overflow: visible; }
.gp-style-blur .gp-w__i { opacity: 0; filter: blur(14px); transform: translateY(0.15em); transition: opacity 700ms var(--gp-ease), filter 1000ms var(--gp-ease), transform 900ms var(--gp-ease); }
.gp-style-blur.gp-in .gp-w__i { opacity: 1; filter: blur(0); transform: none; }

/* wipe: each word is uncovered left to right */
.gp-style-wipe .gp-w { overflow: visible; }
.gp-style-wipe .gp-w__i { clip-path: inset(0 100% 0 0); transition: clip-path 700ms var(--gp-ease); }
.gp-style-wipe.gp-in .gp-w__i { clip-path: inset(0 0 0 0); }

/* chars: letters settle one after another */
.gp-style-chars .gp-w { overflow: visible; }
.gp-c { display: inline-block; opacity: 0; transform: translateY(0.45em) rotate(6deg) scale(0.9); transition: opacity 500ms var(--gp-ease), transform 700ms var(--gp-ease); }
.gp-style-chars.gp-in .gp-c { opacity: 1; transform: none; }

/* the accent phrase: a slow Signal sheen sweeping through white */
.gp-accent {
  background-image: linear-gradient(100deg, #fff 0%, #fff 32%, var(--gp-sigmid) 44%, var(--gp-signal) 50%, var(--gp-sigmid) 56%, #fff 68%, #fff 100%);
  background-size: 320% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: gp-sheen 7s var(--gp-ease) 1.6s infinite;
}
.gp-style-chars .gp-accent .gp-c { color: inherit; -webkit-text-fill-color: inherit; }
@keyframes gp-sheen { 0% { background-position: 100% 0; } 55% { background-position: 0% 0; } 100% { background-position: 0% 0; } }

/* the tier badge types itself */
.gp-type { white-space: nowrap; }
.gp-type > span::after { content: ""; display: inline-block; width: 0.55em; height: 1em; margin-left: 0.15em; vertical-align: -0.15em; background: var(--gp-signal); animation: gp-caret 900ms steps(1) infinite; }
.gp-type-done > span::after { animation: gp-caret 900ms steps(1) 3; opacity: 0; }
@keyframes gp-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* lede and buttons */
.gp-fade { opacity: 0; transform: translateY(14px); transition: opacity 800ms var(--gp-ease), transform 800ms var(--gp-ease); }
.gp-in .gp-fade { opacity: 1; transform: none; }

/* ---------- Below the hero ---------- */
.gp-reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--gp-ease) var(--gp-d, 0ms), transform 700ms var(--gp-ease) var(--gp-d, 0ms); }
.gp-reveal.is-in { opacity: 1; transform: none; }

.gp-ticker { display: block; overflow: hidden; white-space: nowrap; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gp-ticker__track { display: inline-flex; align-items: center; gap: 2.4em; padding-right: 2.4em; animation: gp-ticker 48s linear infinite; }
.gp-ticker__dot { color: var(--gp-signal); }
.gp-ticker:hover .gp-ticker__track { animation-play-state: paused; }
@keyframes gp-ticker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.gp-parallax { overflow: hidden; }
.gp-parallax img { will-change: transform; transform: scale(1.06); transition: none; }

/* buttons: a light sweep on hover, no color change */
.gp-motion .elementor-button { position: relative; overflow: hidden; transition: transform 250ms var(--gp-ease), box-shadow 250ms var(--gp-ease); }
.gp-motion .elementor-button::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); transition: left 600ms var(--gp-ease); pointer-events: none; }
.gp-motion .elementor-button:hover::after { left: 120%; }
.gp-motion .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 23, 26, 0.18); }

/* header menu: an underline that draws from the left */
.gp-motion .xpro-theme-builder-header-nav .menu-item > a { position: relative; }
.gp-motion .xpro-theme-builder-header-nav .menu-item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.2em; height: 1px; background: var(--gp-signal); transform: scaleX(0); transform-origin: left center; transition: transform 320ms var(--gp-ease); }
.gp-motion .xpro-theme-builder-header-nav .menu-item > a:hover::after,
.gp-motion .xpro-theme-builder-header-nav .current-menu-item > a::after { transform: scaleX(1); }

/* ---------- Reduced motion: everything settles at once ---------- */
@media (prefers-reduced-motion: reduce) {
  .gp-w__i, .gp-c, .gp-fade, .gp-reveal { transform: none !important; opacity: 1 !important; filter: none !important; clip-path: none !important; transition: none !important; }
  .gp-accent { animation: none; background-position: 50% 0; }
  .gp-hero-motion .elementor-background-video-container { animation: none; }
  .gp-ticker__track { animation: none; }
  .gp-type > span::after { animation: none; opacity: 0; }
  .gp-parallax img { transform: none; }
  .gp-motion .elementor-button::after { display: none; }
}