/*
  justincook.dev · product pages · CLIPS LAYER (styles)
  Include after the page's own <style>:  <link rel="stylesheet" href="clips/clips.css">
  Every rule here targets an element that clips/clips.js creates or marks ONLY once a clip's file has loaded.
  With no clip, nothing matches and the drawn scene plays exactly as before. Slot sizes: clips/README.md.
*/
:root{
  --jc-clip-letterbox:#1B1A17;  /* behind a clip whose shape does not match its frame (shown with contain) */
  --jc-clip-panel-ground:#FFFCF6; /* the screen drawn on a proof panel when a scene has no device */
  --jc-clip-panel-rule:#1B1A17;
  --jc-clip-win-fit:cover;      /* devtools-b: the resolved screen is 574 x 374 under its title bar (1.53, not 1.6);
                                   cover crops about 14 px off each side at 1x, contain leaves a 15 px band below */
  --jc-clip-outline:#FF2E9A;
  /* the say line and the strip, in each page's own tokens: devtools-b --voice, recruiting-v2 --serif (both Newsreader,
     set italic); games-b sets them in its body face, --text, upright (below) */
  --jc-clip-say-face:var(--voice,var(--serif,'Newsreader',Georgia,serif));
  --jc-clip-say-style:italic;
  --jc-clip-say-ink:var(--ink,#1B1A17);
  --jc-more-rule:1px;           /* the poster's outline: one weight, the page's own (devtools-b draws its screens at 1 px) */
  --jc-more-small:var(--mono,'IBM Plex Mono',ui-monospace,monospace);
}
html[data-jc-clips-page="recruiting-v2"]{--jc-more-rule:1.5px}
html[data-jc-clips-page="games-b"]{--jc-clip-say-face:var(--text,'Bricolage Grotesque',system-ui,sans-serif);--jc-clip-say-style:normal;--jc-more-rule:3px}

/* every clip box: absolutely placed, never catches input, clips its video to its own corners */
.jc-clip{position:absolute;overflow:hidden;pointer-events:none;background:var(--jc-clip-letterbox)}
.jc-clip>video{position:absolute;left:0;top:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%;background:transparent;border:0;outline:0}
.jc-clip>video.jc-clip-contain{object-fit:contain}

/* while a clip is on, the drawn contents of its host are hidden behind it (the device, panel and chrome stay) */
.jc-clip-host>:not(.jc-clip):not(.jc-clip-keep){visibility:hidden!important}
.jc-clip-hide{visibility:hidden!important}

/* recruiting-v2 · inside a drawn phone's screen (.phone .scr) or a drawn laptop's screen (.lscr): the whole screen */
.jc-clip-screen{left:0;top:0;width:100%;height:100%;border-radius:inherit;z-index:20}
/* recruiting-v2 · a scene with no device: a drawn screen on the proof panel (.dz), placed and sized by the script */
.jc-clip-panel{border:1.5px solid var(--jc-clip-panel-rule);border-radius:10px;background:var(--jc-clip-panel-ground);z-index:20}

/* devtools-b · inside the resolved screen (.reveal .win), under its title bar; the bar keeps its dots, loses its text */
.jc-clip-win{left:0;right:0;bottom:0;z-index:5;background:var(--jc-clip-panel-ground)}
.jc-clip-win>video{object-fit:var(--jc-clip-win-fit);object-position:50% 0}
.jc-clip-keep.jc-clip-chrome{color:transparent!important}
/* the pencil note and its leader point at a line of the drawn screen, which the recording now covers: hidden with it
   (the page appends the note last in the blueprint svg, so the note and every sibling after it are the note's parts) */
section.jc-clip-on .panel svg.bp-out text.note,section.jc-clip-on .panel svg.bp-out text.note~*{visibility:hidden}

/* the say line: one plain-language sentence under the clip's frame, above its label; two lines at most */
.jc-clip-say{margin:0;font-family:var(--jc-clip-say-face);font-style:var(--jc-clip-say-style);font-weight:400;font-size:17px;line-height:1.28;
  letter-spacing:0;color:var(--jc-clip-say-ink);text-wrap:pretty;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.jc-clip-say.jc-clip-say-empty{display:none}

/* the strip: "more from <product>", one 160 px poster per further clip with its say line beside it */
.jc-more{margin:0}
.jc-more-title{margin:0 0 6px;font:500 11px/14px var(--jc-more-small);color:var(--jc-clip-say-ink)}
.jc-more-row{display:flex;gap:36px;align-items:flex-start}
.jc-more-item{appearance:none;-webkit-appearance:none;display:flex;gap:14px;align-items:flex-start;margin:0;padding:0;border:0;border-radius:0;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.jc-more-thumb{position:relative;flex:none;width:160px;height:100px;border:var(--jc-more-rule) solid var(--jc-clip-say-ink);border-radius:6px;
  overflow:hidden;background:var(--jc-clip-letterbox)}
.jc-more-thumb>.jc-more-img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 50%}
.jc-more-thumb>.jc-more-img.jc-clip-contain{object-fit:contain}
.jc-more-say{width:300px;font-family:var(--jc-clip-say-face);font-style:var(--jc-clip-say-style);font-weight:400;font-size:14px;line-height:1.32;
  color:var(--jc-clip-say-ink);text-wrap:pretty}
.jc-more-item:focus{outline:none}
.jc-more-item:focus-visible .jc-more-thumb{outline:2px solid var(--jc-clip-say-ink);outline-offset:2px}
.jc-more-item:hover .jc-more-say{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* devtools-b · under the resolved screen, placed by the script; they show while the screen is resolved and go with it */
.jc-clip-say-dt,.jc-more-dt{position:absolute;z-index:6;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
section.jc-clip-shown .jc-clip-say-dt,section.jc-clip-shown .jc-more-dt{opacity:1;visibility:visible;transform:none;
  transition:opacity .45s ease .1s,transform .45s ease .1s,visibility 0s}
/* the strip stays in the tab order while it is folded away (a poster that takes focus scrolls its screen to resolved) */
.jc-more-dt{visibility:visible;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
section.jc-clip-shown .jc-more-dt{pointer-events:auto}
/* with a strip, the bench and its label step down under it and the drawing's title block (which it covers) is hidden */
section.jc-clip-more .jc-more-bench,section.jc-clip-more .jc-more-cap{transition:top .45s cubic-bezier(.2,.7,.2,1)}
section.jc-clip-more.jc-clip-shown .jc-more-bench{top:var(--jc-more-bench)}
section.jc-clip-more.jc-clip-shown .jc-more-cap{top:var(--jc-more-cap)}
section.jc-clip-more.jc-clip-shown .panel svg.bp-out .tb{visibility:hidden}
html[data-motion="still"] .jc-clip-say-dt,html[data-motion="still"] .jc-more-dt,
html[data-motion="still"] .jc-more-bench,html[data-motion="still"] .jc-more-cap{transition:none!important}
@media (prefers-reduced-motion:reduce){
  .jc-clip-say-dt,.jc-more-dt,.jc-more-bench,.jc-more-cap{transition:none!important}
}

/* games-b · inside the "play it" frame (#mview) */
.jc-clip-modal{left:0;top:0;width:100%;height:100%;z-index:2}
/* games-b · the "play it" button the layer adds to a box that had none: the page's own .play look, above the sticker */
.fc.front>.play.jc-clip-play{z-index:2}

/* review aid: ?clips=outline outlines every slot that received a clip (drawn by a layer above the video, because a
   playing video is composited over its own box's outline) */
html.jc-clips-outline .jc-clip::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;border:2px dashed var(--jc-clip-outline);border-radius:inherit;pointer-events:none}
html.jc-clips-outline .jc-clip-cap-on{outline:1px dashed var(--jc-clip-outline);outline-offset:2px}