/* "Kinematic for Animators": a hero of real viewport and render loops, the keys an animator reaches for, six jobs
   from blocking to the final frame (each with a picture of the app), a layout and render row with the command
   line, three bands of what is new for animators (sound, simulation, live), files and gear, tutorials and demos,
   honest gaps, and the download. Class names start with fa- so nothing clashes with the shared sheets. */

/* hero */
.fa-hero{position:relative;padding-block:calc(var(--barh) + var(--navh) + 52px) 56px;overflow:hidden}
.fa-hero canvas{position:absolute;inset:0;width:100%;height:100%}
.fa-hwrap{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.fa-hero h1{font-size:clamp(44px,5.2vw,84px);line-height:.95;letter-spacing:-.05em}
.fa-hero h1 i{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.fa-hero .sub{margin-top:24px;font-size:clamp(18px,1.45vw,21px);line-height:1.45;max-width:520px}
.fa-hero .ctas{margin-top:30px}
.fa-hmeta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;color:var(--mute)}
.fa-hmeta span{display:flex;align-items:center;gap:8px}
.fa-hmeta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.fa-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.fa-tile{position:relative;margin:0;aspect-ratio:16/10;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#000;min-width:0}
.fa-tile.big{grid-column:1/-1;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.fa-tile video,.fa-tile img{width:100%;height:100%;object-fit:cover;display:block}
.fa-tile figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);font-family:var(--mono);font-size:11px;color:var(--fg);background:rgba(6,8,11,.84);padding:4px 8px;border-radius:2px;line-height:1.35}
.fa-tile figcaption b{color:var(--accent);font-weight:500;margin-right:6px}
.fa-credit{grid-column:1/-1;margin:2px 0 0;color:var(--dim);font-size:11px}

/* keys strip */
.fa-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.fa-kc{padding:26px 24px 24px;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--line);min-width:0}
.fa-kc:first-child{padding-left:0}
.fa-kc:last-child{border-right:0}
.fa-kc .k{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fa-kc p{color:var(--mute);font-size:15.5px;line-height:1.45}
.fa-kc p b{color:var(--fg);font-weight:500}
.fa-keys kbd{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 9px;font-family:var(--mono);font-size:13px;color:var(--fg);background:linear-gradient(#171d25,#10151b);border:1px solid var(--line-2);border-bottom-width:3px;border-radius:6px;line-height:1}

/* the work */
.fa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fa-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--ink-2);overflow:hidden;min-width:0;transition:border-color .2s}
.fa-card:hover{border-color:var(--line-2)}
.fa-card figure{position:relative;margin:0;aspect-ratio:16/10;background:#000;border-bottom:1px solid var(--line);overflow:hidden}
.fa-card figure img,.fa-card figure video{width:100%;height:100%;object-fit:cover;display:block}
.fa-card figure.fa-ptop img{object-position:left top}
.fa-card figure.fa-ctop figcaption{top:10px;bottom:auto}
.fa-card figcaption,.fa-shot figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);font-family:var(--mono);font-size:10.5px;color:var(--fg);background:rgba(6,8,11,.84);padding:3px 7px;border-radius:2px;line-height:1.35}
.fa-card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.fa-tag{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.fa-tag i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.fa-card h3,.fa-wtext h3{font-size:clamp(21px,1.75vw,25px);letter-spacing:-.03em;line-height:1.1}
.fa-card p,.fa-wtext p{color:var(--mute);font-size:15px;line-height:1.5}
.fa-pills{font-size:11px}
.fa-pills span{padding:4px 7px}
.fa-pills b{color:var(--dim)}
.fa-go{align-self:flex-start;margin-top:auto;font-size:14.5px;color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.fa-go span{color:var(--c,var(--accent))}
.fa-go:hover{border-color:var(--c,var(--accent))}
.fa-wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22px,3.5vw,48px);margin-top:14px;padding:clamp(20px,2.6vw,34px);border:1px solid var(--line);border-radius:8px;background:var(--ink-2);align-items:start}
.fa-wtext{display:flex;flex-direction:column;gap:12px;min-width:0}
.fa-golist{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:4px}
.fa-golist .fa-go{margin-top:0}
.fa-wmedia{display:grid;gap:12px;min-width:0}
.fa-wmedia .fa-shot{aspect-ratio:16/10}
.fa-wmedia .code pre{font-size:12.5px}

/* shots */
.fa-shot{position:relative;margin:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#000;min-width:0}
.fa-shot video,.fa-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* bands */
.fa-band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vw,72px);align-items:center;padding-block:clamp(56px,6vw,96px);border-top:1px solid var(--line)}
.fa-band.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fa-band.flip .fa-btext{order:2}
.fa-btext{display:flex;flex-direction:column;gap:18px;min-width:0}
.fa-btext .eyebrow{display:flex;align-items:center;gap:9px;margin:0;color:var(--mute)}
.fa-btext .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.fa-btext h2{font-size:clamp(34px,3.9vw,60px);line-height:.98;letter-spacing:-.045em}
.fa-btext > p{color:var(--mute);font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.55;max-width:540px}
.fa-btext > p b{color:var(--fg);font-weight:500}
.fa-ticks{list-style:none;display:grid;gap:9px;border-top:1px solid var(--line);padding-top:16px}
.fa-ticks li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:15px;color:var(--fg);line-height:1.45}
.fa-ticks li::before{content:"";width:8px;height:8px;margin-top:.5em;border-radius:2px;background:var(--c)}
.fa-bgo{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14.5px}
.fa-bgo a{color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.fa-bgo a:hover{border-color:var(--c)}
.fa-m3{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:10px;min-width:0}
.fa-m3 .a{grid-row:1/3;aspect-ratio:auto;min-height:100%}
.fa-m3 .b,.fa-m3 .c{aspect-ratio:16/10}

/* how it fits */
.fa-files{border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.fa-files .r{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,3fr) minmax(0,3fr);border-top:1px solid var(--line)}
.fa-files .r:first-child{border-top:0}
.fa-files .r > div{padding:14px 18px;min-width:0;font-size:15px;color:var(--mute);line-height:1.45}
.fa-files .r > div:first-child{color:var(--fg);font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.fa-files .r > div:first-child small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:0;color:var(--dim);margin-top:3px}
.fa-files .hd > div{font-family:var(--mono) !important;font-weight:400 !important;font-size:11.5px !important;letter-spacing:.06em !important;text-transform:uppercase;color:var(--dim) !important;background:var(--ink-2);padding-block:11px !important}
.fa-files .r .out{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.fa-fnote{margin-top:12px;padding:14px 18px;border-left:2px solid var(--accent);background:var(--ink-2);color:var(--mute);font-size:15px;border-radius:0 4px 4px 0}
.fa-fnote b{color:var(--fg);font-weight:500}
.fa-fnote a{color:var(--fg);border-bottom:1px solid var(--line-2);margin-left:4px}
.fa-gear{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:36px;border-top:1px solid var(--line-2)}
.fa-gear div{display:flex;flex-direction:column;gap:6px;padding:18px 22px 18px 0;border-bottom:1px solid var(--line);min-width:0}
.fa-gear div:not(:nth-child(3n+1)){padding-left:22px;border-left:1px solid var(--line)}
.fa-gear b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.fa-gear span{color:var(--mute);font-size:15px;line-height:1.45}
.fa-from{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:28px}
.fa-from a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);transition:border-color .2s;min-width:0}
.fa-from a:hover{border-color:var(--c)}
.fa-from b{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em}
.fa-from b i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}
.fa-from span{color:var(--mute);font-size:14px}

/* where to start */
.fa-lessons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fa-lesson{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--ink-2);overflow:hidden;min-width:0;transition:border-color .2s}
.fa-lesson:hover{border-color:var(--accent)}
.fa-lesson .pic{aspect-ratio:16/10;background:#000;overflow:hidden;border-bottom:1px solid var(--line)}
.fa-lesson .pic img{width:100%;height:100%;object-fit:cover;display:block}
.fa-lesson .pic.contain img{object-fit:contain}
.fa-lesson .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px}
.fa-lesson .body span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.fa-lesson h3{font-size:19px;letter-spacing:-.02em;line-height:1.15}
.fa-lesson p{color:var(--mute);font-size:14.5px;line-height:1.5}
.fa-how{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin:22px 0 40px;color:var(--mute);font-size:15px}
.fa-how a{color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.fa-how a:hover{border-color:var(--accent)}
.fa-demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fa-demo{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--ink-2);overflow:hidden;min-width:0;transition:border-color .2s}
.fa-demo:hover{border-color:var(--accent)}
.fa-demo .pic{aspect-ratio:16/9;background:#000;overflow:hidden;border-bottom:1px solid var(--line)}
.fa-demo .pic img{width:100%;height:100%;object-fit:cover;display:block}
.fa-demo .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.fa-demo h3{font-size:21px;letter-spacing:-.025em;line-height:1.1}
.fa-demo p{color:var(--mute);font-size:14.5px;line-height:1.5}
.fa-demo .need{font-size:11px;color:var(--dim)}
.fa-demo .open{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:9px;font-size:14px;color:var(--mute)}
.fa-demo .open i{width:0;height:0;border-left:7px solid var(--accent);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

/* gaps */
.fa-gaps{border-top:1px solid var(--line)}
.fa-gwrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.fa-gwrap .lede{margin-top:18px}
.fa-gwrap .lede a{color:var(--fg);border-bottom:1px solid var(--line-2)}
.fa-gwrap ul{list-style:none;border-top:1px solid var(--line-2)}
.fa-gwrap li{padding:15px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:17px}
.fa-gwrap li::before{content:"";width:10px;height:10px;margin-top:8px;border-radius:50%;border:1.5px solid var(--mute)}
.fa-gwrap li span{display:block;color:var(--mute);font-size:15px;margin-top:3px}

/* the end */
.fa-end{padding-top:0}
.fa-band-end{margin-top:0;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--accent2) 8%,transparent) 60%,transparent)}
.fa-band-end h3{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.045em}
.fa-endgo{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.fa-reach{color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px;font-size:15.5px}
.fa-reach:hover{border-color:var(--accent)}

@media (max-width:1180px){
  .fa-grid,.fa-demos{grid-template-columns:1fr 1fr}
  .fa-lessons{grid-template-columns:1fr 1fr}
  .fa-from{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .fa-hwrap,.fa-band,.fa-band.flip,.fa-gwrap,.fa-wide{grid-template-columns:1fr}
  .fa-band.flip .fa-btext{order:0}
  .fa-keys{grid-template-columns:1fr 1fr}
  .fa-kc:nth-child(2){border-right:0}
  .fa-kc:nth-child(3){padding-left:0}
  .fa-kc:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .fa-gear{grid-template-columns:1fr 1fr}
  .fa-gear div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .fa-gear div:nth-child(2n){padding-left:22px;border-left:1px solid var(--line)}
}
@media (max-width:760px){
  .fa-grid,.fa-demos,.fa-lessons{grid-template-columns:1fr}
  .fa-keys{grid-template-columns:1fr}
  .fa-kc,.fa-kc:nth-child(3){padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
  .fa-kc:last-child{border-bottom:0}
  .fa-m3{grid-template-columns:1fr 1fr}
  .fa-m3 .a{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10;min-height:0}
  .fa-files .r{grid-template-columns:1fr}
  .fa-files .r > div{padding:8px 16px}
  .fa-files .r > div:first-child{padding-top:14px}
  .fa-files .r > div:last-child{padding-bottom:14px}
  .fa-files .hd{display:none !important}
  .fa-files .r > div[data-h]::before{content:attr(data-h);display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
  .fa-gear{grid-template-columns:1fr}
  .fa-gear div,.fa-gear div:nth-child(2n){padding-left:0;border-left:0}
  .fa-from{grid-template-columns:1fr}
  .fa-tile:not(.big) figcaption span{display:none}
  .fa-tile:not(.big) figcaption b{margin-right:0}
  .fa-wide{padding:18px}
  .fa-band-end{padding:22px 20px}
}