/* 3d-home-works.css: #works on the 3D home page.
   The list (hairline rows, big serif titles, the linked rows signal that they open), the sticky stage frame the emblem is
   anchored to (js builds the pieces inside aside.works-stage), and the compact sticky band on phones.
   Loaded after 3d.css, so selectors here carry #works to win without !important. */

#works { --scrim: 0.65; --scrim-x0: 0.34; --scrim-x1: 0.9; }

/* ------------------------------------------------------------------ layout */

#works .works-layout { margin-top: 56px; display: block; }
#works .work-list { display: flex; flex-direction: column; }
html:not(.works-3d) #works .work-list { max-width: 880px; }
#works .works-stage { display: none; position: relative; }

@media (min-width: 981px) {
  html.works-3d #works .works-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(28px, 4.4vw, 76px);
    align-items: start;
  }
  html.works-3d:not(.no-webgl) #works .works-stage {
    display: block;
    position: sticky;
    top: calc(var(--header) + max(24px, (100svh - var(--header) - 520px) / 2));
    height: min(520px, calc(100svh - var(--header) - 48px));
    min-height: 440px;
    border-radius: var(--radius);
  }
}

/* ------------------------------------------------------------------ rows */

#works .work-row {
  --ft: clamp(33px, 3.5vw, 50px);
  position: relative;
  grid-template-columns: 52px minmax(0, 1fr) 48px;
  grid-template-areas: "yr title arrow" "yr desc arrow" "yr tag arrow";
  column-gap: clamp(12px, 1.8vw, 24px);
  row-gap: 0;
  align-items: start;
  padding: clamp(28px, 3.3vw, 42px) 8px clamp(28px, 3.3vw, 42px) 4px;
  border-top: 1px solid var(--line-strong);
  transition: background 0.4s;
}
#works .work-row:last-child { border-bottom: 1px solid var(--line-strong); }

#works .work-row .yr {
  grid-area: yr; align-self: start;
  padding-top: calc(var(--ft) * 0.36);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-shadow: 0 0 10px var(--bg), 0 0 18px rgba(var(--bg-rgb), 0.9);
  transition: color 0.35s, translate 0.5s var(--ease);
}
#works .work-row h3 {
  grid-area: title;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--ft);
  line-height: 0.98;
  letter-spacing: -0.028em;
  padding-bottom: 0;
  background: none;
  text-shadow: 0 0 28px rgba(var(--bg-rgb), 0.85);
  color: var(--ink);
}
#works .work-row h3 .aka {
  display: block; margin-top: 9px;
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ink-dim);
  transition: color 0.4s;
}
#works .work-row p {
  grid-area: desc;
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 16px; line-height: 1.5;
  color: var(--ink-dim);
  text-shadow: 0 0 20px rgba(var(--bg-rgb), 0.9);
}
#works .work-row .work-meta { display: contents; }
#works .work-row .tag {
  grid-area: tag; justify-self: start;
  margin: 18px 0 0;
  padding: 4px 10px;
  color: var(--ink-dim);
  border-color: rgba(var(--ink-rgb), 0.18);
  background: rgba(var(--bg-rgb), 0.5);
  text-shadow: 0 0 8px var(--bg);
  transition: color 0.35s, border-color 0.35s;
}

/* the ringed arrow of a linked row */
#works a.work-row .arrow {
  grid-area: arrow; align-self: start;
  width: 46px; height: 46px; margin-top: calc(var(--ft) * 0.12);
}

/* linked rows: title and numeral move, a fill sweeps in, the arrow turns.
   The description gets brighter (the rule above would otherwise out-specify the 3d.css hover colour) and the fill is neutral:
   lime over the scene turned olive, the lime stays on the left edge and the arrow. */
#works a.work-row:hover p, #works a.work-row:focus-visible p, #works a.work-row.is-hot p { color: var(--ink); }
#works a.work-row:hover { background: transparent; }
#works a.work-row::before {
  background: linear-gradient(90deg, rgba(var(--ink-rgb), 0.055), rgba(var(--ink-rgb), 0.01) 85%);
  border-left: 2px solid var(--accent);
}
#works a.work-row h3 { background: none; padding-bottom: 0; transition: translate 0.5s var(--ease), color 0.35s; }
#works a.work-row:hover h3, #works a.work-row:focus-visible h3, #works a.work-row.is-hot h3 { background: none; color: var(--paper); translate: 12px 0; }
#works a.work-row:hover .aka, #works a.work-row:focus-visible .aka, #works a.work-row.is-hot .aka { color: var(--ink); }
#works a.work-row:hover .tag, #works a.work-row:focus-visible .tag, #works a.work-row.is-hot .tag { color: var(--ink); border-color: rgba(var(--accent-rgb), 0.5); }
#works a.work-row .tag { transition: color 0.35s, border-color 0.35s, translate 0.5s var(--ease); }
#works a.work-row:hover .tag, #works a.work-row:focus-visible .tag, #works a.work-row.is-hot .tag { translate: 8px 0; }

/* the one row that does not open: no arrow, no streak, no fill; it only marks itself when it is the current one */
#works div.work-row { cursor: default; }
#works div.work-row h3 { color: rgba(var(--ink-rgb), 0.86); }
#works div.work-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.6s var(--ease);
}
#works div.work-row.is-current::before { transform: scaleY(1); }
#works div.work-row.is-current h3 { color: var(--paper); }
#works div.work-row.is-current .tag { border-color: rgba(var(--accent-rgb), 0.5); color: var(--ink); }
#works .work-row.is-current .yr { color: var(--accent); }

/* ------------------------------------------------------------------ the stage frame (the emblem itself is drawn by the canvas) */

#works .ws-ui { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-mono); }
#works .ws-c { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(var(--ink-rgb), 0.3); }
#works .ws-c1 { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
#works .ws-c2 { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
#works .ws-c3 { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
#works .ws-c4 { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
#works .ws-count {
  position: absolute; left: 16px; top: 14px;
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; letter-spacing: 0.2em; color: var(--ink-faint);
}
#works .ws-no { color: var(--accent); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; }
#works .ws-ticks { position: absolute; right: 16px; top: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0; padding: 0; list-style: none; }
#works .ws-ticks li { height: 1px; width: 10px; background: rgba(var(--ink-rgb), 0.3); transition: width 0.7s var(--ease), background 0.4s, box-shadow 0.4s; }
#works .ws-ticks li.is-on { width: 28px; background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6); }

/* ------------------------------------------------------------------ phones and tablets: the stage is a compact sticky band above the list */

@media (max-width: 980px) {
  html.works-3d #works .works-layout { display: flex; flex-direction: column; margin-top: 36px; }
  html.works-3d:not(.no-webgl) #works .works-stage {
    display: block; order: -1;
    position: sticky; top: calc(var(--header) + 6px);
    height: 200px; z-index: 3;
    margin-bottom: 14px;
  }
  /* rows slide away under the band instead of crossing the emblem (js sets --band-y while the band overlaps the list) */
  html.works-3d #works .work-list {
    --band-y: -300px;
    margin-right: -18px; padding-right: 18px;
    contain: paint;                              /* the streak and the ping ring must not widen the page */
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--band-y) - 6px), #000 calc(var(--band-y) + 36px));
    mask-image: linear-gradient(to bottom, transparent calc(var(--band-y) - 6px), #000 calc(var(--band-y) + 36px));
  }
  /* one column of text over the whole width: a full width scrim and brighter body copy (the yard is dimmed in home-works.js) */
  #works { --scrim: 0.72; --scrim-x0: 1; --scrim-x1: 1.35; }
  #works .work-row p { color: var(--ink); }
  #works .ws-count { top: 10px; left: 12px; }
  #works .ws-ticks { top: 14px; right: 12px; gap: 6px; flex-direction: row; align-items: center; }
  #works .ws-ticks li { height: 5px; width: 5px; border-radius: 50%; }
  #works .ws-ticks li.is-on { width: 5px; height: 5px; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7); }
}
@media (max-width: 980px) and (max-height: 520px) {
  /* landscape phone: a 200 px band would leave a strip of about 120 px to read in */
  html.works-3d:not(.no-webgl) #works .works-stage { height: min(200px, 30svh); }
}
@media (max-width: 800px) {
  #works a.work-row.is-current .arrow::before, #works a.work-row:hover .arrow::before, #works a.work-row:focus-visible .arrow::before { animation-name: works-ping-sm; }
  #works .work-row { --ft: clamp(30px, 8.6vw, 38px); grid-template-columns: 34px minmax(0, 1fr) 42px; column-gap: 12px; padding: 26px 0 26px 0; }
  #works .work-row p { font-size: 15px; }
  #works a.work-row .arrow { width: 42px; height: 42px; }
}

/* ------------------------------------------------------------------ one live row: the streak and the ping ring run on the current row only.
   Transform animations only (the 3d.css versions animate left and scale(2), which also widened the page on phones). */

#works a.work-row::after {
  left: 0; width: 22%; opacity: 0; transform: translateX(-110%);
  animation: none;
}
#works a.work-row.is-current::after { animation: works-scan 3.4s ease-in-out infinite; }
@keyframes works-scan { 0% { transform: translateX(-110%); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(450%); opacity: 0; } }
#works a.work-row .arrow::before { animation: none; opacity: 0; }
#works a.work-row.is-current .arrow::before, #works a.work-row:hover .arrow::before, #works a.work-row:focus-visible .arrow::before { animation: works-ping 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
#works a.work-row:not(.is-current):not(:hover):not(:focus-visible) .arrow::after { animation: none; }
@keyframes works-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes works-ping-sm { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #works a.work-row.is-current::after, #works a.work-row.is-current .arrow::before, #works a.work-row:hover .arrow::before { animation: none; }
}

/* ------------------------------------------------------------------ calm / no webgl */

html[data-calm] #works a.work-row::after,
html[data-calm] #works a.work-row .arrow::before,
html[data-calm] #works a.work-row .arrow::after { animation: none !important; }
html.no-webgl #works .works-stage { display: none; }

/* the current row of a linked work (not hovered): quiet marker, the strong fill is for hover and focus */
#works a.work-row.is-current:not(:hover):not(:focus-visible)::before { display: none; }
#works a.work-row.is-current h3 { color: var(--paper); }
#works a.work-row.is-current .aka { color: var(--ink); }
#works a.work-row.is-current .tag { border-color: rgba(var(--accent-rgb), 0.5); color: var(--ink); }
#works a.work-row.is-current .arrow { box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.28); border-color: var(--accent); }