/* ═══════════════════════════════════════════════════════════════
   VIPRA AMBIENT LAYER v1.0 — motion & light
   Companion to js/ambient.js. Pure enhancement: safe to remove.
   All effects honour prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · HERO FLOW CANVAS ─────────────────────────────── */
#flowCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: .9;
}
#hero { isolation: isolate; }
#hero > .wrap { position: relative; z-index: 1; }
/* soften the static blueprint grid now that the DAG is alive */
.hero-blueprint { opacity: .32; }

/* ── 2 · AURORA — slow drifting light on dark bands ───── */
.aurora {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.aurora::before, .aurora::after {
  content: ""; position: absolute; width: 52vw; height: 52vw;
  min-width: 480px; min-height: 480px; border-radius: 50%;
  filter: blur(90px); will-change: transform;
}
.aurora::before {
  background: radial-gradient(circle, rgba(47,201,182,.07) 0%, transparent 60%);
  top: -22%; left: -12%;
  animation: aur-a 26s ease-in-out infinite alternate;
}
.aurora::after {
  background: radial-gradient(circle, rgba(61,107,132,.09) 0%, transparent 60%);
  bottom: -30%; right: -14%;
  animation: aur-b 32s ease-in-out infinite alternate;
}
@keyframes aur-a {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(9vw,7vh,0) scale(1.18); }
}
@keyframes aur-b {
  from { transform: translate3d(0,0,0) scale(1.1); }
  to   { transform: translate3d(-8vw,-6vh,0) scale(.92); }
}
#viprago, #cases { position: relative; isolation: isolate; }
#viprago > .wrap, #cases > .wrap { position: relative; z-index: 1; }

/* ── 3 · CURSOR SPOTLIGHT on cards (JS sets --mx/--my) ── */
.spot { position: relative; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; z-index: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(17,137,125,.09), transparent 65%);
  transition: opacity .35s ease;
}
.ink-band .spot::after, footer .spot::after {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(47,201,182,.10), transparent 65%);
}
.spot:hover::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* ── 4 · BEAM — travelling light along key borders ────── */
.beam-edge { position: relative; overflow: hidden; }
.beam-edge::before {
  content: ""; position: absolute; top: 0; left: -40%;
  width: 40%; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent,
              rgba(47,201,182,.85), transparent);
  animation: beam-x 4.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes beam-x { to { left: 110%; } }

/* travelling beam on the tech ticker divider */
.ticker { position: relative; }
.ticker::after {
  content: ""; position: absolute; bottom: 0; left: -30%;
  width: 30%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent,
              rgba(17,137,125,.55), transparent);
  animation: beam-x 7s linear infinite;
}

/* ── 5 · MICRO-INTERACTIONS ───────────────────────────── */
/* lift + glow on cards */
.case-card, .w-cell, .a-cell, .g-cell, .duo-panel {
  transition: transform .35s cubic-bezier(.2,.7,.2,1),
              box-shadow .35s ease, border-color .35s ease;
}
.case-card:hover, .duo-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.w-cell:hover, .a-cell:hover, .g-cell:hover { transform: translateY(-3px); }

/* service rows: arrow slides, number warms */
.svc-row .svc-arrow { transition: transform .3s cubic-bezier(.2,.7,.2,1), color .3s; }
.svc-row:hover .svc-arrow { transform: translateX(6px); color: var(--flow-bright, #2FC9B6); }
.svc-row .svc-num { transition: color .3s; }
.svc-row:hover .svc-num { color: var(--flow, #11897D); }

/* buttons: subtle magnetic sheen */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-20deg); transition: left .55s ease;
}
.btn:hover::after { left: 125%; }
.btn .ar { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.btn:hover .ar { transform: translateX(4px); }

/* tech pills breathe on hover */
.t-pill { transition: border-color .25s, color .25s, transform .25s; }
.t-pill:hover {
  border-color: var(--flow, #11897D); color: var(--flow, #11897D);
  transform: translateY(-1px);
}

/* impact numbers get a slow shimmer */
.imp-num, .feat-views {
  background: linear-gradient(100deg, currentColor 40%,
              rgba(47,201,182,.9) 50%, currentColor 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: num-shimmer 7s linear infinite;
}
@keyframes num-shimmer {
  0%, 55% { background-position: 120% 0; }
  75%, 100% { background-position: -60% 0; }
}

/* rail nodes pulse when live */
.rail-node.live span { animation: rail-glow 2.4s ease-in-out infinite; }
@keyframes rail-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* ── 6 · REDUCED MOTION — everything settles ──────────── */
@media (prefers-reduced-motion: reduce) {
  #flowCanvas { display: none; }
  .aurora::before, .aurora::after,
  .beam-edge::before, .ticker::after,
  .imp-num, .feat-views, .rail-node.live span { animation: none; }
  .imp-num, .feat-views {
    background: none; -webkit-background-clip: initial; background-clip: initial;
  }
  .case-card, .w-cell, .a-cell, .g-cell, .duo-panel,
  .svc-row .svc-arrow, .btn .ar, .t-pill { transition: none; }
}

/* mobile: keep it light — canvas thins out via JS; kill blur cost */
@media (max-width: 640px) {
  .aurora::before, .aurora::after { filter: blur(60px); }
}