/* Consaltek homepage motion/layout v6
   Homepage-only patch. Does not touch global public-shell CSS. */

/* Kill the older looping pseudo-frame animations so only scroll-triggered frames run. */
.chp-proof__frame::before,
.chp-proof__frame::after,
.chp-section > .cf-wrap::before,
.chp-section > .cf-wrap::after,
.chp-online-cta__panel::before,
.chp-online-cta__panel::after {
  content:none !important;
  animation:none !important;
}

/* Fix the ConsaltekSolutions.online layout at desktop widths. */
.chp-online-cta__panel{
  grid-template-columns:minmax(520px,1fr) minmax(0,1.15fr) !important;
  gap:30px !important;
}
.chp-online-cta__copy,
.chp-online-cta__tools{min-width:0}
.chp-online-cta__copy h2{
  font-size:clamp(34px,3.1vw,42px) !important;
  white-space:nowrap;
}
.chp-online-cta__tools{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.chp-online-tool{min-width:0}

/* Dedicated scroll frame layer injected by JS. */
.cs-scroll-frame{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  overflow:hidden;
}
.cs-scroll-frame__x,
.cs-scroll-frame__y{
  position:absolute;
  display:block;
  opacity:0;
  background:#5E70CF;
  box-shadow:0 0 0 1px rgba(77,96,191,.06);
}

/* Top-left L: proof frames + Build With Consaltek */
.chp-proof__frame .cs-scroll-frame__x,
.chp-build-with > .cf-wrap .cs-scroll-frame__x{
  top:0; left:0; width:0; height:4px;
}
.chp-proof__frame .cs-scroll-frame__y,
.chp-build-with > .cf-wrap .cs-scroll-frame__y{
  top:0; left:0; width:4px; height:0;
}

/* Top-right L: Use Cases */
.chp-use-cases > .cf-wrap .cs-scroll-frame__x{
  top:0; right:0; width:0; height:4px;
}
.chp-use-cases > .cf-wrap .cs-scroll-frame__y{
  top:0; right:0; width:4px; height:0;
}

/* Bottom-left L: Build More */
.chp-build-more > .cf-wrap .cs-scroll-frame__x{
  bottom:0; left:0; width:0; height:4px;
}
.chp-build-more > .cf-wrap .cs-scroll-frame__y{
  bottom:0; left:0; width:4px; height:0;
}

/* Bottom-right L: tools CTA */
.chp-online-cta__panel .cs-scroll-frame__x{
  bottom:0; right:0; width:0; height:4px;
}
.chp-online-cta__panel .cs-scroll-frame__y{
  bottom:0; right:0; width:4px; height:0;
}

/* Strong, obvious draw + retract animation. */
.cs-frame-run .cs-scroll-frame__x{
  animation:cs-frame-x 1.55s cubic-bezier(.2,.78,.18,1) both;
}
.cs-frame-run .cs-scroll-frame__y{
  animation:cs-frame-y 1.55s .28s cubic-bezier(.2,.78,.18,1) both;
}

@keyframes cs-frame-x{
  0%   {opacity:0;width:0}
  8%   {opacity:1}
  46%  {opacity:1;width:62%}
  72%  {opacity:1;width:62%}
  100% {opacity:0;width:0}
}
@keyframes cs-frame-y{
  0%   {opacity:0;height:0}
  8%   {opacity:1}
  46%  {opacity:1;height:48%}
  72%  {opacity:1;height:48%}
  100% {opacity:0;height:0}
}

/* Make the frame visually stronger on the larger CTA panel. */
.chp-online-cta__panel .cs-scroll-frame__x{height:5px}
.chp-online-cta__panel .cs-scroll-frame__y{width:5px}

/* Keep animation visible even on very light sections. */
.chp-section > .cf-wrap .cs-scroll-frame__x,
.chp-section > .cf-wrap .cs-scroll-frame__y{
  background:linear-gradient(90deg,#4D60BF,#7B86DC);
}

@media(max-width:1180px){
  .chp-online-cta__panel{
    grid-template-columns:1fr !important;
  }
  .chp-online-cta__copy h2{
    white-space:normal;
  }
}
@media(max-width:700px){
  .cs-scroll-frame__x{height:3px !important}
  .cs-scroll-frame__y{width:3px !important}
  .chp-online-cta__tools{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .cs-scroll-frame{display:none !important}
}