/* ==========================================================================
   UhAI Intelligence — Animations & Hero Visuals
   ========================================================================== */

@keyframes float-y {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(1.5deg); }
}
@keyframes float-y-rev {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(16px) rotate(-1.5deg); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,136,229,0.4); }
  50% { box-shadow: 0 0 0 14px rgba(30,136,229,0); }
}
@keyframes drift {
  0% { transform: translate(0,0); }
  33% { transform: translate(20px,-24px); }
  66% { transform: translate(-16px,14px); }
  100% { transform: translate(0,0); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes dash {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- Hero stage — light, airy, premium; color arrives as glow, not fill ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--gradient-hero-light);
  color: var(--text-primary);
  overflow: hidden;
  padding-top: var(--header-height);
}
:root[data-theme="dark"] .hero { background: var(--bg-body); }
.hero .blob-a { width: 480px; height: 480px; background: var(--color-sky-500); top: -120px; left: -100px; animation: drift 18s ease-in-out infinite; opacity: 0.22; }
.hero .blob-b { width: 420px; height: 420px; background: var(--color-green-500); bottom: -140px; right: -80px; animation: drift 22s ease-in-out infinite reverse; opacity: 0.16; }
.hero .blob-c { width: 300px; height: 300px; background: var(--color-sky-400); top: 40%; right: 15%; animation: drift 26s ease-in-out infinite; opacity: 0.2; }

.hero-content { position: relative; z-index: 2; padding-block: var(--space-2xl); }
.hero-content h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-size: var(--fs-display-lg);
  max-width: 820px;
  animation: fade-in-up 0.9s var(--ease-out-expo) both;
}
.hero-content .eyebrow { animation: fade-in-up 0.7s var(--ease-out-expo) both; }
.hero-content .lead {
  color: var(--text-secondary);
  max-width: 620px;
  font-size: var(--fs-body-lg);
  animation: fade-in-up 0.9s var(--ease-out-expo) both;
  animation-delay: 0.1s;
}
.hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: var(--space-md);
  animation: fade-in-up 0.9s var(--ease-out-expo) both;
  animation-delay: 0.2s;
}

.hero-visual { position: relative; height: 100%; min-height: 420px; }
.orbit-ring {
  position: absolute; border: 1px solid rgba(7,26,61,0.1); border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
:root[data-theme="dark"] .orbit-ring { border-color: rgba(255,255,255,0.12); }
.orbit-ring.r1 { width: 300px; height: 300px; animation: spin-slow 40s linear infinite; }
.orbit-ring.r2 { width: 420px; height: 420px; animation: spin-slow 60s linear infinite reverse; }
.orbit-ring.r3 { width: 540px; height: 540px; animation: spin-slow 80s linear infinite; }

.core-orb {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(30,136,229,0.65) 40%, rgba(32,166,90,0.55) 100%);
  box-shadow: 0 0 70px rgba(30,136,229,0.45), 0 0 130px rgba(32,166,90,0.3);
  animation: pulse-glow 3.2s ease-in-out infinite;
}

.float-card {
  position: absolute;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(7,26,61,0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 0.82rem; font-weight: 600; color: var(--text-primary);
  box-shadow: var(--shadow-lg), 0 0 22px -6px rgba(30,136,229,0.18);
  animation: float-y 6s ease-in-out infinite, fade-in-up 0.8s var(--ease-out-expo) both;
}
:root[data-theme="dark"] .float-card { background: rgba(16,26,44,0.85); border-color: rgba(255,255,255,0.1); color: var(--text-primary); }
.float-card i { font-size: 1.15rem; color: var(--color-green-600); }
.float-card svg { width: 20px; height: 20px; color: var(--color-green-600); }
.float-card.fc-1 { top: 8%; left: 4%; animation-duration: 7s; animation-delay: 0s, 0.3s; }
.float-card.fc-2 { top: 20%; right: 2%; animation-name: float-y-rev, fade-in-up; animation-duration: 8s, 0.8s; animation-delay: 0s, 0.4s; }
.float-card.fc-2 i { color: var(--color-sky-600); }
.float-card.fc-3 { bottom: 24%; left: 0%; animation-duration: 6.5s; animation-delay: 0s, 0.5s; }
.float-card.fc-4 { bottom: 8%; right: 4%; animation-name: float-y-rev, fade-in-up; animation-duration: 7.5s, 0.8s; animation-delay: 0s, 0.6s; }
.float-card.fc-4 i { color: var(--color-sky-600); }
.float-card.fc-5 { top: 80%; left: 42%; animation-duration: 9s; animation-delay: 0s, 0.7s; }

/* ---- Network graph — connects the hero's ecosystem nodes to the central
   hub with animated, data-flow lines instead of disconnected labels. ---- */
.network-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.network-path {
  fill: none;
  stroke: rgba(255,255,255,0.6);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  animation: dash 1.6s linear infinite;
}
.network-pulse { fill: #fff; filter: drop-shadow(0 0 5px rgba(255,255,255,0.9)); }
.network-pulse.alt { fill: var(--color-green-300); filter: drop-shadow(0 0 5px rgba(126,224,168,0.9)); }

@media (max-width: 992px) {
  .hero-visual { min-height: 320px; margin-top: 2rem; }
  .orbit-ring.r3, .float-card.fc-5 { display: none; }
}
@media (max-width: 640px) {
  .float-card { font-size: 0.72rem; padding: 0.6rem 0.8rem; }
  .orbit-ring.r2 { width: 320px; height: 320px; }
  .orbit-ring.r1 { width: 220px; height: 220px; }
  .core-orb { width: 100px; height: 100px; }
}

/* ---- Counters ---- */
.counter { font-variant-numeric: tabular-nums; }

/* ---- Scroll marquee (trusted partners) ---- */
.marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 32s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text-muted); opacity: 0.7; white-space: nowrap; }

/* ---- DNA / network decorative strand (about, research pages) ---- */
.dna-strand { position: absolute; opacity: 0.5; pointer-events: none; }

/* ---- Gradient border wrap ---- */
.gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: var(--gradient-border);
}
.gradient-border > div { border-radius: calc(var(--radius-lg) - 1px); background: var(--card-bg); height: 100%; }

/* ---- Skeleton shimmer (used for lazy content placeholders) ---- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-surface-alt) 25%, var(--bg-elevated) 37%, var(--bg-surface-alt) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.6s ease infinite;
  border-radius: var(--radius-sm);
}