/* Kinetic Truth Engine planes, drawn from the session's own tracking data.
   The video and all three canvases share one box, one object-fit and one object-position
   (--kte-pos), so every overlay stays registered to the footage. The recording is 9:16 and the
   planes are 2:3, so cover trims only height; 50% 100% keeps the thrower, the rack and the near
   table edge in frame and gives up ceiling. */
#kteStage{--kte-pos:50% 100%}
.kte-plane .kte-media{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:var(--kte-pos)}
/* The clip runs at its own exposure. The design dimmed its still so the white layers would read on
   top, but under the real footage saturate(.6) brightness(.6) left the video looking grey. The
   ground stays: it is what shows in the moment before the first frame decodes. */
.kte-plane video.kte-media{background:var(--red4)}
.kte-plane canvas.kte-media{pointer-events:none}
.kte-plane .kte-tag{z-index:2}
/* The plane label is the label, not a chip: asked for on 20 Sep 2026, so it reads as white type on
   the footage the way the layer console on the home page does. The numbering went with the box. */
.kte-tag{background:none;padding:0;border-radius:0}
/* The three tracking planes are glass: their lines and their label, no ground. The design gave every
   plane the same tinted ground (.kte-plane in site.css), which stacked three times over the clip and
   left it under a dark wash. The base plane keeps its ground, since the poster sits on it. */
.kte-plane[data-p=skel],.kte-plane[data-p=ball],.kte-plane[data-p=venue]{background:transparent}
/* and they rest further apart, so each one reads on its own (was 70px between planes). The same
   spread as /wbl and /wps, whose stage, scene and resting depths are identical to this one. Above
   720px only: below that the stage is shorter, clips, and sets its own depths. :not(:hover) because
   site.css's hover rules only beat its resting ones on source order and this file is read later;
   hovering still separates the planes the whole way. */
@media(min-width:721px){
  .kte-stage.in:not(:hover) .kte-plane[data-p=base]{transform:translateZ(-145px)}
  .kte-stage.in:not(:hover) .kte-plane[data-p=skel]{transform:translateZ(-50px)}
  .kte-stage.in:not(:hover) .kte-plane[data-p=ball]{transform:translateZ(45px)}
  .kte-stage.in:not(:hover) .kte-plane[data-p=venue]{transform:translateZ(140px)}
}

/* ---- tap to separate the layers, then drag to turn them ----
   Reported on 20 Sep 2026: there was nothing to engage with on a phone. The design only separates
   the planes on :hover, which a touch screen never fires (site.css hides the hint at hover:none),
   and site.css's phone block pins the scene's rotation instead of reading --ry/--rx, so even the
   sway had nothing to write into. kte-layers.js now toggles .open on a tap and writes --ry/--rx
   while dragging, with the same sensitivity and limits as the layer console on the home page.
   .open carries the design's own :hover depths, so tapping lands on the state hovering already
   reaches. Every rule is prefixed #how because the phone block's depths are (#how .kte-stage.in
   .kte-plane[data-p]) and a class-only selector loses to it. The scene keeps each breakpoint's own
   framing and only swaps its rotation for the custom properties. touch-action:pan-y leaves the page
   scrolling vertically through the stage and gives the drag the sideways gesture. */
.kte-stage{touch-action:pan-y}
#how .kte-stage.open{cursor:grab}
#how .kte-stage.dragging{cursor:grabbing}
#how .kte-stage.dragging .kte-scene{transition:none}
#how .kte-stage.open .kte-scene{transform:translateX(34px) rotateY(var(--ry,-28deg)) rotateX(var(--rx,10deg)) scale(.7)}
#how .kte-stage.open .kte-plane{border-color:rgba(255,255,255,.5)}
#how .kte-stage.open .kte-plane[data-p=base]{transform:translateZ(-185px)}
#how .kte-stage.open .kte-plane[data-p=skel]{transform:translateZ(-55px)}
#how .kte-stage.open .kte-plane[data-p=ball]{transform:translateZ(88px)}
#how .kte-stage.open .kte-plane[data-p=venue]{transform:translateZ(220px)}
@media(max-width:720px){
  /* the phone scene is 224x336 at .82 and sits centred; keep that and only free up the rotation */
  #how .kte-stage.open .kte-scene{transform:rotateY(var(--ry,-16deg)) rotateX(var(--rx,9deg)) scale(.82)}
}