/*! klc-anim.css — the "from" states for klc-anim.js.
 *
 *  Everything here is gated behind .klc-js, which the script adds at runtime.
 *  That means: script absent -> none of this applies -> pages keep their
 *  finished, fully-visible state. Script present -> elements start from their
 *  animation origin and play on scroll, matching the original mockup.
 *
 *  Where a page already animates something with scroll-driven CSS
 *  (animation-timeline: view()), that is switched off here so the two
 *  mechanisms cannot fight — CSS animations otherwise beat JS transitions.
 *
 *  Note on !important: used only where the from/to pair are TRANSITIONED (both
 *  sides carry it, so specificity still picks the winner). Anything ANIMATED
 *  instead beats the page CSS via a compound .klc-home.klc-js selector, because
 *  an !important declaration would override the animation itself.
 */

/* ============================ 1. scroll reveals ============================ */
.klc-js .klc-rv {
  animation: none !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity .7s ease, transform .7s ease;
}
.klc-js .klc-rv.klc-on { opacity: 1 !important; transform: none !important; }
.klc-js .klc-rv[data-d="1"] { transition-delay: .1s; }
.klc-js .klc-rv[data-d="2"] { transition-delay: .2s; }
.klc-js .klc-rv[data-d="3"] { transition-delay: .3s; }

/* the small red rule that draws out of the section labels */
.klc-js .klc-label.klc-rv::before {
  animation: none !important;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s ease .2s;
}
.klc-js .klc-label.klc-rv.klc-on::before { transform: scaleX(1); }

/* chips inside a revealed block stagger in behind it */
.klc-js .klc-rv .klc-chip { opacity: 0; transform: translateY(9px); transition: opacity .5s ease, transform .5s ease; }
.klc-js .klc-rv.klc-on .klc-chip { opacity: 1; transform: none; }
.klc-js .klc-rv.klc-on .klc-chip:nth-child(1) { transition-delay: .25s; }
.klc-js .klc-rv.klc-on .klc-chip:nth-child(2) { transition-delay: .40s; }
.klc-js .klc-rv.klc-on .klc-chip:nth-child(3) { transition-delay: .55s; }

/* ==================== 2. line-drawing inside diagram stages ================ */
.klc-home.klc-js .klc-draw-line,
.klc-tech.klc-js .klc-draw-line {
  animation: none;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.klc-home.klc-js .klc-stage.klc-play .klc-draw-line,
.klc-tech.klc-js .klc-stage.klc-play .klc-draw-line { animation: klcDrawIn 2.4s ease forwards; }
.klc-js .klc-stage.klc-play .klc-d2 { animation-delay: .5s !important; }
.klc-js .klc-stage.klc-play .klc-d3 { animation-delay: 1s !important; }
.klc-js .klc-stage.klc-play .klc-d4 { animation-delay: 1.5s !important; }
@keyframes klcDrawIn { to { stroke-dashoffset: 0; } }

/* ======================= 3. pop-in props inside stages ===================== */
.klc-js .klc-pop {
  opacity: 0;
  transform: scale(.6);
  transform-origin: center;
  transform-box: fill-box;
}
.klc-js .klc-stage.klc-play .klc-pop { animation: klcPopIn .5s ease forwards; }
.klc-js .klc-stage.klc-play .klc-pop.klc-o2 { animation-delay: .7s; }
.klc-js .klc-stage.klc-play .klc-pop.klc-o3 { animation-delay: 1.2s; }
@keyframes klcPopIn { to { opacity: 1; transform: scale(1); } }

/* =================== 4. planned path crossfades to re-route =============== */
.klc-home.klc-js .klc-reroute,
.klc-tech.klc-js .klc-reroute { opacity: 0; }
.klc-home.klc-js .klc-straight,
.klc-tech.klc-js .klc-straight { opacity: 1; }
.klc-home.klc-js .klc-stage.klc-play .klc-reroute,
.klc-tech.klc-js .klc-stage.klc-play .klc-reroute { animation: klcFadeIn .8s ease 1.7s forwards; }
.klc-home.klc-js .klc-stage.klc-play .klc-straight,
.klc-tech.klc-js .klc-stage.klc-play .klc-straight { animation: klcFadeOut .8s ease 1.7s forwards; }
@keyframes klcFadeIn { to { opacity: 1; } }
@keyframes klcFadeOut { to { opacity: .14; } }

/* the travelling dot holds until the route is drawn, then loops */
.klc-js .klc-runner { opacity: 0 !important; }
.klc-js .klc-stage.klc-play .klc-runner { opacity: 1 !important; transition: opacity .4s ease 1.9s; }

/* ============ 5. home page: the five night-shift scene sequences =========== */
/* 22:00 — robot drives out of its dock */
.klc-js .klc-mv-out .klc-anim-bot { transform: translateX(-90px) !important; }
.klc-js .klc-mv-out.klc-play .klc-anim-bot {
  transform: translateX(96px) !important;
  transition: transform 2.4s cubic-bezier(.45, 0, .25, 1) !important;
}

/* 22:10 — robot sweeps across, laying a clean trail and clearing the grime */
.klc-js .klc-mv-clean .klc-anim-bot { transform: translateX(-40px) !important; }
.klc-js .klc-mv-clean.klc-play .klc-anim-bot {
  transform: translateX(270px) !important;
  transition: transform 3.4s cubic-bezier(.5, 0, .3, 1) !important;
}
.klc-js .klc-mv-clean .klc-trail { transform: scaleX(0) !important; transform-origin: 40px 0; }
.klc-js .klc-mv-clean.klc-play .klc-trail {
  transform: scaleX(1) !important;
  transition: transform 3.4s cubic-bezier(.5, 0, .3, 1) !important;
}
.klc-js .klc-mv-clean .klc-grime { opacity: .55 !important; transition: opacity 1s ease 1.4s; }
.klc-js .klc-mv-clean.klc-play .klc-grime { opacity: 0 !important; }

/* 05:58 — robot returns, battery refills, shift report goes out */
.klc-js .klc-mv-dockin .klc-anim-bot { transform: translateX(310px) !important; }
.klc-js .klc-mv-dockin.klc-play .klc-anim-bot {
  transform: translateX(64px) !important;
  transition: transform 2.6s cubic-bezier(.45, 0, .25, 1) !important;
}
.klc-js .klc-mv-dockin .klc-batt-fill { width: 18% !important; transition: width 2.2s ease 2.2s; }
.klc-js .klc-mv-dockin.klc-play .klc-batt-fill { width: 100% !important; }
.klc-js .klc-mv-dockin .klc-sent { opacity: 0 !important; transition: opacity .6s ease 3.6s; }
.klc-js .klc-mv-dockin.klc-play .klc-sent { opacity: 1 !important; }

/* 06:00 — the sun comes up over the horizon */
.klc-js .klc-dawn .klc-sun {
  transform: translateY(74px) !important;
  transition: transform 2.2s cubic-bezier(.3, .7, .3, 1) .2s !important;
}
.klc-js .klc-dawn.klc-play .klc-sun { transform: translateY(0) !important; }

/* ====================== 6. spotlight hero (GSAP-driven) =================== */
.klc-home .klc-hero { --klc-spot: 0px; --klc-sx: 50%; --klc-sy: 45%; }
.klc-home .klc-spotlight,
.klc-home .klc-spot-glow,
.klc-home .klc-spot-cue { display: none; }
.klc-home .klc-hero.klc-spot-armed .klc-spotlight,
.klc-home .klc-hero.klc-spot-armed .klc-spot-glow,
.klc-home .klc-hero.klc-spot-armed .klc-spot-cue { display: block; }

.klc-home .klc-spotlight {
  position: absolute; inset: 0; z-index: 6;
  background: #04070B; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--klc-sx) var(--klc-sy), transparent var(--klc-spot), #000 calc(var(--klc-spot) + 90px));
  mask-image: radial-gradient(circle at var(--klc-sx) var(--klc-sy), transparent var(--klc-spot), #000 calc(var(--klc-spot) + 90px));
}
.klc-home .klc-spot-glow {
  position: absolute; left: var(--klc-sx); top: var(--klc-sy); z-index: 7;
  width: calc(var(--klc-spot) * 2 + 10px); height: calc(var(--klc-spot) * 2 + 10px);
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1.5px solid rgba(155, 232, 255, .4);
  box-shadow: 0 0 46px rgba(155, 232, 255, .28), inset 0 0 34px rgba(155, 232, 255, .14);
  pointer-events: none;
}
.klc-home .klc-spot-cue {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 8;
  font-family: 'Oswald', Arial, sans-serif; font-size: 11.5px; letter-spacing: .3em;
  text-transform: uppercase; color: #9AA6B3; pointer-events: none; white-space: nowrap;
}
/* the static cue is redundant once the scroll-driven one is armed */
.klc-home .klc-hero.klc-spot-armed .klc-scroll-cue { display: none; }

/* ================ 7. pinned horizontal gallery (GSAP-driven) ============== */
.klc-home .klc-hs-active .klc-hs-inner { min-height: 100vh; justify-content: center; }
.klc-home .klc-hs-active .klc-hs-track {
  overflow-x: visible;
  scroll-snap-type: none;
  padding-bottom: 4px;
  will-change: transform;
}
.klc-home .klc-hs-active .klc-hs-card { scroll-snap-align: none; }
.klc-home .klc-hs-progress {
  height: 3px; background: rgba(255, 255, 255, .12);
  border-radius: 999px; overflow: hidden; margin-top: 6px;
}
.klc-home .klc-hs-progress i { display: block; height: 100%; width: 0; background: #EB1D24; }
/* only meaningful once pinned; hidden while the track is a native scroller */
.klc-home .klc-hs:not(.klc-hs-active) .klc-hs-progress { display: none; }

@media (max-width: 1020px) {
  /* pinning a full-width horizontal scrub is hostile on touch — let it scroll */
  .klc-home .klc-hs-active .klc-hs-inner { min-height: 0; }
}

/* ==================== 8. typewriter headings (h1 / h2 / h3) =============== */
/* Characters not yet typed are display:none - NOT visibility:hidden - so the
   line genuinely grows a character at a time rather than filling in space that
   was already reserved. The script pins each heading's finished box before it
   hides anything, and unpins it when the heading finishes, so the growth never
   moves the rest of the page. The caret is moved through the DOM so it always
   sits at the current typing position. */
.klc-js .klc-typing .klc-ch { display: none; }
.klc-js .klc-typing .klc-ch.klc-vis { display: inline; }
/* used for a single synchronous re-measure once webfonts land; never painted */
.klc-js .klc-typing.klc-measure .klc-ch { display: inline; }
.klc-js .klc-caret {
  display: inline-block;
  width: .07em;              /* a proportional bar reads better than a glyph */
  height: .74em;
  margin-left: .07em;
  background: #EB1D24;
  vertical-align: -.04em;
  animation: klcCaret 1s steps(1) infinite;
}
@keyframes klcCaret { 50% { opacity: 0; } }
/* caret stops blinking once a heading has finished typing */
.klc-js .klc-typed .klc-caret { animation: none; opacity: 0; }
/* Belt and braces: the script bails out entirely under reduced motion, so
   .klc-js is never added - but if anything ever half-runs, show the text. */
@media (prefers-reduced-motion: reduce) {
  .klc-js .klc-typing .klc-ch { display: inline; }
  .klc-js .klc-caret { display: none; }
}