/* ===============================================
   JAS Software - Fancy FX (parallax + mouse effects)
   =============================================== */

/* ---------- Cursor aurora: soft glow that follows the mouse across the whole page ---------- */
.fx-aurora {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgba(94, 220, 212, 0.13), transparent 60%),
    radial-gradient(900px circle at calc(var(--mx, 50%) * 0.7 + 15%) calc(var(--my, 40%) * 0.7 + 10%), rgba(88, 70, 249, 0.07), transparent 65%);
  mix-blend-mode: screen;
}

/* grid that only "lights up" around the cursor */
.fx-grid {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image:
    linear-gradient(rgba(94, 220, 212, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 220, 212, 0.35) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 70%);
  mask-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 70%);
  opacity: 0.55;
}

/* ---------- Hero particle canvas + floating orbs ---------- */
.jas-hero { overflow: hidden; }
.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.jas-hero > .container { position: relative; z-index: 2; }

.fx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
.fx-orb-1 { width: 380px; height: 380px; top: 8%;  left: -6%;  background: rgba(94, 220, 212, 0.22); }
.fx-orb-2 { width: 460px; height: 460px; top: 40%; right: -8%; background: rgba(88, 70, 249, 0.20); }
.fx-orb-3 { width: 260px; height: 260px; bottom: -4%; left: 38%; background: rgba(94, 220, 212, 0.14); }

/* parallax targets are moved with CSS vars so they can combine with other transforms */
[data-parallax] {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}

/* hero badge: floats + reacts to the mouse */
.jas-hero-icon {
  animation: fx-float 7s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(94, 220, 212, 0.35));
}
@keyframes fx-float {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -18px; }
}

/* ---------- Hero title: animated gradient shimmer on the accent line ---------- */
.jas-hero-highlight {
  background: linear-gradient(100deg, #5EDCD4 20%, #ffffff 45%, #5EDCD4 70%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-shimmer 5s linear infinite;
}
@keyframes fx-shimmer {
  to { background-position: -250% 0; }
}

/* ---------- Interactive cards: 3D tilt + spotlight border + glare ---------- */
.fx-card {
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.25s ease-out, border-color 0.3s, box-shadow 0.3s;
  will-change: transform;
}
.fx-card.is-hover {
  transition: transform 0.08s linear, border-color 0.3s, box-shadow 0.3s;
  border-color: var(--jas-border-strong);
  box-shadow: 0 20px 60px -20px rgba(94, 220, 212, 0.35);
}
/* glow that follows the cursor inside the card */
.fx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(360px circle at var(--cx, 50%) var(--cy, 50%), rgba(94, 220, 212, 0.16), transparent 60%);
}
/* gradient border that lights up near the cursor */
.fx-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(240px circle at var(--cx, 50%) var(--cy, 50%), rgba(94, 220, 212, 0.95), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fx-card.is-hover::before,
.fx-card.is-hover::after { opacity: 1; }
.fx-card > * { position: relative; z-index: 1; }

/* ---------- Scroll reveal (staggered) ---------- */
.fx-reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.98);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1), filter 0.9s;
  transition-delay: var(--d, 0ms);
}
.fx-reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* section titles: underline sweep when revealed */
.jas-section-title.fx-reveal .jas-accent {
  background: linear-gradient(90deg, #5EDCD4, #8f86ff, #5EDCD4);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-shimmer 6s linear infinite;
}

/* ---------- Magnetic buttons ---------- */
.jas-btn.fx-magnet {
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s, background 0.3s;
}
.jas-btn-solid.fx-magnet:hover { box-shadow: 0 0 34px rgba(94, 220, 212, 0.55); }

/* ---------- Custom cursor ring ---------- */
.fx-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(94, 220, 212, 0.7);
  border-radius: 50%;
  z-index: 99999;
  pointer-events: none;
  transition: width .25s, height .25s, margin .25s, background .25s, opacity .3s;
  opacity: 0;
}
.fx-cursor.is-on { opacity: 1; }
.fx-cursor.is-link {
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  background: rgba(94, 220, 212, 0.12);
}

/* scroll progress bar */
.fx-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, #5EDCD4, #8f86ff);
  z-index: 100000;
  pointer-events: none;
}

/* ---------- Accessibility / touch ---------- */
@media (hover: none), (pointer: coarse) {
  .fx-cursor, .fx-grid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-aurora, .fx-grid, .fx-cursor, .fx-canvas, .fx-orb { display: none; }
  .fx-reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .jas-hero-icon, .jas-hero-highlight { animation: none; }
  [data-parallax], .fx-card { transform: none !important; }
}