/* ============================================================
   Nova FX — interact.css
   Pointer-driven interaction pack for the Nova Wallet site.
   Pure CSS; pairs with interact.js. Everything namespaced .ifx-*
   Load AFTER nova.css. No external requests, fonts or libs.
   Palette mirrors nova.css: bg #050a18/#081228,
   accents #2f6bff / #38bdf8 / #7c5cff, text #e9f0ff/#c7d6f5.
   ============================================================ */

/* ------------------------------------------------------------
   1. .ifx-tilt — 3D tilt card + cursor-following shine
   JS drives transform per-frame (rAF lerp); CSS owns the shine
   layer via --mx / --my and keeps non-transform transitions.
   `.ifx-on` is added by JS on first hover so the site's .rv
   reveal transform transition is never disturbed beforehand.
   ------------------------------------------------------------ */
.ifx-tilt{will-change:transform}
.ifx-tilt.ifx-on{
  /* transform intentionally absent: JS owns it every frame */
  transition:border-color .22s ease,box-shadow .35s ease,background .3s ease,filter .2s ease,opacity .3s ease;
}
/* cursor shine — a soft radial glaze clipped by the card's
   own overflow:hidden / border-radius */
.ifx-tilt::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;
  background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),
    rgba(174,214,255,.15),rgba(140,190,255,.06) 42%,transparent 70%);
  opacity:0;transition:opacity .4s ease;
}
.ifx-tilt.ifx-live::after{opacity:1}

/* ------------------------------------------------------------
   2. .ifx-beam — rotating conic-gradient border beam on hover.
   ::before is masked to a 1.5px ring hugging the inner edge;
   JS spins --ifx-beam-a while .ifx-live is set. Soft outer glow
   rides on box-shadow (keeps the site's resting drop shadow).
   ------------------------------------------------------------ */
.ifx-beam{--ifx-beam-a:0deg;isolation:isolate}
.ifx-beam::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ifx-beam-a),
    transparent 0turn,transparent .58turn,
    rgba(124,92,255,.85) .72turn,
    rgba(47,107,255,.95) .82turn,
    #38bdf8 .9turn,#d6f1ff .955turn,
    transparent 1turn);
  -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,linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;
}
.ifx-beam.ifx-live::before{opacity:1}
.ifx-beam.ifx-live{
  box-shadow:0 20px 50px rgba(2,8,25,.55),
             0 0 22px rgba(56,189,248,.14),
             0 0 68px rgba(47,107,255,.12);
}

/* ------------------------------------------------------------
   3. .ifx-magnet — magnetic buttons.
   Default transition is the springy release (overshoot);
   .ifx-live swaps in a fast ease-out for tight cursor follow.
   ------------------------------------------------------------ */
.ifx-magnet{
  will-change:transform;
  transition:transform .55s cubic-bezier(.3,1.65,.35,1),
             background .18s ease,border-color .18s ease,
             filter .18s ease,box-shadow .25s ease;
}
.ifx-magnet.ifx-live{
  transition:transform .14s ease-out,
             background .18s ease,border-color .18s ease,
             filter .18s ease,box-shadow .2s ease;
}

/* ------------------------------------------------------------
   4. .ifx-shimmer — periodic light sweep across gradient text.
   300%-wide background keeps the resting window (0..33%) equal
   to the site's .accent gradient; the pale band sits at ~50%
   so it only crosses the text while the position animates.
   Sweep ≈1.8s, then rests — one glint every ~5s.
   ------------------------------------------------------------ */
.ifx-shimmer{
  background-image:linear-gradient(105deg,
    #8fc3ff 0%,#38bdf8 20%,#2f6bff 33%,
    #6fb4ff 46%,#eaf7ff 50%,#6fb4ff 54%,
    #2f6bff 67%,#38bdf8 80%,#8fc3ff 100%);
  background-size:300% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ifx-shimmer-sweep 5.2s cubic-bezier(.4,.05,.3,1) infinite;
}
@keyframes ifx-shimmer-sweep{
  0%{background-position:100% 0}
  34%,100%{background-position:0% 0}
}

/* ------------------------------------------------------------
   5. .ifx-term — typing terminal card.
   JS injects .ifx-term-bar (traffic lights + title) and
   .ifx-term-body (typed lines) — author only supplies the
   wrapper + data-lines / data-title attributes.
   ------------------------------------------------------------ */
.ifx-term{
  max-width:720px;
  background:linear-gradient(180deg,#081226 0%,#060d1f 60%);
  border:1px solid var(--line,rgba(148,178,255,.14));
  border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(2,8,25,.5),
             inset 0 1px 0 rgba(148,178,255,.06);
  font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}
.ifx-term-bar{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;
  background:rgba(148,178,255,.04);
  border-bottom:1px solid var(--line,rgba(148,178,255,.14));
}
.ifx-term-bar i{width:11px;height:11px;border-radius:50%;flex:none}
.ifx-term-bar i:nth-child(1){background:#ff5f57}
.ifx-term-bar i:nth-child(2){background:#febc2e}
.ifx-term-bar i:nth-child(3){background:#28c840}
.ifx-term-title{
  margin-left:8px;font-size:11.5px;letter-spacing:.04em;
  color:var(--dim,#5f77a8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ifx-term-body{
  padding:18px 18px 20px;
  font-size:13px;line-height:1.8;color:#c7d6f5;
}
.ifx-term-line{white-space:pre-wrap;word-break:break-word;min-height:1.8em}
.ifx-term-ps{color:#38bdf8;font-weight:600;margin-right:.55em}
.ifx-term-ok{color:#35d08a}
.ifx-term-cmd{color:#e9f0ff}
.ifx-term-cursor{
  display:inline-block;width:8px;height:1.05em;margin-left:2px;
  background:#38bdf8;border-radius:1px;vertical-align:text-bottom;
  box-shadow:0 0 8px rgba(56,189,248,.5);
  animation:ifx-term-blink 1.1s steps(1) infinite;
}
@keyframes ifx-term-blink{0%,54%{opacity:1}55%,100%{opacity:0}}

/* ------------------------------------------------------------
   6. .ifx-ripple — press ripple for buttons.
   JS spawns .ifx-ripple-dot at the press point; CSS scales and
   fades it. Host needs clipping (`.btn` already has it).
   ------------------------------------------------------------ */
.ifx-ripple{position:relative;overflow:hidden}
.ifx-ripple-dot{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,
    rgba(255,255,255,.42) 0%,
    rgba(180,215,255,.22) 45%,
    rgba(180,215,255,0) 72%);
  transform:translate(-50%,-50%) scale(0);
  animation:ifx-ripple-in .55s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes ifx-ripple-in{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* ------------------------------------------------------------
   7. .ifx-progress — 2px scroll progress bar fixed to the top.
   `div.` qualifier keeps `class="ifx-progress"` on <body> safe —
   JS mounts a real `div.ifx-progress` when it sees that marker.
   Fill is a scaleX transform (GPU-only, no layout).
   ------------------------------------------------------------ */
div.ifx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;
  pointer-events:none;background:rgba(148,178,255,.07);
}
div.ifx-progress>i{
  display:block;height:100%;
  transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,#2f6bff 0%,#38bdf8 55%,#7c5cff 100%);
  box-shadow:0 0 10px rgba(56,189,248,.45);
}

/* ------------------------------------------------------------
   Reduced motion — no sweeps, blinks, ripples or pointer drive.
   Gradient text stays gradient; terminal renders instantly
   (handled in JS); progress bar still reflects scroll position.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .ifx-shimmer{animation:none;background-position:0 0}
  .ifx-term-cursor{animation:none}
  .ifx-ripple-dot{animation:none;opacity:0}
  .ifx-beam::before,.ifx-tilt::after{transition:none}
}

/* ------------------------------------------------------------
   Touch / coarse pointers — hover-driven layers never appear.
   ------------------------------------------------------------ */
@media (hover:none),(pointer:coarse){
  .ifx-tilt::after,.ifx-beam::before{display:none}
}