/* ------------------------------------------------------------------
   The Schaffhausen stand. Built the same way as the TOKEN2049 room:
   real geometry out of Blender, drawn live as line work, turning with
   the cursor. Everything is a drawing except the banner and the flag,
   which are the artwork itself.
   ------------------------------------------------------------------ */
.fairsec{padding:80px 0 0}

.standwrap{position:relative;margin-top:54px}
#fstage{position:relative;width:100%;height:clamp(300px,35vw,560px);
  opacity:0;transition:opacity .9s var(--e)}
#fstage.live{opacity:1}
#fstage canvas{display:block;width:100%;height:100%}
#fload{position:absolute;left:0;right:0;top:48%;text-align:center;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--mute);transition:opacity .4s var(--e)}
#fstage.live #fload{opacity:0}

/* the callouts ride on the model, so they keep pointing at the right
   thing while it turns */
#fcalls{position:absolute;inset:0;pointer-events:none;z-index:3}
#fcalls svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#fcalls svg line{stroke:var(--ink);stroke-width:1;opacity:.5}
.call{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s var(--e)}
.call.on{opacity:1}
.call i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;
  background:var(--wine)}
.call span{position:absolute;white-space:nowrap;display:inline-flex;align-items:center;
  height:18px;padding:2px 6px 0;background:var(--ink);color:var(--chiptx);
  font-size:11px;line-height:14px;letter-spacing:.18em;font-weight:500;text-transform:uppercase}
.call.lft span{transform:translate(-100%,-50%)}
.call.rgt span{transform:translate(0,-50%)}

.shint{display:flex;gap:16px;align-items:center;margin-top:22px;flex-wrap:wrap}

/* ---------- the two pieces of artwork, revealed by scroll ---------- */
.fairart{margin-top:84px}
.fairrow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.fairban{position:relative;overflow:hidden;background:var(--plate)}
.fairban img{width:100%;clip-path:inset(0 100% 0 0);will-change:clip-path}
.fairban i{position:absolute;top:0;bottom:0;width:1px;background:var(--lime);opacity:0;
  box-shadow:0 0 14px rgba(204,241,84,.9)}
.fairflag{position:relative;overflow:hidden;background:var(--dgreen);max-width:264px}
.fairflag img{width:100%;clip-path:inset(100% 0 0 0);will-change:clip-path}
.faircap{display:flex;gap:18px;align-items:baseline;margin-top:14px}
.faircap .lab{flex:0 0 108px}
.faircap>div{max-width:780px}
.faircap .t{font-size:17px;line-height:21px;font-weight:500;letter-spacing:-.01em}
.faircap .s{font-size:14px;line-height:19px;opacity:.6}

.fairkit{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:70px;
  border-top:1px solid rgba(45,18,13,.14);padding-top:24px}
.fairkit .n{font-size:17px;line-height:22px;font-weight:500;letter-spacing:-.01em;margin-top:8px}
.fairkit p{font-size:14px;line-height:19px;opacity:.6;margin-top:5px}

@media (max-width:1100px){
  .fairrow{grid-template-columns:1fr;gap:34px}
  .fairflag{max-width:240px}
  .fairkit{grid-template-columns:1fr 1fr;gap:20px}
  #fstage{height:clamp(260px,56vw,480px)}
  .call span{font-size:10px;letter-spacing:.14em;height:16px}
}
@media (max-width:640px){
  .fairkit{grid-template-columns:1fr}
  #fcalls{display:none}
}