/* Neotics, photographs: real moments drawn into the page. Loaded after styles.css by index.html.
   A picture arrives as a field of anchor dots, sharpens at the centre of the screen and dissolves into the stone at its edges.
   The page's tendon runs through each one at the point of touch. */

.shot { position: relative; height: 100vh; min-height: 640px; max-height: 1000px; overflow: hidden; }
.shot__media { position: absolute; z-index: 0; top: 0; bottom: 0; }
.shot__media::after {
  /* a fine print screen, so a resolved photograph still reads as printed into the page */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .45;
  background: radial-gradient(circle, rgba(18, 17, 16, .3) 0 .9px, transparent 1.3px) 0 0 / 5px 5px;
}
.shot__dots, .shot__photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot__photo { object-fit: cover; opacity: 0; transform-origin: 50% 50%; will-change: opacity, transform; }
.node--gutter { display: none; }
.shot .node[data-at] { position: absolute; margin: 0; transform: translate(-50%, -50%); z-index: 1; }
.shot__tag { position: absolute; z-index: 1; transform: translate(16px, -50%); white-space: nowrap; color: var(--paper); text-shadow: 0 0 10px rgba(18, 17, 16, .7), 0 0 3px rgba(18, 17, 16, .65), 0 0 1px rgba(18, 17, 16, .8); }
.shot__copy { height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; pointer-events: none; }
.shot__text { display: grid; gap: 22px; justify-items: start; pointer-events: auto; }
.shot__text .h2 { max-width: 13ch; }

/* a person shows the grip */
.shot--first .shot__media { left: 0; width: 50%; -webkit-mask-image: linear-gradient(to right, #000 78%, transparent); mask-image: linear-gradient(to right, #000 78%, transparent); }
.shot--first .shot__text { grid-column: 8 / span 5; }

/* reach, close, twist */
.shot--reach .shot__media { left: 0; width: 64%; -webkit-mask-image: linear-gradient(to right, #000 58%, transparent); mask-image: linear-gradient(to right, #000 58%, transparent); }
.shot--reach .shot__text { grid-column: 9 / span 4; }

/* a crowd from above */
.shot--crowd { max-height: 1100px; }
.shot--crowd .shot__media { left: 0; right: 0; -webkit-mask-image: linear-gradient(to bottom, #000 46%, transparent 88%); mask-image: linear-gradient(to bottom, #000 46%, transparent 88%); }
.shot--crowd .shot__copy { align-items: end; padding-bottom: clamp(48px, 7vh, 88px); }
.shot--crowd .shot__text { grid-column: 1 / span 12; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: var(--gap); justify-content: space-between; }
.shot--crowd .display { max-width: 12ch; }
.shot--crowd .body { justify-self: end; }
.node--stop {
  /* the full stop of the headline is a node on the tendon */
  width: .14em; height: .14em; margin: 0 0 0 .03em; vertical-align: baseline;
  background: var(--ink); box-shadow: none;
}
.node--stop.is-on { background: var(--tendon); box-shadow: 0 0 0 .07em color-mix(in srgb, var(--tendon) 18%, transparent); }

/* the way you were shown */
.shot--teach .shot__media { right: 0; width: 68%; -webkit-mask-image: linear-gradient(to left, #000 62%, transparent); mask-image: linear-gradient(to left, #000 62%, transparent); }
.shot--teach .shot__text { grid-column: 1 / span 5; }

/* four ways in: one place for each way, drawn in dots, changing as the rows are read */
.tracks__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
.tracks__panel { position: sticky; top: 14vh; height: min(72vh, 640px); }
.tracks__panel canvas { width: 100%; height: 100%; display: block; -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); }
.tracks__panel img { display: none; }
.row.is-active::before { transform: scaleX(1); }
.row .h3 { transition: color .5s var(--settle), transform .8s var(--settle); }
.rows.has-active .row:not(.is-active) .h3 { color: var(--ink-3); }
/* the row being read steps forward a little, and its track name takes the tendon colour */
.row.is-active .h3 { transform: translateX(10px); }
.row > .label { transition: color .5s var(--settle); }
.row.is-active > .label { color: var(--tendon-ink); }
.shot__tag { will-change: opacity; }

@media (max-width: 900px) and (orientation: portrait), (max-width: 560px) {
  .shot { height: auto; min-height: 0; max-height: none; overflow: visible; overflow-x: clip; padding-bottom: clamp(56px, 12vw, 96px); }
  .shot .shot__media { position: relative; left: auto; right: auto; width: 100%; height: 64svh; }
  .shot--first .shot__media, .shot--reach .shot__media, .shot--teach .shot__media {
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent); mask-image: linear-gradient(to bottom, #000 68%, transparent);
  }
  .shot.shot--crowd .shot__media { height: 74svh; -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 86%); mask-image: linear-gradient(to bottom, #000 42%, transparent 86%); }
  .shot__copy { height: auto; display: block; margin-top: -4svh; }
  .shot--crowd .shot__copy { margin-top: -14svh; padding-bottom: 0; }
  .shot--crowd .shot__text { grid-template-columns: 1fr; gap: 20px; }
  .shot--crowd .body { justify-self: start; }
  .shot__tag { font-size: 11px; transform: translate(12px, -50%); }
  .shot__text { position: relative; }
  .node--gutter { display: block; position: absolute; left: calc(var(--gutter) * -0.5 - 4.5px); top: 18px; margin: 0; }

  .tracks__grid { display: flex; flex-direction: column; gap: 0; }
  .tracks__panel { order: -1; top: calc(var(--nav-h, 64px) + env(safe-area-inset-top)); height: 34svh; z-index: 3; background: var(--stone); margin: 0 calc(-1 * var(--gutter)); }
  .tracks__panel canvas { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 78%, transparent); }
}

@media (orientation: landscape) and (max-height: 540px) {
  .shot { min-height: 0; height: 100vh; }
  .shot__text { gap: 14px; }
  .shot--crowd .display { font-size: clamp(30px, 8vh, 56px); }
  .shot--crowd .shot__media { -webkit-mask-image: linear-gradient(to bottom, #000 12%, transparent 58%); mask-image: linear-gradient(to bottom, #000 12%, transparent 58%); }
  .shot--crowd .body { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .shot__photo { opacity: 1; transform: none; }
}