/* The Wallcreeper motion system page (/work/wallcreeper/motion/), in the poster shell. The stages are canvases drawn
   by js/wc/ from four behaviours, ASCEND, GRIP, TENSION and TRAVERSE; this file only lays them out. The poster tokens are mapped to the names the
   stages were built with (--gap, --line) inside the page only. */
/* Wallcreeper type (SIL OFL, assets/fonts/wc/OFL.txt), here so the page needs one stylesheet fewer */
@font-face{font-family:"WC Geist";font-weight:100 900;font-display:swap;src:url("../assets/fonts/wc/geist.woff2") format("woff2")}
@font-face{font-family:"WC Geist Mono";font-weight:100 900;font-display:swap;src:url("../assets/fonts/wc/geist-mono.woff2") format("woff2")}
@font-face{font-family:"WC Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/wc/instrument-serif-italic.woff2") format("woff2")}
.wcm{--gap:var(--gut);--line:var(--rule)}
.wcm .cs-open{padding-top:2.5rem}
.wcm .wc-hero{background:var(--wc-graphite);color:var(--wc-chalk)}
.wcm .wc-hero .wc-cv{height:clamp(420px,72svh,860px)}
.wcm .wc-hero figcaption{position:static;margin-top:0.8rem;padding-inline:var(--pad)}
.wcm .wc-posters,.wcm .wc-loops,.wcm .wc-rules,.wcm .wc-rulelist,.wcm .pg,.wcm .wc-pack,.wcm .wc-type{padding-inline:var(--pad)}
.wcm .wc-loops{max-width:none}
.wcm .wc-pack>.cs2-plate,.wcm .wc-pack .cs2-text{padding-inline:0}
.wc-stage{margin:0;position:relative}
.wc-cv{position:relative;overflow:hidden}
.wc-cv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wc-hero .wc-cv{height:clamp(540px,94svh,1000px)}
.wc-stage figcaption{display:flex;justify-content:space-between;align-items:center;gap:1rem;font:600 0.6875rem/1.2 var(--ff-text);text-transform:uppercase}
.wc-stage figcaption>span{opacity:.72}
.wc-hero figcaption{position:absolute;left:var(--pad);right:var(--pad);bottom:1rem;color:var(--wc-chalk)}
.wc-pause{position:relative;z-index:2;min-height:44px;padding:0 0.9rem;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:600 0.6875rem/1 var(--ff-text);text-transform:uppercase;cursor:pointer}
.wc-pause:hover{color:inherit;background:color-mix(in srgb,currentColor 16%,transparent)}

/* 01 posters: three at a time, the image never cropped */
.wc-posters{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.wc-posters figure{margin:0}
.wc-poster{aspect-ratio:4/5;overflow:hidden;background:#E3DED4;outline:1px solid var(--line);outline-offset:9px;transition:clip-path 1.1s var(--ease-slow),transform 1.1s var(--ease-slow)}
.wc-poster img{width:100%;height:100%;object-fit:cover}
.wc-posters figcaption,.wc-slip figcaption{display:flex;justify-content:space-between;gap:1rem;margin-top:1.2rem;font-size:0.6875rem;font-weight:500;text-transform:uppercase}
.wc-posters figcaption span,.wc-slip figcaption span{opacity:.72}
@media (max-width:899px){.wc-posters{grid-template-columns:1fr;justify-items:center}.wc-posters figure{width:min(84vw,420px)}}

/* 03 the type, set live in the three faces */
.wc-frame-chalk{background:var(--wc-chalk)!important}
.wc-type{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:0.6rem;margin-top:clamp(2.4rem,2rem + 2vw,4rem)}
.wc-type p{grid-column:5/13}
.wc-t-mono{font:500 clamp(0.95rem,0.8rem + 0.5vw,1.2rem)/1.3 "WC Geist Mono",ui-monospace,monospace;letter-spacing:0.12em}
.wc-t-serif{font:italic 400 clamp(2.4rem,1.2rem + 4vw,5rem)/1 "WC Instrument Serif",Georgia,serif;letter-spacing:-0.01em}
.wc-t-sans{font:600 clamp(2rem,1rem + 3.6vw,4.6rem)/0.95 "WC Geist",system-ui,sans-serif;letter-spacing:-0.045em}
.wc-t-note{max-width:46ch;margin-top:1rem;font-size:0.9375rem;line-height:1.5;opacity:.8}
@media (max-width:899px){.wc-type p{grid-column:1/-1}}

/* 04 loops: three phones' worth, side by side; on a phone they scroll sideways */
.wc-dark{--line:color-mix(in srgb,currentColor 24%,transparent)}
.wc-loops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);max-width:1100px;margin:0 auto}
.wc-loops:focus-visible{outline:2px solid var(--wc-yellow,#F1E64C);outline-offset:6px}
.wc-loop .wc-cv{aspect-ratio:9/16;background:#2a2e32;outline:1px solid var(--line);outline-offset:9px}
.wc-loop figcaption{margin-top:1.2rem}
@media (max-width:759px){
  .wc-loops{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;padding-bottom:0.5rem;margin:0 calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad)}
  .wc-loop{flex:0 0 72vw;scroll-snap-align:center}
}

/* 05 and 09 the rules, two demos side by side */
.wc-rules{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.wc-demo .wc-cv{aspect-ratio:8/5;outline:1px solid var(--line);outline-offset:9px}
.wc-demo figcaption{margin-top:1.2rem}
.wc-rulelist{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem var(--gap);margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
.wc-rulelist dt{margin-bottom:0.5rem;font:500 0.8125rem/1.2 "WC Geist Mono",ui-monospace,monospace;letter-spacing:0.12em}
.wc-rulelist dd{margin:0;max-width:44ch;font-size:clamp(1rem,0.95rem + 0.3vw,1.2rem);line-height:1.45;letter-spacing:-0.012em}
.wc-rules4{row-gap:clamp(2.5rem,2rem + 2vw,4rem)}
.wc-rulelist4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.wc-rulelist4{grid-template-columns:1fr 1fr}}
@media (max-width:759px){.wc-rules,.wc-rulelist,.wc-rulelist4{grid-template-columns:1fr}.wc-demo .wc-cv{aspect-ratio:1/1}}
/* 05 the billboard: one wide stage */
.wcm .wc-wide{padding-inline:var(--pad)}
.wc-wide .wc-cv{aspect-ratio:16/7;background:var(--wc-graphite);outline:1px solid var(--line);outline-offset:9px}
.wc-wide figcaption{margin-top:1.2rem}
@media (max-width:759px){.wc-wide .wc-cv{aspect-ratio:4/3}}

/* 06 the playground */
.pg{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:start}
.pg-wall{position:relative;width:100%;margin:0 auto;max-width:100%;aspect-ratio:1080/1350;outline:1px solid var(--line);outline-offset:9px;touch-action:none}
.pg-wall canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.pg-wall canvas:focus-visible{outline:2px solid var(--wc-yellow,#F1E64C);outline-offset:4px}
.pg-controls{display:grid;gap:1.3rem;font-size:0.9375rem}
.pg-controls fieldset{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:0.5rem}
.pg-controls legend{width:100%;margin-bottom:0.55rem;font:500 0.75rem/1 "WC Geist Mono",ui-monospace,monospace;letter-spacing:0.12em;text-transform:uppercase;opacity:.8}
.pg-controls fieldset label{position:relative;cursor:pointer}
.pg-controls fieldset input{position:absolute;opacity:0;width:1px;height:1px}
.pg-controls fieldset span{display:inline-flex;align-items:center;min-height:44px;padding:0 0.9rem;border:1px solid color-mix(in srgb,currentColor 40%,transparent);border-radius:999px;font-size:0.8125rem;font-weight:500}
.pg-controls fieldset input:checked+span{background:var(--wc-chalk);color:var(--wc-graphite);border-color:var(--wc-chalk)}
.pg-controls fieldset input:focus-visible+span{outline:2px solid currentColor;outline-offset:3px}
.pg-field{display:grid;gap:0.5rem}
.pg-field>span{font:500 0.75rem/1 "WC Geist Mono",ui-monospace,monospace;letter-spacing:0.12em;text-transform:uppercase;opacity:.8}
.pg-field input[type=text]{min-height:44px;padding:0 0.9rem;border:1px solid color-mix(in srgb,currentColor 40%,transparent);background:transparent;color:inherit;font:inherit;font-size:1rem}
.pg-field input[type=range]{width:100%;accent-color:#F1E64C;box-sizing:content-box;height:16px;padding:14px 0;margin:-12px 2px}
.pg-check{display:flex;gap:0.6rem;align-items:center;font-size:0.875rem}
.pg-buttons{display:flex;flex-wrap:wrap;gap:0.5rem}
.pg-buttons button{min-height:44px;padding:0 1rem;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:600 0.75rem/1 var(--ff-text);text-transform:uppercase;cursor:pointer}
.pg-buttons button:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
.pg-buttons .pg-play{background:#F1E64C;border-color:#F1E64C;color:var(--wc-graphite)}
.pg-help{max-width:52ch;font-size:0.8125rem;line-height:1.5;opacity:.75}
@media (max-width:899px){.pg{grid-template-columns:1fr}}

/* 08 packaging and the slip */
.wc-pack{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:clamp(2rem,1.5rem + 2vw,3rem);align-items:end}
.wc-pack>.cs2-plate{grid-column:1/9}
.wc-slip{grid-column:9/13;margin:0}
.wc-slipframe{aspect-ratio:1240/1748;overflow:hidden;background:var(--wc-chalk);outline:1px solid var(--line);outline-offset:9px;box-shadow:0 18px 40px -24px rgba(29,32,35,.45);transition:clip-path 1.1s var(--ease-slow),transform 1.1s var(--ease-slow)}
.wc-slipframe img{width:100%;height:100%;object-fit:cover}
.wc-packtext{grid-column:5/11}
@media (max-width:899px){.wc-pack>.cs2-plate,.wc-slip,.wc-packtext{grid-column:1/-1}.wc-slip{width:min(70vw,340px)}}


/* without JavaScript a stage shows a still instead of an empty box */
.wc-cv .wc-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.wc-noscript{margin:0;padding:1rem 0;font-size:0.875rem;opacity:.8}