@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

/* Custom utility for the nexus gradient */
.gradient-nexus {
  background: linear-gradient(160deg, #36a8c2 0%, #2d98b2 55%, #246d80 100%);
}

/* Animations for the nexus stage */
.nexus-stage svg { overflow: visible; }
.nexus-stage .reveal { opacity: 0; }
.nexus-stage .vertex, .nexus-stage .label, .nexus-stage .core, .nexus-stage .ring { 
  transform-box: fill-box; 
  transform-origin: center; 
}
.nexus-stage.is-active .vertex-top { animation: nx-popIn 0.7s cubic-bezier(.34,1.56,.64,1) 0.20s forwards; }
.nexus-stage.is-active .vertex-bl  { animation: nx-popIn 0.7s cubic-bezier(.34,1.56,.64,1) 1.10s forwards; }
.nexus-stage.is-active .vertex-br  { animation: nx-popIn 0.7s cubic-bezier(.34,1.56,.64,1) 2.00s forwards; }

.nexus-stage.is-active .label-top { animation: nx-rise 0.6s ease-out 0.55s forwards; }
.nexus-stage.is-active .label-bl  { animation: nx-rise 0.6s ease-out 1.45s forwards; }
.nexus-stage.is-active .label-br  { animation: nx-rise 0.6s ease-out 2.35s forwards; }

.nexus-stage .edge { stroke-dasharray: 700; stroke-dashoffset: 700; }
.nexus-stage.is-active .edge-1 { animation: nx-draw 0.9s ease-out 0.85s forwards; }
.nexus-stage.is-active .edge-2 { animation: nx-draw 0.9s ease-out 1.75s forwards; }
.nexus-stage.is-active .edge-3 { animation: nx-draw 0.9s ease-out 2.65s forwards; }

.nexus-stage.is-active .core { animation: nx-fade 1.2s ease-out 4.00s forwards; }
.nexus-stage.is-active .ring { animation: nx-spin 22s linear 7.5s infinite; }

.nexus-stage.is-active .cycle-1 { animation: nx-fade 0.5s ease-out 5.20s forwards; }
.nexus-stage.is-active .cycle-2 { animation: nx-fade 0.5s ease-out 5.55s forwards; }
.nexus-stage.is-active .cycle-3 { animation: nx-fade 0.5s ease-out 5.90s forwards; }
.nexus-stage.is-active .cycle-4 { animation: nx-fade 0.5s ease-out 6.25s forwards; }
.nexus-stage.is-active .cycle-5 { animation: nx-fade 0.5s ease-out 6.60s forwards; }
.nexus-stage.is-active .cycle-6 { animation: nx-fade 0.5s ease-out 6.95s forwards; }

@keyframes nx-popIn { 0%{opacity:0;transform:scale(0)} 100%{opacity:1;transform:scale(1)} }
@keyframes nx-rise  { 0%{opacity:0;transform:translateY(8px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes nx-draw  { to { stroke-dashoffset: 0; } }
@keyframes nx-fade  { to { opacity: 1; } }
@keyframes nx-spin  { from{transform:rotate(0)} to{transform:rotate(360deg)} }

@media (prefers-reduced-motion: reduce) { 
  .nexus-stage .reveal, .nexus-stage .vertex, .nexus-stage .label, .nexus-stage .edge, .nexus-stage .core, .nexus-stage .ring { opacity: 1 !important; animation: none !important; } 
  .nexus-stage .edge { stroke-dashoffset: 0; } 
}

/* Proof SVG Circle Animation */
.circle-word { position: relative; display: inline-block; padding: 4px 10px; }
.circle-word .circle-svg { position: absolute; left: 0; top: 50%; width: 110%; height: 220%; transform: translate(-5%, -50%); pointer-events: none; overflow: visible; }
.circle-word .circle-path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 480; stroke-dashoffset: 480; }
.proof-tag.is-circled .circle-word .circle-path { animation: proof-circle-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes proof-circle-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .circle-word .circle-path { stroke-dashoffset: 0; animation: none; } }

/* Hero Gradient Overlay */
.hero-gradient-overlay {
  background: linear-gradient(95deg,
    rgba(15, 41, 55, 0.92) 0%, rgba(15, 41, 55, 0.78) 28%,
    rgba(15, 41, 55, 0.35) 55%, rgba(15, 41, 55, 0) 78%);
}