/* ==========================================================================
   KPro Shared Theme Styles
   Animations and utilities used across every page.
   Editorial / minimal aesthetic — square corners, thin borders, subtle motion.
   ========================================================================== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ==========================================================================
   Global border radius
   Subtle rounding across all surface elements — cards, floating widgets,
   buttons, and the partner grid. Override per-element with rounded-* if
   needed.
   ========================================================================== */
:root {
  --radius:    8px;  /* Cards, surfaces */
  --radius-sm: 4px;  /* Buttons, badges */
}

/* Cards using .lift class (most card patterns) */
.lift {
  border-radius: var(--radius);
}

/* Hero floating dashboard widgets */
.shadow-float,
.shadow-card {
  border-radius: var(--radius);
}

/* CTA buttons — anchors with brand backgrounds or outlined variants */
a[class*="bg-accent"],
a[class*="bg-ink"]:not(.flex.items-center),
a[class*="border-white/25"],
a[class*="border-ink"],
button {
  border-radius: var(--radius-sm);
}

/* Top-of-card image area inherits parent's top corners */
.lift > div:first-child[class*="aspect"],
.lift > a:first-child[class*="aspect"] {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* ----- Reveal on scroll (reusable) ----- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }

/* ----- Subtle float (hero dashboard widgets) ----- */
@keyframes floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes floatC { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.float-a { animation: floatA 6.5s ease-in-out infinite; }
.float-b { animation: floatB 8s   ease-in-out infinite; }
.float-c { animation: floatC 7.2s ease-in-out infinite; }

/* ----- Animated trend line ----- */
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.draw-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawLine 2.2s ease-out .6s forwards;
}

/* ==========================================================================
   Hero dashboard widget data animations
   Subtle entrance + ambient animations on the floating cards in the hero.
   ========================================================================== */

/* ----- Developments card: bar chart grow-in ----- */
.hero-bars > div {
  transform: scaleY(0);
  transform-origin: bottom;
}
.reveal.is-visible .hero-bars > div {
  animation: hero-bar-grow 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.reveal.is-visible .hero-bars > div:nth-child(1) { animation-delay: 0.40s; }
.reveal.is-visible .hero-bars > div:nth-child(2) { animation-delay: 0.46s; }
.reveal.is-visible .hero-bars > div:nth-child(3) { animation-delay: 0.52s; }
.reveal.is-visible .hero-bars > div:nth-child(4) { animation-delay: 0.58s; }
.reveal.is-visible .hero-bars > div:nth-child(5) { animation-delay: 0.64s; }
.reveal.is-visible .hero-bars > div:nth-child(6) { animation-delay: 0.70s; }
.reveal.is-visible .hero-bars > div:nth-child(7) { animation-delay: 0.76s; }
.reveal.is-visible .hero-bars > div:nth-child(8) { animation-delay: 0.82s; }
.reveal.is-visible .hero-bars > div:nth-child(9) { animation-delay: 0.88s; }

@keyframes hero-bar-grow {
  to { transform: scaleY(1); }
}

/* ----- Leads per channel: donut segments draw in ----- */
.hero-donut .seg {
  stroke-dasharray: 0 100;
}
.hero-donut .seg-2 { stroke-dashoffset: -42; }
.hero-donut .seg-3 { stroke-dashoffset: -70; }

.reveal.is-visible .hero-donut .seg-1 { animation: hero-donut-1 1.0s ease-out 0.7s forwards; }
.reveal.is-visible .hero-donut .seg-2 { animation: hero-donut-2 0.8s ease-out 1.4s forwards; }
.reveal.is-visible .hero-donut .seg-3 { animation: hero-donut-3 0.6s ease-out 1.9s forwards; }

@keyframes hero-donut-1 { to { stroke-dasharray: 42 58; } }
@keyframes hero-donut-2 { to { stroke-dasharray: 28 72; } }
@keyframes hero-donut-3 { to { stroke-dasharray: 18 82; } }

/* ----- Trend line endpoint halo: continuous pulse ----- */
.hero-trend-halo {
  transform-origin: center;
  transform-box: fill-box;
}
.reveal.is-visible .hero-trend-halo {
  animation: hero-halo-pulse 2.2s ease-out 2.5s infinite;
}
@keyframes hero-halo-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bars > div { transform: scaleY(1); animation: none; }
  .hero-donut .seg { animation: none; }
  .hero-donut .seg-1 { stroke-dasharray: 42 58; }
  .hero-donut .seg-2 { stroke-dasharray: 28 72; }
  .hero-donut .seg-3 { stroke-dasharray: 18 82; }
  .hero-trend-halo { animation: none; }
}

/* ==========================================================================
   Flow diagram animations
   Icons pop in sequentially when the section scrolls into view, with stroke
   draw-in on the icon paths and arrows between steps. Hover replays it.
   ========================================================================== */

/* Pre-reveal: only the SVG itself is hidden — the container background stays visible */
.flow-anim .flow-icon svg {
  opacity: 0;
  transform: scale(0.5);
}
.flow-anim .flow-icon svg path,
.flow-anim .flow-icon svg circle {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.flow-anim .flow-arrow path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

/* Settled (visible) state — applied once parent .reveal is in view.
   Animation plays on the SVG only (not the bg-ink/bg-accent container). */
.reveal.is-visible .flow-anim .flow-icon svg {
  opacity: 1;
  transform: scale(1);
  animation: flow-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.is-visible .flow-anim .flow-icon svg path,
.reveal.is-visible .flow-anim .flow-icon svg circle {
  stroke-dashoffset: 0;
  animation: flow-draw 0.8s ease-out;
}
.reveal.is-visible .flow-anim .flow-arrow path {
  stroke-dashoffset: 0;
  animation: flow-arrow-draw 0.4s ease-out;
}

/* Stagger left → right */
.reveal.is-visible .flow-anim .flow-step:nth-child(1) .flow-icon svg { animation-delay: 0.0s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(2) .flow-icon svg { animation-delay: 0.3s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(3) .flow-icon svg { animation-delay: 0.6s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(4) .flow-icon svg { animation-delay: 0.9s; }

.reveal.is-visible .flow-anim .flow-step:nth-child(1) .flow-icon svg path,
.reveal.is-visible .flow-anim .flow-step:nth-child(1) .flow-icon svg circle { animation-delay: 0.2s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(2) .flow-icon svg path,
.reveal.is-visible .flow-anim .flow-step:nth-child(2) .flow-icon svg circle { animation-delay: 0.5s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(3) .flow-icon svg path,
.reveal.is-visible .flow-anim .flow-step:nth-child(3) .flow-icon svg circle { animation-delay: 0.8s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(4) .flow-icon svg path { animation-delay: 1.1s; }

.reveal.is-visible .flow-anim .flow-step:nth-child(1) .flow-arrow path { animation-delay: 0.35s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(2) .flow-arrow path { animation-delay: 0.65s; }
.reveal.is-visible .flow-anim .flow-step:nth-child(3) .flow-arrow path { animation-delay: 0.95s; }

/* Hover replays the cascade — also targets svg only */
.flow-anim:hover .flow-icon svg                  { animation: flow-pop        0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.flow-anim:hover .flow-icon svg path,
.flow-anim:hover .flow-icon svg circle           { animation: flow-draw       0.8s ease-out; }
.flow-anim:hover .flow-arrow path                { animation: flow-arrow-draw 0.4s ease-out; }
.flow-anim:hover .flow-step:nth-child(1) .flow-icon svg { animation-delay: 0s; }
.flow-anim:hover .flow-step:nth-child(2) .flow-icon svg { animation-delay: 0.15s; }
.flow-anim:hover .flow-step:nth-child(3) .flow-icon svg { animation-delay: 0.30s; }
.flow-anim:hover .flow-step:nth-child(4) .flow-icon svg { animation-delay: 0.45s; }
.flow-anim:hover .flow-step:nth-child(1) .flow-icon svg path,
.flow-anim:hover .flow-step:nth-child(1) .flow-icon svg circle { animation-delay: 0.10s; }
.flow-anim:hover .flow-step:nth-child(2) .flow-icon svg path,
.flow-anim:hover .flow-step:nth-child(2) .flow-icon svg circle { animation-delay: 0.25s; }
.flow-anim:hover .flow-step:nth-child(3) .flow-icon svg path,
.flow-anim:hover .flow-step:nth-child(3) .flow-icon svg circle { animation-delay: 0.40s; }
.flow-anim:hover .flow-step:nth-child(4) .flow-icon svg path   { animation-delay: 0.55s; }
.flow-anim:hover .flow-step:nth-child(1) .flow-arrow path      { animation-delay: 0.20s; }
.flow-anim:hover .flow-step:nth-child(2) .flow-arrow path      { animation-delay: 0.35s; }
.flow-anim:hover .flow-step:nth-child(3) .flow-arrow path      { animation-delay: 0.50s; }

@keyframes flow-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.10); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes flow-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes flow-arrow-draw {
  from { stroke-dashoffset: 30; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-anim .flow-icon svg { opacity: 1; transform: none; animation: none; }
  .flow-anim .flow-icon svg path,
  .flow-anim .flow-icon svg circle,
  .flow-anim .flow-arrow path { stroke-dashoffset: 0; animation: none; }
}

/* ==========================================================================
   Reusable .icon-anim
   For card icons (Challenge, Capabilities, etc) where each icon lives in its
   own .reveal card. The icon pops in + path draws when its card becomes
   visible. Hovering the parent .lift card replays it.
   ========================================================================== */

/* Pre-reveal: only the SVG inside is hidden — container background stays visible */
.icon-anim svg {
  opacity: 0;
  transform: scale(0.5);
}
.icon-anim svg path,
.icon-anim svg circle,
.icon-anim svg rect {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* Settled (visible) state — animation plays on SVG only, then settles. */
.reveal.is-visible .icon-anim svg {
  opacity: 1;
  transform: scale(1);
  animation: flow-pop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
.reveal.is-visible .icon-anim svg path,
.reveal.is-visible .icon-anim svg circle,
.reveal.is-visible .icon-anim svg rect {
  stroke-dashoffset: 0;
  animation: flow-draw 1.1s ease-out 0.45s;
}

/* Stagger per card position (reveal-delay-N is already on each card). */
.reveal-delay-1.is-visible .icon-anim svg { animation-delay: 0.10s; }
.reveal-delay-2.is-visible .icon-anim svg { animation-delay: 0.28s; }
.reveal-delay-3.is-visible .icon-anim svg { animation-delay: 0.46s; }
.reveal-delay-4.is-visible .icon-anim svg { animation-delay: 0.64s; }
.reveal-delay-5.is-visible .icon-anim svg { animation-delay: 0.82s; }

.reveal-delay-1.is-visible .icon-anim svg path,
.reveal-delay-1.is-visible .icon-anim svg circle,
.reveal-delay-1.is-visible .icon-anim svg rect { animation-delay: 0.40s; }
.reveal-delay-2.is-visible .icon-anim svg path,
.reveal-delay-2.is-visible .icon-anim svg circle,
.reveal-delay-2.is-visible .icon-anim svg rect { animation-delay: 0.58s; }
.reveal-delay-3.is-visible .icon-anim svg path,
.reveal-delay-3.is-visible .icon-anim svg circle,
.reveal-delay-3.is-visible .icon-anim svg rect { animation-delay: 0.76s; }
.reveal-delay-4.is-visible .icon-anim svg path,
.reveal-delay-4.is-visible .icon-anim svg circle,
.reveal-delay-4.is-visible .icon-anim svg rect { animation-delay: 0.94s; }
.reveal-delay-5.is-visible .icon-anim svg path,
.reveal-delay-5.is-visible .icon-anim svg circle,
.reveal-delay-5.is-visible .icon-anim svg rect { animation-delay: 1.12s; }

/* Replay on hover of the parent .lift card (no stagger — single card replay) */
.lift:hover .icon-anim svg {
  animation: flow-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lift:hover .icon-anim svg path,
.lift:hover .icon-anim svg circle,
.lift:hover .icon-anim svg rect {
  animation: flow-draw 0.9s ease-out 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .icon-anim svg { opacity: 1; transform: none; animation: none; }
  .icon-anim svg path,
  .icon-anim svg circle,
  .icon-anim svg rect { stroke-dashoffset: 0; animation: none; }
}

/* ----- Logo marquee ----- */
.marquee {
  overflow: hidden;
  padding: 8px 0;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: scroll-x 60s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Client logo treatment — fixed height for visual consistency (per Sandy 2026-07-05).
   All logos render at the same rendered height regardless of source pixel size;
   width scales with aspect ratio, capped so extreme-wide logos don't dominate.
   PNGs were trimmed of transparent padding on 2026-07-07 so no per-logo scale
   compensation is needed. */
.client-logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Channel / integration logo treatment — full color, larger for readability */
.channel-logo {
  max-height: 60px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ----- Card lift on hover ----- */
.lift {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.lift:hover {
  transform: translateY(-3px);
  border-color: #203b5c;
  box-shadow: 0 12px 28px rgba(32,59,92,0.10);
}

/* ----- Animated underline link ----- */
.ul-link { position: relative; }
.ul-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.ul-link:hover::after { transform: scaleX(1); }

/* ----- Nav: subtle separator over hero (default) + opaque on scroll ----- */
#nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
#nav.nav-scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom-color: #eef0f2;
}
.nav-scrolled .nav-link { color: #475569; }
.nav-scrolled .nav-link:hover { color: #203b5c; }
.nav-scrolled .logo-text { color: #203b5c; }
/* Mobile hamburger turns dark on the white scrolled nav so it stays visible */
.nav-scrolled .menu-btn { color: #203b5c; }

/* ----- Logo (KPro-Nav-Logo.svg is white by default) ----- */
.logo-img {
  height: 26px;
  width: auto;
  transition: filter .3s ease;
}
/* Recolor the white SVG to navy ink (#203b5c) — used on white bg (scrolled nav, footer) */
.nav-scrolled .logo-img,
.logo-dark {
  filter: brightness(0) saturate(100%) invert(20%) sepia(22%) saturate(1900%) hue-rotate(186deg) brightness(94%) contrast(92%);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .float-a, .float-b, .float-c { animation: none; }
  .draw-line { animation: none; stroke-dashoffset: 0; }
  .marquee-track { animation: none; }
}