/* ============================================================
   EBKaC labs — Sticky day notes: the wall
   The notes hang on a painted wall with a wall clock, a
   thermostat and two power sockets above the skirting board.
   Screen only: print keeps just the notes.

   REAL-WORLD SCALE: everything is sized in millimetres times
   --mm (px per mm), which wall.js picks so the whole wall fits
   the screen. Sizes (mm):
     sticky note 76 (3")      clock 230 (9" wall clock)
     thermostat  84 (Nest)    socket plate 52 × 85 (compact)
     skirting   100           tape ~40 × 11
   Clock look after Nick Rassadin's pure-CSS wall clock, sockets
   after the "outlet faces" CodePen, thermostat after the
   "fizzy thermostat" CodePen (logo removed). All rebuilt here.
   ============================================================ */

.wall{
  --wall:#e8e2d6;
  --mm:1px;                                /* set by wall.js */
  --pad:calc(40 * var(--mm));
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  background:
    /* ceiling light falling down the wall */
    radial-gradient(120% 70% at 50% -12%,rgba(255,255,255,.6),rgba(255,255,255,0) 62%),
    /* corners a touch darker */
    radial-gradient(140% 120% at 50% 40%,rgba(0,0,0,0) 60%,rgba(60,45,25,.10) 100%),
    var(--texture-noise),
    var(--wall);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),var(--shadow);
}

@media screen{
  /* wide wall: clock high on the left, thermostat lower on the right,
     notes in between, a socket in each bottom corner */
  .wall{
    display:grid;
    grid-template-columns:calc(230 * var(--mm)) minmax(0,1fr) calc(84 * var(--mm));
    grid-template-rows:auto 1fr auto auto;
    grid-template-areas:
      "clock notes temp"
      ".     notes temp"
      "sockL notes sockR"
      "skirt skirt skirt";
    column-gap:calc(36 * var(--mm));
    padding:var(--pad) var(--pad) 0;
  }
  .wall-top,.wall-bottom{display:contents}
  .clock{grid-area:clock;align-self:start}
  .temp{grid-area:temp;align-self:start;margin-top:calc(150 * var(--mm))}
  .board{grid-area:notes}
  .outlet:first-child{grid-area:sockL;justify-self:center}
  .outlet:last-child{grid-area:sockR;justify-self:center}
  .outlet{align-self:end;margin:calc(60 * var(--mm)) 0 calc(25 * var(--mm))}
  .skirting{grid-area:skirt;margin:0 calc(-1 * var(--pad))}

  /* narrow wall (phones): clock + thermostat on top, sockets below */
  .wall.is-stacked{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto 1fr auto auto;
    grid-template-areas:
      "clock temp"
      "notes notes"
      "sockL sockR"
      "skirt skirt";
    --pad:calc(28 * var(--mm));
  }
  .wall.is-stacked .clock{justify-self:start}
  .wall.is-stacked .temp{justify-self:end;align-self:center;margin-top:0}
  .wall.is-stacked .outlet{margin:calc(40 * var(--mm)) 0 calc(25 * var(--mm))}

  /* the notes, at 3" square, with room for the tape */
  .wall .board{
    --note-size:calc(76 * var(--mm));
    align-self:stretch;align-content:center;
    gap:calc(30 * var(--mm)) calc(22 * var(--mm));
    padding:calc(16 * var(--mm)) 0 calc(24 * var(--mm));
    min-height:0;
  }
  .wall.is-stacked .board{padding:calc(40 * var(--mm)) 0}

  /* hovering a note lifts it off the wall so the small print is readable */
  @media (hover:hover){
    .wall .note{transition:transform .18s ease}
    .wall .note:hover{z-index:5;transform:perspective(1px) rotate(0deg) scale(1.9)}
  }
  @media (hover:hover) and (prefers-reduced-motion:reduce){
    .wall .note{transition:none}
  }
}

.skirting{
  height:calc(100 * var(--mm));
  background:
    linear-gradient(180deg,#fff 0 6%,#e9e6df 6% 12%,#fbfaf7 12% 34%,#f1eee8 34% 100%);
  box-shadow:0 -2px 5px rgba(60,45,25,.18),inset 0 -1px 0 rgba(0,0,0,.06);
}

/* ============================================================
   WALL CLOCK — sized in em off one font-size
   ============================================================ */
.clock{
  --clock-size:calc(230 * var(--mm));
  font-size:calc(var(--clock-size) / 10);
  flex:none;position:relative;
  width:10em;height:10em;border-radius:50%;
  background:#ccc;
  box-shadow:
    inset .05em -.05em 0 #333,
    inset .17em -.17em 0 #555,
    inset -.03em -.04em 0 #333,
    inset -.03em .02em 0 #333,
    inset -.1em -.1em 0 #555,
    .1em .35em .35em rgba(40,30,15,.35);
}
.clock-bezel{
  position:absolute;inset:.3em;border-radius:50%;
  background:#fff;
  box-shadow:
    inset .04em 0 0 #fff,
    inset 0 -.06em 0 #ddd,
    inset .16em -.08em 0 #222,
    inset -.16em .08em 0 #222,
    inset .2em .2em 0 #222;
}
.clock-face{
  position:absolute;inset:.25em;border-radius:50%;overflow:hidden;
  background:#eed;
  box-shadow:
    inset .15em .2em .05em rgba(0,0,0,.4),
    inset .2em .4em .2em rgba(0,0,0,.3),
    inset 0 .05em .3em rgba(0,0,0,.1);
}
.clock-dial{position:absolute;inset:0}
.clock-tick{
  position:absolute;left:50%;top:50%;
  width:.04em;height:.3em;margin-left:-.02em;
  background:rgba(0,0,0,.5);
  transform-origin:50% 0;
}
.clock-tick.is-hour{width:.12em;margin-left:-.06em;background:#222}
.clock-num{
  position:absolute;
  font:500 .9em/1 "Futura","Avenir Next","Century Gothic","Trebuchet MS",sans-serif;
  color:#222;transform:translate(-50%,-50%);
}
.clock-brand{
  position:absolute;left:0;right:0;top:64%;text-align:center;
  font:.24em/1 "Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.08em;color:#555;
}
.clock-hand{
  position:absolute;left:50%;bottom:50%;display:block;
  transform-origin:50% 100%;
  filter:drop-shadow(.08em .14em .05em rgba(0,0,0,.28));
  animation:clock-turn linear infinite;
  animation-play-state:paused;            /* wall.js sets the time, then lets them run */
}
.clock.is-running .clock-hand{animation-play-state:running}
.clock-hand--h{width:.3em;height:2.3em;margin-left:-.15em;background:#222;border-radius:.1em;animation-duration:43200s}
.clock-hand--m{width:.22em;height:3.4em;margin-left:-.11em;background:#222;border-radius:.1em;animation-duration:3600s}
/* second hand: thin red with a short tail past the centre */
.clock-hand--s{
  width:.1em;height:4.9em;margin-left:-.05em;bottom:calc(50% - 1em);
  background:#a00;transform-origin:50% calc(100% - 1em);
  animation-duration:60s;animation-timing-function:steps(60,end);
}
.clock-cap{
  position:absolute;left:50%;top:50%;width:.5em;height:.5em;margin:-.25em 0 0 -.25em;
  border-radius:50%;background:#222;
  box-shadow:inset 0 0 0 .1em #222,inset 0 0 0 .2em #a00;
}
.clock-glass{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset .45em .9em .05em rgba(250,252,253,.2);
  background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%);
}
@keyframes clock-turn{to{transform:rotate(360deg)}}

/* ============================================================
   THERMOSTAT — ring colour runs blue (cold) → red (hot)
   ============================================================ */
.temp{
  --angle:0;
  --hue:240;
  font-size:calc(84 / 15 * var(--mm));      /* 15em across = 84mm */
  flex:none;position:relative;
  display:flex;flex-direction:column;justify-content:center;
  width:15em;height:15em;border-radius:50%;
  padding:1em;line-height:1;text-align:center;
  background-image:
    radial-gradient(100% 100% at 50% 50%,
      hsl(var(--hue),90%,17%) 3.55em,
      hsla(var(--hue),90%,17%,0) 3.6em),
    radial-gradient(100% 100% at 50% 50%,
      hsl(var(--hue),90%,10%),
      hsl(var(--hue),90%,23%) 4.65em,
      hsl(var(--hue),90%,55%) 4.85em 4.9em,
      #17181c 5.1em 6.85em,
      #17181c00 6.9em),
    radial-gradient(100% 100% at 50% 0,#f1f2f4,#8f95a3);
  box-shadow:0 .5em 1.4em .1em rgba(40,30,15,.35),0 .1em .2em rgba(40,30,15,.25);
}
.temp::after,.temp__dial,.temp__comet,.temp__fizz{position:absolute}
.temp::after,.temp__comet,.temp__dial{border-radius:inherit}
.temp::after,.temp__dial{inset:0}
.temp::after{
  content:'';z-index:2;pointer-events:none;
  background:radial-gradient(100% 100% at 67% 17%,rgba(255,255,255,.2),rgba(255,255,255,0) 6em);
}
.temp__comet{
  top:calc(50% - 3.5em);left:calc(50% - 3.5em);width:7em;height:7em;
  background:
    radial-gradient(100% 100% at 50% 50%,
      hsl(var(--hue),90%,10%),
      hsl(var(--hue),90%,20%) 3.25em,
      hsl(var(--hue),90%,17%) 3.3em 3.35em,
      hsla(var(--hue),90%,17%,0) 3.4em),
    conic-gradient(rgba(255,255,255,0),#fff calc(1deg * var(--angle)),rgba(255,255,255,0) calc(1deg * var(--angle)));
}
.temp__fizz{display:block;top:calc(50% - 3.3em);left:calc(50% - 3.3em);width:6.6em;height:6.6em}
.temp__label,.temp__value{
  position:relative;z-index:1;color:#fff;
  font-family:"Unica One",ui-monospace,monospace;
}
.temp__label{
  font-size:.6em;letter-spacing:.5em;text-transform:uppercase;
  transform:translateX(.25em) scaleY(.9);
}
.temp__value{font-size:3.5em;margin-top:.05em}
.temp__dial{z-index:3;cursor:grab;touch-action:none}
.temp__dial:active{cursor:grabbing}
.temp__dial:focus-visible{outline:.25em solid var(--accent);outline-offset:.25em}

/* ============================================================
   SOCKETS — tap a face to change its mood
   ============================================================ */
.outlet,.face{
  display:flex;justify-content:center;flex-wrap:wrap;align-content:center;align-items:center;
}
.outlet{
  font-size:calc(52 / 11 * var(--mm));     /* 11em × 18em = 52 × 85mm */
  flex:none;
  flex-direction:column;
  width:11em;height:18em;
  background-color:rgb(237,241,244);
  border-radius:.375em;
  box-shadow:
    .0625em .0625em 0 rgba(0,0,0,.1) inset,
    -.0625em -.0625em 0 rgba(0,0,0,.2) inset,
    -.5em -.5em .5em rgba(0,0,0,.3) inset,
    .25em .25em .125em rgba(0,0,0,.1) inset,
    -.1875em 0 .1875em .6875em rgba(255,255,255,.7) inset,
    .2em .5em .9em rgba(40,30,15,.22);
}
.face{
  font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  border-radius:1.25em / 50%;
  box-shadow:
    0 0 0 .125em rgb(92,88,88) inset,
    -.125em -.125em 0 .125em rgba(0,0,0,.1) inset,
    .125em .125em 0 .125em #fff inset;
  margin:.375em 0;
  width:5.5em;height:4.75em;
}
.face:focus-visible{outline:.25em solid var(--accent);outline-offset:.2em}
.face > span{display:block}
.right-eye,.left-eye,.mouth{
  background:#000;
  box-shadow:.0625em .0625em .0625em rgba(255,255,255,.6);
  transition:all .3s linear;
}
.right-eye,.left-eye{width:1.75em;height:2em}
.right-eye{
  border-top:.375em solid rgba(255,255,255,.75);
  border-right:.625em solid #fff;
  border-bottom:.375em solid rgb(237,241,244);
  border-left:.75em solid rgba(255,255,255,.8);
  border-radius:.375em 0 0 .375em / 50% 0 0 50%;
  margin:.375em .1875em .1875em .375em;
  transform-origin:100% 0;
}
.left-eye{
  border-top:.5em solid rgba(255,255,255,.75);
  border-right:.75em solid #fff;
  border-bottom:.5em solid rgb(237,241,244);
  border-left:.625em solid rgba(255,255,255,.9);
  border-radius:0 .375em .375em 0 / 0 50% 50% 0;
  margin:.375em .375em .1875em .1875em;
  transform-origin:0 0;
}
.mouth{
  border-top:.25em solid rgba(255,255,255,.8);
  border-right:.25em solid rgb(237,241,244);
  border-bottom:.25em solid rgb(237,241,244);
  border-left:.25em solid rgba(255,255,255,.8);
  border-radius:50% 50% 0 0;
  margin-top:.1875em;
  width:1.25em;height:1.25em;
}
.screw{
  display:block;width:1.125em;height:1.125em;border-radius:50%;
  background-image:
    radial-gradient(.25em .25em at 95% 50%,#fff,rgba(255,255,255,0)),
    linear-gradient(90deg,rgba(157,162,166,0) 40%,rgb(157,162,166) 41%,rgb(157,162,166) 59%,rgba(157,162,166,0) 60%),
    radial-gradient(at 50% 0,#fff,rgba(255,255,255,0)),
    radial-gradient(at 100% 75%,rgb(157,162,166),rgba(157,162,166,0));
  box-shadow:0 0 0 .0625em rgb(157,162,166) inset;
}

/* moods */
.face.happy > span{animation:sock-happy 2s .5s linear infinite}
.face.happy .mouth{border-radius:0 0 50% 50%}
.face.sad .right-eye{animation:sock-sadRE 4s .5s linear infinite;transform:skewY(-25deg) scale(.8,1)}
.face.sad .left-eye{animation:sock-sadLE 4s .5s linear infinite;transform:skewY(25deg) scale(.8,1)}
.face.sad .mouth{animation:sock-sadM 4s .5s linear infinite;transform:scale(2,.3)}
.face.angry .right-eye{animation:sock-angryRE 2s .5s linear infinite;transform:skewY(20deg) scale(.8,1)}
.face.angry .left-eye{animation:sock-angryLE 2s .5s linear infinite;transform:skewY(-20deg) scale(.8,1)}
.face.angry .mouth{animation:sock-angryM 2s .5s linear infinite;transform:scale(1.5,1)}
.face.shocked > span{border-radius:50%}
.face.shocked .right-eye,.face.shocked .left-eye{transform:scale(1.3,1.3)}
.face.shocked .left-eye{animation:sock-shockLE 2s .5s linear infinite}
.face.shocked .mouth{transform:scale(1.2,1.2)}
.face.laughing .right-eye,.face.laughing .left-eye{
  animation:sock-laughE .4s .5s linear infinite;border-radius:50% 50% 0 0;transform:scale(1.2,1.1);
}
.face.laughing .mouth{
  animation:sock-laughM .4s .5s linear infinite;border-radius:0 0 50% 50%;
  transform:scale(1.75,1.1);transform-origin:50% 100%;
}
.face.sleeping .right-eye,.face.sleeping .left-eye{height:0;transform:scale(1.2,.5)}
.face.sleeping .mouth{animation:sock-sleep 3s .5s linear infinite;border-radius:0;transform:scale(1.5,.1)}

@keyframes sock-happy{
  from,10%,to{transform:translateY(0)}
  5%{transform:translateY(-.25em)}
}
@keyframes sock-sadRE{
  from,10%,55%,65%,to{transform:translateY(0) skewY(-25deg) scale(.8,1)}
  5%{transform:translateY(.125em) skewY(-25deg) scale(.8,1)}
  60%{transform:translateY(1em) skewY(-25deg) scale(.8,0)}
}
@keyframes sock-sadLE{
  from,10%,55%,65%,to{transform:translateY(0) skewY(25deg) scale(.8,1)}
  5%{transform:translateY(.125em) skewY(25deg) scale(.8,1)}
  60%{transform:translateY(1em) skewY(25deg) scale(.8,0)}
}
@keyframes sock-sadM{
  from,10%,to{transform:translateY(0) scale(2,.3)}
  5%{transform:translateY(.125em) scale(2,.3)}
}
@keyframes sock-angryRE{
  from,5%,45%,to{transform:translateX(0) skewY(20deg) scale(.8,1)}
  10%,30%{transform:translateX(-.125em) skewY(20deg) scale(.9,1)}
  20%,40%{transform:translateX(.125em) skewY(20deg) scale(.9,1)}
}
@keyframes sock-angryLE{
  from,5%,45%,to{transform:translateX(0) skewY(-20deg) scale(.8,1)}
  10%,30%{transform:translateX(-.125em) skewY(-20deg) scale(.9,1)}
  20%,40%{transform:translateX(.125em) skewY(-20deg) scale(.9,1)}
}
@keyframes sock-angryM{
  from,45%,to{transform:translateX(0) scale(1.5,1)}
  5%{transform:translateX(0) scale(2.2,1.05)}
  10%,30%{transform:translateX(-.125em) scale(2.2,1.05)}
  20%,40%{transform:translateX(.125em) scale(2.2,1.05)}
}
@keyframes sock-shockLE{
  from,40%,50%,to{transform:scale(1.3,1.3)}
  45%{transform:scale(1.3,1.2)}
}
@keyframes sock-laughE{
  from,to{transform:scale(1.2,1.1)}
  50%{transform:scale(1.2,1)}
}
@keyframes sock-laughM{
  from,to{transform:scale(1.75,1.1)}
  50%{transform:scale(1.75,1.2)}
}
@keyframes sock-sleep{
  from,70%,to{border-radius:50% 50% 0 0;transform:scale(1.5,.1)}
  5%,15%,25%{border-radius:50% 50% 0 0;transform:scale(1.5,.6)}
  10%,20%,30%{border-radius:50% 50% 0 0;transform:scale(1.5,.5)}
  50%,60%{border-radius:50%;transform:scale(1,1)}
}

@media (prefers-reduced-motion:reduce){
  .face > span{animation:none !important;transition:none}
}

/* ---- print: notes only ---- */
@media print{
  .wall{padding:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .wall-top,.wall-bottom,.skirting{display:none !important}
}