/* ============================================================================
   LOOKUPZ — Premium FX addon (LOAD AFTER base.css)
   100% additive. Safe to remove by deleting the <link>.
   Adds:
     - Animated mesh gradient hero background
     - Multi-layer parallax 3D on hero
     - Mouse-tracking glow inside cards (CSS var-driven)
     - Magnetic CTA buttons (JS-driven CSS transform)
     - 3D shimmer skeleton (liquid wave instead of linear shimmer)
     - Page transitions (slide-fade-blur between views)
     - 3D flip-in toast
     - Topbar API pulse border on success
     - Smooth easeOutCubic for counters (replaces linear in UI.animateNumber)
   ============================================================================ */

/* ---------- 1. MESH GRADIENT HERO ---------- */
.hero {
  position: relative;
  isolation: isolate;
}
.hero .hero-mesh {
  position: absolute;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 20% 30%, rgba(168, 59, 255, 0.45), transparent 60%),
    radial-gradient(35% 30% at 80% 20%, rgba(106, 28, 240, 0.40), transparent 65%),
    radial-gradient(45% 40% at 65% 75%, rgba(143, 7, 255, 0.35), transparent 70%),
    radial-gradient(30% 25% at 25% 80%, rgba(74, 14, 184, 0.30), transparent 60%);
  filter: blur(40px) saturate(120%);
  animation: mesh-drift 22s ease-in-out infinite alternate;
  transform: translateZ(-1px);
}
@keyframes mesh-drift {
  0%   { transform: translate3d(-2%,  -1%, -1px) scale(1.00); }
  33%  { transform: translate3d( 3%,  -2%, -1px) scale(1.06); }
  66%  { transform: translate3d(-1%,   2%, -1px) scale(0.98); }
  100% { transform: translate3d( 2%,   1%, -1px) scale(1.04); }
}

/* Subtle dotted grid overlay on hero for depth */
.hero .hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 70%);
  opacity: 0.55;
}

/* ---------- 2. PARALLAX LAYERS ---------- */
.hero-eyebrow { transform: translateZ(20px); }
.hero-title   { transform: translateZ(40px); }
.hero-sub     { transform: translateZ(15px); }
.hero-actions { transform: translateZ(60px); }
.hero-eyebrow, .hero-title, .hero-sub, .hero-actions {
  transition: transform 0.2s ease-out;
  will-change: transform;
}

/* ---------- 3. MOUSE-TRACKING CARD GLOW ---------- */
.stat-card,
.res-card,
.ins-card,
.search-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.stat-card::after,
.res-card::after,
.ins-card::after,
.search-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(168, 59, 255, 0.18),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  z-index: 0;
}
.stat-card:hover::after,
.res-card:hover::after,
.ins-card:hover::after,
.search-panel:hover::after {
  opacity: 1;
}
.res-card > *,
.search-panel > *,
.stat-card > *,
.ins-card > * {
  position: relative;
  z-index: 1;
}

/* ---------- 4. MAGNETIC BUTTONS ---------- */
.btn-magnetic {
  transition: transform 0.18s var(--ease-snap), box-shadow 0.25s var(--ease);
}
.btn-magnetic.is-pulled { transition: transform 0.08s linear; }

/* ---------- 5. LIQUID SKELETON ---------- */
.res-card.is-skel > div {
  background: linear-gradient(
    105deg,
    rgba(255,255,255,0.04) 30%,
    rgba(168, 59, 255, 0.18) 45%,
    rgba(255,255,255,0.10) 60%,
    rgba(255,255,255,0.04) 70%
  );
  background-size: 300% 100%;
  animation: liquid-shimmer 1.6s ease-in-out infinite !important;
}
@keyframes liquid-shimmer {
  0%   { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}

/* ---------- 6. PAGE TRANSITIONS ---------- */
.view {
  animation: view-in 0.5s var(--ease) both;
}
.view.is-leaving {
  animation: view-out 0.22s var(--ease) both;
}
@keyframes view-out {
  from { opacity: 1; transform: translateY(0)        scale(1);     filter: blur(0); }
  to   { opacity: 0; transform: translateY(-8px)     scale(0.995); filter: blur(4px); }
}

/* ---------- 7. TOAST 3D ---------- */
.toast {
  animation: toast-3d-in 0.32s var(--ease-bounce) both;
  transform-origin: right center;
}
@keyframes toast-3d-in {
  0%   { opacity: 0; transform: perspective(900px) translateX(60px) rotateY(-22deg); }
  60%  { opacity: 1; transform: perspective(900px) translateX(-6px) rotateY(3deg); }
  100% { opacity: 1; transform: perspective(900px) translateX(0)    rotateY(0); }
}

/* ---------- 8. TOPBAR API PULSE BORDER ---------- */
.status-pill.is-ok {
  position: relative;
}
.status-pill.is-ok::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(143, 7, 255, 0.45);
  pointer-events: none;
  animation: ring-pulse 2.4s ease-out infinite;
  opacity: 0;
}
@keyframes ring-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}

/* ---------- 9. STAT COUNTER GRADIENT SHIMMER ---------- */
.stat-val {
  position: relative;
  background-size: 200% 100%;
  animation: grad-shift 6s ease-in-out infinite;
}
@keyframes grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- 10. COMMAND PALETTE NEON EDGE ---------- */
.palette-box {
  animation: pop-in 0.2s var(--ease), neon-edge 3.4s ease-in-out infinite;
}
@keyframes neon-edge {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(143,7,255,0.22), 0 0 36px rgba(143,7,255,0.28); }
  50%      { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(143,7,255,0.38), 0 0 60px rgba(143,7,255,0.42); }
}

/* ---------- 11. RESPONSIVE PARALLAX (disable on touch) ---------- */
@media (hover: none) {
  .hero-eyebrow, .hero-title, .hero-sub, .hero-actions {
    transform: none !important;
  }
}

/* ---------- 12. RESPONSIVE: simplify mesh on small screens ---------- */
@media (max-width: 880px) {
  .hero .hero-mesh { filter: blur(28px); }
}

/* ---------- 13. SAFE GATE: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-mesh,
  .stat-val {
    animation: none !important;
  }
}