/* Playground (assets/js/play.js). Everything lives under #wayPlay so it can sit on top of the home page. */
@font-face{font-family:"Switzer";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/Switzer-Medium.woff2) format("woff2")}
@font-face{font-family:"Switzer";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/Switzer-Regular.woff2) format("woff2")}
#wayPlay{position:fixed;top:0;bottom:0;left:0;width:100vw;z-index:2147482000;visibility:hidden;overflow:hidden;background:#101010;color:#fffaee;font:500 15px/1.3 "Switzer",system-ui,sans-serif;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#wayPlay.on{visibility:visible}
/* noise: on the home page the home's own .grain layer stays on top of everything; this one is only for play.html opened on its own */
#wayPlay.solo::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.022;background:url(../img/noise.png) repeat;background-size:14.55vw 14.55vw}
#wayPlay *{box-sizing:border-box;margin:0}
#wayPlay .wp-gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#wayPlay .wp-gl.drag{cursor:grabbing}#wayPlay .wp-gl.hov{cursor:pointer}
#wayPlay .wp-bar{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s .35s}
#wayPlay.on .wp-bar{opacity:1}
#wayPlay .wp-bar a,#wayPlay .wp-bar button{pointer-events:auto;color:inherit;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;opacity:.6;transition:opacity .2s}
#wayPlay .wp-bar a:hover,#wayPlay .wp-bar button:hover{opacity:1}
#wayPlay .wp-top{top:0}
#wayPlay .wp-bot{bottom:0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
#wayPlay .wp-cap{display:none;opacity:.85}
#wayPlay .wp-zoom{display:flex;gap:18px;margin-left:auto}
@media (hover:none){#wayPlay .wp-cap{display:block}}   /* touch devices keep the page label */
#wayPlay .wp-fb{position:absolute;inset:0;overflow:auto;padding:64px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;align-content:start}
#wayPlay .wp-fb img{width:100%;display:block}
#wayPlay .wp-lb{position:absolute;inset:0;z-index:20;background:rgba(16,16,16,0);display:none;cursor:zoom-out;transition:background .5s}
#wayPlay .wp-lb.on{display:block}#wayPlay .wp-lb.in{background:rgba(16,16,16,.9)}
#wayPlay .wp-lbimg{position:absolute;left:0;top:0;transform-origin:0 0;object-fit:cover;background:#1e1e1e;transition:transform .6s cubic-bezier(.16,.84,.3,1),opacity .5s}
/* Headline + body of the opened shot: Switzer Medium 14 / 1.28 / -1.5%, centred, max 600px (Figma "Play around"). Scrambled in by play.js */
#wayPlay .wp-lbcap{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:min(600px,calc(100% - 48px));text-align:center;font-weight:500;font-size:14px;line-height:1.28;letter-spacing:-.21px;word-break:break-word;opacity:0;transition:opacity .25s;pointer-events:none}
#wayPlay .wp-lbcap>b{display:block;font-weight:500;color:#fffaee;--c:#fffaee}
#wayPlay .wp-lbcap>span{display:block;color:rgba(255,250,238,.4);--c:rgba(255,250,238,.4);white-space:pre-line}
#wayPlay .wp-sc{position:relative;color:transparent}
#wayPlay .wp-sc::after{content:attr(data-s);position:absolute;left:0;top:0;width:100%;text-align:center;color:var(--c)}
#wayPlay .wp-lb.in .wp-lbcap{opacity:1}
@media (prefers-reduced-motion:reduce){#wayPlay .wp-lbimg{transition-duration:.01s}}