/* KARIMCOM lightweight visual effects — subtle microinteractions + cyan underline */
:root{
  --kc-motion-fast:180ms;
  --kc-motion-card:240ms;
  --kc-accent-line:#20d8f2;
  --kc-accent-border:rgba(32,216,242,.62);
  --kc-accent-shadow:rgba(0,184,224,.16);
}

body.storefront :is(
  .categoryTile,
  .shopProduct,
  .serviceBanner,
  .remoteCard,
  .serviceMiniCard,
  .programSearchCard,
  .programCard
){
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:
    transform var(--kc-motion-card) ease,
    border-color var(--kc-motion-fast) ease,
    box-shadow var(--kc-motion-card) ease,
    background-color var(--kc-motion-fast) ease;
}

body.storefront :is(
  .categoryTile,
  .shopProduct,
  .serviceBanner,
  .remoteCard,
  .serviceMiniCard,
  .programSearchCard,
  .programCard
)::after{
  content:"";
  position:absolute;
  z-index:3;
  inset-inline:16px;
  bottom:0;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--kc-accent-line) 18%,var(--kc-accent-line) 82%,transparent);
  opacity:0;
  transform:scaleX(.2);
  transform-origin:center;
  transition:transform var(--kc-motion-card) ease,opacity var(--kc-motion-fast) ease;
}

body.storefront :is(
  .shopNav nav a,
  .remoteLinks a,
  .remoteLanguages a,
  .crumbs a,
  .textLink,
  .footerRow a
){
  position:relative;
  transition:color var(--kc-motion-fast) ease;
}

body.storefront :is(
  .shopNav nav a,
  .remoteLinks a,
  .remoteLanguages a,
  .crumbs a,
  .textLink,
  .footerRow a
)::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:-5px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--kc-accent-line) 20%,var(--kc-accent-line) 80%,transparent);
  opacity:0;
  transform:scaleX(.25);
  transform-origin:center;
  transition:transform var(--kc-motion-card) ease,opacity var(--kc-motion-fast) ease;
}

body.storefront :is(.btn,.shareButton,.contactPill,button,summary){
  transition:
    transform var(--kc-motion-fast) ease,
    border-color var(--kc-motion-fast) ease,
    box-shadow var(--kc-motion-fast) ease,
    filter var(--kc-motion-fast) ease,
    background-color var(--kc-motion-fast) ease;
}

body.storefront :is(
  .categoryTile,
  .shopProduct,
  .serviceBanner,
  .remoteCard,
  .serviceMiniCard,
  .programSearchCard,
  .programCard
):focus-within{
  border-color:var(--kc-accent-border);
  box-shadow:0 12px 30px var(--kc-accent-shadow);
}

body.storefront :is(
  .categoryTile,
  .shopProduct,
  .serviceBanner,
  .remoteCard,
  .serviceMiniCard,
  .programSearchCard,
  .programCard
):focus-within::after,
body.storefront :is(
  .shopNav nav a,
  .remoteLinks a,
  .remoteLanguages a,
  .crumbs a,
  .textLink,
  .footerRow a
):focus-visible::after{
  opacity:1;
  transform:scaleX(1);
}

body.storefront :is(.btn,.shareButton,.contactPill,button,summary):active{
  transform:translateY(1px);
}

@media (hover:hover) and (pointer:fine){
  body.storefront :is(
    .categoryTile,
    .shopProduct,
    .serviceBanner,
    .remoteCard,
    .serviceMiniCard,
    .programSearchCard,
    .programCard
  ):hover{
    transform:translateY(-3px);
    border-color:var(--kc-accent-border);
    box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 22px var(--kc-accent-shadow);
  }

  body.storefront :is(
    .categoryTile,
    .shopProduct,
    .serviceBanner,
    .remoteCard,
    .serviceMiniCard,
    .programSearchCard,
    .programCard
  ):hover::after,
  body.storefront :is(
    .shopNav nav a,
    .remoteLinks a,
    .remoteLanguages a,
    .crumbs a,
    .textLink,
    .footerRow a
  ):hover::after{
    opacity:1;
    transform:scaleX(1);
  }

  body.storefront :is(
    .shopNav nav a,
    .remoteLinks a,
    .remoteLanguages a,
    .crumbs a,
    .textLink,
    .footerRow a
  ):hover{
    color:#dffaff;
  }

  body.storefront :is(.btn,.shareButton,.contactPill,button,summary):hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
  }

  body.storefront :is(.btn.primary,.downloadCta):hover{
    box-shadow:0 10px 24px rgba(0,190,225,.22);
  }
}

@media (prefers-reduced-motion:reduce){
  body.storefront *,
  body.storefront *::before,
  body.storefront *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  body.storefront :is(
    .categoryTile,
    .shopProduct,
    .serviceBanner,
    .remoteCard,
    .serviceMiniCard,
    .programSearchCard,
    .programCard,
    .btn,
    .shareButton,
    .contactPill,
    button,
    summary
  ){
    transform:none!important;
  }
}