html { scroll-behavior: smooth; }
body { font-feature-settings: "tnum"; }

[dir="rtl"] .font-mono { font-feature-settings: "tnum"; direction: ltr; unicode-bidi: plaintext; }
[dir="rtl"] body { font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #292929; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* Slow, subtle pulse for ecosystem/3D-placeholder nodes. Communicates signal flow
   without distracting motion, per brand motion rules (slow parallax / tiny pulses only). */
.ecosystem-pulse { animation: raddPulse 3.6s ease-in-out infinite; }
@keyframes raddPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,255,0,0); }
  50% { box-shadow: 0 0 0 6px rgba(198,255,0,0.06); }
}

.fade-in { animation: raddFadeIn .25s ease both; }
@keyframes raddFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.typing-dot { animation: raddTyping 1.2s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes raddTyping { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.focus-ring:focus-visible { outline: 2px solid #C6FF00; outline-offset: 2px; }

/* scrollbar-less horizontal scroll for pricing/demo tabs on mobile */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============ Premium polish layer ============ */

/* Subtle filmic grain overlay — fixed, extremely low opacity, never intercepts clicks.
   Gives the dark surface texture instead of flat color, without any bloom/cyberpunk glow. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Scroll-reveal: sections/cards fade + rise into place once, on first view.
   Respects prefers-reduced-motion via the block below. JS toggles .is-visible. */
/* Gated on html.js (set synchronously in <head>) so content is always visible
   if JavaScript is unavailable — this is a progressive enhancement, not a requirement. */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: .06s; }
.reveal-2 { transition-delay: .12s; }
.reveal-3 { transition-delay: .18s; }
.reveal-4 { transition-delay: .24s; }

/* Premium card: gentle lift + brighten border + soft contact shadow on hover.
   No chrome/bloom — just depth, consistent with matte-black/charcoal material language. */
.card-premium { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease; }
.card-premium:hover {
  transform: translateY(-5px);
  border-color: #3a3a3a;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,0.65), 0 0 0 1px rgba(198,255,0,0.07);
}

/* Primary CTA shine sweep — a single soft light pass on hover, not a persistent glow. */
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(.16,1,.3,1);
}
.btn-shine:hover::after { left: 130%; }

/* Hero core node: slow ambient drift, independent from the pulse ring animation. */
.core-float { animation: raddFloat 6s ease-in-out infinite; }
@keyframes raddFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Numbered/label chips get a hairline inner highlight for a more tactile, machined feel. */
.panel-inset { box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.03); }

@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .core-float { animation: none; }
}