/* Home: the first screen is the window exactly. The name wall fills it (assets/js/names-wall.js),
   the question and the search sit underneath, and a plain click on a name opens its project
   card. The page goes on below (home-below.css). */

.home { overflow-x: hidden; }
.first {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.home-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The wall takes whatever height the question and the box leave. */
.names-wall {
  position: relative;
  flex: 1;
  min-height: 300px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.names-wall.is-ready { opacity: 1; } /* only once the fonts are in and the rows are laid out */


/* At rest: rows bent like a cinema screen (placed by script). */
.curve {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  transition: opacity 520ms var(--ease), filter 520ms var(--ease);
}
.curve-field { position: absolute; inset: 0; transform-style: preserve-3d; }
.cn {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  font-size: clamp(2rem, 0.8rem + 3.8vw, 4.6rem);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
  will-change: transform;
  transition: color 320ms var(--ease);
}
.cn sup { font-family: var(--font-mono); font-size: 0.16em; letter-spacing: var(--tracking-label); color: var(--ink-3); transform: translateY(-1.8em); }
.cn.k-Teaching { color: var(--ink-2); }
.cn.k-Experiment { color: var(--ink-3); }
.names-wall.has-hover .cn { color: var(--ink-4); }
.cn.hint, .names-wall.has-hover .cn.on { color: var(--ink); }

/* The leaving copy fades first and the arriving one after it, so they never overlap. */
.cn .ts { transition: opacity 160ms ease-in 140ms; }
.cn .ti { opacity: 0; transition: opacity 160ms ease-in; }
.cn.hint .ti, .names-wall.has-hover .cn.on .ti { opacity: 1; transition: opacity 200ms ease-out 140ms; }
.cn.hint .ts, .names-wall.has-hover .cn.on .ts { opacity: 0; transition: opacity 140ms ease-in; }

/* Behind the answer the names, which have stopped by now, blur themselves once:
   a still layer, cheap, instead of a backdrop blur over moving 3D text. */
.names-wall.is-listing .curve { opacity: 0.32; filter: blur(7px); pointer-events: none; }

/* A pale wash where the drum stands. */
.wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 70% at 50% 50%, color-mix(in srgb, var(--paper) 70%, transparent) 40%, transparent 100%);
  opacity: 0;
  transition: opacity 520ms var(--ease);
}
.names-wall.is-listing .wash { opacity: 1; }

/* The answer: a drum of names turning on a horizontal axis; the wheel or ↑ ↓ turn it. */
.drum {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1000px;
  pointer-events: none;
}
.drum.is-active { pointer-events: auto; }
.drum-axis { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }

/* Every drum name is the same grid: a right-aligned label column, the mark, the title,
   the number. With one shared left edge they stack in clean columns. */
.dn {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  grid-template-columns: 1.7em auto auto auto;
  align-items: baseline;
  column-gap: 0.32em;
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3.6rem);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
}
.dn .k { justify-self: end; font-family: var(--font-mono); font-size: 0.2em; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
.dn sup { font-family: var(--font-mono); font-size: 0.2em; color: var(--ink-3); transform: translateY(-1.6em); }
.dn .tw { justify-self: start; }
/* --ts / --ti are set by script as a name nears the front; hovering also brings it up. */
.dn .ti { opacity: var(--ti, 0); }
.dn .ts { opacity: var(--ts, 1); }
.dn:hover .ti { opacity: 1; }
.dn:hover .ts { opacity: 0; }
.drum .none { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); color: var(--ink-3); }


/* The question and the box, under the wall. */
.home .stage {
  flex: none;
  padding: var(--s-4) var(--gutter) var(--s-5);
}
.beneath a.all { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 3px; }

@media (max-width: 700px) {
  .names-wall { min-height: 260px; }
  .cn { font-size: 26px; } /* with the flat, dense rows set in names-wall.js */
}

/* Typing on a phone (home.js): the wall and the box are pinned to what the keyboard leaves
   of the screen. The first screen keeps its height underneath, so nothing below moves. */
.is-typing .home-main {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--vvt, 0px);
  height: var(--vvh, 100dvh);
  z-index: 20;
  background: var(--paper);
}
.is-typing .names-wall { min-height: 0; }
.is-typing .home .stage { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.is-typing .prompt { display: none; }
/* Turned by a finger (names-wall.js), so the page must not take the swipe. */
.drum.is-active { touch-action: none; }