:root {
  /* Deep Sea palette */
  --abyss: #06202B;
  --foam: #EAF2EF;
  --seafoam: #8CCFC0;
  --foam-quiet: rgba(234, 242, 239, .5);
  /* Critically damped feel: fast start, long settle, no overshoot */
  --settle: cubic-bezier(.16, 1, .3, 1);
}

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

html, body { height: 100%; }

body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--abyss);
  color: var(--foam);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* Dot field behind everything */
#orbit {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0;
  animation: fade 2.4s ease-out .9s forwards;   /* the field arrives after the mark */
}

::selection { background: rgba(140, 207, 192, .3); color: var(--foam); }

main {
  position: relative; z-index: 1;
  overflow: hidden;
  height: 100vh; height: 100svh;
  display: grid; place-items: center;
}

/* The wordmark — the primary logo, materializing from soft focus */
/* Nudged up: the box is centred by the tall "b", which leaves the disc and
   letters sitting low. This puts their weight just above true centre. */
.wordmark { position: relative; display: flex; margin: 0; line-height: 0; translate: 0 -9%; }
.logo {
  display: block;
  width: clamp(140px, min(64vw, 62svh), 520px); height: auto;
  user-select: none; -webkit-user-drag: none;
  opacity: 0;
  animation: materialize 1.2s var(--settle) .15s forwards;
}
@keyframes materialize {
  from { opacity: 0; transform: scale(.94); filter: blur(8px); }
  to   { opacity: 1; transform: none;       filter: blur(0); }
}

@keyframes fade { to { opacity: 1; } }

/* Reduced motion: a gentle cross-fade instead of movement and blur */
@media (prefers-reduced-motion: reduce) {
  .logo, #orbit { animation: fade .6s ease forwards !important; }
}

/* ---------- Contact ---------- */
.contact {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 20px max(28px, env(safe-area-inset-bottom));
  text-align: center;
  opacity: 0;
  animation: fade-up 1.2s var(--settle) 1.5s forwards;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.domain {
  font: 600 13px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .14em;   /* small text needs air */
  color: var(--foam-quiet);   /* a signature, not a second headline */
  padding: 12px calc(16px - .14em) 12px 16px;   /* cancel the trailing letter-space so it centres */
  font-variant-ligatures: none;
}

@media (prefers-reduced-motion: reduce) {
  .contact { animation: fade .6s ease forwards !important; }
}