/* ════════════════════════════════════════════════════════════════
   KF Agency — Hero & Scroll Animation Layer (2026)  ·  marketing pages
   ──────────────────────────────────────────────────────────────
   STRICTLY OPT-IN. The JS only touches elements that are explicitly
   marked in the HTML:
     • <section ... data-kf-aurora>   -> gets the animated aurora bg
     • <h1 ... data-kf-split>         -> word-by-word reveal
     • any element with data-kf-anim  -> fade/rise entrance
     • [data-kf-parallax]             -> scroll-scrub drift
   It NEVER hides "all hero children", so interactive controls can't be
   left invisible. No GSAP / reduced-motion / no-JS => content fully shown.
   Tools (brain) intentionally do NOT load this file.
   ════════════════════════════════════════════════════════════════ */

/* ───────── Aurora background ───────── */
.kf-aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 160%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(48px) saturate(1.15);
}
.kf-aurora__blob { position: absolute; border-radius: 50%; opacity: .3; will-change: transform; }
.kf-aurora__blob.b1 { width: 46vw; height: 46vw; left: -6vw;  top: -10vw;
  background: radial-gradient(circle at 30% 30%, #e040a0 0%, rgba(224,64,160,0) 70%);
  animation: kfDrift1 22s ease-in-out infinite; }
.kf-aurora__blob.b2 { width: 52vw; height: 52vw; right: -10vw; top: -4vw;
  background: radial-gradient(circle at 60% 40%, #8a5cf6 0%, rgba(138,92,246,0) 70%);
  animation: kfDrift2 28s ease-in-out infinite; }
.kf-aurora__blob.b3 { width: 40vw; height: 40vw; left: 28vw; top: 14vw;
  background: radial-gradient(circle at 50% 50%, #38bdf8 0%, rgba(56,189,248,0) 70%);
  animation: kfDrift3 25s ease-in-out infinite; }
.kf-aurora__blob.b4 { width: 30vw; height: 30vw; right: 18vw; top: 22vw;
  background: radial-gradient(circle at 50% 50%, #ff6b9d 0%, rgba(255,107,157,0) 70%);
  animation: kfDrift1 30s ease-in-out infinite reverse; }

body.dark .kf-aurora { filter: blur(56px) saturate(1.3); }
body.dark .kf-aurora__blob { opacity: .42; }

@keyframes kfDrift1 { 0%,100%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(4vw,3vw,0) scale(1.12);} }
@keyframes kfDrift2 { 0%,100%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(-5vw,4vw,0) scale(1.08);} }
@keyframes kfDrift3 { 0%,100%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(3vw,-3vw,0) scale(1.15);} }

.kf-aurora-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
}
body.dark .kf-aurora-grain { opacity: .06; }

/* When aurora is mounted, fade out any legacy static orbs */
.kf-anim-ready .ambient { opacity: 0; transition: opacity .6s ease; }

/* ───────── Word-mask reveal (only on [data-kf-split]) ───────── */
.kf-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.kf-w-i { display: inline-block; will-change: transform; }

/* Gradient-accent shimmer once revealed */
.kf-anim-ready [data-kf-split] .accent,
.kf-anim-ready [data-kf-split] .rotator-word {
  background-size: 200% 100%; animation: kfShimmer 6s ease-in-out infinite;
}
@keyframes kfShimmer { 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }

.kf-proof-num, .port-stat-num, .edu-result-num { font-variant-numeric: tabular-nums; }

/* ───────── Scroll-reveal enrichment (legacy .kf-fade IO still drives it) ───────── */
.kf-fade {
  transform: translateY(28px) scale(.985);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.kf-fade.in { transform: none; }

/* ════════════════ Design-review contrast fixes ════════════════ */
body:not(.dark) .btn-text,
body:not(.dark) a.kf-insight-read,
body:not(.dark) #viewAllCases { color: #6d34d6; }
body:not(.dark) .btn-text:hover,
body:not(.dark) a.kf-insight-read:hover,
body:not(.dark) #viewAllCases:hover { color: #e040a0; }
.footer-bottom span { color: rgba(255,255,255,.62) !important; }

/* ════════════════ Button fixes (2026-06) ════════════════ */
/* "Start the free diagnosis" sits on a gradient fill -> text MUST be white,
   not the dark purple link colour (was failing contrast on the gradient). */
.kf-problem-arrow,
.kf-problem-arrow span { color: #fff !important; }

/* styles.css sets .btn { flex-direction: column } for subtitle buttons, which
   wrongly stacks the label + arrow on these single-line CTAs (76px tall, arrow
   on its own line). Force a single row and keep them from wrapping. */
.kf-final-row .btn,
.kf-insights-cta .btn {
  flex-direction: row;
  white-space: nowrap;
}
/* "Explore the full blog" outline button — give it comfortable, consistent
   width so it doesn't look cramped/oversized. */
.kf-insights-cta .btn { width: auto; }

/* ════════════════ Founder profile photos ════════════════ */
/* Avatars now hold a real <img>; make it fill the circular frame. */
.kf-founder-avatar { overflow: hidden; padding: 0; }
.kf-founder-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ───────── Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  .kf-aurora__blob { animation: none !important; }
  .kf-anim-ready [data-kf-split] .accent,
  .kf-anim-ready [data-kf-split] .rotator-word { animation: none !important; }
  .kf-w-i { transform: none !important; }
}