@namespace svg url(http://www.w3.org/2000/svg);
/* ============================================================ default drawings
   What shows where an event's picture would be, until it has one (events/illustrations.py).
   Each scene stands in the Exhibition's arched hall; the hall never moves, only small things
   inside it, and --phase (set per event) starts every card at its own point of the motion. */
.ill{--ig:var(--accent-300);--is:rgb(255 255 255 / .6);--ih:rgb(255 255 255 / .18);--ik:1;--phase:0s;
  position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 120% at 100% 0%,color-mix(in oklab,var(--accent) 42%,transparent),transparent 60%),
             linear-gradient(160deg,var(--primary-700),var(--brand-deep) 70%)}
[dir="ltr"] .ill{background:radial-gradient(90% 120% at 0% 0%,color-mix(in oklab,var(--accent) 42%,transparent),transparent 60%),
                            linear-gradient(200deg,var(--primary-700),var(--brand-deep) 70%)}
/* it fills whatever frame the picture would have filled */
.ill{display:block;width:100%;height:100%;place-self:stretch}
.ill.ill-big{--ik:1.7}                                 /* full-width places: bolder lines */
.ill.ill-back{position:absolute;inset:0;z-index:-2}    /* behind a card's text, where the picture lies */
/* important: the frames' old stand-in rules (".ph svg" and the like) must not shrink or fade it */
.ill>svg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  display:block;opacity:1!important;margin:0!important}
.ill svg *{vector-effect:non-scaling-stroke}

/* Colours and line weights stand without an .ill ancestor: a <use> copy lives in its own shadow
   tree, where a selector cannot see the card around it (the variables still inherit into it).
   svg|* keeps these short names off every non-SVG element of the site. */
/* colours: gold, soft white, hint of white, white; lines, then fills */
svg|*.ig{stroke:var(--ig)} svg|*.is{stroke:var(--is)} svg|*.ih{stroke:var(--ih)} svg|*.iwl{stroke:#fff}
svg|*.igf{fill:var(--ig)} svg|*.isf{fill:var(--is)} svg|*.ihf{fill:var(--ih)} svg|*.iwf{fill:#fff}
/* line weights, in screen pixels whatever the card's size */
svg|*.iw1,svg|*.iw2,svg|*.iw3,svg|*.iw4,svg|*.iw6{vector-effect:non-scaling-stroke}
svg|*.iw1{stroke-width:calc(1.4px * var(--ik))} svg|*.iw2{stroke-width:calc(2px * var(--ik))}
svg|*.iw3{stroke-width:calc(2.6px * var(--ik))} svg|*.iw4{stroke-width:calc(4px * var(--ik))}
svg|*.iw6{stroke-width:calc(5.5px * var(--ik))}

.ill-hall{fill:none;stroke:var(--ih);stroke-width:calc(1.6px * var(--ik))}
.ill-dash{stroke-dasharray:3 7}
.ill-lamp{fill:var(--ig)}
.ill-beam{animation:ill-glow 5s ease-in-out infinite;animation-delay:var(--phase)}
.ill-beam.ill-b{animation-delay:calc(var(--phase) - 1.7s)} .ill-beam.ill-c{animation-delay:calc(var(--phase) - 3.4s)}

/* ------------------------------------------------------------ the motions, set on each shape
   --d its duration, --o its offset from the card's phase, and per motion its size */
.ill .ia-spin,.ill .ia-spin-r,.ill .ia-swing,.ill .ia-glow,.ill .ia-blink,.ill .ia-rise,.ill .ia-bob,
.ill .ia-draw,.ill .ia-grow,.ill .ia-pop,.ill .ia-slide,.ill .ia-orbit,.ill .ia-pull,.ill .ia-flip,.ill .ia-sweep,.ill .ia-march,.ill .ia-turn{
  animation-delay:calc(var(--phase) + var(--o, 0s));animation-iteration-count:infinite}
/* turn round and round: gears, a globe, a turntable */
.ill .ia-spin,.ill .ia-spin-r{transform-box:fill-box;transform-origin:center;animation-name:ill-spin;animation-duration:var(--d, 8s);animation-timing-function:linear}
.ill .ia-spin-r{animation-direction:reverse}
/* sway to and fro about a point set on the shape (transform-origin): a crane's jib, a lamp */
.ill .ia-swing{transform-box:view-box;animation-name:ill-swing;animation-duration:var(--d, 6s);animation-timing-function:ease-in-out;animation-direction:alternate}
/* move from one thing to the next and rest on each (left, middle, right, and back): a spotlight */
.ill .ia-sweep{transform-box:view-box;animation-name:ill-sweep;animation-duration:var(--d, 9s);animation-timing-function:ease-in-out;animation-direction:alternate}
/* light up and dim: signs, screens, spotlights */
.ill .ia-glow{animation-name:ill-glow-2;animation-duration:var(--d, 6s);animation-timing-function:ease-in-out}
/* a quick sparkle */
.ill .ia-blink{animation-name:ill-blink;animation-duration:var(--d, 3s);animation-timing-function:ease-in-out}
/* rise and fade: steam, bubbles */
.ill .ia-rise{animation-name:ill-rise;animation-duration:var(--d, 3.6s);animation-timing-function:ease-out}
/* lift a little and settle: a price tag, a dome, a hat */
.ill .ia-bob{animation-name:ill-bob;animation-duration:var(--d, 4s);animation-timing-function:ease-in-out;animation-direction:alternate}
/* a line drawing itself (give the shape pathLength="100") */
.ill .ia-draw{stroke-dasharray:100;animation-name:ill-draw;animation-duration:var(--d, 6s);animation-timing-function:ease-out}
/* grow up from the ground: seedlings, bars of a chart */
.ill .ia-grow{transform-box:fill-box;transform-origin:bottom;animation-name:ill-grow;animation-duration:var(--d, 7s);animation-timing-function:ease-out}
/* appear, stay, go (with --o, one after another): floors of a model */
.ill .ia-pop{opacity:0;animation-name:ill-pop;animation-duration:var(--d, 8s);animation-timing-function:ease-out}
/* slide a little to the side and back: a belt, a card into a machine */
.ill .ia-slide{animation-name:ill-slide;animation-duration:var(--d, 5s);animation-timing-function:ease-in-out}
/* a gleam running round an ellipse (give it pathLength="100") */
.ill .ia-orbit{stroke-dasharray:9 91;animation-name:ill-orbit;animation-duration:var(--d, 3.6s);animation-timing-function:linear}
/* taken out and put back after a pause: a book from a shelf */
.ill .ia-pull{animation-name:ill-pull;animation-duration:var(--d, 7.5s);animation-timing-function:ease-in-out}
/* turn over on the spot and back after a pause (--s how far: -1 all the way, -.5 a door ajar) */
.ill .ia-flip{transform-box:fill-box;transform-origin:center;animation-name:ill-flip;animation-duration:var(--d, 6s);animation-timing-function:ease-in-out}
/* keep turning about an upright axis: a globe's meridians, a ring on its stand, a coin */
.ill .ia-turn{transform-box:fill-box;transform-origin:center;animation-name:ill-turn;animation-duration:var(--d, 6s);animation-timing-function:ease-in-out}
/* travel one way across (--x), fading in and out: boxes on a belt, a car on a model road, a cloud */
.ill .ia-march{animation-name:ill-march;animation-duration:var(--d, 6s);animation-timing-function:linear}

@keyframes ill-spin{to{transform:rotate(360deg)}}
@keyframes ill-swing{from{transform:rotate(calc(var(--a, 6deg) * -1))}to{transform:rotate(var(--a, 6deg))}}
@keyframes ill-sweep{0%,12%{transform:rotate(var(--a, 22deg))}38%,62%{transform:rotate(0)}88%,100%{transform:rotate(calc(var(--a, 22deg) * -1))}}
@keyframes ill-glow{50%{opacity:.4}}
@keyframes ill-glow-2{0%,45%,100%{opacity:var(--lo, .3)}60%,85%{opacity:1}}
@keyframes ill-blink{0%,60%,100%{opacity:0}75%{opacity:1}}
@keyframes ill-rise{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(var(--y, -40px))}}
@keyframes ill-bob{from{transform:translateY(0)}to{transform:translateY(var(--y, -6px))}}
@keyframes ill-draw{0%{stroke-dashoffset:100}45%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ill-grow{0%{transform:scaleY(.15);opacity:.4}40%,88%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes ill-pop{0%{opacity:0;transform:translateY(-5px)}10%,86%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ill-slide{0%,20%,100%{transform:translateX(0)}45%,70%{transform:translateX(var(--x, 12px))}}
@keyframes ill-orbit{to{stroke-dashoffset:-100}}
@keyframes ill-pull{0%,50%,100%{transform:translateY(0)}60%,82%{transform:translateY(var(--y, -10px))}}
@keyframes ill-flip{0%,35%,100%{transform:scaleX(1)}50%,85%{transform:scaleX(var(--s, -1))}}
@keyframes ill-turn{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
@keyframes ill-march{0%{transform:translateX(0);opacity:0}12%,88%{opacity:1}100%{transform:translateX(var(--x, 60px));opacity:0}}

@media (prefers-reduced-motion:reduce){
  .ill *{animation:none!important}
  .ill .ia-pop{opacity:1} .ill .ia-draw{stroke-dashoffset:0}
}