/* Colour tokens */
:root {
  --beam: #3b82f6;
  --cyan: #06b6d4;
  --void: #020617;
}

/* Base */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--void);
  color: #e6edf9;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Background field */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.field::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(59, 130, 246, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, .055) 1px, transparent 1px);
  background-size: 64px 64px;

  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 78%);
}

.pool {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: .5;
}

.pool-a {
  top: -14rem;
  right: -10rem;
  width: 40rem;
  height: 40rem;
  background: radial-gradient(circle, rgba(59, 130, 246, .30), transparent 68%);
  animation: drift 26s ease-in-out infinite alternate;
}

.pool-b {
  top: 46%;
  left: -14rem;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, rgba(6, 182, 212, .20), transparent 68%);
  animation: drift 34s ease-in-out infinite alternate-reverse;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3rem, 3.5rem, 0) scale(1.12); }
}

/* Glass panels */
.glass {
  background: linear-gradient(160deg, rgba(15, 28, 54, .72), rgba(6, 13, 30, .55));
  border: 1px solid rgba(59, 130, 246, .16);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 1rem;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

.glass-hover:hover,
.glass-hover:focus-within {
  border-color: rgba(6, 182, 212, .45);

  box-shadow:
    0 0 0 1px rgba(6, 182, 212, .12),
    0 18px 50px -22px rgba(59, 130, 246, .55);

  transform: translateY(-3px);
}

/* Dividers and labels */
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .35), transparent);
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #4d9dfa;
}

/* Gradient text */
.grad-text {
  background: linear-gradient(105deg, #ffffff 8%, #7cc4fb 48%, #22d3ee 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons */
.btn-solid {
  position: relative;
  background: linear-gradient(100deg, var(--beam), var(--cyan));
  color: #02101f;
  font-weight: 600;
  transition: box-shadow .3s ease, transform .3s ease, filter .3s ease;
}

.btn-solid:hover {
  box-shadow: 0 12px 38px -12px rgba(6, 182, 212, .75);
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.btn-ghost {
  border: 1px solid rgba(59, 130, 246, .35);
  color: #cfe2ff;
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.btn-ghost:hover {
  background: rgba(59, 130, 246, .12);
  border-color: rgba(6, 182, 212, .6);
  transform: translateY(-2px);
}

/* Focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 3px;
  border-radius: .4rem;
}

/* Navigation links */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -.4rem;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--beam), var(--cyan));
  transition: width .3s ease;
}

.nav-link:hover::after,
.nav-link[data-active="true"]::after {
  width: 100%;
}

.nav-link[data-active="true"] {
  color: #eaf3ff;
}

/* Hero graphic */
.ring {
  transform-origin: 50% 50%;
}

.spin-slow    { animation: spin 34s linear infinite; }
.spin-reverse { animation: spin 24s linear infinite reverse; }
.spin-fast    { animation: spin 15s linear infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.pulse-node {
  animation: pulse-node 3.2s ease-in-out infinite;
}

@keyframes pulse-node {
  0%, 100% { opacity: .35; r: 3; }
  50%      { opacity: 1;   r: 4.6; }
}

/* Timeline */
.spine {
  background: linear-gradient(180deg,
    rgba(59, 130, 246, .55),
    rgba(6, 182, 212, .25),
    transparent);
}

.packet {
  animation: fall 5.5s linear infinite;
}

@keyframes fall {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(var(--spine-h, 420px)); opacity: 0; }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
}

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

/* Tags */
.tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  border: 1px solid rgba(59, 130, 246, .28);
  background: rgba(59, 130, 246, .08);
  color: #a9c8f5;
  border-radius: 9999px;
  padding: .28rem .7rem;
}

/* Form controls */
.field-input {
  background: rgba(2, 10, 26, .6);
  border: 1px solid rgba(59, 130, 246, .2);
  color: #e6edf9;
  border-radius: .6rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.field-input::placeholder {
  color: #5d739a;
}

.field-input:focus {
  border-color: rgba(6, 182, 212, .6);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .12);
  outline: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

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