/* ══════════════════════════════════════════════════════════════════════════════
   EFFECTS  (cursor spotlight, service-row stagger, How-it-works line draw)
   Everything here is decoration: without JS the page looks complete, and the
   global prefers-reduced-motion rule in base/reset.css shortens all motion.
══════════════════════════════════════════════════════════════════════════════ */

/* ─── Cursor spotlight on cards ─────────────────────────────────────────────── */
.testimonial-card,
.about-card { position: relative; overflow: hidden; }

.division-card::after,
.whyus-card::after,
.testimonial-card::after,
.about-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: opacity var(--transition);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(14,165,233,0.16), transparent 70%);
}
.division-card:hover::after,
.whyus-card:hover::after,
.testimonial-card:hover::after,
.about-card:hover::after { opacity: 1; }
.division-card.active::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(56,189,248,0.24), transparent 70%);
}
/* keep card content above the spotlight layer */
.division-card > *,
.whyus-card > *,
.testimonial-card > *,
.about-card > * { position: relative; z-index: 1; }

/* ─── Service rows slide in one after another when a tab opens ──────────────── */
.services-panel.active .chip {
  animation: chipIn 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes chipIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── How it works: connector draws itself, circles pop in sequence ─────────── */
.js .steps-wrapper .step-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.js .steps-wrapper.in-view .step-line { transform: scaleX(1); }

.js .steps-wrapper .step-num {
  opacity: 0;
  transform: scale(0.6);
}
.js .steps-wrapper.in-view .step-num {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background var(--transition), border-color var(--transition);
  transition-delay: calc(var(--i, 0) * 220ms), calc(var(--i, 0) * 220ms), 0s, 0s;
}

/* ─── Hero dot waves (assets/js/water.js creates the canvas) ───────────────────
   Sits above the hero grid, below the hero content (z-index 2). Pure decoration.
   Normal blending on purpose: mix-blend-mode would make the browser composite the
   whole hero through an extra pass on every frame. */
.water-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}