/*
  KB UNITED — Motion layer inspired by the section rhythm of the Kindora reference.
  Safety principle: content is visible by default. Motion states are only activated after
  JavaScript has successfully prepared observers. Reduced-motion users get static content.
*/

:root {
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-spring: cubic-bezier(.2, .9, .28, 1.18);
  --motion-duration: 900ms;
  --motion-fast: 620ms;
  --motion-slow: 1150ms;
}

/* Header: Kindora-like smooth arrival + compact sticky state */
.site-header {
  transition: min-height .35s var(--motion-ease-out),
              background-color .35s ease,
              box-shadow .35s ease,
              border-color .35s ease,
              transform .75s var(--motion-ease-out),
              opacity .75s ease;
  will-change: transform;
}
.site-header.is-scrolled {
  background: rgba(247, 249, 252, .975);
  box-shadow: 0 12px 32px rgba(10, 46, 106, .09);
  border-color: rgba(200, 214, 236, .9);
}
.site-header.is-scrolled .header-inner { min-height: 76px; }
.site-header .header-inner { transition: min-height .35s var(--motion-ease-out); }

/* Base interactive rhythm */
.btn,
.nav a,
.card,
.metric,
.testimonial,
.value-card,
.contact-item,
.blog-card,
.side-item,
.process .step,
.gallery .item,
.media-slab,
.page-hero-media,
.hero-card {
  transition-property: transform, box-shadow, border-color, background-color, color, opacity;
  transition-duration: .35s;
  transition-timing-function: var(--motion-ease-out);
}

.card:hover,
.metric:hover,
.value-card:hover,
.contact-item:hover,
.testimonial:hover,
.process .step:hover,
.blog-card:hover,
.side-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 62px rgba(12, 31, 68, .14);
  border-color: rgba(15, 75, 168, .26);
}

.hero-card,
.media-slab,
.page-hero-media,
.gallery .item,
.feature-card .media,
.blog-card .thumb,
.side-item {
  overflow: hidden;
}
.hero-card img,
.media-slab img,
.page-hero-media img,
.gallery .item img,
.feature-card .media img,
.blog-card .thumb img,
.side-item img {
  transform: scale(1.001);
  transition: transform 1.2s var(--motion-ease-out), filter .5s ease;
  will-change: transform;
}
.hero-card:hover img,
.media-slab:hover img,
.page-hero-media:hover img,
.gallery .item:hover img,
.feature-card:hover .media img,
.blog-card:hover .thumb img,
.side-item:hover img {
  transform: scale(1.045);
}

/* Motion only becomes active after JS is ready. */
html.motion-ready [data-motion] {
  will-change: transform, opacity, clip-path;
}
html.motion-ready [data-motion]:not(.is-visible) {
  opacity: 0;
}

/* Hero: staged composition rather than generic fade-up */
html.motion-ready [data-motion="hero-kicker"]:not(.is-visible) {
  transform: translate3d(0, -18px, 0);
  filter: blur(5px);
}
html.motion-ready [data-motion="hero-title"]:not(.is-visible) {
  transform: translate3d(0, 64px, 0) skewY(1.2deg);
  clip-path: inset(0 0 100% 0 round 10px);
}
html.motion-ready [data-motion="hero-copy"]:not(.is-visible) {
  transform: translate3d(0, 28px, 0);
}
html.motion-ready [data-motion="hero-actions"]:not(.is-visible) {
  transform: translate3d(0, 22px, 0) scale(.985);
}
html.motion-ready [data-motion="hero-image"]:not(.is-visible) {
  transform: translate3d(36px, 10px, 0) scale(.96);
  clip-path: inset(0 0 0 100% round 30px);
}
html.motion-ready [data-motion="hero-float"]:not(.is-visible) {
  transform: translate3d(-26px, 16px, 0) scale(.96);
}

/* Headings use a clean masked rise, common to premium Elementor templates */
html.motion-ready [data-motion="section-kicker"]:not(.is-visible) {
  transform: translate3d(0, 18px, 0);
  letter-spacing: .13em;
}
html.motion-ready [data-motion="section-title"]:not(.is-visible) {
  transform: translate3d(0, 46px, 0);
  clip-path: inset(0 0 100% 0 round 8px);
}
html.motion-ready [data-motion="section-copy"]:not(.is-visible) {
  transform: translate3d(0, 24px, 0);
}

/* Split layouts: direction depends on side, not one-size-fits-all */
html.motion-ready [data-motion="from-left"]:not(.is-visible) {
  transform: translate3d(-58px, 0, 0) scale(.985);
  clip-path: inset(0 14% 0 0 round 24px);
}
html.motion-ready [data-motion="from-right"]:not(.is-visible) {
  transform: translate3d(58px, 0, 0) scale(.985);
  clip-path: inset(0 0 0 14% round 24px);
}

/* Cards / tiles: staggered rise + subtle scale */
html.motion-ready [data-motion="card"]:not(.is-visible),
html.motion-ready [data-motion="metric"]:not(.is-visible),
html.motion-ready [data-motion="step"]:not(.is-visible),
html.motion-ready [data-motion="testimonial"]:not(.is-visible) {
  transform: translate3d(0, 34px, 0) scale(.965);
}

/* Gallery: alternating reveals like editorial image blocks */
html.motion-ready [data-motion="gallery-left"]:not(.is-visible) {
  transform: translate3d(-34px, 16px, 0) scale(.98);
  clip-path: inset(0 12% 0 0 round 24px);
}
html.motion-ready [data-motion="gallery-right"]:not(.is-visible) {
  transform: translate3d(34px, 16px, 0) scale(.98);
  clip-path: inset(0 0 0 12% round 24px);
}
html.motion-ready [data-motion="gallery-up"]:not(.is-visible) {
  transform: translate3d(0, 40px, 0) scale(.975);
  clip-path: inset(14% 0 0 0 round 24px);
}

/* CTA: horizontal reveal / wipe instead of vertical fade */
html.motion-ready [data-motion="cta"]:not(.is-visible) {
  transform: translate3d(-30px, 0, 0) scale(.99);
  clip-path: inset(0 100% 0 0 round 28px);
}
html.motion-ready [data-motion="cta-actions"]:not(.is-visible) {
  transform: translate3d(32px, 0, 0);
}

/* FAQ and contact blocks use short distances for usability */
html.motion-ready [data-motion="faq"]:not(.is-visible),
html.motion-ready [data-motion="contact"]:not(.is-visible) {
  transform: translate3d(0, 18px, 0);
}

/* Footer: light column stagger */
html.motion-ready [data-motion="footer-col"]:not(.is-visible) {
  transform: translate3d(0, 24px, 0);
}

/* Header initial state is separated from scroll reveal items */
html.motion-ready .site-header:not(.is-header-visible) {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
}

/* Visible transitions */
html.motion-ready [data-motion].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) skewY(0);
  clip-path: inset(0 0 0 0 round 0);
  filter: none;
  transition:
    opacity var(--motion-duration) ease,
    transform var(--motion-duration) var(--motion-ease-out),
    clip-path var(--motion-slow) var(--motion-ease-soft),
    filter var(--motion-fast) ease,
    letter-spacing var(--motion-duration) var(--motion-ease-out);
  transition-delay: var(--motion-delay, 0ms);
}
html.motion-ready [data-motion="hero-title"].is-visible {
  transition-duration: 900ms, 1000ms, 1100ms, 620ms, 900ms;
}
html.motion-ready [data-motion="hero-image"].is-visible {
  transition-duration: 980ms, 1100ms, 1200ms, 620ms, 900ms;
}
html.motion-ready [data-motion="cta"].is-visible {
  transition-duration: 800ms, 900ms, 1050ms, 620ms, 900ms;
}

/* Decorative parallax layer: only JS updates --motion-parallax-y */
[data-parallax] img {
  transform: translate3d(0, var(--motion-parallax-y, 0px), 0) scale(1.035);
}
[data-parallax]:hover img {
  transform: translate3d(0, var(--motion-parallax-y, 0px), 0) scale(1.065);
}

/* Progress-like image lines / counters receive a subtle pulse once */
.motion-counted {
  animation: countedPulse .55s var(--motion-ease-spring) both;
}
@keyframes countedPulse {
  0% { transform: scale(.92); opacity: .55; }
  70% { transform: scale(1.035); }
  100% { transform: scale(1); opacity: 1; }
}

/* Mobile: shorter paths, no parallax dependency, faster timing */
@media (max-width: 860px) {
  :root {
    --motion-duration: 680ms;
    --motion-slow: 760ms;
    --motion-fast: 480ms;
  }
  html.motion-ready [data-motion="hero-title"]:not(.is-visible) {
    transform: translate3d(0, 34px, 0);
  }
  html.motion-ready [data-motion="hero-image"]:not(.is-visible),
  html.motion-ready [data-motion="from-right"]:not(.is-visible) {
    transform: translate3d(24px, 0, 0) scale(.985);
  }
  html.motion-ready [data-motion="from-left"]:not(.is-visible) {
    transform: translate3d(-24px, 0, 0) scale(.985);
  }
  html.motion-ready [data-motion="card"]:not(.is-visible),
  html.motion-ready [data-motion="metric"]:not(.is-visible),
  html.motion-ready [data-motion="step"]:not(.is-visible),
  html.motion-ready [data-motion="testimonial"]:not(.is-visible),
  html.motion-ready [data-motion="gallery-up"]:not(.is-visible) {
    transform: translate3d(0, 22px, 0) scale(.985);
  }
  [data-parallax] img,
  [data-parallax]:hover img {
    transform: none !important;
  }
}

/* Accessibility/fallback: never hide content for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.motion-ready [data-motion],
  html.motion-ready [data-motion]:not(.is-visible),
  html.motion-ready .site-header:not(.is-header-visible) {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}