/* ====================================================================
   KD TEXT FX — hobro.digital-inspired signature text animations
   1) .kfx-title / .kfx-w  — stacked words, scroll-scrubbed horizontal
      slide-in with per-word offsets (JS: kd-text-fx.js, data-kfx-slide)
   2) .kfx-script          — handwritten-feel accent word that "draws"
      itself in with a wipe + swash underline (data-kfx-draw)
   Contrast font: Instrument Serif italic against Inter Tight 800.
==================================================================== */

/* ---------- 1) Scroll-scrub stacked title ---------- */
.kfx-title {
  display: block;
  margin: clamp(3rem, 8vh, 6rem) 0 clamp(2rem, 5vh, 3.5rem);
  overflow: hidden;
  font-family: var(--kr-font-display);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.kfx-w {
  display: block;
  width: fit-content;
  font-weight: 800;
  font-size: clamp(2.9rem, 9.5vw, 8.2rem);
  color: var(--kr-cream);
  will-change: transform;
}
.kfx-w.kfx-cursive {
  font-family: var(--kr-font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.03em;
  font-size: clamp(3.1rem, 10.2vw, 8.8rem);
  line-height: 1;
  background: linear-gradient(100deg, #f6c48a 4%, var(--kr-accent) 55%, #c96a26 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.09em; /* italic overhang guard */
}

/* ---------- 2) Script draw-in CTA word ---------- */
[data-kfx-draw] .kfx-script {
  position: relative;
  display: inline-block;
  font-family: var(--kr-font-display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.035em;
  background: linear-gradient(100deg, #f6c48a 0%, var(--kr-accent) 52%, #b35a1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  clip-path: inset(-25% 101% -30% -2%);
  transform: translateX(0.6rem) rotate(0.8deg);
  transition: transform 0.6s var(--kr-ease);
}
[data-kfx-draw].is-drawn .kfx-script {
  clip-path: inset(-25% -6% -30% -2%);
  transform: none;
  transition:
    clip-path 1.25s cubic-bezier(0.5, 0, 0.14, 1) 0.12s,
    transform 1.25s var(--kr-ease) 0.12s;
}
/* hover: playful pen-tilt */
a[data-kfx-draw]:hover .kfx-script {
  transform: skewX(-5deg) rotate(-1.6deg) scale(1.025);
}

/* legacy swash (removed from markup) — keep selectors inert if cached HTML lingers */
.kfx-swash { display: none !important; }

/* the non-script first word rises softly as the draw starts */
[data-kfx-draw] .kfx-cta-top {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.7s ease, transform 0.9s var(--kr-ease);
}
[data-kfx-draw].is-drawn .kfx-cta-top {
  opacity: 1;
  transform: none;
}

/* ---------- 3) Menu overlay: per-character entrance ---------------- */
/* kd-raw.js splits link text into .ml spans (--i per char, hover wobble
   via transition). Entrance uses a keyframe animation with backwards
   fill so it never fights the hover transition after it completes. */
html.kfx-chars .kr-overlay__link {
  transform: none;
  opacity: 1;
  overflow: hidden;
  padding-bottom: 0.06em; /* descender room inside overflow clip */
  transition: color 0.25s ease;
}
@keyframes kfxChIn {
  from { transform: translateY(118%) rotate(7deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.kr-menu-open .kr-overlay__link .ml {
  animation: kfxChIn 0.72s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(0.12s + var(--li, 0) * 0.055s + var(--i, 0) * 0.02s);
}
html.kfx-chars .kr-overlay__link sup {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.4s var(--kr-ease);
  transition-delay: 0s;
}
.kr-menu-open .kr-overlay__link sup {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.34s + var(--li, 0) * 0.055s);
}

/* ---------- 4) Radial tick dial (hobro-style) + lottie core -------- */
.kfx-dial-sec {
  padding: clamp(4rem, 12vh, 9rem) var(--kr-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vh, 3.2rem);
  text-align: center;
}
.kfx-dial {
  position: relative;
  width: min(66vw, 460px);
  aspect-ratio: 1;
}
.kfx-dial > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kfx-dial rect {
  fill: var(--kr-cream);
  opacity: 0.1;
  animation: kfxTick 2.8s linear infinite;
  animation-delay: calc(var(--i) * (2.8s / 40) - 2.8s);
}
.kfx-dial rect:nth-child(3n) { fill: var(--kr-accent); }
@keyframes kfxTick {
  0% { opacity: 1; }
  55% { opacity: 0.1; }
  100% { opacity: 0.1; }
}
.kfx-dial__core {
  position: absolute;
  inset: 21%;
}
.kfx-dial__core svg { width: 100%; height: 100%; }
.kfx-dial__text {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  line-height: 1.85;
  color: var(--kr-cream-dim);
  text-transform: uppercase;
  max-width: 42ch;
}
.kfx-dial__text b { color: var(--kr-accent); font-weight: 500; }

/* ---------- 5) Ring lottie spots on inner pages -------------------- */
.kfx-ringspot {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.krp-about__hero,
.krp-services__cta-panel,
.krp-form__hero,
.krp-faq__hero,
.krp-corp__hero,
.krp-blog__hero { position: relative; overflow: visible; }

/* generic hero-right spot used by drop/swirl variants */
.kfx-ringspot--hero-r {
  top: clamp(0.5rem, 4vh, 3rem);
  right: calc(var(--kr-pad) * 0.5);
  width: clamp(140px, 17vw, 280px);
  opacity: 0.9;
}
@media (max-width: 640px) {
  .kfx-ringspot--hero-r { width: 110px; opacity: 0.5; top: 0.5rem; }
}
.kfx-ringspot svg { width: 100%; height: 100%; }
.kr-sticker[data-kfx-lottie] { aspect-ratio: 1; }
.kr-sticker[data-kfx-lottie] svg { width: 100%; height: 100%; display: block; }
.kfx-ringspot--about {
  top: clamp(1rem, 6vh, 4rem);
  right: calc(var(--kr-pad) * 0.6);
  width: clamp(150px, 20vw, 320px);
  opacity: 0.9;
}
.kfx-ringspot--404 {
  right: 6vw;
  bottom: 8vh;
  width: clamp(160px, 24vw, 360px);
  opacity: 0.85;
}
.kfx-ringspot--services {
  right: clamp(0.5rem, 3vw, 2.5rem);
  bottom: -12%;
  width: clamp(140px, 16vw, 260px);
  opacity: 0.9;
}
@media (max-width: 640px) {
  .kfx-ringspot--about { width: 130px; opacity: 0.55; }
  .kfx-ringspot--services { display: none; }
}

/* ---------- Reduced motion: everything readable, nothing moves ----- */
@media (prefers-reduced-motion: reduce) {
  .kfx-w { transform: none !important; }
  [data-kfx-draw] .kfx-script,
  [data-kfx-draw].is-drawn .kfx-script {
    clip-path: none;
    transform: none;
    transition: none;
  }
  [data-kfx-draw] .kfx-cta-top { opacity: 1; transform: none; transition: none; }
  .kr-menu-open .kr-overlay__link .ml { animation: none; }
  html.kfx-chars .kr-overlay__link sup { opacity: 1; transform: none; transition: none; }
  .kfx-dial rect { animation: none; opacity: 0.5; }
}

@media (max-width: 640px) {
  .kfx-w { font-size: clamp(2.4rem, 11.5vw, 3.6rem); }
  .kfx-w.kfx-cursive { font-size: clamp(2.8rem, 13vw, 4.2rem); }
}