/* The light and the house. home.css carries the home page's hiders; this
   is the light they hide from, on the home page and, once someone is in
   the house, on every page they visit.

   The light, and what it finds.

   The light is the pointer. The page's small script tells the hero and
   each robot where the pointer is in their own box (--px, --py); nothing
   here measures anything. One mask image carries the light's shape — a
   disc with a Gaussian edge (light.svg), so the pool has no rings —
   sized by --light and centered on the pointer.

   Two things wear that mask. The lens, fixed over the whole page, turns
   it inside out where the light falls (a dark window, hues kept, a touch
   more saturated). The robots, which are drawn in full color wherever
   they hide, show only inside it. Nothing persists: when the light moves
   on, the page is the page again. Without a pointer there is no light,
   and the robots stay hidden; on a touch screen they are simply there. */

:root { --light: 30rem; }

/* The light goes out when the pointer leaves the window (and fades). */
.hider, .lens, .floor { transition: opacity .35s ease; }
html:not(.lit) :is(.hider, .lens, .floor) { opacity: 0; }
/* …and while someone is typing a site into the box: time out. */
html:has(.seek:focus-within) :is(.hider, .lens, .floor) { opacity: 0; }

.hider, .lens, .floor {
  --px: -999rem;
  --py: -999rem;
  -webkit-mask: url(/light.svg) no-repeat;
  mask: url(/light.svg) no-repeat;
  -webkit-mask-size: var(--light) var(--light);
  mask-size: var(--light) var(--light);
  -webkit-mask-position: calc(var(--px) - var(--light) / 2) calc(var(--py) - var(--light) / 2);
  mask-position: calc(var(--px) - var(--light) / 2) calc(var(--py) - var(--light) / 2);
}

/* Hiders (the robots, and a line of text in the footer) wear the light
   twice, intersected, so their reveal is the light squared: a faint edge
   of the lens barely tints the page, but the same faint edge on a blue
   robot is a visible ghost, and squaring it makes a hider appear where
   the window is dark, not where it begins. */
.hider {
  -webkit-mask-image: url(/light.svg), url(/light.svg);
  mask-image: url(/light.svg), url(/light.svg);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.lens {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  -webkit-backdrop-filter: invert(1) hue-rotate(180deg) saturate(1.25);
  backdrop-filter: invert(1) hue-rotate(180deg) saturate(1.25);
}

/* The haunted house (the Konami code, in the page's script). The whole
   page turns inside out — the same inversion the lens made, now
   everywhere — and the light turns around with it: no longer a dark
   window on a bright page but a warm torch carried through a dark one.
   The torch is a hard, lumpy, stepped pool (torch.svg), in the orange a
   1982 playfield would have used. The creatures of the house come out,
   only here; the robots stay. The night lasts until the browser quits
   (house.js): the server reads it and renders the class. */

html.haunted {
  filter: invert(1) hue-rotate(180deg) saturate(1.25);
  background: var(--ground);
}
/* In the dark the light is the floor: a flat pool of the game's orange
   painted behind everything. A hider stands on it in full color, with
   nothing over it; the page's furniture is opaque and hides the hider
   and the light alike, the way the house's walls cut the torch off at
   every hard edge. The daylight lens is off in here. */
.floor { display: none; }
html.haunted .floor {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  /* Inverted with the page and inverted back here, then lifted a little
     by the page's saturation — so this is written slightly darker than
     it shows. What shows is the game's own orange, #f2a83b. */
  filter: invert(1) hue-rotate(180deg);
  background: #e8a038;
}
html.haunted .lens { display: none; }
html.haunted .hider, html.haunted .floor {
  -webkit-mask-image: url(/torch.svg);
  mask-image: url(/torch.svg);
}
html.haunted .hider {
  -webkit-mask-image: url(/torch.svg), url(/torch.svg);
  mask-image: url(/torch.svg), url(/torch.svg);
  /* Drawn in the page's colors, the hiders invert with it; inverting them
     once more puts them back the way they were drawn. */
  filter: invert(1) hue-rotate(180deg);
}
/* The torch flickers as the game's did (the page's script sets the
   beat, a frame at a time): the big shape two frames of three, the little
   one on the third. Same box, same center; only the mask changes. */
html[data-torch="low"] .floor {
  -webkit-mask-image: url(/torch-low.svg);
  mask-image: url(/torch-low.svg);
}
html[data-torch="low"] .hider {
  -webkit-mask-image: url(/torch-low.svg), url(/torch-low.svg);
  mask-image: url(/torch-low.svg), url(/torch-low.svg);
}