/* =========================================================
   Intelligence Flow — GSAP MotionPath + ScrollTrigger
   ========================================================= */

.intelligence-flow {
  --v-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --workflow-y: 52%;
  --iflow-converge: 0;

  position: relative;
  width: 100%;
  height: clamp(760px, 100svh, 1400px);
  min-height: 760px;
  overflow: hidden;
  background: #050505;
  color: #f4f1ea;
}

.iflow-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.iflow-base picture,
.iflow-base img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

.iflow-base img {
  object-fit: cover;
  object-position: center;
  filter: none;
}

.iflow-base.is-enter {
  will-change: transform;
}

.iflow-base::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, transparent 22%, transparent 62%, rgba(5, 5, 5, 0.38) 100%);
  pointer-events: none;
}

.iflow-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: min(100%, 2400px);
  max-width: 2400px;
  height: 100%;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.iflow-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.iflow-lane {
  fill: none;
  stroke: transparent;
  stroke-width: 0;
  pointer-events: none;
}

.iflow-nodes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ai-node {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  white-space: nowrap;
  color: #f7f5f0;
  opacity: 0;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  pointer-events: none;
  z-index: 3;
}

.ai-node .name {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 1.35vw, 27px);
  letter-spacing: 0.02em;
  opacity: 0.92;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.ai-node .role {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(8px, 0.55vw, 11px);
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.35;
}

/* Headline — title zone ~7–23vh; paths start >= 26vh */
.iflow-head {
  position: absolute;
  top: clamp(72px, 9vh, 130px);
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 82vw);
  z-index: 20;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.iflow-head__shade {
  position: absolute;
  left: 50%;
  top: -12%;
  transform: translateX(-50%);
  width: 118%;
  height: 130%;
  background: linear-gradient(
    rgba(10, 10, 12, 0.55),
    rgba(10, 10, 12, 0.12)
  );
  pointer-events: none;
  z-index: -1;
}

.iflow-eyebrow {
  margin: 0 0 1rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.42);
}

.iflow-title {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(38px, 4.2vw, 70px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.05;
  color: #f7f5f0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.iflow-sub {
  margin: 18px 0 0;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: rgba(244, 241, 234, 0.72);
}

/* WORKFLOW — dark ink on brightest light (reverse contrast) */
.iflow-core,
.workflow-core {
  position: absolute;
  left: 50%;
  top: var(--workflow-y, 53%);
  z-index: 18;
  width: min(520px, 72vw);
  text-align: center;
  opacity: 0.45;
  pointer-events: none;
  /* centering via GSAP xPercent/yPercent to avoid transform fights */
}

.iflow-workflow {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #171717;
  text-shadow: none;
}

.iflow-workflow-zh {
  margin: 0.85rem 0 0;
  font-size: 1rem;
  color: rgba(20, 20, 20, 0.72);
}

.iflow-workflow-en {
  margin: 0.55rem 0 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.42);
}

.iflow-story {
  margin: 2.25rem auto 0;
  max-width: 16em;
  opacity: 0;
}

.iflow-story p {
  margin: 0 0 0.5rem;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  font-weight: 500;
  color: rgba(247, 245, 240, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.iflow-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18vh;
  z-index: 4;
  background: linear-gradient(180deg, transparent, #ebe6dc);
  opacity: calc(0.1 + var(--iflow-converge) * 0.9);
  pointer-events: none;
}

@media (max-width: 768px) {
  .intelligence-flow {
    height: clamp(700px, 100svh, 980px);
    min-height: 700px;
    --workflow-y: 54%;
  }

  .iflow-head {
    top: clamp(64px, 8vh, 96px);
    width: min(900px, 88vw);
  }

  .iflow-title {
    font-size: clamp(1.85rem, 7.2vw, 2.35rem);
  }

  .iflow-core,
  .workflow-core {
    width: min(520px, 86vw);
  }

  .ai-node .name {
    font-size: clamp(15px, 4vw, 18px);
  }

  .ai-node .role {
    display: none;
  }

  .ai-node.is-desktop-only {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .ai-node.is-mobile-only {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-node {
    will-change: auto;
  }
}