:root {
  color-scheme: light;
  --ink: #09090b;
  --signal: #2563eb;
  --accent: #0ea5e9;
  --mist: #fafafa;
  --panel: #f4f4f5;
  --muted: #71717a;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 12% 18%, rgba(37, 99, 235, 0.16), transparent 55%),
    radial-gradient(ellipse 55% 45% at 88% 22%, rgba(14, 165, 233, 0.12), transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(244, 244, 245, 0.95), transparent 55%),
    linear-gradient(160deg, #fafafa 0%, #f4f4f5 42%, #eff6ff 100%);
}

.process-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
}

.logo-mark {
  display: inline-flex;
  transition: transform 0.35s ease;
}

.group:hover .logo-mark {
  transform: scale(1.04);
}

.hero-graphic {
  animation: rise-in 0.9s ease-out both;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: -80;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.85);
  }
}

.float-a {
  animation: float-y 5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.float-b {
  animation: float-y 6.5s ease-in-out infinite 0.4s;
  transform-box: fill-box;
  transform-origin: center;
}

.float-c {
  animation: float-y 4.5s ease-in-out infinite 0.8s;
  transform-box: fill-box;
  transform-origin: center;
}

.dash-flow {
  animation: dash 2.4s linear infinite;
}

.dash-flow-slow {
  animation: dash 3.6s linear infinite;
}

.pulse-dot {
  animation: pulse 2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .float-a,
  .float-b,
  .float-c,
  .dash-flow,
  .dash-flow-slow,
  .pulse-dot,
  .hero-graphic {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}