/* tap (#how): How CrypTap Works, told on the real tap. Owned by tap.
   Pin: div.tap-pin.ft-set (core's set plate). Footage on canvas#tapCanvas via CT.footage only.
   Layers in the pin, bottom to top: footage 0 · field rings 3 · copy, rail 4 · disc hit target 5 · exit paper 8.
   Lengths: desktop and tablets pin + 370vh, phones pin + 280vh (js reads the height back, so the beats follow these numbers). */
#how{position:relative;z-index:2;height:calc(var(--pin-h) + 150vh);-webkit-tap-highlight-color:transparent}
html.js:not(.reduce) #how{margin-top:calc(-1 * var(--pin-h) - 30vh)}

#how .tap-pin{position:sticky;top:0;height:var(--pin-h);overflow:hidden;color:var(--ink);box-shadow:0 14vh 0 0 #5a8db7}
#how[data-tone=paper] .tap-pin{box-shadow:0 14vh 0 0 var(--paper)}

#how #tapCanvas{position:absolute;left:0;top:0;z-index:0;max-width:none}
/* the field lies on the table plane under the page's type; js also cuts every copy box out of it, so a ring never strikes through words */
#how #tapField{position:absolute;left:0;top:0;z-index:3;width:100%;height:100%;max-width:none;pointer-events:none}
#how .tap-exit{position:absolute;left:0;right:0;top:0;bottom:0;z-index:8;background:var(--paper);opacity:0;will-change:opacity;pointer-events:none}
/* the UI arrives on the clock after the hero's cut (js: wipes and line rises, WAAPI); above the cut, and once it has faded out
   before the paper, it is hidden outright (nothing of tap stays visible-but-covered) */
#how .tap-ui{transition:opacity .24s linear}
#how .tap-pin:not(.is-live) .tap-ui,#how .tap-pin.ui-gone .tap-copy,#how .tap-pin.ui-gone .tap-rail{visibility:hidden;transition:none}

/* the disc's hit target (frames 1-19): a tap on the terminal replays THE TAP's rings; it changes nothing else */
#how .tap-hit{position:absolute;left:0;top:0;z-index:5;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;
  touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#how .tap-hit.is-on{pointer-events:auto;cursor:pointer}

/* ---------------------------------------------------------------- copy: three chapters in one slot (right column over the plate) */
#how .tap-copy{position:absolute;z-index:4;right:var(--g);top:calc(var(--nav-h) + 12vh);width:min(360px,28vw)}
#how .tap-slot{position:relative}
#how .tap-ch{position:absolute;left:0;top:0;width:100%}
#how .tap-ch.is-off{visibility:hidden}
#how .tap-lab{display:block;color:var(--ink-2);margin-bottom:14px}
#how .tap-h{font-weight:400;font-size:clamp(24px,2.15vw,31px);line-height:1.1;letter-spacing:-.022em;margin-bottom:14px;text-wrap:balance}
#how .tap-p{font-size:15px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
#how .tap-m{margin-top:14px;font-family:var(--mono);font-size:12px;line-height:1.45;letter-spacing:.02em;color:var(--ink)}

/* ---------------------------------------------------------------- rail (desktop: along the foot of the set) */
#how .tap-rail{position:absolute;z-index:4;left:var(--g);right:var(--g);bottom:calc(28px + var(--safe-b));height:30px;color:var(--ink);pointer-events:none}
#how .tap-rail-line{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(14,23,38,.22)}
#how .tap-rail-fill{position:absolute;inset:0;background:var(--ink);transform-origin:0 0;transform:scaleX(0)}
#how .tap-rail-paid{position:absolute;top:0;height:1px;left:77.5%;right:0;background:var(--gold);transform-origin:0 0;transform:scaleX(0);transition:transform .3s var(--out)}
#how .tap-rail.paid .tap-rail-paid{transform:none}
#how .tap-rdot{position:absolute;top:0;width:7px;height:7px;margin:-3px 0 0 -3.5px;border-radius:50%;background:var(--ink-2)}
#how .tap-rdot i{position:absolute;inset:0;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .24s var(--in)}
#how .tap-rdot.on i{transform:none;transition-timing-function:var(--out)}
/* the rail runs along the lit table's front edge and the plate: ink type (inactive ink-2), never white on the pale set */
#how .tap-rlab{position:absolute;top:15px;font-family:var(--cond);font-weight:600;font-size:11px;line-height:13px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-2);transition:color .3s linear}
#how .tap-rlab.on{color:var(--ink)}
#how .tap-rlab.is-ink{color:var(--ink-2)}
#how .tap-rlab.is-ink.on{color:var(--ink)}
#how .tap-rlab .m{display:none}
#how .tap-r1{left:15.5%}#how .tap-r2{left:44.5%}#how .tap-r3{left:77.5%}
#how .tap-rlab.tap-r1{left:calc(15.5% - 3.5px)}#how .tap-rlab.tap-r2{left:calc(44.5% - 3.5px)}#how .tap-rlab.tap-r3{left:calc(77.5% - 3.5px)}

/* ---------------------------------------------------------------- phones and tablets (< 980): the rail runs under the nav */
@media (max-width:979.98px){
  /* a collapsed toolbar makes the viewport taller than the 100svh pin: the pin's clip reaches that far below it, and the footage
     canvas draws its foot down there (js), so the table continues under the toolbar instead of a flat strip */
  #how .tap-pin{overflow:visible;overflow-x:clip;clip-path:inset(0 0 calc(-1 * var(--toolbar-gap) - 24px) 0);box-shadow:none}
  #how[data-tone=paper] .tap-pin{box-shadow:none}
  #how .tap-exit{bottom:calc(-1 * var(--toolbar-gap) - 24px)}

  #how .tap-rail{left:var(--g);right:var(--g);top:calc(var(--nav-h) + 8px);bottom:auto;height:24px;color:var(--ink)}
  #how .tap-rail-line{background:rgba(14,23,38,.2);box-shadow:none}
  #how .tap-rail-fill{background:var(--ink);opacity:.7}
  #how .tap-rail-paid{left:80%}
  #how .tap-rdot{background:var(--ink-2);box-shadow:none}
  #how .tap-r1{left:10%}#how .tap-r2{left:48%}#how .tap-r3{left:80%}
  #how .tap-rlab{top:9px;font-size:10.5px;line-height:13px;letter-spacing:.1em;color:var(--ink-2);text-shadow:none;transform:translateX(-50%)}
  #how .tap-rlab.on{color:var(--ink)}
  #how .tap-rlab.tap-r1{left:10%}#how .tap-rlab.tap-r2{left:48%}#how .tap-rlab.tap-r3{left:80%}
  #how .tap-rlab .d{display:none}#how .tap-rlab .m{display:inline}
}

/* ---------------------------------------------------------------- portrait tablets (600-979): the copy in the column
   right of the phone (js sets --side-l) */
@media (min-width:600px) and (max-width:979.98px){
  #how .tap-copy{left:var(--side-l);right:var(--g);top:calc(var(--nav-h) + 56px);width:auto}
  /* the rail keeps to the column right of the phone, so the raised phone never passes under its labels */
  #how .tap-rail{left:var(--side-l)}
  #how .tap-h{font-size:24px}
}

/* ---------------------------------------------------------------- phones (< 600): laid out from the top of the 100svh pin.
   Rail under the nav (y 52), copy from y 88, the footage under the copy (CT.footage.box, as the hero). */
@media (max-width:599.98px){
  #how{height:calc(var(--pin-h) + 150vh)}
  #how .tap-copy{left:0;right:0;top:0;width:auto;height:0}
  #how .tap-slot{position:absolute;left:var(--g);right:var(--g);top:88px}
  #how .tap-lab{font-size:10.5px;letter-spacing:.12em;margin-bottom:8px}
  #how .tap-h{font-size:24px;line-height:1.08;margin-bottom:8px}
  #how .tap-p{font-size:15px;line-height:1.45}
  #how .tap-m{margin-top:6px;font-size:11px;line-height:15px;letter-spacing:0}
}
@media (max-width:599.98px) and (min-width:420px){
  #how .tap-h{font-size:25px}
}
@media (max-width:359.98px){
  #how .tap-h{font-size:21px}
  #how .tap-p{font-size:13px;line-height:1.45}
  #how .tap-m{font-size:10.5px}
}

/* ---------------------------------------------------------------- reduced motion and no-js: the three steps as stills */
#how .tap-static{display:none}
html.reduce #how,html:not(.js) #how{height:auto;margin-top:0}
html.reduce #how{z-index:4} /* no overlap under reduce: sit above the hero pin's 14vh under-strip */
html.reduce #how .tap-pin,html:not(.js) #how .tap-pin{display:none}
html.reduce #how .tap-static,html:not(.js) #how .tap-static{display:block}
#how .tap-static{padding:calc(var(--nav-h) + 9vh) var(--g) 11vh;background:var(--set-sky);color:var(--ink)}
#how .tap-s-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px;row-gap:28px;max-width:1440px;margin:0 auto;
  grid-template-areas:"c1 c2 c3" "f1 f2 f3"}
#how .tap-s-c1{grid-area:c1}#how .tap-s-c2{grid-area:c2}#how .tap-s-c3{grid-area:c3}
#how .tap-s-f1{grid-area:f1}#how .tap-s-f2{grid-area:f2}#how .tap-s-f3{grid-area:f3}
#how .tap-s-c .lab{display:block;color:var(--ink-2);margin-bottom:12px}
#how .tap-s-c h2{font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.12;letter-spacing:-.02em;margin-bottom:12px;text-wrap:balance}
#how .tap-s-c p{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:44ch}
#how .tap-s-c p.tap-s-m{margin-top:10px;font-family:var(--mono);font-size:12px;line-height:1.45;color:var(--ink)}
#how .tap-s-f{margin:0;max-width:420px}
#how .tap-s-f img{width:100%;height:auto;max-width:420px;background:var(--set-sky);
  /* the frame's own set colour is not the page's: feather the edges so there is no seam */
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent) intersect,linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent)}
#how .tap-s-f figcaption{margin-top:10px}
#how .tap-s-f figcaption{color:var(--ink-2)}
@media (max-width:1239.98px){
  #how .tap-s-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c1 f1" "c2 f2" "c3 f3"}
}
@media (max-width:719.98px){
  #how .tap-s-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"c1" "f1" "c2" "f2" "c3" "f3"}
}

/* ---------------------------------------------------------------- the three steps in the real CrypTap app, under the scene
   A sibling of #how (its scene height stays exactly as tap.js measures it), on paper above the pin's under-strip. */
.tap-shots{position:relative;z-index:3;background:var(--paper);color:var(--ink);padding:clamp(48px,8vh,88px) var(--g) 0}
.tap-shots .tap-sh-row{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:center;gap:clamp(28px,4vw,64px)}
.tap-shots .tap-sh-i{flex:none;width:232px}
.tap-shot{position:relative;margin:0;display:flex;flex-direction:column;align-items:center}
.tap-shot-f{position:relative;width:100%;padding:6px;background:var(--white);border:1px solid var(--line-strong);border-radius:30px;
  box-shadow:0 1px 2px rgba(14,23,38,.05),0 24px 48px -26px rgba(14,23,38,.34)}
.tap-shot img{width:100%;height:auto;border-radius:24px;background:var(--white)}
/* the step number, hung on the frame's top rule like the section's gold tabs */
.tap-shot-f::before{content:attr(data-n);position:absolute;left:50%;top:-10px;transform:translateX(-50%);height:19px;padding:0 7px;display:flex;align-items:center;
  background:var(--gold);color:#1a1200;font:600 10.5px/1 var(--cond);letter-spacing:.12em}
.tap-shot figcaption{margin-top:14px;font:600 11px/1.3 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.tap-shots .tap-sh-cap{margin-top:18px;text-align:center;font:600 10.5px/1.3 var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:719.98px){
  /* phones: a snapping row; the step names are the scene's own (read out from the figcaptions), the gold number marks each */
  .tap-shots{padding:36px 0 0}
  .tap-shots .tap-sh-row{justify-content:flex-start;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--g);padding:12px var(--g) 6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tap-shots .tap-sh-row::-webkit-scrollbar{display:none}
  .tap-shots .tap-sh-i{width:200px;scroll-snap-align:start}
  .tap-shot-f{border-radius:26px;padding:5px}
  .tap-shot img{border-radius:21px}
  .tap-shot figcaption{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .tap-shots .tap-sh-cap{margin-top:12px;padding:0 var(--g)}
}