/* ============================================================
   MULEGRAPH — Motion System  v3
   Philosophy: "calm precision, sharp signal"
   - Smooth cubic easing everywhere
   - Lime = signal accent only (not decoration)
   - No 3D, no tilt, no clutter
   ============================================================ */

/* ── Custom easing ──────────────────────────────────────────── */
:root {
  --smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --expo:   cubic-bezier(0.16, 1.00, 0.30, 1.00);
}

/* ═══════════════════════════════════════════════════════════
   CANVAS
   ═══════════════════════════════════════════════════════════ */
#network-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* hero-only: fade to nothing below 55vh */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 35%,
    rgba(0,0,0,0.15) 65%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 35%,
    rgba(0,0,0,0.15) 65%,
    transparent 100%
  );
}

/* stacking */
#lang-screen { position: fixed;    z-index: 9998; }
#nav         { position: fixed;    z-index: 100;  }
section,
footer       { position: relative; z-index: 1;    }

/* ═══════════════════════════════════════════════════════════
   LANGUAGE SELECTION MODAL
   ═══════════════════════════════════════════════════════════ */
#lang-screen {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(9, 9, 11, 0.82);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  /* fade in */
  animation: langIn 600ms var(--expo) both;
}

@keyframes langIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* dismiss — smooth fade + blur release */
#lang-screen.hidden {
  animation: langOut 380ms var(--smooth) forwards;
  pointer-events: none;
}

@keyframes langOut {
  from { opacity: 1; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
  to   { opacity: 0; backdrop-filter: blur(0px);  -webkit-backdrop-filter: blur(0px);  }
}

/* lang card entrance */
.lang-card {
  position: relative;
  cursor: pointer;
  transition:
    border-color 300ms var(--smooth),
    box-shadow   300ms var(--smooth),
    transform    300ms var(--spring);
  animation: cardIn 500ms var(--expo) both;
}
.lang-card:nth-child(1) { animation-delay: 320ms; }
.lang-card:nth-child(2) { animation-delay: 460ms; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* lime border glow on hover — clean, no fill change */
.lang-card:hover {
  border-color: var(--lime);
  box-shadow:
    0 0 0 1px var(--lime),
    0 0 28px rgba(184, 255, 44, 0.15);
  transform: translateY(-3px);
}

/* signal dot */
.lang-card__signal {
  position: absolute;
  top: 14px; right: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0;
  box-shadow: 0 0 8px var(--lime);
  transition: opacity 250ms var(--smooth);
}
.lang-card:hover .lang-card__signal { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL
   threshold 0.28 + rootMargin -60px = well into viewport
   ═══════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity   800ms var(--expo),
    transform 800ms var(--expo);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="left"] {
  transform: translateX(-40px);
}
[data-reveal="left"].is-visible {
  transform: translateX(0);
}

[data-reveal="right"] {
  transform: translateX(40px);
}
[data-reveal="right"].is-visible {
  transform: translateX(0);
}

/* ═══════════════════════════════════════════════════════════
   HERO HEADLINE — word-by-word rise
   ═══════════════════════════════════════════════════════════ */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.14em;
}
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(105%);
  transition:
    opacity   700ms var(--expo),
    transform 700ms var(--expo);
}
.headline-animated .word { opacity: 1; transform: translateY(0); }
.headline-animated .word-wrap:nth-child(1) .word { transition-delay: 80ms; }
.headline-animated .word-wrap:nth-child(2) .word { transition-delay: 200ms; }
.headline-animated .word-wrap:nth-child(3) .word { transition-delay: 320ms; }
.headline-animated .word-wrap:nth-child(4) .word { transition-delay: 440ms; }
.headline-animated .word-wrap:nth-child(5) .word { transition-delay: 560ms; }

/* lime underline draws in after headline */
.hero__sub {
  position: relative;
  display: inline;
}
.hero__sub::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1.5px;
  background: var(--lime);
  box-shadow: 0 0 10px rgba(184, 255, 44, 0.5);
  transition: width 1000ms var(--expo);
  transition-delay: 1000ms;
}
.hero__content.is-visible .hero__sub::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   HERO EYEBROW — neon dot blink (slow, natural)
   ═══════════════════════════════════════════════════════════ */
@keyframes dotBlink {
  0%, 90%, 100% { opacity: 1;   filter: drop-shadow(0 0 3px var(--lime)); }
  95%            { opacity: 0.2; filter: none; }
}
.hero__eyebrow i {
  animation: dotBlink 5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   NAV — smooth shrink on scroll
   ═══════════════════════════════════════════════════════════ */
#nav {
  transition:
    height     300ms var(--smooth),
    background 300ms var(--smooth),
    box-shadow 300ms var(--smooth);
}
#nav.nav--scrolled {
  height: 58px;
  background: rgba(9, 9, 11, 0.94);
  box-shadow: 0 1px 0 rgba(184, 255, 44, 0.06), 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   CTA BUTTON — clean shimmer + lime glow on hover
   ═══════════════════════════════════════════════════════════ */
.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--purple-1);
  transition:
    transform    280ms var(--spring),
    box-shadow   280ms var(--smooth);
}
/* shimmer streak */
.btn--primary::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 80%
  );
  transform: skewX(-18deg);
  transition: left 520ms var(--smooth);
}
.btn--primary:hover::before { left: 160%; }
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 20px rgba(184, 255, 44, 0.22),
    0 4px 20px rgba(108, 43, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   SECTION LABEL — gentle lime icon glow
   ═══════════════════════════════════════════════════════════ */
@keyframes labelGlow {
  0%, 100% { color: var(--purple-2); }
  50%       { color: var(--lime); filter: drop-shadow(0 0 5px rgba(184,255,44,0.6)); }
}
.section-label i {
  animation: labelGlow 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   LIVE PULSE — status dot
   ═══════════════════════════════════════════════════════════ */
@keyframes liveDot {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.3; transform: scale(0.65); }
}
.mulebank__status i,
.lang-live-dot i {
  display: inline-block;
  animation: liveDot 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   CARDS — hover: subtle lime accent only, NO tilt
   ═══════════════════════════════════════════════════════════ */
.eco-card,
.risk-card,
.flow-step {
  transition:
    border-color 280ms var(--smooth),
    box-shadow   280ms var(--smooth);
  will-change: auto;
}

/* eco-card: left lime bar */
.eco-card {
  position: relative;
  overflow: hidden;
}
.eco-card::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center;
  transition:
    opacity   300ms var(--smooth),
    transform 400ms var(--spring);
}
.eco-card:hover::before { opacity: 0.8; transform: scaleY(1); }
.eco-card:hover {
  border-color: rgba(184, 255, 44, 0.2);
  box-shadow: 0 0 0 1px rgba(184,255,44,0.1), 0 8px 40px rgba(108,43,255,0.12);
}

/* risk card: lime top line */
.risk-card {
  position: relative;
  overflow: hidden;
}
.risk-card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow: 0 0 8px var(--lime);
  opacity: 0;
  transition: opacity 280ms var(--smooth);
}
.risk-card:hover::after { opacity: 1; }
.risk-card:hover {
  border-color: rgba(184, 255, 44, 0.18);
  box-shadow: 0 0 0 1px rgba(184,255,44,0.08), 0 6px 32px rgba(108,43,255,0.14);
}

/* flow step: icon neon on hover */
.flow-step:hover {
  border-color: rgba(184, 255, 44, 0.15);
  box-shadow: 0 4px 24px rgba(108, 43, 255, 0.12);
}
.flow-step:hover .flow-step__icon {
  background: rgba(184, 255, 44, 0.06);
  border-color: rgba(184, 255, 44, 0.25);
}
.flow-step:hover .flow-step__icon i {
  color: var(--lime);
  filter: drop-shadow(0 0 4px rgba(184,255,44,0.6));
}

/* ═══════════════════════════════════════════════════════════
   FLOW CONNECTOR LINE — draw on scroll-enter
   ═══════════════════════════════════════════════════════════ */
.flow__grid::before {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1000ms var(--expo);
}
.flow__grid.flow-line-drawn::before { transform: scaleX(1); }

/* ═══════════════════════════════════════════════════════════
   ASSET SLOTS — subtle neon scan on hover
   ═══════════════════════════════════════════════════════════ */
.asset-slot {
  position: relative;
  overflow: hidden;
  transition:
    border-color 300ms var(--smooth),
    box-shadow   300ms var(--smooth);
}

/* scan line — only on hover */
@keyframes scanPass {
  0%   { top: -1px; opacity: 0.7; }
  100% { top: 101%; opacity: 0;   }
}
.asset-slot::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 40%, var(--lime) 60%, transparent 100%);
  box-shadow: 0 0 6px var(--lime);
  opacity: 0;
}
.asset-slot:hover::after {
  animation: scanPass 1.4s linear infinite;
}
.asset-slot:hover {
  border-color: rgba(184, 255, 44, 0.2);
  box-shadow: 0 0 40px rgba(184, 255, 44, 0.04), inset 0 0 60px rgba(108,43,255,0.03);
}

/* ═══════════════════════════════════════════════════════════
   RISK DECISION — neon label glow
   ═══════════════════════════════════════════════════════════ */
.risk-card__state--allow { text-shadow: 0 0 18px rgba(184,255,44,0.35); }
.risk-card__state--alert { text-shadow: 0 0 18px rgba(108,43,255,0.45); }
.risk-card__state--hold  { text-shadow: 0 0 18px rgba(167,139,250,0.4); }

/* ═══════════════════════════════════════════════════════════
   CASE STEPS — slide in one by one
   ═══════════════════════════════════════════════════════════ */
.case-step {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity   500ms var(--expo),
    transform 500ms var(--expo);
}
.case-step.step-active {
  opacity: 1;
  transform: translateX(0);
}
/* active dot → lime tint */
.case-step__dot--active {
  border-color: rgba(184,255,44,0.35) !important;
  background: rgba(184,255,44,0.07) !important;
}
.case-step__dot--active i { color: var(--lime) !important; }

/* ═══════════════════════════════════════════════════════════
   SIGNAL LIST — slide right on hover
   ═══════════════════════════════════════════════════════════ */
.signal-list li {
  transition:
    color     250ms var(--smooth),
    transform 250ms var(--smooth);
}
.signal-list li:hover {
  color: var(--white);
  transform: translateX(5px);
}
.signal-list li:hover i {
  color: var(--lime);
  filter: drop-shadow(0 0 3px var(--lime));
}

/* ═══════════════════════════════════════════════════════════
   PILLS — lime neon on hover
   ═══════════════════════════════════════════════════════════ */
.pill {
  transition:
    background   250ms var(--smooth),
    border-color 250ms var(--smooth),
    color        250ms var(--smooth),
    transform    250ms var(--spring),
    box-shadow   250ms var(--smooth);
}
.pill:hover {
  background: rgba(184, 255, 44, 0.05);
  border-color: rgba(184, 255, 44, 0.4);
  color: var(--lime);
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(184, 255, 44, 0.12);
}
.pill:hover i { color: var(--lime); }

/* ═══════════════════════════════════════════════════════════
   PARTICLE BURST (CTA click)
   ═══════════════════════════════════════════════════════════ */
@keyframes burstOut {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx),var(--ty)) scale(0); }
}
.burst-dot {
  position: fixed;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 6px var(--lime);
  pointer-events: none;
  z-index: 9999;
  margin: -2.5px 0 0 -2.5px;
  animation: burstOut 650ms var(--expo) forwards;
}

/* ═══════════════════════════════════════════════════════════
   LOGO PLACEHOLDER — soft shimmer
   ═══════════════════════════════════════════════════════════ */
@keyframes shimmerSlide {
  from { background-position: -300px 0; }
  to   { background-position:  300px 0; }
}
.nav__logo-slot,
.lang-screen__logo-slot {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    rgba(184,255,44,0.03) 50%,
    var(--surface-2) 75%
  );
  background-size: 600px 100%;
  animation: shimmerSlide 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   SECTION TOP ACCENT
   ═══════════════════════════════════════════════════════════ */
section:not(#hero)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(184,255,44,0.12) 25%,
    rgba(108,43,255,0.2)  50%,
    rgba(184,255,44,0.12) 75%,
    transparent 100%
  );
}

/* ═══════════════════════════════════════════════════════════
   REDUCE MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  #network-canvas { display: none; }
}