/* ==========================================================================
   KEN Infotech — Premium motion layer
   Reveals driven by IntersectionObserver (js/animations.js)
   Only transform / opacity / filter / clip-path are animated.
   ========================================================================== */

:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-dur: 0.8s;
}

/* Base state: only when JS is active so content is never hidden for
   no-JS users or crawlers. */
.js [data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.7s var(--ease-out-soft),
    transform var(--anim-dur) var(--ease-out-quint),
    filter 0.7s ease,
    clip-path 1s var(--ease-out-quint);
  transition-delay: var(--anim-delay, 0ms);
}

/* ---------- Reveal variants ---------- */
.js [data-anim="fade-up"] {
  transform: translate3d(0, 34px, 0);
}

.js [data-anim="fade-down"] {
  transform: translate3d(0, -28px, 0);
}

.js [data-anim="fade-in"] {
  transform: none;
}

.js [data-anim="rise"] {
  transform: translate3d(0, 44px, 0) scale(0.985);
}

.js [data-anim="rise-sm"] {
  transform: translate3d(0, 22px, 0);
}

.js [data-anim="card-rise"] {
  transform: translate3d(0, 70px, 0) scale(0.96);
}

.js [data-anim="card-rise"] {
  transition-duration: 0.95s;
}

.js [data-anim="card-rise-late"] {
  transform: translate3d(0, 60px, 0) scale(0.97);
  transition-duration: 1.1s;
}

.js [data-anim="head-rise"] {
  transform: translate3d(0, 32px, 0) scale(0.985);
}

.js [data-anim="slide-left"] {
  transform: translate3d(-46px, 16px, 0);
}

.js [data-anim="slide-right"] {
  transform: translate3d(46px, 16px, 0);
}

.js [data-anim="scale-in"] {
  transform: scale(0.94);
}

.js [data-anim="zoom-reveal"] {
  transform: scale(1.06);
  clip-path: inset(0 0 100% 0);
}

.js [data-anim="image-reveal"] {
  clip-path: inset(0 100% 0 0);
  transform: translate3d(0, 18px, 0);
}

.js [data-anim="text-reveal"] {
  transform: translate3d(0, 100%, 0);
}

.js [data-anim="blur-in"] {
  filter: blur(7px);
  transform: translate3d(0, 15px, 0);
  transition-duration: 0.5s;
}

.js [data-anim].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

.js [data-anim="zoom-reveal"].is-visible,
.js [data-anim="image-reveal"].is-visible {
  clip-path: inset(0 0 0 0);
}

/* Headings get a slightly longer, more cinematic settle */
.js [data-anim="head-rise"] {
  transition-duration: 0.95s;
}

.js [data-anim="head-rise"] .gradient-text,
.js [data-anim="head-rise"] .animated-gradient {
  opacity: 0;
  transition: opacity 0.9s ease 0.18s;
  transition-delay: calc(var(--anim-delay, 0ms) + 180ms);
}

.js [data-anim="head-rise"].is-visible .gradient-text,
.js [data-anim="head-rise"].is-visible .animated-gradient {
  opacity: 1;
}

/* ---------- Masked image reveal (driven by the parent card reveal) ---------- */
.js .media-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease-out-quint);
  transition-delay: calc(var(--anim-delay, 0ms) + 60ms);
}

.js .media-reveal>img,
.js .media-reveal img {
  --img-scale: 1.08;
  transition: transform 1.2s var(--ease-out-quint);
  transition-delay: calc(var(--anim-delay, 0ms) + 60ms);
}

.js [data-anim].is-visible .media-reveal,
.js .media-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

.js [data-anim].is-visible .media-reveal img,
.js .media-reveal.is-visible img {
  --img-scale: 1;
}

/* Card body reveals as one calm group, just after its portrait */
.js [data-anim] .media-card__body {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.7s var(--ease-out-soft), transform 0.8s var(--ease-out-quint);
  transition-delay: calc(var(--anim-delay, 0ms) + 180ms);
}

.js [data-anim].is-visible .media-card__body {
  opacity: 1;
  transform: none;
}

/* Text reveal needs an overflow-hidden wrapper */
.reveal-mask {
  overflow: hidden;
  display: block;
}

/* Counter numbers shouldn't jitter while animating */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ---------- Keyframes ---------- */
@keyframes float-y {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-22px);
  }
}

@keyframes float-x {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(18px);
  }
}

@keyframes gradient-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(2%, -2%, 0) scale(1.06);
  }

  100% {
    transform: translate3d(-2%, 2%, 0) scale(1.02);
  }
}

@keyframes hue-drift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes shine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.45);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(139, 92, 246, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-reverse {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

/* ---------- Reusable animated bits ---------- */
.float-slow {
  animation: float-y 9s ease-in-out infinite;
}

.float-slower {
  animation: float-y 14s ease-in-out infinite;
}

.drift-x {
  animation: float-x 11s ease-in-out infinite;
}

.animated-gradient {
  background: linear-gradient(100deg, #8b5cf6, #6366f1, #38bdf8, #8b5cf6);
  background-size: 200% 100%;
  animation: shine 9s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pulse-dot {
  animation: pulse-ring 2.6s ease-out infinite;
}

/* Slowly drifting gradient wash on heroes and CTA bands */
.anim-gradient {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.anim-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background: radial-gradient(45% 55% at 20% 30%, rgba(139, 92, 246, 0.32), transparent 65%),
    radial-gradient(45% 55% at 80% 70%, rgba(56, 189, 248, 0.26), transparent 65%);
  background-size: 180% 180%;
  animation: hue-drift 24s ease-in-out infinite;
}

/* Decorative floating blobs used in light sections */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.blob--violet {
  background: rgba(167, 139, 250, 0.5);
}

.blob--blue {
  background: rgba(96, 165, 250, 0.45);
}

/* Hero entrance sequence (runs on load, staggered) */
.js .hero-seq>* {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(0.99);
}

.js .hero-seq.is-ready>* {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-out-soft),
    transform 1s var(--ease-out-quint);
}

.js .hero-seq.is-ready>*:nth-child(1) {
  transition-delay: 0.05s;
}

.js .hero-seq.is-ready>*:nth-child(2) {
  transition-delay: 0.18s;
}

.js .hero-seq.is-ready>*:nth-child(3) {
  transition-delay: 0.31s;
}

.js .hero-seq.is-ready>*:nth-child(4) {
  transition-delay: 0.44s;
}

.js .hero-seq.is-ready>*:nth-child(5) {
  transition-delay: 0.57s;
}

.js .hero-seq.is-ready>*:nth-child(6) {
  transition-delay: 0.7s;
}

/* Parallax layer (offset written by JS as a custom property) */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* ---------- Hover interactions ---------- */
.media-card {
  will-change: transform;
}

.media-card:hover .link-arrow span,
.media-card:hover .link-arrow [aria-hidden] {
  transform: translateX(5px);
}

.link-arrow span,
.link-arrow [aria-hidden] {
  display: inline-block;
  transition: transform 0.35s var(--ease-out-soft);
}

.media-card:hover .media-card__media::after {
  opacity: 0.95;
}

.media-card__media::after {
  transition: opacity 0.45s ease;
}

.glass-card {
  will-change: transform;
}

/* Back to top polish */
.to-top {
  transform: translateY(14px) scale(0.8);
}

.to-top.is-visible {
  transform: translateY(0) scale(1);
}

.to-top:hover {
  transform: translateY(-4px) scale(1.06);
}

.to-top:active {
  transform: translateY(-1px) scale(0.98);
}

/* Marquee track for logo strips */
.marquee {
  overflow: hidden;
  position: relative;
}

.marquee__track {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: max-content;
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__track--reverse {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: max-content;
  animation: marquee-reverse 38s linear infinite;
}

.marquee:hover .marquee__track--reverse {
  animation-play-state: paused;
}

/* ---------- Responsive: shorter travel, tighter timing ---------- */
@media (max-width: 1024px) {
  .anim-gradient::after {
    opacity: 0.4;
  }
}

@media (max-width: 767px) {
  .js [data-anim] {
    transition-duration: 0.6s;
  }

  .js [data-anim="rise"],
  .js [data-anim="fade-up"] {
    transform: translate3d(0, 26px, 0) scale(0.99);
  }

  .js [data-anim="card-rise"],
  .js [data-anim="card-rise-late"] {
    transform: translate3d(0, 35px, 0) scale(0.98);
  }

  .js [data-anim="head-rise"] {
    transform: translate3d(0, 20px, 0);
  }

  .js [data-anim="slide-left"],
  .js [data-anim="slide-right"] {
    transform: translate3d(0, 24px, 0);
  }

  .js [data-anim="rise-sm"] {
    transform: translate3d(0, 14px, 0);
  }

  .js .media-reveal>img,
  .js .media-reveal img {
    --img-scale: 1.04;
  }

  .js .media-card__media img {
    --img-par: 0px !important;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-anim],
  .js [data-anim].is-visible,
  .js .media-reveal,
  .js .media-reveal img,
  .js [data-anim] .media-card__body,
  .js [data-anim].is-visible .media-card__body,
  .js .hero-seq>*,
  .js .hero-seq.is-ready>* {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .anim-gradient::after {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Grid settle (whole grid eases into place) ---------- */
.js [data-grid-settle] {
  transform: scale(0.985);
  transition: transform 1s var(--ease-out-quint);
}

.js [data-grid-settle].is-settled {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-grid-settle] {
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Alternating Animated Tech Backgrounds (.section--animated-bg)
   ========================================================================== */
.section--animated-bg {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg,
      #2f52a0 0%,
      #2d50a0 22%,
      #2f53a5 45%,
      #3155a7 68%,
      #2d4f9c 85%,
      #3052a2 100%);
  background-size: 280% 280%;
  animation: theme-gradient-flow 18s ease-in-out infinite;
  isolation: isolate;
}

/* Typography & Contrast on Blue Background (.section--animated-bg) */
.section--animated-bg .section-head h1,
.section--animated-bg .section-head h2,
.section--animated-bg .section-head h3,
.section--animated-bg .section-head h4,
.solution-row.section--animated-bg .solution-content h3,
.section--animated-bg .leader-info h2,
.section--animated-bg .leader-info h3,
.section--animated-bg .timeline__item h3,
.section--animated-bg .timeline__item h4,
.section--animated-bg h2:not(.media-card h2):not(.card h2):not(.glass-card h2):not(.method-card h2):not(.case-study-card h2):not(.tech-card h2):not(.why-ken-card h2),
.section--animated-bg h3:not(.media-card h3):not(.card h3):not(.glass-card h3):not(.method-card h3):not(.case-study-card h3):not(.tech-card h3):not(.why-ken-card h3),
.section--animated-bg h4:not(.media-card h4):not(.card h4):not(.glass-card h4):not(.method-card h4):not(.case-study-card h4):not(.tech-card h4):not(.why-ken-card h4):not(.split-info-title) {
  color: #ffffff !important;
}

.section--animated-bg .gradient-text {
  background: linear-gradient(100deg, #ff4db8 0%, #ff70cd 45%, #7dd3fc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.section--animated-bg .eyebrow {
  color: #df0b8a !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 16px rgba(14, 27, 56, 0.25) !important;
}

.section--animated-bg .lead,
.section--animated-bg .section-head .lead,
.section--animated-bg .section-head p,
.solution-row.section--animated-bg .solution-content > p,
.section--animated-bg .leader-intro,
.section--animated-bg .leader-bio p,
.section--animated-bg .timeline__item p,
.section--animated-bg > .container > p,
.section--animated-bg p:not(.media-card p):not(.card p):not(.glass-card p):not(.method-card p):not(.case-study-card p):not(.tech-card p):not(.why-ken-card p):not(.split-info-drawer p):not(.split-info-drawer *):not(.split-info-desc):not(.split-info-desc p):not(.drawer-desc-lead):not(.drawer-desc-note) {
  color: rgba(255, 255, 255, 0.92) !important;
}

.section--animated-bg .split-info-drawer,
.section--animated-bg .split-info-drawer p,
.section--animated-bg .split-info-desc,
.section--animated-bg .split-info-desc p,
.section--animated-bg .drawer-desc-lead,
.split-info-drawer,
.split-info-drawer p,
.split-info-desc,
.split-info-desc p,
.drawer-desc-lead {
  color: #1e293b !important;
}

.section--animated-bg .drawer-desc-note,
.split-info-drawer .drawer-desc-note {
  color: #475569 !important;
}

.section--animated-bg .case-note-disclaimer {
  color: #ffffff !important;
  opacity: 0.92;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.section--animated-bg .timeline::before {
  background: linear-gradient(180deg, #ff4db8 0%, #7dd3fc 100%, transparent) !important;
}

.section--animated-bg .timeline__item::before {
  background: #ffffff !important;
  border: 3px solid #ff4db8 !important;
  box-shadow: 0 0 0 5px rgba(255, 77, 184, 0.28) !important;
}

.section--animated-bg .chip,
.solution-row.section--animated-bg .chip {
  background: #fdf2f8 !important;
  color: #df0b8a !important;
  border: 1px solid rgba(223, 11, 138, 0.25) !important;
}

.section--animated-bg h5.tags-label,
.solution-row.section--animated-bg h5.tags-label {
  color: #ffffff !important;
}

.section--animated-bg .leader-stat__label,
.leader-row.section--animated-bg .leader-stat__label {
  color: #ffffff !important;
  opacity: 0.95;
  font-weight: 600;
}

.section--animated-bg .leader-stat__value,
.leader-row.section--animated-bg .leader-stat__value {
  background: linear-gradient(135deg, #ffffff 0%, #fbcfe8 60%, #f472b6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.section--animated-bg .leader-stats,
.leader-row.section--animated-bg .leader-stats {
  border-top-color: rgba(255, 255, 255, 0.25) !important;
}

.section--animated-bg .solution-index,
.solution-row.section--animated-bg .solution-index {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.35) !important;
}

/* Capability Tags on Blue BG */
.section--animated-bg .solution-tags li.cap-tag,
.solution-row.section--animated-bg .solution-tags li.cap-tag {
  color: #831843 !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.section--animated-bg .solution-tags li.cap-tag.is-active,
.solution-row.section--animated-bg .solution-tags li.cap-tag.is-active {
  transform: translateY(-2px) scale(1.02) !important;
  background: linear-gradient(135deg, #df0b8a 0%, #b2096e 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(223, 11, 138, 0.45) !important;
}

@media (hover: hover) and (pointer: fine) {
  .section--animated-bg .solution-tags li.cap-tag:hover,
  .solution-row.section--animated-bg .solution-tags li.cap-tag:hover {
    transform: translateY(-2px) scale(1.02) !important;
    background: linear-gradient(135deg, #df0b8a 0%, #b2096e 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(223, 11, 138, 0.45) !important;
  }
}

.section--animated-bg .solution-tags li.cap-tag:focus-visible,
.solution-row.section--animated-bg .solution-tags li.cap-tag:focus-visible {
  outline: 2px solid #df0b8a !important;
  outline-offset: 2px !important;
}
.section--animated-bg .solution-tags li.cap-tag:focus:not(:focus-visible),
.solution-row.section--animated-bg .solution-tags li.cap-tag:focus:not(:focus-visible) {
  outline: none !important;
}

/* Interactive Split Card on Blue BG */
.section--animated-bg .interactive-split-card,
.solution-row.section--animated-bg .interactive-split-card {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 32px -10px rgba(0, 0, 0, 0.3) !important;
}

.section--animated-bg .interactive-split-card:hover,
.section--animated-bg .interactive-split-card.is-active,
.solution-row.section--animated-bg .interactive-split-card:hover,
.solution-row.section--animated-bg .interactive-split-card.is-active {
  border-color: #df0b8a !important;
  box-shadow: 0 20px 45px -12px rgba(223, 11, 138, 0.4) !important;
}

.section--animated-bg .split-info-drawer,
.solution-row.section--animated-bg .split-info-drawer {
  background: rgba(255, 255, 255, 0.96) !important;
  border-left-color: rgba(223, 11, 138, 0.3) !important;
}

.section--animated-bg .split-info-chip,
.solution-row.section--animated-bg .split-info-chip {
  color: #df0b8a !important;
  background: rgba(223, 11, 138, 0.08) !important;
  border: 1px solid rgba(223, 11, 138, 0.2) !important;
}

.section--animated-bg .split-meta-badge,
.solution-row.section--animated-bg .split-meta-badge {
  color: #df0b8a !important;
}


/* ==========================================================================
   Alternating Animated Pink Backgrounds (.section--pink-bg)
   With Blue cards, chips, capability tags, hover effects, and shadows
   ========================================================================== */
.section--pink-bg {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg,
      #f8fafd 0%,
      #fcf3f8 22%,
      #f1f5fc 45%,
      #fcf1f7 68%,
      #f4f7fd 85%,
      #fdf5f9 100%);
  background-size: 280% 280%;
  animation: theme-gradient-flow 18s ease-in-out infinite;
  isolation: isolate;
}

/* Subtle tech grid for pink background sections */
.section--pink-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(37, 71, 155, 0.08) 1.2px, transparent 1.2px),
    linear-gradient(to right, rgba(37, 71, 155, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 71, 155, 0.02) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px, 36px 36px;
  background-position: 0 0, 0 0, 0 0;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: grid-subtle-drift 35s linear infinite;
}

/* Blue cards, chips, tags, hover states & shadows on pink background sections */
.section--pink-bg .chip,
.solution-row.section--pink-bg .chip {
  background: #eff6ff !important;
  color: #25479b !important;
  border: 1px solid rgba(37, 71, 155, 0.22) !important;
}

.section--pink-bg h5.tags-label,
.solution-row.section--pink-bg h5.tags-label {
  color: #25479b !important;
}

.section--pink-bg .solution-index,
.solution-row.section--pink-bg .solution-index {
  -webkit-text-stroke-color: rgba(37, 71, 155, 0.25) !important;
}

/* Capability Tags on Pink BG (Blue styling) */
.section--pink-bg .solution-tags li.cap-tag,
.solution-row.section--pink-bg .solution-tags li.cap-tag {
  color: #25479b !important;
  background: #eff6ff !important;
  border: 1px solid rgba(37, 71, 155, 0.22) !important;
  box-shadow: 0 2px 6px rgba(37, 71, 155, 0.08) !important;
}

.section--pink-bg .solution-tags li.cap-tag.is-active,
.solution-row.section--pink-bg .solution-tags li.cap-tag.is-active {
  transform: translateY(-2px) scale(1.02) !important;
  background: linear-gradient(135deg, #25479b 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(37, 71, 155, 0.35) !important;
}

@media (hover: hover) and (pointer: fine) {
  .section--pink-bg .solution-tags li.cap-tag:hover,
  .solution-row.section--pink-bg .solution-tags li.cap-tag:hover {
    transform: translateY(-2px) scale(1.02) !important;
    background: linear-gradient(135deg, #25479b 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(37, 71, 155, 0.35) !important;
  }
}

.section--pink-bg .solution-tags li.cap-tag:focus-visible,
.solution-row.section--pink-bg .solution-tags li.cap-tag:focus-visible {
  outline: 2px solid #25479b !important;
  outline-offset: 2px !important;
}
.section--pink-bg .solution-tags li.cap-tag:focus:not(:focus-visible),
.solution-row.section--pink-bg .solution-tags li.cap-tag:focus:not(:focus-visible) {
  outline: none !important;
}

.section--pink-bg .split-drawer-close,
.solution-row.section--pink-bg .split-drawer-close {
  border-color: rgba(37, 71, 155, 0.25) !important;
  color: #25479b !important;
}
.section--pink-bg .split-drawer-close:hover,
.solution-row.section--pink-bg .split-drawer-close:hover,
.section--pink-bg .split-drawer-close:active,
.solution-row.section--pink-bg .split-drawer-close:active {
  background: #25479b !important;
  color: #ffffff !important;
}

/* Interactive Split Card on Pink BG */
.section--pink-bg .interactive-split-card,
.solution-row.section--pink-bg .interactive-split-card {
  border-color: rgba(37, 71, 155, 0.22) !important;
  box-shadow: 0 10px 32px -10px rgba(37, 71, 155, 0.15) !important;
}

.section--pink-bg .interactive-split-card:hover,
.section--pink-bg .interactive-split-card.is-active,
.solution-row.section--pink-bg .interactive-split-card:hover,
.solution-row.section--pink-bg .interactive-split-card.is-active {
  border-color: #25479b !important;
  box-shadow: 0 20px 45px -12px rgba(37, 71, 155, 0.3) !important;
}

.section--pink-bg .split-info-drawer,
.solution-row.section--pink-bg .split-info-drawer {
  border-left-color: rgba(37, 71, 155, 0.25) !important;
}

.section--pink-bg .split-info-chip,
.solution-row.section--pink-bg .split-info-chip {
  color: #25479b !important;
  background: rgba(37, 71, 155, 0.08) !important;
  border: 1px solid rgba(37, 71, 155, 0.2) !important;
}

.section--pink-bg .split-meta-badge,
.solution-row.section--pink-bg .split-meta-badge {
  color: #25479b !important;
}


/* Subtle futuristic tech grid with dynamic ambient light */
.section--animated-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(223, 11, 138, 0.08) 1.2px, transparent 1.2px),
    linear-gradient(to right, rgba(99, 102, 241, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.02) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px, 36px 36px;
  background-position: 0 0, 0 0, 0 0;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: grid-subtle-drift 35s linear infinite;
}

/* Soft animated color aura drift */
.section--animated-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 25%, rgba(223, 11, 138, 0.05) 0%, transparent 55%),
    radial-gradient(circle at 82% 75%, rgba(56, 189, 248, 0.065) 0%, transparent 55%),
    radial-gradient(circle at 75% 18%, rgba(139, 92, 246, 0.045) 0%, transparent 50%),
    radial-gradient(circle at 25% 82%, rgba(221, 98, 176, 0.045) 0%, transparent 50%);
  filter: blur(55px);
  animation: aura-ambient-drift 24s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Floating animated orbs container */
.animated-bg-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.anim-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
  pointer-events: none;
}

.anim-orb--1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(223, 11, 138, 0.32) 0%, rgba(223, 11, 138, 0) 70%);
  top: -100px;
  left: -80px;
  animation: orb-float-1 20s ease-in-out infinite alternate;
}

.anim-orb--2 {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, rgba(56, 189, 248, 0) 70%);
  bottom: -120px;
  right: -80px;
  animation: orb-float-2 25s ease-in-out infinite alternate;
}

.anim-orb--3 {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0) 70%);
  top: 35%;
  left: 65%;
  animation: orb-float-3 18s ease-in-out infinite alternate;
}

/* Floating ambient glowing light nodes */
.anim-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.anim-particle--1 {
  top: 22%;
  left: 12%;
  width: 6px;
  height: 6px;
  background: #df0b8a;
  box-shadow: 0 0 14px 3px rgba(223, 11, 138, 0.65);
  animation: particle-glide 9s ease-in-out infinite;
}

.anim-particle--2 {
  top: 68%;
  left: 20%;
  width: 8px;
  height: 8px;
  background: #38bdf8;
  box-shadow: 0 0 16px 3px rgba(56, 189, 248, 0.65);
  animation: particle-glide 13s ease-in-out infinite 2s;
}

.anim-particle--3 {
  top: 28%;
  right: 14%;
  width: 6px;
  height: 6px;
  background: #a855f7;
  box-shadow: 0 0 12px 3px rgba(168, 85, 247, 0.65);
  animation: particle-glide 10s ease-in-out infinite 4s;
}

.anim-particle--4 {
  bottom: 22%;
  right: 28%;
  width: 7px;
  height: 7px;
  background: #ec4899;
  box-shadow: 0 0 15px 3px rgba(236, 72, 153, 0.65);
  animation: particle-glide 11s ease-in-out infinite 1.5s;
}

/* Glass card enhancement on animated backgrounds */
.section--animated-bg .media-card,
.section--animated-bg .card,
.section--animated-bg .glass-card,
.section--animated-bg .method-card,
.section--animated-bg .method-callout,
.section--animated-bg .case-study-card,
.section--animated-bg .tech-card,
.section--animated-bg .why-ken-card {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 16px 45px -10px rgba(14, 27, 56, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

.section--animated-bg .media-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.section--animated-bg .media-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.section--animated-bg .media-card .link-arrow,
.section--animated-bg .media-card .mt-auto {
  margin-top: auto !important;
}

.section--animated-bg .media-card:hover,
.section--animated-bg .card:hover,
.section--animated-bg .glass-card:hover,
.section--animated-bg .method-card:hover,
.section--animated-bg .method-callout:hover,
.section--animated-bg .case-study-card:hover,
.section--animated-bg .tech-card:hover,
.section--animated-bg .why-ken-card:hover {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 24px 55px -12px rgba(14, 27, 56, 0.4), 0 0 0 1px rgba(223, 11, 138, 0.25) !important;
}

.section--animated-bg .method-callout p {
  color: #0b1120 !important;
}

/* Keyframe animations for the ambient tech background */
@keyframes orb-float-1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(90px, 70px, 0) scale(1.14);
  }

  100% {
    transform: translate3d(40px, 130px, 0) scale(0.96);
  }
}

@keyframes orb-float-2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-100px, -60px, 0) scale(1.18);
  }

  100% {
    transform: translate3d(-50px, -120px, 0) scale(0.92);
  }
}

@keyframes orb-float-3 {
  0% {
    transform: translate3d(0, 0, 0) scale(0.92);
  }

  50% {
    transform: translate3d(-70px, 50px, 0) scale(1.12);
  }

  100% {
    transform: translate3d(60px, -40px, 0) scale(1.06);
  }
}

@keyframes particle-glide {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.35;
  }

  50% {
    transform: translate3d(18px, -28px, 0);
    opacity: 0.85;
  }
}

@keyframes aura-ambient-drift {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(5deg) scale(1.08);
  }

  100% {
    transform: rotate(-4deg) scale(1.03);
  }
}

@keyframes grid-subtle-drift {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }

  100% {
    background-position: 72px 72px, 72px 72px, 72px 72px;
  }
}

@keyframes theme-gradient-flow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ==========================================================================
   Hero Visual Fallbacks (Prevents "Popping" during WebGL initialization)
   ========================================================================== */
.hero-fallback-nebula {
  /* Matches the blue/pink aesthetic of nebula-hero.js */
  background: radial-gradient(circle at center, #24134a 0%, #050711 70%);
}

.hero-fallback-vanta-cells {
  /* Matches Vanta Cells 0x1300ae to 0xaf45b6 */
  background: linear-gradient(135deg, #1300ae 0%, #6123b2 50%, #af45b6 100%);
}

.hero-fallback-galaxy {
  /* Matches Galaxy Hero */
  background: radial-gradient(circle at center, #180938 0%, #050711 80%);
}

.hero-fallback-enterprise {
  background: #04060d;
  /* Dark theme floor */
}

.hero-fallback-aurora {
  /* Matches Aurora Curtain */
  background: radial-gradient(circle at center, #00134a 0%, #000408 80%);
}

.hero-fallback-frozen {
  /* Matches Frozen Fracture */
  background: radial-gradient(circle at center, #0a1b3f 0%, #020306 80%);
}

.hero-fallback-three {
  /* Matches Three Hero (Silky Smooth Viscous Fluid) */
  background: radial-gradient(circle at center, #060c1d 0%, #000105 80%);
}

.hero-fallback-fog {
  /* Matches Vanta Fog */
  background: linear-gradient(135deg, #dbc3ff 0%, #91b4ff 50%, #7a6dff 100%);
}

/* Ensure dynamically injected canvases don't cause layout shift */
.vanta-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

/* Ensure solution media cards and split images are always instantly visible on scroll */
.interactive-split-card,
.interactive-split-card .split-img-layer,
.interactive-split-card img,
.solution-media,
.solution-media .frame {
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}