/* Lab 3, round ten: the combined version (site3.html, site3.js). 01 the work opened, 02 the clients as an index (both
   as in the proposals lab), 03 the chapters in the scroll, and the opening. Type: the site's own faces; Anton for the
   numbers, a proposal (the face is still Omer's decision). Motion: transform, opacity and clip-path only. */
/* the mask reveal: each word rises inside its own clip */
.px-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin: 0 -.02em -.1em; }
.px-m > span { display: inline-block; transform: translateY(108%); transition: transform 640ms cubic-bezier(.2, .75, .1, 1); }
.px-in .px-m > span { transform: none; }

/* ---------- open: the work, opened ---------- */
.px-cap { position: absolute; z-index: 38; left: var(--pad); bottom: 84px; max-width: min(27vw, 360px); pointer-events: none; color: #141414; display: grid; gap: 6px; }
.px-cap .px-n { font-family: Anton, 'Inter Tight', sans-serif; font-size: clamp(88px, 10.5vw, 168px); line-height: .82; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.px-cap .px-t { font-size: clamp(20px, 1.9vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
.px-cap .px-g { font-size: 13px; color: #5c5952; }
.px-cap .px-steps { display: flex; align-items: center; gap: 10px; margin-top: 14px; pointer-events: auto; opacity: 0; transition: opacity 240ms ease 380ms; }
.px-cap.px-in .px-steps { opacity: 1; }
.px-cap .px-steps button { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(20, 20, 20, .22); font-size: 16px; transition: background-color 160ms, transform 160ms; }
.px-cap .px-steps button:hover { background: rgba(20, 20, 20, .06); } .px-cap .px-steps button:active { transform: scale(.94); }
.px-cap .px-steps button:focus-visible { outline: 2px solid #2b6cff; outline-offset: 2px; }
.px-cap .px-of { font-size: 13px; font-variant-numeric: tabular-nums; color: #5c5952; min-width: 64px; text-align: center; }
.px-cap:not(.px-in) { visibility: hidden; }
.px-opened .f-say { visibility: hidden; } /* the caption says it; the bar keeps only its buttons */
.px-opened .f-help, .px-opened .f-help-q, .px-opened .f-pad, .px-opened .f-hint { opacity: 0 !important; pointer-events: none !important; transition: opacity 200ms ease; } /* the way on (the arrow) stays: from an open work you can still go on */
.touch .px-cap { left: 16px; right: 72px; bottom: 74px; max-width: none; grid-template-columns: auto 1fr; column-gap: 14px; align-items: end; }
.touch .px-cap .px-n { font-size: 54px; margin: 0; grid-row: 1 / span 2; }
.touch .px-cap .px-t { font-size: 17px; } .touch .px-cap .px-g { font-size: 12px; }
.touch .px-cap .px-steps { grid-column: 1 / -1; justify-content: space-between; margin-top: 8px; }

/* ---------- index: the clients as an index ---------- */
.px-index { position: absolute; inset: 0 0 62px; z-index: 40; padding: 34px var(--pad) 28px; overflow: auto; overscroll-behavior: contain;
  /* the index's own ground: solid behind the full width of the names (--ix-w, measured), then opening onto the wall; the works themselves are never dimmed */
  background: linear-gradient(90deg, rgba(230, 228, 222, .97) 0, rgba(230, 228, 222, .97) var(--ix-w, 40%), rgba(230, 228, 222, 0) calc(var(--ix-w, 40%) + 18vw));
  clip-path: circle(0 at var(--o, 90% 95%)); transition: clip-path 620ms cubic-bezier(.7, 0, .2, 1); }
.px-index.on { clip-path: circle(160% at var(--o, 90% 95%)); }
.px-index .px-k { font-size: 13px; color: #5c5952; margin: 0 0 18px; }
.px-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.px-index ol button { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 14px; padding: 2px 0; color: #141414;
  font-size: clamp(24px, min(3.5vw, 4.4vh), 58px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04;
  opacity: 0; transform: translateY(18px); transition: opacity 420ms cubic-bezier(.2, .75, .1, 1), transform 520ms cubic-bezier(.2, .75, .1, 1), color 160ms; }
.px-index.on ol button { opacity: 1; transform: none; }
.px-index ol button i { font-style: normal; font-size: 12px; font-weight: 500; letter-spacing: 0; color: #6b675f; font-variant-numeric: tabular-nums; width: 22px; }
.px-index ol button sup { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #5c5952; vertical-align: super; }
/* the others step back only while one name is pointed at, or chosen by the keyboard; never the whole list */
@media (hover: hover) and (pointer: fine) { .px-index ol:has(button:hover) button:not(:hover) { color: rgba(20, 20, 20, .34); } }
.px-index ol:has(button:focus-visible) button:not(:focus-visible):not(:hover) { color: rgba(20, 20, 20, .34); }
.px-index ol:focus { outline: none; }
.px-index ol button:focus-visible { outline: 2px solid #2b6cff; outline-offset: 4px; }
.px-index .px-x { all: unset; cursor: pointer; position: absolute; top: 26px; right: var(--pad); padding: 10px 16px; border-radius: 99px; font-size: 13px; background: rgba(20, 20, 20, .08); }
.touch .px-index { inset: 0; background: rgba(230, 228, 222, .96); padding: 22px 18px 90px; }
.touch .px-index ol button { font-size: 30px; padding: 6px 0; }
@media (prefers-reduced-motion: reduce) { .px-index, .px-index ol button { transition: none; } }

/* on a phone the index closes from its foot, always in reach and clear of the page's top bar */
.touch .px-index .px-x { position: sticky; top: auto; bottom: 14px; right: auto; display: block; width: max-content; margin: 26px 0 0 auto; padding: 13px 20px; background: #141414; color: #f3f1ec; font-size: 14px; }

/* ---------- 03 the chapters: a real stretch of the page before each section, in its ground ---------- */
.s3-ch { position: relative; height: 150vh; background: var(--bg); color: var(--ink); }
.touch .s3-ch { height: 135svh; }
.s3-ch .s3-chi, .s3-curtain .s3-chi { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-content: center; justify-items: center; gap: 4px; will-change: transform, opacity; }
.s3-cn { font-family: Anton, 'Inter Tight', sans-serif; font-size: clamp(40px, 6vw, 96px); line-height: .9; opacity: .55; font-variant-numeric: tabular-nums; }
.s3-cw { font-size: clamp(64px, 13vw, 230px); font-weight: 700; letter-spacing: -.055em; line-height: .86; }
.s3-ch .px-m > span { transition: none; will-change: transform; }
/* the site's own ways on: the curtain is the chapter's held state, drawn the same */
.s3-curtain { position: fixed; inset: 0; z-index: 400; background: var(--bg, var(--ground, #e6e4de)); color: var(--ink, #141414); visibility: hidden; pointer-events: none; clip-path: inset(100% 0 0 0); }
.s3-curtain .s3-chi { position: absolute; inset: 0; }
.s3-curtain .px-m > span { transition: none; }

/* ---------- the opening (intro-moves.js; three directions to choose from in intro-lab.html) ---------- */
.s3-intro { position: fixed; inset: 0; z-index: 500; cursor: pointer; overflow: hidden; }
.s3-ground { position: absolute; inset: 0; background: var(--ground, #e6e4de); }
.s3-stage { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; pointer-events: none; }
.s3-cam { position: relative; }
.s3-name { position: relative; font-family: 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-size: clamp(64px, 12.5vw, 210px); letter-spacing: -.045em; line-height: 1; white-space: nowrap; color: #141414; }
.s3-name span { display: inline-block; white-space: pre; } /* the space keeps its width */
.s3-name .s3-l { position: relative; } .s3-name .s3-l.s3-front { z-index: 3; }
.s3-rule { position: absolute; left: -4%; right: -4%; height: 2px; margin-top: -1px; background: #141414; transform-origin: 50% 50%; }
.s3-bands, .s3-band { position: absolute; inset: 0; }
.s3-shutter { position: absolute; top: -10%; bottom: -10%; left: -100vw; z-index: 1; background: var(--ground, #e6e4de); }
.s3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 760px) { .s3-drawn .s3-name { font-size: min(30vw, 17svh); line-height: .9; } .s3-drawn .s3-name .s3-sp { display: block; height: 0; } }
.s3-skip { all: unset; position: absolute; right: 18px; bottom: 16px; min-width: 44px; min-height: 44px; padding: 0 14px; display: grid; place-items: center; font: 500 13px 'Inter Tight', system-ui, sans-serif; color: #5c5952; cursor: pointer; }
.s3-skip:focus-visible { outline: 2px solid #2b6cff; outline-offset: 2px; border-radius: 99px; }
.s3-intro-on .top .who { visibility: hidden; } /* the header's own name waits under the opening: never two names */
/* the boot cover: the ground from the first paint until the opening's own ground is in place; it lifts by itself if
   the script never comes */
.s3-boot::after { content: ''; position: fixed; inset: 0; z-index: 499; background: var(--ground, #e6e4de); animation: s3-boot-lift 0s linear 4s forwards; pointer-events: none; }
@keyframes s3-boot-lift { to { opacity: 0; visibility: hidden; } }
[data-s3k="cut-reel"].s3-boot::after, [data-s3k="cut"].s3-boot::after { background: #FFE800; } [data-s3k="paste"].s3-boot::after, [data-s3k="tape"].s3-boot::after { background: #2340C8; } [data-s3k="slap"].s3-boot::after { background: #3B1E9E; } [data-s3k="spin"].s3-boot::after { background: #e6e4de; }
.s3-board svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .s3-board svg { z-index: 1; } .s3-board .s3-skip { z-index: 2; }
.s3-board-paste .s3-skip, .s3-board-slap .s3-skip { color: #fff; }
.s3-board .s3-skip { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }

/* ---------- round eleven: the elastic interface, behind ?ui=elastic (directions/elastic.js) ---------- */
.ui-has-ind { position: relative; }
.ui-has-ind > a { position: relative; z-index: 1; }
.ui-has-ind > a[aria-current="true"], .ui-has-ind > a:hover { background: transparent !important; }
.ui-ind { position: absolute; left: 0; top: 0; width: 60px; height: 30px; border-radius: 99px; background: rgba(0, 0, 0, .07); pointer-events: none; z-index: 0; }
body.on-shirts .ui-ind { background: rgba(255, 255, 255, .14); }

/* The client index belongs to the viewport, even when the wall is partly scrolled away. */
.px-index{position:fixed;inset:0;padding-top:80px;padding-bottom:32px;box-sizing:border-box}.px-index .px-x{top:72px;min-height:44px;box-sizing:border-box}
.touch .px-index{inset:0;padding:104px 18px 90px}.touch .px-index .px-x{top:auto;bottom:16px}
@media(max-width:760px){.px-index{padding-top:104px}.px-index .px-x{top:104px}.touch .px-index .px-x{top:auto}}

/* round twelve: the music as jewel cases; the section is tall and its stage sticks, the scroll moves the cases (jewelcase.js sets the height) */
.music.jewel .music-stage canvas { cursor: default; } .music.jewel .music-stage:focus-visible { outline: 2px dashed rgba(20,20,20,.4); outline-offset: -10px; }