/* ══════════════════════════════════════════════════════════════════════
   BRAHMASTRA — CARD FX
   Scoped entirely to .feature-card. Nothing else on the page is touched.
   The default mouse cursor is left completely alone.
   Load AFTER css/style.css
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. HOLOGRAM SCANLINE SWEEP ────────────────────────────────────── */
.feature-card::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 90px;
  z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--fx-wc, #a855f7) 24%, transparent) 55%,
    rgba(255, 255, 255, .34) 72%,
    transparent);
  mix-blend-mode: screen;
}
.feature-card:hover::after { animation: fxCardHolo 1.15s ease-out; }
@keyframes fxCardHolo {
  0%   { opacity: 0; transform: translateY(-90px); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(360px); }
}

/* ─── 2. TITLE DECODE ───────────────────────────────────────────────── */
.feature-card h3 { font-variant-ligatures: none; }
.feature-card h3 .fx-sc {
  color: var(--fx-wc, var(--accent));
  opacity: .75;
}

/* ─── 3. TAG STAGGER LIGHT-UP ───────────────────────────────────────── */
.feature-card .card-tags span {
  transition: color .3s ease, border-color .3s ease,
              background .3s ease, transform .3s ease, box-shadow .3s ease;
  transition-delay: calc(var(--i, 0) * 55ms);
}
.feature-card:hover .card-tags span {
  color: #fff;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--fx-wc, #a855f7) 55%, transparent);
  background: color-mix(in srgb, var(--fx-wc, #a855f7) 14%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--fx-wc, #a855f7) 30%, transparent);
}

/* ─── 4. ICON LIFT + GLOW RING ──────────────────────────────────────── */
.feature-card .card-icon-wrap {
  position: relative;
  transition: transform .4s cubic-bezier(.2, .8, .3, 1),
              border-color .4s ease, background .4s ease;
}
.feature-card:hover .card-icon-wrap {
  transform: translateY(-3px) scale(1.08);
  border-color: color-mix(in srgb, var(--fx-wc, #a855f7) 60%, transparent);
  background: color-mix(in srgb, var(--fx-wc, #a855f7) 12%, transparent);
}
.feature-card .card-icon-wrap::before {
  content: ""; position: absolute; inset: -6px;
  border-radius: 16px; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--fx-wc, #a855f7) 45%, transparent);
  opacity: 0; transform: scale(.85);
  transition: opacity .4s ease, transform .4s ease;
}
.feature-card:hover .card-icon-wrap::before { opacity: 1; transform: scale(1); }
.feature-card .card-icon-wrap svg {
  transition: filter .4s ease, transform .4s ease;
}
.feature-card:hover .card-icon-wrap svg {
  filter: drop-shadow(0 0 8px currentColor);
}

/* ─── 5. CORNER TICKS ───────────────────────────────────────────────── */
.feature-card .fx-corner {
  position: absolute; width: 14px; height: 14px;
  pointer-events: none; z-index: 3; opacity: 0;
  border-color: var(--fx-wc, #a855f7); border-style: solid; border-width: 0;
  transition: opacity .35s ease, transform .35s ease;
}
.feature-card .fx-corner.tl { top: 12px; left: 12px;  border-top-width: 1.5px; border-left-width: 1.5px;  border-radius: 4px 0 0 0; transform: translate(5px, 5px); }
.feature-card .fx-corner.tr { top: 12px; right: 12px; border-top-width: 1.5px; border-right-width: 1.5px; border-radius: 0 4px 0 0; transform: translate(-5px, 5px); }
.feature-card .fx-corner.bl { bottom: 12px; left: 12px;  border-bottom-width: 1.5px; border-left-width: 1.5px;  border-radius: 0 0 0 4px; transform: translate(5px, -5px); }
.feature-card .fx-corner.br { bottom: 12px; right: 12px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-radius: 0 0 4px 0; transform: translate(-5px, -5px); }
.feature-card:hover .fx-corner { opacity: .85; transform: translate(0, 0); }

/* ─── 6. STAGGERED SCROLL REVEAL ────────────────────────────────────── */
.feature-card.fx-in {
  animation: fxCardIn .75s cubic-bezier(.2, .8, .3, 1) backwards;
  animation-delay: calc(var(--n, 0) * 70ms);
}
@keyframes fxCardIn {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ─── REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .feature-card:hover::after { animation: none; }
  .feature-card.fx-in { animation: none; }
  .feature-card:hover .card-icon-wrap { transform: none; }
  .feature-card:hover .card-tags span { transform: none; }
}