/* =========================================================
   KEMPRO PAINTS — MOTION STYLESHEET
   Pairs with the inline <script> motion controller in every
   page. Elements start hidden/offset and animate to their
   resting state once the controller adds the .is-on class
   (triggered by IntersectionObserver as they scroll into view).
   ========================================================= */

@media (prefers-reduced-motion: no-preference){

  /* Generic reveal */
  .kp-reveal{
    opacity:0;
    transition:opacity .7s ease;
  }
  .kp-reveal.is-on{opacity:1}

  /* Directional reveals */
  .kp-r-up{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  }
  .kp-r-up.is-on{opacity:1;transform:translateY(0)}

  .kp-r-left{
    opacity:0;
    transform:translateX(-30px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  }
  .kp-r-left.is-on{opacity:1;transform:translateX(0)}

  .kp-r-right{
    opacity:0;
    transform:translateX(30px);
    transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1);
  }
  .kp-r-right.is-on{opacity:1;transform:translateX(0)}

  .kp-r-zoom{
    opacity:0;
    transform:scale(.92);
    transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
  }
  .kp-r-zoom.is-on{opacity:1;transform:scale(1)}

  /* Staggered children — each card fades/rises in with an
     incremental delay driven by its position in the group.
     kp-stagger is used two ways in the source markup: directly
     on a flex/grid wrapper whose immediate children are the
     cards (e.g. .kp-apps.kp-stagger), and on a <section> whose
     cards sit one level deeper inside .elementor-container >
     .elementor-column. Both are covered here without relying
     on display:contents, which would strip the section's own
     box (losing its background) and makes it invisible to the
     IntersectionObserver that triggers .is-on in the first
     place — so it never fires and the cards stay hidden. */
  .kp-stagger > *,
  .kp-stagger > .elementor-container > .elementor-column{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1);
  }
  .kp-stagger.is-on > *,
  .kp-stagger.is-on > .elementor-container > .elementor-column{opacity:1;transform:translateY(0)}

  .kp-stagger.is-on > *:nth-child(1),
  .kp-stagger.is-on > .elementor-container > .elementor-column:nth-child(1){transition-delay:.03s}
  .kp-stagger.is-on > *:nth-child(2),
  .kp-stagger.is-on > .elementor-container > .elementor-column:nth-child(2){transition-delay:.08s}
  .kp-stagger.is-on > *:nth-child(3),
  .kp-stagger.is-on > .elementor-container > .elementor-column:nth-child(3){transition-delay:.13s}
  .kp-stagger.is-on > *:nth-child(4),
  .kp-stagger.is-on > .elementor-container > .elementor-column:nth-child(4){transition-delay:.18s}
  .kp-stagger.is-on > *:nth-child(5),
  .kp-stagger.is-on > .elementor-container > .elementor-column:nth-child(5){transition-delay:.23s}
  .kp-stagger.is-on > *:nth-child(6),
  .kp-stagger.is-on > .elementor-container > .elementor-column:nth-child(6){transition-delay:.28s}
  .kp-stagger.is-on > *:nth-child(7),
  .kp-stagger.is-on > .elementor-container > .elementor-column:nth-child(7){transition-delay:.33s}
  .kp-stagger.is-on > *:nth-child(8),
  .kp-stagger.is-on > .elementor-container > .elementor-column:nth-child(8){transition-delay:.38s}
  .kp-stagger.is-on > *:nth-child(n+9),
  .kp-stagger.is-on > .elementor-container > .elementor-column:nth-child(n+9){transition-delay:.42s}

  /* Eyebrow underline draw-in */
  .kp-eyebrow-line::before{
    width:0;
    transition:width .5s ease .1s;
  }
  .kp-eyebrow-line.is-on::before{width:24px}

  /* Ruled divider draw-in */
  .kp-ruled{
    border-top-color:transparent;
    position:relative;
  }
  .kp-ruled::before{
    content:'';
    position:absolute;
    top:-1px;left:0;
    width:0;height:1px;
    background:var(--kp-line,#e6e4ec);
    transition:width .6s ease;
  }
  .kp-navy .kp-ruled::before,.kp-herobg .kp-ruled::before{background:rgba(255,255,255,.25)}
  .kp-ruled.is-on::before{width:100%}

  /* Brush-stroke sweep behind eyebrow labels */
  .kp-brush{position:relative;overflow:hidden}
  .kp-brush::after{
    content:'';
    position:absolute;
    left:-100%;top:0;bottom:0;width:100%;
    background:linear-gradient(90deg,transparent,rgba(242,184,75,.35),transparent);
    transition:left .8s ease;
  }
  .kp-brush.is-on::after{left:100%}

  /* Milestone number pop (the counting itself is done by JS;
     this just settles the container into place) */
  .kp-mile{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
  .kp-mile.is-on{opacity:1;transform:translateY(0)}

  /* DFT layer-build diagram (build-up of coating layers) */
  .kp-dft{opacity:0;transition:opacity .5s ease}
  .kp-dft.is-on{opacity:1}
  .kp-layer{
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .5s cubic-bezier(.2,.7,.3,1);
  }
  .kp-dft.is-on .kp-layer{transform:scaleX(1)}
  .kp-dft__total{opacity:0;transition:opacity .4s ease .5s}
  .kp-dft.is-on .kp-dft__total{opacity:1}

  /* Before / after comparison panel */
  .kp-panel__tag--before{transition:opacity .5s ease}
  .kp-panel.is-on .kp-panel__tag--before{opacity:0}
  .kp-panel__tag--after{opacity:0;transition:opacity .5s ease .4s}
  .kp-panel.is-on .kp-panel__tag--after{opacity:1}

  /* Fanned card stack */
  .kp-fan{opacity:0;transform:rotate(-4deg) translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
  .kp-fan.is-on{opacity:1;transform:rotate(0) translateY(0)}

  /* Paint drips inside dark bands */
  .kp-drip{
    animation:kp-drip-fall .6s cubic-bezier(.3,.9,.4,1) both;
  }
  @keyframes kp-drip-fall{
    from{height:0;opacity:0}
    to{opacity:1}
  }

  /* Hero background subtle parallax offset (driven by JS var --kp-py) */
  .kp-herobg{transform:translateY(var(--kp-py,0px))}
}

@media (prefers-reduced-motion: reduce){
  .kp-reveal,.kp-r-up,.kp-r-left,.kp-r-right,.kp-r-zoom,
  .kp-stagger > *,.kp-stagger > .elementor-container > .elementor-column,
  .kp-mile,.kp-dft,.kp-fan{
    opacity:1!important;
    transform:none!important;
  }
}