/* The lava lamp switch: the tile of a night light in a smart home app, on a black page, and the switch is a little
   lava lamp lying on its side. The liquid and the wax are worked out pixel by pixel on a canvas from the colours
   below; the chrome of the cap and of the base is drawn by the script as an SVG over it. */
:root {
  --page: #000000;          /* the page */
  --tile: #121015;          /* the tile */
  --ink: #f5f1f4;           /* the name, with the light on */
  --ink-off: #a39ca3;       /* the name, with the light off */
  --muted: #77707a;         /* the room */
  --focus: #ff7a3d;         /* the ring of the keyboard's focus */

  --liquid-cold: #120c1c;   /* the liquid in the glass, cold */
  --liquid-warm: #2a0c4a;   /* the liquid in the glass, warmed through: violet */
  --bulb: #ff8a3a;          /* the light of the bulb in the base */
  --wax-cold: #3a1222;      /* the wax, cold: dark oxblood */
  --wax-warm: #c2185b;      /* the wax, warming: magenta */
  --wax-hot: #ff5a2a;       /* the wax, hot: orange */
  --wax-glow: #ffb15c;      /* the wax, hottest, in the thick of a drop */
  --shine: #ffffff;         /* the gleams on the glass and on the wax */

  --chrome-hi: #e9ebef;     /* the chrome of the cap and of the base: the light it catches */
  --chrome: #8a8f98;        /* the chrome */
  --chrome-lo: #1c1d21;     /* the chrome, in shadow */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the tile */
.tile {
  --lit: 0;                 /* set by the script: how warm the lamp is */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(380px, 100%);
  padding: 16px 14px 16px 28px;
  border-radius: 44px;
  background: var(--tile);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  isolation: isolate;
}

/* the light of the lamp on the tile round it */
.tile__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(150px 70px at calc(100% - 70px) 50%, color-mix(in srgb, var(--bulb), transparent 55%), transparent 75%),
    radial-gradient(240px 90px at calc(100% - 110px) 50%, color-mix(in srgb, var(--wax-warm), transparent 80%), transparent 80%);
  opacity: 0;
  pointer-events: none;
}

.tile__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tile__name {
  font-size: 18px;
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: color-mix(in srgb, var(--ink) calc(var(--lit) * 100%), var(--ink-off));
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.tile__room {
  font-size: 14px;
  font-weight: 420;
  line-height: 1.25;
  color: var(--muted);
}

/* ---------------------------------------------------------------- the lamp */
/* the drawing is in a box of 184 by 56: the glass from 16 to 154, the cap at the left, the base at the right */
.lamp {
  position: relative;
  flex: none;
  width: 184px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: none;
  cursor: pointer;
  /* a finger dragged across moves the knob; up and down the page still scrolls */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

.lamp:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

html[data-using='pointer'] .lamp:focus-visible {
  outline: none;
}

/* the glow round the glass, as much as the bulb is lit */
.lamp__halo {
  position: absolute;
  left: 6px;
  right: 10px;
  top: 2px;
  bottom: 2px;
  border-radius: 999px;
  background: radial-gradient(70% 90% at 82% 55%, color-mix(in srgb, var(--wax-hot), transparent 45%), transparent 70%);
  filter: blur(9px);
  opacity: 0;
  pointer-events: none;
}

/* the inside of the glass: the liquid and the wax; the script places it over the glass */
.lamp__wax {
  position: absolute;
  pointer-events: none;
}

/* the lamp lit, for the reduced motion: it fades in over the lamp cold */
.lamp__wax--on {
  opacity: 0;
}

.lamp__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}