/* The shell: a full-bleed stage, quiet page furniture, and the click spark. */

@view-transition { navigation: auto; }

:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #fff;
  --dim: #8a8a8a;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ui: "IBM Plex Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --gutter: max(16px, 4.5vw);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fff;
  --fg: #000;
  --dim: #767676;
}

/* Reveal (three quick taps): the whole page inverts, and the poster draws what it is made of over it. */
html { transition: filter 0.45s ease; }
html.revealed { filter: invert(1); }
@media (prefers-reduced-motion: reduce) { html { transition: none; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 12px/1.5 var(--mono);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none;      /* a long press on a poster must not select the page */
  -webkit-touch-callout: none;
}
.tune, .tune textarea, .tune input { -webkit-user-select: text; user-select: text; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- stage ---------- */
.stage {
  position: fixed; inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  background: var(--bg);
  transition: opacity 180ms ease;
}
.stage.swap { opacity: 0; transition-duration: 90ms; }
.colour-pass { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; }
.colour-pass.on { opacity: 1; }   /* the colour pass (src/colour.js): a gradient blended over the stage */
.stage.colour-dark .poster-canvas { filter: brightness(1.9); transition: filter 0.9s ease; }
.poster-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Shown when WebGL is unavailable or a poster fails: the words, set big, no tricks. */
.fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: var(--gutter) var(--gutter) 120px;
  font: 900 min(26vw, 30vh)/0.86 var(--display);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-transform: uppercase;
  pointer-events: none;
}

/* ---------- page furniture ---------- */
.chrome {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 0 var(--gutter) calc(max(14px, 2vh) + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "id actions";
  align-items: end;
  gap: 6px 20px;
  color: var(--dim);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }
.id { grid-area: id; display: flex; flex-direction: column; gap: 0; min-width: 0; }
/* the page's own words can be selected and copied; the controls and the poster cannot */
.id, .links { -webkit-user-select: text; user-select: text; cursor: text; }
.links a { cursor: pointer; }
.chrome button { -webkit-user-select: none; user-select: none; }
.who { width: fit-content; max-width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.7em; }
/* the tagline and the links share one slot, so the swap never changes the box and hover cannot flicker */
.slot { display: inline-grid; }
.slot > * { grid-area: 1 / 1; }
.links { display: flex; gap: 16px; visibility: hidden; }
.chrome .links a { padding-block: 0; line-height: inherit; }
.who.open .role, .who:has(:focus-visible) .role { visibility: hidden; }
.who.open .links, .who:has(:focus-visible) .links { visibility: visible; }
@media (hover: hover) {
  .who:hover .role { visibility: hidden; }
  .who:hover .links { visibility: visible; }
}
.id .name { color: var(--fg); font-weight: 500; text-align: left; }
.id .role { color: var(--dim); }
#tagline { color: var(--dim); opacity: 0.78; }
.folio { opacity: 0.9; }
.actions { grid-area: actions; display: flex; gap: 6px; justify-content: flex-end; align-items: flex-end; }

.chrome a, .chrome button {
  font: inherit; color: inherit; background: none; border: 0; padding: 8px 0; margin: 0;
  text-decoration: none; cursor: pointer; line-height: 1.2;
}
.actions button { padding: 8px 10px; margin: -8px -4px; }
.chrome .id .name { padding-block: 0; cursor: pointer; }
.chrome a:hover, .chrome button:hover { color: var(--fg); }
.chrome a:focus-visible, .chrome button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; color: var(--fg); }

.hint {
  position: fixed; z-index: 30; left: 50%; bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  color: var(--dim);
  opacity: 0; transition: opacity 600ms ease;
  pointer-events: none;
  white-space: nowrap;
}
.hint.on { opacity: 1; }

#toast {
  position: fixed; z-index: 40; top: calc(max(14px, 2vh) + env(safe-area-inset-top, 0px)); right: var(--gutter);
  color: var(--dim); opacity: 0; transition: opacity 400ms ease; pointer-events: none;
}
#toast.on { opacity: 1; }

/* ---------- click spark: ascii glyphs that pop and fade ---------- */
.spark {
  position: fixed; z-index: 25; pointer-events: none;
  font: 700 14px var(--mono);
  color: var(--fg);
  will-change: transform, opacity;
}

/* ---------- tuning panel (dev) ---------- */
.tune {
  position: fixed; z-index: 60; top: 12px; right: 12px; width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  overflow: auto; padding: 10px 12px 12px; color: #d9d9d9; background: rgba(8, 8, 8, 0.92);
  border: 1px solid #2d2d2d; backdrop-filter: blur(8px); font: 11px/1.4 var(--mono); cursor: default; touch-action: pan-y;
}
.tune * { box-sizing: border-box; }
.tune-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tune-head b { font-weight: 500; color: #fff; }
.tune button { font: inherit; color: #d9d9d9; background: none; border: 1px solid #3a3a3a; padding: 4px 8px; margin: 0 4px 4px 0; cursor: pointer; }
.tune button:hover { border-color: #888; color: #fff; }
.tune button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.tune-actions { margin-bottom: 6px; }
.tune.folded > :not(.tune-head) { display: none; }
.tune.folded .tune-head { margin-bottom: 0; }
.tune.folded { overflow: hidden; }
.tune details { border-top: 1px solid #262626; padding: 6px 0 2px; }
.tune summary { cursor: pointer; color: #9a9a9a; padding: 2px 0 6px; }
.tune-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; margin-bottom: 8px; }
.tune-row output { color: #fff; font-variant-numeric: tabular-nums; }
.tune-row input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: #fff; height: 18px; margin: 0; }
.tune-toggle input[type="checkbox"] { grid-column: 1 / -1; justify-self: start; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #fff; }
.tune-text textarea { grid-column: 1 / -1; width: 100%; font: inherit; color: #fff; background: #000; border: 1px solid #3a3a3a; padding: 6px; resize: vertical; }

@media (max-width: 720px) {
  .chrome {                                           /* two lines: "Idan Segev. Design leader." then "Building teams of builders." with Shuffle on its right, on the same baseline */
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "name r1 r1" "r2 r2 actions" "folio folio folio";
    align-items: baseline;
    column-gap: 0.7em;
  }
  .id, .id .who, .id .slot, .id .role { display: contents; }
  .chrome .id .name { grid-area: name; justify-self: start; padding: 8px 0 2px; }
  .id .r1 { grid-area: r1; }
  .id .r2 { grid-area: r2; }
  .id .links { grid-area: r2; }                       /* tap the name: the links take the place of the second line */
  .actions { align-self: baseline; }
  .id .folio { grid-area: folio; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .folio .count { display: none; }
  .hint { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
}

@media (pointer: coarse) {
  .chrome a, .chrome button { padding-block: 13px; }
  .actions button { margin-block: -13px; }
  .chrome .id .name { padding-top: 14px; }
  .chrome .links a { padding-block: 6px; }
}

/* Shuffle: after a few quiet seconds one band of colour sweeps across the word (a different colour each time), like the shimmer on text while an AI is "thinking", then rests, then sweeps again.
   main.js adds .nudge after the visitor has been idle (and takes it away on any input, a shuffle, hover or focus). */
@keyframes sweep { 0% { background-position: 100% 0; } 38%, 100% { background-position: 0% 0; } }   /* the image is 3x the word: at 100% and 0% the word shows only dim; at 50% the colour band is over it */
#btn-shuffle.nudge {
  color: transparent;
  background: linear-gradient(100deg, var(--dim) 0%, var(--dim) 38%, var(--nc, #ff4fe0) 50%, var(--dim) 62%, var(--dim) 100%) 0 0 / 300% 100% no-repeat;   /* one colour per sweep: main.js sets --nc, a new one each time */
  -webkit-background-clip: text; background-clip: text;
  animation: sweep 5.5s ease-in-out infinite;
}
#btn-shuffle.nudge:hover, #btn-shuffle.nudge:focus-visible, #btn-shuffle.nudge:active { animation: none; background: none; color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .stage, .hint, #toast { transition: none; }
  #btn-shuffle.nudge { animation: none; background: none; color: inherit; }
}

noscript .plain {
  position: fixed; inset: 0; z-index: 50; background: #000; color: #fff;
  padding: var(--gutter); font: 900 18vw/0.9 var(--display); text-transform: uppercase;
}

/* the `hidden` attribute must win over the display rules above */
.chrome [hidden] { display: none !important; }

/* The panel on a phone: a sheet along the bottom (the poster stays above it), roomy tap targets, Hide folds it to its title bar. */
@media (max-width: 720px), (pointer: coarse) {
  .tune { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: 46dvh; padding: 8px 14px calc(12px + env(safe-area-inset-bottom)); font-size: 13px; border-width: 1px 0 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .tune-head { position: sticky; top: -8px; z-index: 1; margin: -8px -14px 8px; padding: 8px 14px; background: rgba(8, 8, 8, 0.96); }
  .tune.folded .tune-head { position: static; margin: -8px -14px 0; }
  .tune button { padding: 9px 12px; margin: 0 6px 6px 0; min-height: 40px; }
  .tune-head button { margin: 0 0 0 6px; }
  .tune-actions { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; margin: 0 -14px 8px; padding: 0 14px; scrollbar-width: none; }
  .tune-actions::-webkit-scrollbar { display: none; }
  .tune-actions button { flex: none; white-space: nowrap; }
  .tune summary { padding: 8px 0; min-height: 36px; }
  .tune-row { margin-bottom: 12px; }
  .tune-row input[type="range"] { height: 30px; }
  .tune-toggle input[type="checkbox"] { width: 26px; height: 26px; }
}

/* a standalone page (data-bare): the poster alone, without the site's frame */
html[data-bare] .chrome, html[data-bare] #menu-corner, html[data-bare] #index, html[data-bare] #hint { display: none !important; }

/* ---------- the menu: a quiet corner, and the posters in large type ---------- */
.menu-corner {
  position: fixed; top: 0; left: 0; z-index: 45; width: 132px; height: 68px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 0 0 var(--gutter);
  font: 400 12px/1.2 var(--mono); color: var(--dim); background: none; border: 0; text-align: left; cursor: pointer;
  opacity: 0; transition: opacity 0.28s ease, color 0.2s ease; -webkit-tap-highlight-color: transparent;
}
.menu-corner:hover, .menu-corner:focus-visible, body.index-open .menu-corner { opacity: 1; }
.menu-corner:hover, .menu-corner:focus-visible { color: var(--fg); }
.menu-corner:focus-visible { outline: 2px solid var(--fg); outline-offset: -6px; }
body.index-open .menu-corner .lbl { font-size: 0; }
body.index-open .menu-corner .lbl::after { content: "Close"; font-size: 12px; }

.index {
  position: fixed; inset: 0; z-index: 40; background: var(--bg); color: var(--fg);
  display: flex; align-items: center; justify-content: center; padding: 72px var(--gutter) 72px;
  opacity: 0; transition: opacity 0.3s ease; overflow-y: auto; overscroll-behavior: contain;
}
.index[hidden] { display: none; }
.index.on { opacity: 1; }
.index-list { list-style: none; margin: auto; padding: 0; width: min(760px, 100%); }
.index-list li { border-bottom: 1px solid color-mix(in srgb, var(--fg) 16%, transparent); }
.index-list li:first-child { border-top: 1px solid color-mix(in srgb, var(--fg) 16%, transparent); }
.index-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 0.16em 0 0.2em; color: var(--fg); text-decoration: none;
  font: 500 clamp(26px, min(6.2vw, calc((100vh - 150px) / (var(--rows, 8) * 1.46))), 68px)/1.08 var(--ui); letter-spacing: -0.02em;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}
.index-list li { display: grid; align-items: baseline; }                   /* the row and its Copy prompt share one cell and one baseline, so the prompt sits on the same line as the number */
.index-list li > a { grid-area: 1 / 1; }
.index-list .cp {
  grid-area: 1 / 1; justify-self: end; margin-right: 3.2rem; padding: 6px 4px; background: none; border: 0; cursor: pointer;
  font: 400 12px/1 var(--mono); color: var(--dim); opacity: 0; transition: opacity 0.2s ease, color 0.2s ease;
}
.index-list li:hover .cp, .index-list .cp:focus-visible, .index-list .cp.done { opacity: 1; }
.index-list .cp:hover, .index-list .cp.done { color: var(--fg); }
.index-list .cp:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (hover: none) { .index-list .cp { opacity: 0.7; } }
.index-list .n { font: 400 12px/1 var(--mono); letter-spacing: 0; color: var(--dim); }
.index-list a:hover, .index-list a:focus-visible { transform: translateX(-8px); outline: none; }
.index-list:has(a:hover) a:not(:hover), .index-list:has(a:focus-visible) a:not(:focus-visible) { opacity: 0.36; }
.peek {
  position: fixed; left: 0; top: 0; z-index: 41; width: clamp(200px, 22vw, 300px); aspect-ratio: 8 / 5; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 0.2s ease; will-change: transform; background: var(--bg);
}
.peek.on { opacity: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; display: block; }
.peek.swap img { animation: peek-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes peek-in { from { transform: scale(1.12); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .menu-corner, .index, .index-list a, .peek { transition: none; } .peek.swap img { animation: none; } }