/* ==========================================================================
   AI ANIMATICS — NANO4C Award-Winning Visual Layer (Awwwards / Stripe Grade)
   100% Additive & Independent. All classes prefixed n4c-.
   ========================================================================== */

/* ── Low-Power Toggle ────────────────────────────────────────────────────── */
.n4c-power-toggle {
  position: fixed; bottom: 24px; right: 24px; z-index: 99999;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10, 14, 26, 0.92); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85);
  padding: 9px 18px; border-radius: 100px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  letter-spacing: 0.04em; cursor: pointer; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  user-select: none;
}
.n4c-power-toggle:hover {
  background: rgba(20, 26, 45, 0.98); border-color: rgba(220, 53, 69, 0.5);
  color: #ffffff; transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(220, 53, 69, 0.25);
}
.n4c-power-toggle.n4c-active {
  background: rgba(220, 53, 69, 0.15); border-color: rgba(220, 53, 69, 0.6); color: #ffb3b8;
}
.n4c-power-toggle .n4c-toggle-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #28a745;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.8); transition: all 0.3s ease;
}
.n4c-power-toggle.n4c-active .n4c-toggle-dot {
  background: #dc3545; box-shadow: 0 0 8px rgba(220, 53, 69, 0.8);
}

/* ── 1. Liquid Ambient Mesh Glow Orbs (Stripe / Linear Style) ─────────────── */
.n4c-ambient-wrap {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.n4c-glow-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); -webkit-filter: blur(90px);
  opacity: 0.32; mix-blend-mode: screen; pointer-events: none;
  animation: n4c-float-orb 18s ease-in-out infinite alternate;
}
.n4c-glow-orb.red {
  background: radial-gradient(circle, rgba(220, 53, 69, 0.85) 0%, rgba(220, 53, 69, 0) 70%);
}
.n4c-glow-orb.blue {
  background: radial-gradient(circle, rgba(42, 53, 96, 0.95) 0%, rgba(42, 53, 96, 0) 70%);
}
.n4c-glow-orb.cyan {
  background: radial-gradient(circle, rgba(46, 196, 182, 0.75) 0%, rgba(46, 196, 182, 0) 70%);
}
@keyframes n4c-float-orb {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -40px) scale(1.15); }
  100% { transform: translate(-40px, 50px) scale(0.9); }
}

/* ── 2. Technical Blueprint Micro-Grid & Laser Scan ───────────────────────── */
.n4c-grid-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
.n4c-laser-scan {
  position: relative; overflow: hidden;
}
.n4c-laser-scan::after {
  content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(220,53,69,0) 15%, rgba(220,53,69,0.85) 50%, rgba(220,53,69,0) 85%, transparent 100%);
  box-shadow: 0 0 20px rgba(220,53,69,0.6), 0 0 45px rgba(220,53,69,0.3);
  animation: n4c-laser-sweep 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none; z-index: 10;
}
@keyframes n4c-laser-sweep {
  0% { top: -5%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

/* ── 3. Glassmorphic 3D Holographic Card Styling ──────────────────────────── */
.n4c-glass-card {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.n4c-glass-card:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18), 0 0 30px rgba(220, 53, 69, 0.15);
  border-color: rgba(220, 53, 69, 0.4) !important;
}

/* ── 4. Live Copilot Terminal Demo Widget ─────────────────────────────────── */
.n4c-live-terminal {
  background: rgba(10, 14, 26, 0.95); border: 1px solid rgba(220, 53, 69, 0.25);
  border-radius: 14px; overflow: hidden; font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem; margin-top: 18px; position: relative; z-index: 2;
  box-shadow: 0 15px 35px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.n4c-term-header {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px;
  background: rgba(0, 0, 0, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.n4c-term-dot { width: 9px; height: 9px; border-radius: 50%; }
.n4c-term-dot.r { background: #ff5f57; } .n4c-term-dot.y { background: #ffbd2e; } .n4c-term-dot.g { background: #28c840; }
.n4c-term-title { color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; margin-left: 10px; letter-spacing: 0.04em; }
.n4c-term-body { padding: 16px; min-height: 125px; color: #2ec4b6; line-height: 1.8; }
.n4c-term-line { opacity: 0; transform: translateY(6px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; overflow: hidden; }
.n4c-term-line.n4c-visible { opacity: 1; transform: translateY(0); }
.n4c-term-line .n4c-prompt { color: #dc3545; font-weight: 700; }
.n4c-term-line .n4c-success { color: #28a745; font-weight: 600; }
.n4c-term-line .n4c-info { color: #60a5fa; }
.n4c-term-line .n4c-warn { color: #fbbf24; }
.n4c-cursor { display: inline-block; width: 8px; height: 15px; background: #2ec4b6; animation: n4c-blink 1s step-end infinite; vertical-align: text-bottom; margin-left: 3px; }
@keyframes n4c-blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ── 5. Multi-Agent Topology Canvas ───────────────────────────────────────── */
.n4c-agent-canvas { width: 100%; height: 190px; border-radius: 12px; margin-top: 14px; display: block; position: relative; z-index: 2; }

/* ── 6. Document Scanner Demo Widget ─────────────────────────────────────── */
.n4c-doc-demo { margin-top: 18px; position: relative; z-index: 2; }
.n4c-doc-page {
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px; padding: 18px; position: relative; overflow: hidden; min-height: 140px;
}
.n4c-doc-page .n4c-doc-line { height: 7px; background: rgba(255, 255, 255, 0.09); border-radius: 4px; margin-bottom: 9px; }
.n4c-doc-page .n4c-doc-line:nth-child(2) { width: 70%; }
.n4c-doc-page .n4c-doc-line:nth-child(3) { width: 88%; }
.n4c-doc-page .n4c-doc-line:nth-child(4) { width: 55%; }
.n4c-doc-scanner {
  position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(220,53,69,0.9), transparent);
  box-shadow: 0 0 25px rgba(220,53,69,0.7), 0 2px 40px rgba(220,53,69,0.3);
  animation: n4c-doc-scan 3.2s ease-in-out infinite;
}
@keyframes n4c-doc-scan { 0%{top:-5%;} 50%{top:100%;} 100%{top:-5%;} }
.n4c-extracted-fields { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.n4c-extracted-field {
  background: rgba(40, 167, 69, 0.15); border: 1px solid rgba(40, 167, 69, 0.35);
  color: #4ade80; padding: 5px 12px; border-radius: 8px; font-size: 0.76rem;
  font-family: 'JetBrains Mono', monospace;
  opacity: 0; transform: scale(0.85); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.n4c-extracted-field.n4c-visible { opacity: 1; transform: scale(1); }

/* ── 7. Security Shield Radar Widget ─────────────────────────────────────── */
.n4c-shield-canvas { width: 100%; height: 170px; display: block; border-radius: 12px; position: relative; z-index: 2; }

/* ── 8. Distinct Case Study Widgets ──────────────────────────────────────── */
.n4c-cloud-canvas {
  width: 100%; height: 195px; border-radius: 14px;
  background: rgba(10, 15, 28, 0.95); border: 1px solid rgba(0, 123, 255, 0.3);
  margin-top: 20px; display: block; position: relative; z-index: 2;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}
.n4c-split-velocity {
  margin-top: 20px; padding: 20px; border-radius: 16px;
  background: rgba(15, 23, 42, 0.96); border: 1px solid rgba(220, 53, 69, 0.35);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; z-index: 2;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}
.n4c-split-box {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 16px; text-align: center;
}
.n4c-split-title { font-size: 0.78rem; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.n4c-split-timer { font-size: 1.5rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.n4c-split-sub { font-size: 0.78rem; color: #94a3b8; margin-top: 5px; }

.n4c-soc-canvas {
  width: 100%; height: 195px; border-radius: 14px;
  background: rgba(8, 16, 24, 0.95); border: 1px solid rgba(40, 167, 69, 0.3);
  margin-top: 20px; display: block; position: relative; z-index: 2;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}

/* ── 9. Micro-Glows & Shimmers ───────────────────────────────────────────── */
.n4c-shimmer { position: relative; overflow: hidden; }
.n4c-shimmer::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); transform: skewX(-20deg); pointer-events: none; z-index: 2; }
.n4c-shimmer:hover::before { animation: n4c-sp 0.8s ease forwards; }
@keyframes n4c-sp { 0%{left:-100%;} 100%{left:200%;} }

.n4c-nav-glow { text-shadow: 0 0 10px rgba(220,53,69,0.6), 0 0 25px rgba(220,53,69,0.3); animation: n4c-np 3s ease-in-out infinite; }
@keyframes n4c-np { 0%,100%{text-shadow:0 0 8px rgba(220,53,69,0.5);} 50%{text-shadow:0 0 15px rgba(220,53,69,0.8), 0 0 35px rgba(220,53,69,0.4);} }

.n4c-score-glow { text-shadow: 0 0 25px rgba(220,53,69,0.6); animation: n4c-sg 2.5s ease-in-out infinite; }
@keyframes n4c-sg { 0%,100%{text-shadow:0 0 18px rgba(220,53,69,0.4);} 50%{text-shadow:0 0 35px rgba(220,53,69,0.85);} }

/* ── LOW-POWER: Kill all heavy animations ────────────────────────────────── */
body.n4c-low-power .n4c-laser-scan::after, body.n4c-low-power .n4c-shimmer::before,
body.n4c-low-power .n4c-cursor, body.n4c-low-power .n4c-doc-scanner,
body.n4c-low-power .n4c-ambient-wrap, body.n4c-low-power .n4c-grid-overlay { animation: none !important; opacity: 0 !important; display: none !important; }
body.n4c-low-power .n4c-glass-card:hover { box-shadow: none !important; transform: none !important; }
body.n4c-low-power .n4c-nav-glow, body.n4c-low-power .n4c-score-glow { text-shadow: none !important; animation: none !important; }
body.n4c-low-power .n4c-agent-canvas, body.n4c-low-power .n4c-shield-canvas,
body.n4c-low-power .n4c-cloud-canvas, body.n4c-low-power .n4c-soc-canvas { display: none !important; }
body.n4c-low-power .n4c-term-line { opacity: 1 !important; transform: none !important; }
body.n4c-low-power .n4c-extracted-field { opacity: 1 !important; transform: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .n4c-power-toggle { bottom: 80px; right: 16px; padding: 7px 14px; font-size: 0.65rem; }
  .n4c-agent-canvas, .n4c-shield-canvas, .n4c-cloud-canvas, .n4c-soc-canvas { height: 150px; }
  .n4c-split-velocity { grid-template-columns: 1fr; }
  .n4c-glow-orb { filter: blur(60px); opacity: 0.2; }
}

/* Fix for injected hero particle canvases to match index.html exactly */
.hero-particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
}