/* ============================================================
   The visitor
   A small pencil ghost who lives among the frames and makes
   himself useful. Drawn in single strokes: body, legs, brows,
   eyes, one considerable nose, and a mouth.

   Rules he obeys, always:
     · he stands on the mouldings, never over the picture
     · he never appears on In Memoriam
     · he stops when a plate is opened, and when motion is not wanted
     · he never touches where your click will land
   ============================================================ */

#ghostLayer{
  position:fixed; inset:0; z-index:62;
  pointer-events:none; overflow:hidden;
}
#ghostLayer[hidden]{display:none}

/* the pencil line he throws to the cursor, or along the floor to a door */
#ghostPath{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;
  transition:opacity .35s}
#ghostPath.on{opacity:.62}
#ghostPath path{fill:none;stroke:#241f1a;stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:1 7}
#ghostPath path.taut{stroke-dasharray:none;stroke-width:2.2}

.pghost{
  position:absolute; left:0; top:0;
  width:var(--g-w,76px); height:calc(var(--g-w,76px) * 1.30);
  will-change:transform;
  transform:translate3d(-400px,-400px,0);
  opacity:0; transition:opacity .5s ease;
}
.pghost.awake{opacity:.5}   /* half here, half not */

.g-shadow{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.g-face  {display:block;width:100%;height:100%;transform-origin:50% 82%}
.pghost.facing-left .g-face{transform:scaleX(-1)}
.g-squash{display:block;width:100%;height:100%;transform-origin:50% 96%}
.g-tilt  {display:block;width:100%;height:100%;transform-origin:50% 86%}
.g-bob   {display:block;width:100%;height:100%;transform-origin:50% 86%}
.pghost svg{display:block;width:100%;height:100%;overflow:visible}

/* ---------- the pencil ------------------------------------- */
.g-ink  {fill:none;stroke:#241f1a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.g-ink-t{fill:none;stroke:#241f1a;stroke-width:2.0;stroke-linecap:round;stroke-linejoin:round}
.g-ink-f{fill:none;stroke:#241f1a;stroke-width:3.0;stroke-linecap:round;stroke-linejoin:round}
.g-ink2 {fill:none;stroke:#241f1a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.32}
.g-paper{fill:#fdfbf5;opacity:.92}
.g-hatch{fill:url(#gHatch);opacity:.26}
.g-shade{fill:#241f1a;opacity:.10}
.g-pupil{fill:#241f1a;stroke:none}
.g-wine {fill:#7d2231;opacity:.72}
.g-cast {fill:#241f1a;opacity:.15;transition:opacity .3s}
.g-ember{fill:none;stroke:#c8442e;stroke-width:3.4;stroke-linecap:round}
.g-smokeline{fill:none;stroke:#241f1a;stroke-width:1.7;stroke-linecap:round;opacity:.5}

/* ---------- when he has had enough of being ignored --------- */
.pghost .g-ink,.pghost .g-ink-t,.pghost .g-ink-f,.pghost .g-ink2,
.pghost .g-paper,.pghost .g-pupil{transition:stroke .5s ease, fill .5s ease}
.pghost.angry .g-ink,.pghost.angry .g-ink-t,.pghost.angry .g-ink-f{stroke:#a3243a}
.pghost.angry .g-ink2{stroke:#c2506a}
.pghost.angry .g-paper{fill:#fbdfe4}
.pghost.angry .g-hatch{opacity:.16}
.pghost.angry .g-shade{fill:#a3243a;opacity:.13}
.pghost.angry .g-pupil{fill:#8d1b2f}
.pghost.angry .g-cast {fill:#a3243a;opacity:.20}
.pghost.st-angry .g-bob{animation:gSeethe .16s ease-in-out infinite}
.pghost.st-stomp .g-bob{animation:gSeethe .10s linear infinite}
.pghost.st-angry .g-tilt,.pghost.st-stomp .g-tilt{transform:scale(1.08)}
.pghost.st-angry .arm-l,.pghost.st-stomp .arm-l{transform:rotate(56deg)}
.pghost.st-angry .arm-r,.pghost.st-stomp .arm-r{transform:rotate(-56deg)}
.pghost.angry .prop-steam{opacity:.85;animation:propSteam 1.1s ease-out infinite}
@keyframes gSeethe{0%,100%{transform:translateX(-2%)}50%{transform:translateX(2%)}}
@keyframes propSteam{0%{opacity:.9;transform:translateY(0)}
                     100%{opacity:0;transform:translateY(-22%)}}

/* ---------- what he does to a painting ---------------------- */
#ghostLayer.fx-front{z-index:260}
/* against the dark of the viewer his pencil needs a light behind it */
#ghostLayer.fx-front .pghost{
  filter:drop-shadow(0 0 2px rgba(253,251,245,.95)) drop-shadow(0 0 7px rgba(253,251,245,.55));
}

.pghost.st-blow  .g-tilt{transform:rotate(13deg) translateX(6%)}
.pghost.st-blow  .arm-l{transform:rotate(-44deg)}
.pghost.st-blow  .arm-r{transform:rotate(38deg)}
.pghost.st-blow  .prop-puff{opacity:.8;animation:puffOut .5s ease-out infinite}
@keyframes puffOut{0%{opacity:0;transform:translateX(-8%)}
                   40%{opacity:.85}100%{opacity:0;transform:translateX(16%)}}

.pghost.st-chop  .g-tilt{transform:rotate(-9deg)}
.pghost.st-chop  .arm-l{transform:rotate(88deg)}
.pghost.st-chop  .arm-r{transform:rotate(-88deg)}
.pghost.st-chop  .prop-axe{opacity:1;animation:swing .34s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-26deg)}to{transform:rotate(16deg)}}
.pghost .prop-axe{transform-box:view-box;transform-origin:88px 38px}

.pghost.st-scrub .arm-l{animation:scrubL .30s linear infinite}
.pghost.st-scrub .arm-r{animation:scrubR .30s linear infinite}
.pghost.st-scrub .prop-suds{opacity:.85;animation:suds 1s ease-out infinite}
@keyframes scrubL{0%,100%{transform:rotate(20deg)}50%{transform:rotate(50deg)}}
@keyframes scrubR{0%,100%{transform:rotate(-52deg)}50%{transform:rotate(-20deg)}}
@keyframes suds{0%{opacity:0;transform:translateY(6%) scale(.7)}
                40%{opacity:.9}100%{opacity:0;transform:translateY(-18%) scale(1.15)}}

.pghost.st-cast  .arm-l{transform:rotate(-62deg)}
.pghost.st-cast  .arm-r{transform:rotate(62deg)}
.pghost.st-cast  .prop-spark{opacity:.85;animation:propTwinkle 1s ease-in-out infinite}

/* ---------- flowers, thrown for the pleasure of it ----------- */
.bloom{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.pghost.st-flowers .prop-bloom{opacity:1}
.pghost.st-flowers .bloom{animation:toss 2.5s cubic-bezier(.3,.05,.5,1) infinite}
.pghost.st-flowers .b2{animation-delay:.18s}
.pghost.st-flowers .b3{animation-delay:.36s}
.pghost.st-flowers .b4{animation-delay:.54s}
.pghost.st-flowers .b5{animation-delay:.72s}
.pghost.st-flowers .arm-l{transform:rotate(66deg)}
.pghost.st-flowers .arm-r{transform:rotate(-66deg)}
@keyframes toss{
  0%  {opacity:0; transform:translateY(28px) scale(.35) rotate(0)}
  18% {opacity:1}
  52% {opacity:1; transform:translateY(-20px) scale(1) rotate(150deg)}
  100%{opacity:0; transform:translateY(30px) scale(.85) rotate(310deg)}
}

/* ---------- the cigarette ----------------------------------- */
.pghost.st-smoke .prop-cig{opacity:1}
.pghost.st-smoke .g-smokeline{animation:puff 2.6s ease-out infinite}
@keyframes puff{0%{opacity:0;transform:translateY(6%) scaleY(.7)}
                35%{opacity:.55}
                100%{opacity:0;transform:translateY(-26%) scaleY(1.25)}}

/* ---------- which face is on -------------------------------- */
.eyes > *, .mouth > *{opacity:0;transition:opacity .16s}
.pghost[data-eyes="open"]  .e-open,
.pghost[data-eyes="wide"]  .e-wide,
.pghost[data-eyes="happy"] .e-happy,
.pghost[data-eyes="shut"]  .e-shut,
.pghost[data-eyes="cross"] .e-cross{opacity:1}
.pghost[data-mouth="smile"] .m-smile,
.pghost[data-mouth="grin"]  .m-grin,
.pghost[data-mouth="flat"]  .m-flat,
.pghost[data-mouth="o"]     .m-o,
.pghost[data-mouth="wave"]  .m-wave,
.pghost[data-mouth="smirk"] .m-smirk{opacity:1}

/* pupils only make sense with round eyes */
.pupils{opacity:0;transition:opacity .16s,transform .18s cubic-bezier(.2,.7,.2,1)}
.pghost[data-eyes="open"] .pupils,
.pghost[data-eyes="wide"] .pupils{opacity:1}

/* brows do half the acting */
.brow{transform-box:view-box;transition:transform .7s cubic-bezier(.25,.7,.25,1)}
.brow-l{transform-origin:36px 30px}
.brow-r{transform-origin:64px 29px}
.pghost[data-brows="up"]   .brow{transform:translateY(-4px)}
.pghost[data-brows="down"] .brow-l{transform:translateY(4px) rotate(17deg)}
.pghost[data-brows="down"] .brow-r{transform:translateY(4px) rotate(-17deg)}
.pghost[data-brows="quiz"] .brow-l{transform:translateY(-6px) rotate(-13deg)}
.pghost[data-brows="quiz"] .brow-r{transform:translateY(1px)}
.pghost[data-brows="sad"]  .brow-l{transform:rotate(-15deg)}
.pghost[data-brows="sad"]  .brow-r{transform:rotate(15deg)}

/* ---------- limbs ------------------------------------------- */
.arm,.leg{transform-box:view-box;transition:transform .85s cubic-bezier(.25,.7,.25,1)}
.arm-l{transform-origin:23px 62px}
.arm-r{transform-origin:77px 62px}
.leg-l{transform-origin:41px 84px}
.leg-r{transform-origin:59px 84px}

/* a positive angle on a left limb swings it outward; the right mirrors it */
.pghost[data-legs="stand"]  .leg-l{transform:rotate(0)}
.pghost[data-legs="stand"]  .leg-r{transform:rotate(0)}
.pghost[data-legs="apart"]  .leg-l{transform:rotate(13deg)}
.pghost[data-legs="apart"]  .leg-r{transform:rotate(-13deg)}
.pghost[data-legs="brace"]  .leg-l{transform:rotate(30deg)}
.pghost[data-legs="brace"]  .leg-r{transform:rotate(-8deg)}
.pghost[data-legs="tuck"]   .leg-l{transform:rotate(-16deg)}
.pghost[data-legs="tuck"]   .leg-r{transform:rotate(16deg)}
.pghost[data-legs="walk"]   .leg-l{animation:stepL .82s ease-in-out infinite}
.pghost[data-legs="walk"]   .leg-r{animation:stepR .82s ease-in-out infinite}
.pghost[data-legs="run"]    .leg-l{animation:stepL .30s linear infinite}
.pghost[data-legs="run"]    .leg-r{animation:stepR .30s linear infinite}
.pghost[data-legs="kick"]   .leg-l{animation:stepL .22s linear infinite}
.pghost[data-legs="kick"]   .leg-r{animation:stepR .19s linear infinite}
@keyframes stepL{0%,100%{transform:rotate(17deg)}50%{transform:rotate(-17deg)}}
@keyframes stepR{0%,100%{transform:rotate(-17deg)}50%{transform:rotate(17deg)}}

/* ---------- posture ----------------------------------------- */
.g-bob{animation:gBob 4.4s ease-in-out infinite}
.pghost.st-walk  .g-bob{animation:gWaddle .82s ease-in-out infinite}
.pghost.st-lead  .g-bob{animation:gWaddle .82s ease-in-out infinite}
.pghost.st-laugh .g-bob{animation:gLaugh .46s ease-in-out infinite}
.pghost.st-pull  .g-bob{animation:gStrain .21s ease-in-out infinite}
.pghost.st-drag  .g-bob{animation:gFlail .18s linear infinite}
.pghost.st-hop   .g-bob,.pghost.st-chase .g-bob{animation:none}
.pghost.st-sleep .g-bob{animation:gSnore 3.4s ease-in-out infinite}
.pghost.m-awe    .g-bob{animation:gFloat 6.2s ease-in-out infinite}
.pghost.m-reverent .g-bob{animation:gBob 6.8s ease-in-out infinite}

@keyframes gBob   {0%,100%{transform:translateY(0)} 50%{transform:translateY(-2.2%)}}
@keyframes gFloat {0%,100%{transform:translateY(0)} 50%{transform:translateY(-5%)}}
@keyframes gSnore {0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-2%) scale(1.03)}}
@keyframes gWaddle{
  0%{transform:translateY(0) rotate(-2.6deg)}   25%{transform:translateY(-2.6%) rotate(0)}
  50%{transform:translateY(0) rotate(2.6deg)}   75%{transform:translateY(-2.6%) rotate(0)}
  100%{transform:translateY(0) rotate(-2.6deg)}
}
@keyframes gLaugh{
  0%,100%{transform:translate(0,0) rotate(0)}   20%{transform:translate(-1.2%,-2%) rotate(-3.6deg)}
  40%{transform:translate(1.2%,0) rotate(3deg)}   60%{transform:translate(-1%,-2%) rotate(-2.4deg)}
  80%{transform:translate(1%,0) rotate(2.4deg)}
}
@keyframes gStrain{0%,100%{transform:translateX(0)}50%{transform:translateX(-2%)}}
@keyframes gFlail {0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}

/* mood and pose tilts */
.g-tilt{transition:transform 1.05s cubic-bezier(.25,.7,.25,1)}
.pghost.m-curious  .g-tilt{transform:rotate(8deg)}
.pghost.m-happy    .g-tilt{transform:rotate(-2deg)}
.pghost.m-playful  .g-tilt{transform:rotate(-4deg)}
.pghost.m-awe      .g-tilt{transform:scale(1.03) translateY(-4%)}
.pghost.m-reverent .g-tilt{transform:scale(.97)}
.pghost.st-bow   .g-tilt{transform:rotate(22deg) translateY(4%)}
.pghost.st-tall  .g-tilt{transform:scale(.88,1.16)}
.pghost.st-lean  .g-tilt{transform:rotate(16deg) translateX(5%)}
.pghost.st-gaze  .g-tilt{transform:rotate(-4deg) scale(1.04) translateY(-6%)}
.pghost.st-pull  .g-tilt{transform:rotate(-21deg)}   /* leaning back on the rope */
.pghost.st-drag  .g-tilt{transform:rotate(26deg)}    /* being towed, and not enjoying it */
.pghost.st-blown .g-tilt{transform:rotate(31deg) scale(.94,1.08)}
.pghost.st-sleep .g-tilt{transform:rotate(13deg)}
.pghost.st-point .g-tilt{transform:rotate(-3deg)}

/* ---------- arms -------------------------------------------- */
.pghost.m-curious  .arm-l{transform:rotate(-58deg)}
.pghost.m-curious  .arm-r{transform:rotate(-14deg)}
.pghost.m-happy    .arm-l{transform:rotate(16deg)}
.pghost.m-happy    .arm-r{transform:rotate(-16deg)}
.pghost.m-playful  .arm-l{transform:rotate(34deg)}
.pghost.m-playful  .arm-r{transform:rotate(-28deg)}
.pghost.m-awe      .arm-l{transform:rotate(58deg)}
.pghost.m-awe      .arm-r{transform:rotate(-58deg)}
.pghost.m-reverent .arm-l{transform:rotate(-32deg)}
.pghost.m-reverent .arm-r{transform:rotate(32deg)}

.pghost.st-hop   .arm-l{transform:rotate(66deg)}
.pghost.st-hop   .arm-r{transform:rotate(-66deg)}
.pghost.st-point .arm-r{transform:rotate(-96deg)}    /* up there, please */
.pghost.st-point .arm-l{transform:rotate(-14deg)}
.pghost.st-show  .arm-r{transform:rotate(-64deg)}    /* and here we have… */
.pghost.st-show  .arm-l{transform:rotate(-30deg)}
.pghost.st-pull  .arm-l{transform:rotate(-102deg)}   /* both hands on the rope */
.pghost.st-pull  .arm-r{transform:rotate(-62deg)}
.pghost.st-drag  .arm-l{transform:rotate(-112deg)}
.pghost.st-drag  .arm-r{transform:rotate(-72deg)}
.pghost.st-blown .arm-l{transform:rotate(74deg)}
.pghost.st-blown .arm-r{transform:rotate(-40deg)}
.pghost.st-sleep .arm-l{transform:rotate(-38deg)}
.pghost.st-sleep .arm-r{transform:rotate(38deg)}
.pghost.st-wave  .arm-r{animation:armWave .5s ease-in-out 3}
.pghost.st-juggle .arm-l{animation:armJugL .44s ease-in-out infinite}
.pghost.st-juggle .arm-r{animation:armJugR .44s ease-in-out .22s infinite}
.pghost.st-sip   .arm-r{transform:rotate(-72deg)}
.pghost.st-smoke .arm-r{transform:rotate(-58deg)}
.pghost.st-toast .arm-r{transform:rotate(-96deg)}
@keyframes armWave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-72deg)}}
@keyframes armJugL{0%,100%{transform:rotate(6deg)}50%{transform:rotate(44deg)}}
@keyframes armJugR{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-44deg)}}

/* ---------- props ------------------------------------------- */
.prop{opacity:0;transition:opacity .3s}
.pghost.st-laugh .prop-laugh{opacity:.85;animation:propPop .34s ease-in-out infinite alternate}
.pghost.m-curious .prop-quest{opacity:.5}
.pghost.m-awe     .prop-spark{opacity:.7;animation:propTwinkle 2.4s ease-in-out infinite}
.pghost.st-juggle .prop-balls{opacity:.85;animation:propJuggle .88s linear infinite}
.pghost.st-sleep  .prop-zzz{opacity:.75;animation:propZzz 3.4s ease-in-out infinite}
@keyframes propPop    {from{transform:translateY(0)}to{transform:translateY(-6%)}}
@keyframes propTwinkle{0%,100%{opacity:.25}50%{opacity:.8}}
@keyframes propJuggle {0%{transform:translateY(0)}50%{transform:translateY(-16%)}100%{transform:translateY(0)}}
@keyframes propZzz    {0%{opacity:0;transform:translate(0,0)}30%{opacity:.8}
                       100%{opacity:0;transform:translate(9%,-16%)}}

/* the glass: kept low, raised to the nose, tipped, lowered */
.prop-wine{transform-box:view-box;transform-origin:93px 66px;
  transition:opacity .3s, transform .6s cubic-bezier(.2,.7,.2,1)}
.pghost.st-rest.has-wine .prop-wine,
.pghost.st-sip   .prop-wine,
.pghost.st-toast .prop-wine{opacity:1}
.pghost.st-sip   .prop-wine{transform:translate(-26px,-14px) rotate(-40deg)}
.pghost.st-toast .prop-wine{transform:translate(-6px,-30px) rotate(-14deg)}

/* what he is thinking, since he cannot say it */
.prop-say{transform-box:view-box;transform-origin:8px 16px;
  transition:opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1);transform:scale(.35)}
.pghost.saying .prop-say{opacity:.95;transform:scale(1)}
.say-icon{opacity:0;transition:opacity .2s}
.pghost[data-say="book"]  .say-book,
.pghost[data-say="frame"] .say-frame,
.pghost[data-say="photo"] .say-photo,
.pghost[data-say="arrow"] .say-arrow,
.pghost[data-say="heart"] .say-heart{opacity:1}

/* ---------- hello, said once, when he first arrives ---------- */
.say-text{
  font-family:"Cormorant Garamond","Noto Serif Georgian",Georgia,serif;
  font-size:15px; font-weight:500; fill:#241f1a; stroke:none; letter-spacing:.01em;
}
html[lang="ka"] .say-text{font-family:"Noto Serif Georgian",Georgia,serif;font-size:12px}
.prop-hi > path,.prop-hi > circle{fill:#fdfbf5}
.prop-hi{transform-box:view-box;transform-origin:-33px -14px;
  transition:opacity .32s, transform .5s cubic-bezier(.2,.9,.3,1.35);
  transform:scale(.25)}
.pghost.greeting .prop-hi{opacity:1;transform:scale(1.2)}
/* he is mirrored when he faces left; the word must not be */
.pghost.facing-left .prop-hi{transform:scale(-.25,.25)}
.pghost.facing-left.greeting .prop-hi{transform:scale(-1.2,1.2)}

/* ---------- the thank-you kiss, for signing the book --------- */
.g-kissmark{fill:#a3243a;stroke:#8d1b2f;stroke-width:1.4;stroke-linejoin:round}
.prop-kiss{transform-box:view-box;transform-origin:49px 72px}
.pghost.st-kiss .g-tilt{transform:rotate(-2deg) translateY(-2%)}
.pghost.st-kiss .arm-l{transform:rotate(60deg)}
.pghost.st-kiss .arm-r{transform:rotate(-60deg)}
.pghost.smooch .prop-kiss{opacity:1;animation:kissOff 1.5s cubic-bezier(.3,.5,.4,1) infinite}
@keyframes kissOff{
  0%  {opacity:0; transform:translateY(2px) scale(.25)}
  14% {opacity:1; transform:translateY(0)   scale(.95)}
  100%{opacity:0; transform:translateY(-20px) scale(3.6)}
}

.pghost.st-hop .g-cast,.pghost.m-awe .g-cast,.pghost.st-chase .g-cast{opacity:.06}

/* ---------- not wanted, not shown --------------------------- */
@media (prefers-reduced-motion:reduce){ #ghostLayer{display:none !important} }
@media print{ #ghostLayer{display:none !important} }
/* …unless someone has asked to see him anyway */
html.ghost-anyway #ghostLayer{display:block !important}