/* ============================================================
   WOW LAYER v7 (Tier 4.3) — FRAMER SIGNATURE EXPERIENCE
   JarvisNextGen.in · vanilla, no deps · versioned
   v7 FIX: word-by-word reveal made UNMISTAKABLE —
   short punchy fade (.22s) + BIG stagger (120ms/word)
   so each word visibly pops in sequence (v6's .7s fade
   + 70ms stagger looked like one block fade)
   word-mask titles · spotlight cards · showcase tilt ·
   button sheen · scrollspy · back-to-top · cursor glow
   ============================================================ */

/* ---------- 1. WORD-MASK TITLE REVEAL (Framer signature) ---- */
.wt-mask { display: inline-block; overflow: hidden; vertical-align: bottom;
  padding: 0 0 0.1em; margin: 0 0 -0.1em; }
.wt-word { display: inline-block; transform: translateY(115%); opacity: 0;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
  transition-delay: calc(var(--i, 0) * 120ms); will-change: transform; }
.wt-on .wt-word { transform: translateY(0); opacity: 1; }

/* ---------- 2. SPOTLIGHT CARDS (cursor-follow glow) --------- */
.spot-card { position: relative; }
.spot-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  background: radial-gradient(340px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(0, 194, 255, 0.13), transparent 65%);
  opacity: 0; transition: opacity .3s ease;
}
.spot-card:hover::before { opacity: 1; }

/* ---------- 3. SHOWCASE 3D TILT (work card) ----------------- */
.tilt-showcase { transform-style: preserve-3d; transition: transform .22s cubic-bezier(.22, 1, .36, 1); will-change: transform; }

/* ---------- 4. BUTTON SHEEN (light sweep on hover) ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-20deg); pointer-events: none;
  transition: left .65s cubic-bezier(.22, 1, .36, 1);
}
.btn-primary:hover::after { left: 140%; }

/* ---------- 5. SCROLLSPY — active nav section --------------- */
.nav-links a.active { color: var(--blue); }
.nav-links a.active::after { width: 100%; }

/* ---------- 6. BACK-TO-TOP FLOAT ----------------------------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 290;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 27, 61, 0.88); border: 1px solid rgba(0, 194, 255, 0.45);
  color: var(--cyan); cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 194, 255, 0.08);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--cyan); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 194, 255, 0.35); transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; }

/* ---------- 7. CURSOR GLOW (desktop only) -------------------- */
.fx-dot, .fx-ring { position: fixed; top: 0; left: 0; pointer-events: none;
  border-radius: 50%; mix-blend-mode: screen; z-index: 99998; }
.fx-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: #00C2FF; box-shadow: 0 0 10px rgba(0, 194, 255, 0.95); }
.fx-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(0, 194, 255, 0.45);
  transition: width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease, opacity .25s ease; }
.fx-ring.grow { width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-color: rgba(0, 194, 255, 0.85); background: rgba(0, 194, 255, 0.07); }
html.fx-on, html.fx-on a, html.fx-on button, html.fx-on summary, html.fx-on label { cursor: none; }

/* ---------- RESPONSIVE + MOTION SAFETY ----------------------- */
@media (hover: none) {
  .spot-card::before { display: none; }
  .tilt-showcase { transform: none !important; }
  .btn-primary::after { display: none; }
}
/* v7: word-mask = punchy staggered reveal under reduced-motion
   (short fade .22s + 120ms/word — clearly word-by-word, no slide,
   vestibular-safe). Cursor glow + spotlight stay ON too.
   Only true motion (tilt, sheen sweep) is reduced. */
@media (prefers-reduced-motion: reduce) {
  .wt-word { transform: none; transition: opacity .22s ease; transition-delay: calc(var(--i, 0) * 120ms); }
  .spot-card::before { transition: none; }
  .btn-primary::after { display: none; }
  .fx-dot, .fx-ring { transition: none; }
  .tilt-showcase { transition: none; }
}