/* KBACC motion layer
   Editorial-restrained micro-interactions: hero entrance stagger,
   scroll-reveal, accent rule draw-in, service-row hover polish, counter.
   All motion is compositor-friendly (transform/opacity) and disabled
   under prefers-reduced-motion. */

/* Tokens */
:root {
  --kb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kb-dur-fast: 960ms;
  --kb-dur: 2000ms;
  --kb-dur-slow: 2800ms;
  --kb-rise: 24px;
}

/* =========================================================================
   1. Scroll reveal (sections + ad-hoc elements)
   ========================================================================= */
[data-kb-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--kb-rise), 0);
  transition:
    opacity var(--kb-dur) var(--kb-ease),
    transform var(--kb-dur) var(--kb-ease);

}
[data-kb-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger children inside a revealing block */
[data-kb-stagger] > * {
  opacity: 0;
  transform: translate3d(0, var(--kb-rise), 0);
  transition:
    opacity var(--kb-dur) var(--kb-ease),
    transform var(--kb-dur) var(--kb-ease);
}
[data-kb-stagger].is-in > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-kb-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-kb-stagger].is-in > *:nth-child(2) { transition-delay: 280ms; }
[data-kb-stagger].is-in > *:nth-child(3) { transition-delay: 560ms; }
[data-kb-stagger].is-in > *:nth-child(4) { transition-delay: 840ms; }
[data-kb-stagger].is-in > *:nth-child(5) { transition-delay: 1120ms; }
[data-kb-stagger].is-in > *:nth-child(6) { transition-delay: 1400ms; }
[data-kb-stagger].is-in > *:nth-child(7) { transition-delay: 1680ms; }

/* =========================================================================
   2. Hero entrance (runs once on load, not scroll-tied)
   ========================================================================= */
.kb-hero-anim > * {
  opacity: 0;
  transform: translate3d(0, var(--kb-rise), 0);
  transition:
    opacity var(--kb-dur) var(--kb-ease),
    transform var(--kb-dur) var(--kb-ease);
}
.kb-hero-anim.is-ready > *               { opacity: 1; transform: translate3d(0, 0, 0); }
.kb-hero-anim.is-ready > *:nth-child(1)  { transition-delay: 200ms; }
.kb-hero-anim.is-ready > *:nth-child(2)  { transition-delay: 520ms; }
.kb-hero-anim.is-ready > *:nth-child(3)  { transition-delay: 840ms; }
.kb-hero-anim.is-ready > *:nth-child(4)  { transition-delay: 1160ms; }

/* =========================================================================
   3. Accent rule draw-in
   The horizontal accent lines flanking eyebrows go from 0 -> their
   original width (2.5rem / w-10) when their section becomes visible.
   We tag them via JS with [data-kb-rule].
   ========================================================================= */
[data-kb-rule] {
  width: 0 !important;
  transition: width var(--kb-dur-slow) var(--kb-ease) 120ms;
}
[data-kb-rule].is-in {
  width: 2.5rem !important;
}

/* =========================================================================
   4. Service row hover polish (home page service tiles + listing rows)
   The tiles already translate the arrow; here we add a left nudge on the
   numeral, a subtle background lift, and a smoother transition.
   ========================================================================= */
.group .numeral {
  transition: transform 560ms var(--kb-ease), color 400ms ease;

}
.group:hover .numeral {
  transform: translateX(-4px);
}
/* Make the arrow translation smoother (already has translate-x-1 on hover) */
.group [aria-hidden="true"] {
  transition: transform 560ms var(--kb-ease), color 400ms ease;
}

/* Card hover lift for service tiles & accreditation cards */
.card,
a.group {
  transition: background-color 480ms ease, border-color 480ms ease, transform 640ms var(--kb-ease);
}

/* FAQ chevron smoother */
details.group summary [aria-hidden="true"] {
  transition: transform 520ms var(--kb-ease);
}

/* =========================================================================
   5. Counter (years experience etc.)
   Just makes the number render in the same monospace style; the actual
   counting is handled in JS.
   ========================================================================= */
[data-kb-count] {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   6. Kinetic hero headline
   The home h1 ("Accounting." / "Payroll." / "Taxation.") is split into
   per-word spans and the accent color cycles between them on a slow loop.
   ========================================================================= */
.kb-headline-word {
  display: inline-block;
  color: inherit;
  transition: color 2200ms var(--kb-ease);

}
.kb-headline-word.is-active {
  color: var(--color-accent);
}

/* =========================================================================
   7. Ambient hero background (homepage only)
   ========================================================================= */
.kb-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.kb-hero-mesh {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(60% 60% at 22% 32%, color-mix(in oklch, var(--color-accent) 18%, transparent), transparent 60%),
    radial-gradient(50% 50% at 78% 70%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(45% 45% at 50% 50%, color-mix(in oklch, var(--color-accent) 9%, transparent), transparent 70%);
  filter: blur(40px) saturate(115%);
  animation: kbDrift 26s ease-in-out infinite alternate;

}
@keyframes kbDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0)  scale(1.06); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.02); }
}
.kb-hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.kb-hero-wordmark {
  position: absolute;
  right: -4vw;
  bottom: -10vw;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(11rem, 26vw, 30rem);
  letter-spacing: -0.05em;
  color: var(--color-text);
  opacity: 0.035;
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;

}
/* Keep hero content layered above the bg */
.kb-hero-host > div { position: relative; z-index: 1; }

/* =========================================================================
   8. Magnetic CTAs
   ========================================================================= */
.kb-magnetic {
  transition: transform 560ms var(--kb-ease), box-shadow 560ms ease;

}
.kb-magnetic:hover {
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--color-accent) 70%, transparent),
    0 0 32px -8px color-mix(in oklch, var(--color-accent) 55%, transparent);
}

/* =========================================================================
   9. Editorial scroll rail
   ========================================================================= */
.kb-scroll-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 6px;
  background: transparent;
}
.kb-scroll-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 1px;
  margin-left: -0.5px;
  background: var(--color-border);
  opacity: 0.45;
}
.kb-scroll-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 640ms var(--kb-ease), transform 640ms var(--kb-ease);
}
.kb-scroll-dot:hover { background: var(--color-text-soft); }
.kb-scroll-dot.is-active {
  background: var(--color-accent);
  transform: scale(1.5);
}
@media (max-width: 900px) {
  .kb-scroll-rail { display: none; }
}

/* =========================================================================
   10. Scrolly service tiles (homepage service rows)
   ========================================================================= */
[data-kb-tile] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity var(--kb-dur-slow) var(--kb-ease),
    transform var(--kb-dur-slow) var(--kb-ease);

}
[data-kb-tile].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-kb-tile] .numeral {
  display: inline-block;
  transform-origin: left center;
  transition:
    transform 2200ms var(--kb-ease) 480ms,
    color 1200ms ease;
}
[data-kb-tile]:not(.is-in) .numeral {
  transform: scale(0.55);
}

/* =========================================================================
   11. Letter-stagger h1 (inner pages, single-word titles)
   ========================================================================= */
.kb-letter {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 1400ms var(--kb-ease),
    transform 1400ms var(--kb-ease);

}
.kb-letter.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* =========================================================================
   12. Card-grid numeral scale (when parent is data-kb-stagger.is-in)
   Applies to the "What's included" cards on inner pages.
   ========================================================================= */
[data-kb-stagger] > * .numeral {
  display: inline-block;
  transform-origin: left center;
  transform: scale(0.6);
  transition: transform 2000ms var(--kb-ease) 360ms;

}
[data-kb-stagger].is-in > * .numeral {
  transform: scale(1);
}

/* =========================================================================
   13. Eyebrow typewriter
   ========================================================================= */
.kb-typewriter {
  white-space: nowrap;
}
.kb-typewriter::after {
  content: "\2589"; /* ▉ block-ish cursor */
  display: inline-block;
  margin-left: 3px;
  color: var(--color-accent);
  transform: translateY(-1px);
  animation: kbBlink 900ms steps(2, end) infinite;
  font-weight: 400;
}
.kb-typewriter.is-done::after {
  display: none;
}
@keyframes kbBlink {
  0%, 49.9%   { opacity: 1; }
  50%, 100%   { opacity: 0; }
}

/* =========================================================================
   14. FAQ accordion (inner-page dl/dt/dd)
   ========================================================================= */
.kb-faq dt {
  cursor: pointer;
  user-select: none;
  transition: color 400ms ease;
}
.kb-faq dt:hover,
.kb-faq.is-open dt {
  color: var(--color-accent);
}
.kb-faq dt::after {
  content: "+";
  display: inline-block;
  margin-left: 0.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1em;
  line-height: 1;
  color: var(--color-text-soft);
  vertical-align: -0.04em;
  transform-origin: center;
  transition:
    transform 520ms var(--kb-ease),
    color 400ms ease;
}
.kb-faq.is-open dt::after {
  transform: rotate(45deg);
  color: var(--color-accent);
}
.kb-faq dt:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.kb-faq dd {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0 !important;
  transition:
    max-height 700ms var(--kb-ease),
    opacity 500ms ease,
    margin-top 700ms var(--kb-ease);
}
.kb-faq.is-open dd {
  max-height: 600px;
  opacity: 1;
  margin-top: 0.75rem !important;
}
/* Browsers indent <dd> by 40px by default — remove when used outside <dl>. */
.kb-faq dd { margin-left: 0; padding-left: 0; }

/* =========================================================================
   15. Sidebar Other-services hover-shift
   ========================================================================= */
aside .card .group {
  position: relative;
  transition: color 400ms ease;
}
aside .card .group::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms var(--kb-ease);
}
aside .card .group:hover::after {
  transform: scaleX(1);
}
aside .card .group .display-tight {
  transition: transform 520ms var(--kb-ease), color 400ms ease;
}
aside .card .group:hover .display-tight {
  transform: translateX(4px);
}

/* =========================================================================
   16. Reduced motion (extended)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  [data-kb-reveal],
  [data-kb-stagger] > *,
  .kb-hero-anim > *,
  [data-kb-rule],
  [data-kb-tile],
  [data-kb-tile] .numeral,
  [data-kb-stagger] > * .numeral,
  .kb-letter {
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
    transition: none !important;
  }
  .group:hover .numeral,
  .group:hover [aria-hidden="true"] {
    transform: none !important;
  }
  .kb-headline-word { transition: none !important; }
  .kb-hero-mesh { animation: none !important; }
  .kb-hero-wordmark { transform: none !important; }
  .kb-magnetic { transform: none !important; }
  .kb-typewriter::after { animation: none !important; display: none !important; }
  aside .card .group:hover .display-tight,
  aside .card .group:hover::after { transform: none !important; }
  .kb-faq dd,
  details.kb-faq-native > p {
    transition: none !important;
  }
  .kb-faq.is-open dd {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin-top: 0.75rem !important;
  }
}