/* The home page, on top of solo/style.css: the words and the ways in on one side, the map with its
   links on the other, and neither over the other (home.js region() draws the map where this sheet leaves room). Colours are style.css's --s-* properties and sizes are tokens.css's;
   nothing here redefines one. The page's own properties are --h-*. */

html:has(body.home), body.home {
  height: 100%;
  overflow: hidden;
  background: var(--s-sky);
  color: var(--s-text);
  overscroll-behavior: none;
}
body.home {
  font-size: var(--fs-md); line-height: 1.45;
  /* The left edge the name and the words share. */
  --h-left: clamp(24px, 7vw, 112px);
  /* The page's one accent, for its first action: the same as the start of Explore, where it leads. */
  --h-acc: #3fd0a4; --h-acc-ink: #04140f;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.home { --h-acc: #0f8a6a; --h-acc-ink: #fff; }
}
:root[data-theme="light"] body.home { --h-acc: #0f8a6a; --h-acc-ink: #fff; }
.home button { font-family: var(--font); }
.home :focus-visible { outline: 2px solid var(--s-text); outline-offset: 2px; }

/* ------------------------------------------------------------- the map */

#web {
  position: fixed; inset: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform-origin: 74% 50%;
  /* The map fades out before it reaches the words: nothing of it sits under them. */
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 40%, #000 52%);
  transition: opacity 1.2s var(--s-ease);
}
/* The map comes in once it is drawn, then drifts closer, very slowly. */
#web.on { opacity: 1; animation: h-drift 48s ease-in-out infinite alternate; }
@keyframes h-drift {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

/* ------------------------------------------------------------ the top */

.h-top {
  position: fixed; top: var(--pad-lg); left: var(--h-left); right: var(--pad-lg);
  z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--control-h);
}
.h-brand { margin: 0; font-size: var(--fs-xl); }

/* ---------------------------------------------------------- the words */

.h-hero {
  position: fixed; inset: 0;
  z-index: 1;
  overflow-y: auto;
  /* The words down the left, in the middle of the view's height; the map has the right. */
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: var(--pad-lg);
  padding: 96px 56vw 96px var(--h-left);
  pointer-events: none;
}
.h-hero > * { pointer-events: auto; max-width: min(480px, 100%); animation: h-rise 0.7s var(--s-ease) both; }
.h-hero > :nth-child(2) { animation-delay: 0.08s; }
.h-hero > :nth-child(3) { animation-delay: 0.16s; }
@keyframes h-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
/* The one size off the type scale: a page's first line, read from across a room. It grows with the view. */
.h-title { margin: 0; font-size: clamp(34px, 4.2vw, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.h-lede { margin: -4px 0 0; font-size: var(--fs-xl); line-height: 1.55; color: var(--s-muted); text-wrap: pretty; }

.h-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); margin-top: var(--gap); }
.h-act {
  height: var(--control-h); padding: 0 var(--pad);
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--round);
  background: var(--h-acc); color: var(--h-acc-ink);
  font-size: var(--fs-md); font-weight: 700; text-decoration: none;
  transition: transform 0.15s var(--s-ease), background 0.15s;
}
.home a.h-act { color: var(--h-acc-ink); }
.h-act svg { width: 14px; height: 14px; transition: transform 0.15s var(--s-ease); }
.h-act:hover svg { transform: translateX(3px); }
.h-act:active { transform: scale(0.98); }
/* The other two pages: glass, as every panel over the map. */
.h-act.h-soft {
  background: var(--s-panel);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid var(--s-line);
  font-weight: 600;
}
.home a.h-act.h-soft { color: var(--s-text); }
.h-act.h-soft:hover { background: var(--s-raise-2); }

/* ------------------------------------------- the line of words below */

.h-now {
  /* Under the map, in the middle of its side. */
  position: fixed; left: 74%; bottom: var(--pad-lg);
  transform: translateX(-50%);
  z-index: 2;
  margin: 0; width: max-content; max-width: min(480px, 46vw);
  padding: var(--gap) var(--pad);
  border-radius: var(--round);
  text-align: center;
  background: var(--s-panel);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid var(--s-line);
  font-size: var(--fs-sm); color: var(--s-muted);
  pointer-events: none;
}

/* ------------------------------------------------------- a narrow view */

@media (max-width: 899px) {
  /* The map takes the top and the words the bottom. */
  #web {
    transform-origin: 50% 26%;
    -webkit-mask-image: linear-gradient(180deg, #000 38%, transparent 50%);
    mask-image: linear-gradient(180deg, #000 38%, transparent 50%);
  }
  body.home { --h-left: var(--edge); }
  .h-top { top: var(--edge); right: var(--edge); }
  .h-hero { align-content: end; padding: 52vh var(--edge) 40px; gap: var(--pad); }
  .h-hero > * { max-width: min(520px, 100%); }
  .h-lede { font-size: var(--fs-lg); }
  .h-now { display: none; }
}