:root {
  --navy: #001F3F;
  --teal: #008C8C;
  --cyan: #00BFFF;
  --ink: #eaf6ff;
  --mx: 50%;
  --my: 42%;
}

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

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  position: relative;
  min-height: 100svh;
  background: var(--navy);
  color: var(--ink);
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* ---------- Interactive gradient background ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at var(--mx) var(--my),
      rgba(0, 191, 255, 0.55) 0%,
      rgba(0, 140, 140, 0.38) 22%,
      rgba(0, 31, 63, 0.55) 46%,
      rgba(0, 10, 22, 1) 72%),
    radial-gradient(circle at 50% 50%, #012a4a 0%, #00040a 100%);
  transition: background-color 0.6s ease;
  will-change: background;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Breathing circles ---------- */

.circles {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(234, 246, 255, 0.35);
  opacity: 0;
  animation: breathe 10s ease-in-out infinite;
}

.c1 { width: 22vmin; height: 22vmin; animation-delay: 0s; }
.c2 { width: 38vmin; height: 38vmin; animation-delay: -2s; border-color: rgba(0, 191, 255, 0.3); }
.c3 { width: 56vmin; height: 56vmin; animation-delay: -4s; }
.c4 { width: 76vmin; height: 76vmin; animation-delay: -6s; border-color: rgba(0, 140, 140, 0.28); }
.c5 { width: 98vmin; height: 98vmin; animation-delay: -8s; }

@keyframes breathe {
  0%   { transform: scale(0.85); opacity: 0; }
  15%  { opacity: 0.55; }
  50%  { transform: scale(1.05); opacity: 0.18; }
  85%  { opacity: 0.5; }
  100% { transform: scale(0.85); opacity: 0; }
}

/* ---------- Center content ---------- */

.content {
  position: relative;
  z-index: 3;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vh 6vw 0;
}

.eyebrow {
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0.45em;
  font-weight: 500;
  color: rgba(234, 246, 255, 0.55);
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 1.4s ease forwards 0.2s;
  margin-bottom: clamp(14px, 3vh, 26px);
}

.wordmark {
  font-size: clamp(3rem, 13vw, 8.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #cdeeff 55%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
  filter: drop-shadow(0 0 40px rgba(0, 191, 255, 0.25));
}

.sublink {
  display: inline-block;
  margin-top: clamp(10px, 2vh, 16px);
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  letter-spacing: 0.04em;
  color: rgba(234, 246, 255, 0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 191, 255, 0.35);
  padding-bottom: 2px;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 1.4s ease forwards 0.9s;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.sublink:hover,
.sublink:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

.tagline-wrap {
  margin-top: clamp(20px, 4vh, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.2vh, 18px);
  width: min(90vw, 640px);
}

.rule {
  display: block;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.8), transparent);
  animation: drawLine 1.8s ease forwards 1s;
}

@keyframes drawLine {
  to { width: 100%; }
}

.tagline {
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(234, 246, 255, 0.85);
  min-height: 1.6em;
  opacity: 0;
  transition: opacity 1.1s ease, transform 1.1s ease;
  transform: translateY(6px);
}

.tagline.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Footer ---------- */

.foot {
  position: fixed;
  bottom: clamp(14px, 3vh, 24px);
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 0.08em;
  color: rgba(234, 246, 255, 0.4);
  opacity: 0;
  animation: fadeUp 1.4s ease forwards 1.6s;
}

.foot .dot { opacity: 0.6; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .circle { animation: none; opacity: 0.22; }
  .wordmark, .eyebrow, .foot, .rule { animation-duration: 0.01ms; }
  .bg { transition: none; }
}

@media (max-width: 480px) {
  .circle { border-width: 0.75px; }
}