/* Appsy — cursor dynamism layer */

/* Soft brand-gradient spotlight that follows the cursor */
.appsy-spotlight {
  position: fixed;
  left: 0; top: 0;
  width: 720px; height: 720px;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(46,124,228,0.10), rgba(122,63,158,0.07) 35%, rgba(230,57,70,0.05) 60%, transparent 70%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity .6s ease;
  mix-blend-mode: screen;
  will-change: transform;
}
.appsy-spotlight.on { opacity: .9; }

/* Section ambient: faint radial that tracks cursor on hovered sections */
section, header.hero, .cred, footer {
  position: relative;
}
section::after, header.hero::after, .cred::after, footer::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.04),
    transparent 55%
  );
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 0;
}
section:hover::after, header.hero:hover::after, .cred:hover::after, footer:hover::after {
  opacity: 1;
}
/* Make sure inline content sits above the ambient */
section > *, header.hero > *, .cred > *, footer > * { position: relative; z-index: 1; }

/* Subtle tilt + lift for cards */
.stat, .aud, .partner, .diff-item, .custom-block, .flow-step,
[data-tilt] {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(calc(var(--lift, 0) * -2px));
  transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}

/* Hero glow parallax — uses --px/--py vars */
.hero-bg .glow {
  transform: translateX(calc(-50% + var(--px, 0px))) translateY(var(--py, 0px));
  transition: transform .6s ease-out;
}

/* Solution rows: gradient sweep follows the cursor more visibly */
.sol-row {
  background-image: linear-gradient(
    90deg,
    rgba(46,124,228,0.0) 0%,
    rgba(46,124,228,0.07) calc(var(--mx, 50%) - 20%),
    rgba(122,63,158,0.10) var(--mx, 50%),
    rgba(230,57,70,0.07) calc(var(--mx, 50%) + 20%),
    transparent 100%
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: background-position .25s ease;
}

/* Buttons: gradient flicker on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(46,124,228,0), rgba(122,63,158,0.25), rgba(230,57,70,0));
  transform: translateX(-110%);
  transition: transform .55s ease;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.btn-primary:hover::before { transform: translateX(110%); }

/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
  .appsy-spotlight, .stat, .aud, .partner, .diff-item, .custom-block, .flow-step,
  .hero-bg .glow, .btn-primary::before {
    transition: none !important;
    transform: none !important;
  }
  section::after, header.hero::after, .cred::after, footer::after { display: none; }
}

/* Scroll progress bar */
.appsy-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--grad);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(122,63,158,0.5);
}

/* Magnetic buttons need a smooth return-to-rest */
.btn, .wa-float { transition: transform .35s cubic-bezier(.2,.6,.2,1), background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }

/* Kinetic hero word reveal */
.kw {
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
  padding-right: 0.18em;
  overflow: visible;
}
.kw-in {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: kwReveal 0.9s cubic-bezier(.2,.7,.2,1) forwards;
}
.kw[style*="animation-delay"] > .kw-in {
  animation-delay: inherit;
}
@keyframes kwReveal {
  0%   { opacity: 0; transform: translateY(0.4em); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .kw-in { transform: none; animation: none; }
  .appsy-scroll-progress { display: none; }
}