/* The pull chain button: a pendant lamp in a little room of its own, on a white page. Pulling its chain switches the
   lamp, and with it the room's colours, between light and dark. The chain is simulated and drawn on a canvas; the
   lamp and the cone of light are SVG. */
:root {
  --page: #ffffff;          /* the page round the room */
  --day-wall: #e9e3d7;      /* the room with the lamp on */
  --day-ink: #2b2620;       /* the words with the lamp on */
  --day-muted: #8b8274;
  --night-wall: #121316;    /* the room with the lamp off */
  --night-ink: #e8e3da;     /* the words with the lamp off */
  --night-muted: #6d6a66;
  --beam: #fff4d6;          /* the light of the bulb */
  --enamel: #23493f;        /* the enamel of the shade */
  --enamel-light: #4d7a6c;
  --enamel-dark: #10261f;
  --enamel-inside: #f4efe4; /* the white enamel inside the shade */
  --brass: #c49a52;         /* the canopy, the socket and the drop */
  --brass-light: #f1d79c;
  --brass-dark: #6e4f1e;
  --bulb: #efe6d2;          /* the glass of the bulb, switched off */
  --bulb-core: #ffffff;
  --cord: #2a2723;          /* the cord the lamp hangs from */
}

* {
  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(--day-ink);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* ---------------------------------------------------------------- the room */
.room {
  --wall: var(--day-wall);
  --ink: var(--day-ink);
  --muted: var(--day-muted);
  position: relative;
  width: min(360px, 100%);
}

.room[data-light='off'] {
  --wall: var(--night-wall);
  --ink: var(--night-ink);
  --muted: var(--night-muted);
}

.room__scene {
  position: relative;
  aspect-ratio: 360 / 500;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  background: var(--wall);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 24px 60px -24px rgba(40, 30, 15, 0.35);
  transition: background-color 0.45s ease, box-shadow 0.45s ease;
  -webkit-tap-highlight-color: transparent;
}

.room[data-light='off'] .room__scene {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}

/* the corners of the room are a little darker than where the light falls: a layer of its own, painted once */
.room__scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 90px rgba(40, 28, 10, 0.16);
  transition: box-shadow 0.45s ease;
  will-change: transform;
  pointer-events: none;
}

.room[data-light='off'] .room__scene::before {
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.6);
}

.room__scene > svg,
.room__light,
.room__chain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* the light is blended into the wall: it lifts the colours it falls on instead of covering them */
.room__light {
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  z-index: 0;
  will-change: transform, opacity;
}

.room__lamp {
  z-index: 1;
  transform-origin: 50% 0;
  will-change: transform;
}

.room__chain {
  z-index: 3;
  will-change: transform;
}

.lamp__cord {
  fill: none;
  stroke: var(--cord);
  stroke-width: 2.2;
}

.room__lamp {
  transition: filter 0.4s ease;
}

/* in the dark the shade only keeps a little of the light from the room */
.room[data-light='off'] .room__lamp {
  filter: brightness(0.5) saturate(0.8);
}

.room[data-light='off'] .lamp__cord {
  stroke: #3a3732;
}

.lamp__inside {
  fill: var(--enamel-inside);
}

.lamp__rim {
  fill: none;
  stroke: var(--enamel-light);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.8;
}

.lamp__sheen {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.22;
}

.lamp__filament {
  fill: none;
  stroke: #ff9a3c;
  stroke-width: 1;
  stroke-linecap: round;
}

/* ---------------------------------------------------------------- the words in the light */
.room__label {
  position: absolute;
  left: 0;
  right: 0;
  top: 80.5%;
  margin: 0;
  display: grid;
  justify-items: center;
  z-index: 2;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(30px, 9.4vw, 36px);
  font-weight: 460;
  font-variation-settings: 'SOFT' 50, 'WONK' 0;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  transition: color 0.45s ease;
}

.room__word {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.room__word[data-word='off'] {
  opacity: 0;
}

.room__hint {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 90.5%;
  margin: 0;
  z-index: 2;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  transition: color 0.45s ease;
}

/* ---------------------------------------------------------------- the real switch, over the drop */
/* it stays still over the drop at rest; the script places it, and draws the focus ring round the drop itself */
.pull {
  position: absolute;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.pull:active,
.room.is-pulling .pull {
  cursor: grabbing;
}

.pull:focus-visible {
  outline: none;
}