@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111318;
  font-family: 'Lexend', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Full-screen container ── */
.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Animated gradient mesh — pure CSS, no JS ── */
.gradient-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  filter: blur(45px);
  opacity: 0.9;
}

.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* Blue — wide, gentle, nearly circular orbit */
.blob--1 {
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  top: calc(50% - 25vw);
  left: calc(50% - 25vw);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.9) 0%, rgba(29, 78, 216, 0.4) 50%, transparent 75%);
  animation: orbitBlue 22s linear infinite;
}

/* Purple — tilted elliptical orbit */
.blob--2 {
  width: 48vw;
  height: 48vw;
  max-width: 680px;
  max-height: 680px;
  top: calc(50% - 24vw);
  left: calc(50% - 24vw);
  background: radial-gradient(circle, rgba(147, 51, 234, 0.85) 0%, rgba(124, 58, 237, 0.38) 50%, transparent 75%);
  animation: orbitPurple 18s linear infinite;
}

/* Teal — THE SATELLITE: highly eccentric Kepler orbit */
/* Slingshots fast through periapsis (near center), crawls at apoapsis (far) */
.blob--3 {
  width: 42vw;
  height: 42vw;
  max-width: 580px;
  max-height: 580px;
  top: calc(50% - 21vw);
  left: calc(50% - 21vw);
  background: radial-gradient(circle, rgba(6, 182, 212, 0.9) 0%, rgba(20, 184, 166, 0.4) 50%, transparent 75%);
  animation: orbitTeal 11s linear infinite;
}

/* Violet — fast inner orbit, moderate eccentricity */
.blob--4 {
  width: 36vw;
  height: 36vw;
  max-width: 500px;
  max-height: 500px;
  top: calc(50% - 18vw);
  left: calc(50% - 18vw);
  background: radial-gradient(circle, rgba(168, 85, 247, 0.8) 0%, rgba(139, 92, 246, 0.35) 50%, transparent 75%);
  animation: orbitViolet 14s linear infinite;
}

/* ── Orbital keyframes ── */

/* Blue: wide, gentle, nearly circular — steady speed */
@keyframes orbitBlue {
  0%   { transform: translate(22vw, 0) scale(1); }
  25%  { transform: translate(2vw, 19vw) scale(1.06); }
  50%  { transform: translate(-24vw, 2vw) scale(1.1); }
  75%  { transform: translate(-2vw, -19vw) scale(1.04); }
  100% { transform: translate(22vw, 0) scale(1); }
}

/* Purple: tilted ellipse — steady speed */
@keyframes orbitPurple {
  0%   { transform: translate(-18vw, -14vw) scale(1.05); }
  25%  { transform: translate(15vw, -17vw) scale(0.92); }
  50%  { transform: translate(20vw, 13vw) scale(1.1); }
  75%  { transform: translate(-13vw, 19vw) scale(0.95); }
  100% { transform: translate(-18vw, -14vw) scale(1.05); }
}

/* Teal: KEPLER SATELLITE — highly eccentric elliptical orbit
   Periapsis (near center): 0%, 85-100% → bunched keyframes = FAST
   Apoapsis (far from center): 15-85% → spread keyframes = SLOW crawl */
@keyframes orbitTeal {
  /* ---- Periapsis: FAST slingshot near center ---- */
  0%   { transform: translate(10vw, 0) scale(1.35); }
  6%   { transform: translate(5vw, 11vw) scale(1.2); }
  13%  { transform: translate(-8vw, 15vw) scale(1.0); }
  /* ---- Apoapsis: SLOW far-side crawl ---- */
  28%  { transform: translate(-26vw, 10vw) scale(0.75); }
  42%  { transform: translate(-32vw, 0) scale(0.7); }
  56%  { transform: translate(-28vw, -9vw) scale(0.72); }
  72%  { transform: translate(-14vw, -16vw) scale(0.85); }
  /* ---- Return periapsis: FAST swing back ---- */
  85%  { transform: translate(-2vw, -13vw) scale(1.05); }
  93%  { transform: translate(7vw, -7vw) scale(1.25); }
  100% { transform: translate(10vw, 0) scale(1.35); }
}

/* Violet: moderately eccentric, fast inner orbit
   Slight Kepler effect — faster on the near pass */
@keyframes orbitViolet {
  0%   { transform: translate(7vw, -2vw) scale(1.18); }
  10%  { transform: translate(-3vw, -13vw) scale(1.0); }
  30%  { transform: translate(-17vw, -5vw) scale(0.82); }
  50%  { transform: translate(-14vw, 10vw) scale(0.85); }
  72%  { transform: translate(0vw, 14vw) scale(0.95); }
  88%  { transform: translate(9vw, 4vw) scale(1.12); }
  100% { transform: translate(7vw, -2vw) scale(1.18); }
}

/* ── Vignette to darken edges and ground the dark-gray feel ── */
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(17, 19, 24, 0.35) 0%, rgba(17, 19, 24, 0.92) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Center text ── */
.content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 700px;
}

.headline {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #f0f0f2;
  margin-bottom: 0;
  white-space: nowrap;
}

.headline a {
  color: #38bdf8;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 0 2px;
  transition: color 0.3s ease, text-shadow 0.35s ease;
}

.headline a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #a855f7);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease, background 0.35s ease;
}

.headline a:hover {
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(37, 99, 235, 0.9),
    0 0 20px rgba(147, 51, 234, 0.7),
    0 0 40px rgba(6, 182, 212, 0.5),
    0 0 60px rgba(168, 85, 247, 0.35),
    0 0 90px rgba(37, 99, 235, 0.2);
}

.headline a:hover::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, #38bdf8, #ec4899);
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .gradient-canvas {
    filter: blur(70px);
  }
  .content {
    padding: 1.25rem;
  }
}