/**
 * TEAM KART MOTION SYSTEM (tk-motion.css)
 * Description: High-performance CSS animation classes driven by vanilla JS triggers
 * Strictly animates transform and opacity; zero layout shift; WCAG AA & reduced-motion compliant.
 */

/* ==========================================================================
   1. SCROLL REVEAL ANIMATIONS
   ========================================================================== */

/* Fade and rise on scroll */
.tk-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.tk-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Directional reveal left-to-right */
.tk-reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.tk-reveal-left.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Directional reveal right-to-left */
.tk-reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.tk-reveal-right.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   2. STAGGERED REVEAL (FOR LISTS, CARDS, BENTO CELLS)
   ========================================================================== */
.tk-stagger > *,
.tk-stagger > .e-con,
.tk-stagger > .elementor-element {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.tk-stagger.is-revealed > *,
.tk-stagger.is-revealed > .e-con,
.tk-stagger.is-revealed > .elementor-element {
  opacity: 1;
  transform: translateY(0);
}

.tk-stagger.is-revealed > *:nth-child(1)  { transition-delay: 0.05s; }
.tk-stagger.is-revealed > *:nth-child(2)  { transition-delay: 0.12s; }
.tk-stagger.is-revealed > *:nth-child(3)  { transition-delay: 0.19s; }
.tk-stagger.is-revealed > *:nth-child(4)  { transition-delay: 0.26s; }
.tk-stagger.is-revealed > *:nth-child(5)  { transition-delay: 0.33s; }
.tk-stagger.is-revealed > *:nth-child(6)  { transition-delay: 0.40s; }
.tk-stagger.is-revealed > *:nth-child(7)  { transition-delay: 0.47s; }
.tk-stagger.is-revealed > *:nth-child(8)  { transition-delay: 0.54s; }
.tk-stagger.is-revealed > *:nth-child(9)  { transition-delay: 0.61s; }
.tk-stagger.is-revealed > *:nth-child(10) { transition-delay: 0.68s; }
.tk-stagger.is-revealed > *:nth-child(11) { transition-delay: 0.75s; }
.tk-stagger.is-revealed > *:nth-child(12) { transition-delay: 0.82s; }

/* ==========================================================================
   3. CLIP-PATH MASK REVEAL (FOR FOUNDER PHOTO & PRESS CLIPPING)
   ========================================================================== */
.tk-mask-reveal {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 1.0s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path;
}
.tk-mask-reveal.is-revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ==========================================================================
   4. TEXT SPLIT & WORD-BY-WORD SCROLL HIGHLIGHT (.tk-split)
   ========================================================================== */
.tk-split .tk-split-word {
  display: inline-block;
  opacity: 0.25;
  transition: opacity 0.45s ease, color 0.45s ease;
  will-change: opacity, color;
}
.tk-split .tk-split-word.is-active {
  opacity: 1;
  color: inherit;
}

/* ==========================================================================
   5. NUMBER COUNT-UP (.tk-count)
   ========================================================================== */
.tk-count {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ==========================================================================
   6. INFINITE DUAL MARQUEE (.tk-marquee)
   ========================================================================== */
.tk-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  user-select: none;
}

.tk-marquee-track {
  display: flex;
  gap: var(--tk-space-xl, 32px);
  min-width: 100%;
  animation: tkMarqueeScroll 35s linear infinite;
  will-change: transform;
}

.tk-marquee:hover .tk-marquee-track {
  animation-play-state: paused;
}

.tk-marquee-reverse .tk-marquee-track {
  animation-name: tkMarqueeScrollReverse;
}

@keyframes tkMarqueeScroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes tkMarqueeScrollReverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

/* Client Logo Marquee Item */
.tk-marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.tk-marquee-item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* ==========================================================================
   7. INTERACTIVE HOVER EFFECTS (DESKTOP ONLY)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  /* Subtle 3D card tilt */
  .tk-tilt {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
  }

  /* Magnetic button follower */
  .tk-magnetic {
    display: inline-flex;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
  }
}

/* Slow image parallax */
.tk-parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ==========================================================================
   8. JOURNEY TIMELINE ANIMATION (.tk-timeline)
   ========================================================================== */
.tk-timeline {
  position: relative;
}

.tk-timeline-line {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--tk-color-border, #E2DDD5);
  transform-origin: top center;
}

.tk-timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--tk-accent, #0E0E0E);
  transition: height 0.1s linear;
}

.tk-timeline-item {
  position: relative;
  padding-left: 64px;
  margin-bottom: 48px;
  opacity: 0.4;
  transition: opacity 0.5s ease;
}

.tk-timeline-item.is-active {
  opacity: 1;
}

.tk-timeline-dot {
  position: absolute;
  left: 17px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tk-color-paper, #F6F3EE);
  border: 3px solid var(--tk-color-muted, #635F59);
  transition: border-color 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
}

.tk-timeline-item.is-active .tk-timeline-dot {
  border-color: var(--tk-accent, #0E0E0E);
  background-color: var(--tk-accent, #0E0E0E);
  transform: scale(1.2);
}

/* ==========================================================================
   9. STICKY HEADER & SCROLL PROGRESS BAR
   ========================================================================== */
.tk-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--tk-accent, #0E0E0E);
  z-index: var(--tk-z-header, 1000);
  transition: width 0.08s linear;
}

.tk-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 84px;
  background: transparent;
  border-bottom: 1px solid rgba(14, 14, 14, 0.06);
  z-index: var(--tk-z-header, 1000);
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
}

.tk-header.is-scrolled {
  height: 68px;
  background: rgba(246, 243, 238, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--tk-color-border, #E2DDD5);
  box-shadow: var(--tk-shadow-subtle, 0 2px 8px -2px rgba(14, 14, 14, 0.05));
}

/* ==========================================================================
   10. MOBILE FULL-SCREEN NAVIGATION DRAWER
   ========================================================================== */
.tk-mobile-drawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: var(--tk-color-paper, #F6F3EE);
  z-index: var(--tk-z-drawer, 2000);
  padding: 84px 24px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.tk-mobile-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.tk-drawer-active {
  overflow: hidden;
}

/* ==========================================================================
   11. FLOATING WHATSAPP BUTTON (.tk-whatsapp-float)
   ========================================================================== */
.tk-whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--tk-z-floating, 9000);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: var(--tk-radius-pill, 9999px);
  text-decoration: none;
  font-family: var(--tk-font-body);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--tk-shadow-floating, 0 24px 48px -12px rgba(14, 14, 14, 0.22));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tk-whatsapp-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 28px 56px -12px rgba(37, 211, 102, 0.35);
  color: #FFFFFF;
}

.tk-whatsapp-float svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* ==========================================================================
   12. ACCESSIBILITY GUARDS & ELEMENTOR EDITOR OVERRIDES
   ========================================================================== */

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  
  .tk-reveal,
  .tk-reveal-left,
  .tk-reveal-right,
  .tk-stagger > *,
  .tk-mask-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .tk-marquee-track {
    animation: none !important;
  }
}

/* Elementor Visual Editor Active Guard (Keep visual builder snappy & editable) */
body.elementor-editor-active .tk-reveal,
body.elementor-editor-active .tk-reveal-left,
body.elementor-editor-active .tk-reveal-right,
body.elementor-editor-active .tk-stagger > *,
body.elementor-editor-active .tk-mask-reveal,
body.elementor-editor-active .tk-split .tk-split-word {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}

body.elementor-editor-active .tk-marquee-track {
  animation: none !important;
}

body.elementor-editor-active .tk-scroll-progress {
  display: none !important;
}