/* ============================================================
   jmoore.net — personal site
   The photo IS the page: full-bleed background, soft edge fade,
   and frosted contact pills up in the top-right sky. No title.
   Pure CSS, no web fonts, no JS.
   ============================================================ */

:root {
  --text: #f4f1e9;                 /* warm white, for the pills */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;                /* full screen, no scroll */
  background: #8fb0c9;             /* sky tone shown before the photo loads */
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Full-bleed photo ---------- */
.bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  /* Keeps Jordan framed: 1st value = horizontal, 2nd = vertical.
     Nudge these if you want him higher/lower or more to one side. */
  object-position: 40% 35%;
  z-index: 0;
  animation: fade-in 1s ease both;
}

/* ---------- Soft edge fade / vignette ---------- */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(12, 16, 10, 0.22), rgba(12, 16, 10, 0) 20%),
    radial-gradient(135% 105% at 50% 40%,
      rgba(12, 16, 10, 0) 55%, rgba(12, 16, 10, 0.32) 100%);
}

/* ---------- Contact pills, top-right ---------- */
.links {
  position: fixed;
  z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  right: calc(env(safe-area-inset-right, 0px) + 1rem);
  display: flex;
  gap: 0.6rem;
  animation: drop-in 0.6s ease 0.25s both;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(16, 20, 12, 0.36);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  backdrop-filter: blur(9px) saturate(120%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.pill:hover {
  background: rgba(16, 20, 12, 0.52);
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.40);
}
.pill:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
.pill .ico { width: 17px; height: 17px; fill: currentColor; }

/* ---------- Motion ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .bg, .links { animation: none; }
}