/* The logo as the projector it is drawn as: its lamp comes on and
   gobo-projector.js moves the light around a drifting crowd. */

.projector{ max-width:820px; margin:0 auto 36px; }
.projector svg{ display:block; width:100%; height:auto; overflow:visible; }

.gp-mark path{ fill:none; stroke:var(--green); stroke-width:32.85; stroke-miterlimit:12; }
.gp-mark .gp-glow{ fill:rgba(111,190,140,.3); stroke:none; }

/* Everything the light touches is drawn by the script; without it only the mark shows. */
.gp-beam{ fill:url(#gp-beam); opacity:0; }
.gp-pool{ fill:url(#gp-pool); opacity:0; }
.gp-rim{ fill:none; stroke:var(--green-glow); stroke-width:1.5; stroke-dasharray:2 9; opacity:0; }
.gp-motes circle{ fill:#fff; opacity:0; }
.gp-nodes circle{ opacity:0; }
.gp-links line{ stroke:var(--green); stroke-linecap:round; }
.gp-halo{ fill:none; stroke:var(--green); stroke-width:2; opacity:0; }

/* One gesture: the projector swings round to face the room, then its lamp comes on. */
.gp-swing{ transform-box:fill-box; transform-origin:49% 50%; }
.js .projector .gp-swing{ opacity:0; }
.js .projector.in .gp-swing{ opacity:1; animation:gp-swing .75s cubic-bezier(.34,1.45,.64,1) both, gp-show .3s ease-out both; }
.js .projector .gp-glow{ opacity:0; }
.js .projector.in .gp-glow{ opacity:1; transition:opacity .3s .6s ease-out; }

@keyframes gp-swing{ from{ transform:rotate(-140deg) scale(.7); } to{ transform:none; } }
@keyframes gp-show{ from{ opacity:0; } to{ opacity:1; } }

@media(prefers-reduced-motion:reduce){
  .js .projector .gp-swing, .js .projector .gp-glow{ opacity:1; animation:none; transition:none; }
}