/* The room's own stylesheet — the wall, the floor, the window, and her things.
 *
 * Split from sill.css rather than added to it for the reason surfaces.css was: that
 * file was at 254 of the linter's ~300 lines (`ENG-3.1`), and the room is a different
 * reason to change (`ENG-3.2`) — sill.css is the cat being alive, this is the place
 * it lives in.
 *
 * The one rule every colour here answers to, and the rule that replaced §10's "room:
 * implied, not rendered" when §18.1 drew it: nothing in the room is brighter than the
 * window's own light. In practice the cap is vellum, the brightest value in the
 * product — "nothing on screen brighter than the room she's in" (§9) — and
 * `test/room.test.js` fails the build if any colour here passes it.
 *
 * Her paper things carry the hour with everything else. Left at their daylight value
 * they were the brightest objects on screen at 2am, which is the exact failure §9 is
 * about: the panchang and the canvas were lit when the room was not.
 *
 * Palette continues the Pact's inversion — irongall ground, vellum light, oxblood
 * spent rarely — with the Bombay tones §18.1 asks for: red oxide underfoot, marigold
 * at the window, brass on the table.
 */

:root {
  --wall:          #241528;  /* aubergine plaster, darker than anything standing on it */
  --floor-tone:    #45201d;  /* red oxide, the floor of an old Bombay flat */
  --joint:         rgba(0, 0, 0, 0.26);
  --skirting:      #1a0f14;

  --timber:        #4b2b1c;  /* chowki, easel, shelf */
  --timber-lit:    #6a3d28;
  --ironwork:      #150b18;  /* the grille, and the window's own frame */
  --brass:         #8a6428;
  --marigold:      #c96f22;
  --marigold-deep: #a8531a;
  --leaf:          #3a5226;
  --paper:         #5d5244;  /* the panchang and her pages, by night */
  --canvas:        #574f42;  /* what stands on the easel, by night */
  --glass:         rgba(185, 166, 196, 0.10);
  --glass-edge:    rgba(155, 133, 162, 0.5);

  --sky-top:       #1b1538;
  --sky-bottom:    #352654;
  --spill-alpha:   0;         /* the patch is sunlight; at 2am there is none */
}

/* §4's four lighting states, and the only place the hour is spent. The light follows
 * the hour and never the cat — a full moon at eleven in the morning is a daylit room
 * with a cat awake in it (story 6.1.3), and keying this to the cat is the defect that
 * story already cost us once. */
body.light-day {
  --sky-top: #8fa2ab; --sky-bottom: #cdb88e;
  --wall: #34203a; --floor-tone: #5a2723; --timber: #5d3724; --spill-alpha: 0.14;
  --paper: #c9b894; --canvas: #b9a98c;
}
body.light-day-shifted {
  --sky-top: #b08f5e; --sky-bottom: #cfa96a;
  --wall: #32203c; --floor-tone: #57262a; --timber: #5a3524; --spill-alpha: 0.18;
  --paper: #c2ab84; --canvas: #b0a081;
}
body.light-dusk {
  --sky-top: #2b1e48; --sky-bottom: #7c4550;
  --wall: #2a1832; --floor-tone: #4a211f; --spill-alpha: 0.07;
  --paper: #8a7a63; --canvas: #7d7360;
}

/* An author `display` beats the UA stylesheet's `[hidden] { display: none }`. The
 * guard is repeated in every stylesheet rather than inherited from one of them: a
 * guard that works only because another file loaded first is not a guard. */
[hidden] { display: none !important; }

.room, .furnishings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Her things sit between the room and the cat, and take no touch at all in this epic:
 * the grimoire, the jars, the easel and the panchang open in Epic 9, and a target
 * that does nothing until then would be an affordance lying about itself. */
.furnishings { pointer-events: none; }

/* --- the room ------------------------------------------------------------- */

.wall     { fill: var(--wall); }
.floor    { fill: var(--floor-tone); }
.skirting { fill: var(--skirting); }
.floor-joint path { stroke: var(--joint); stroke-width: 1; fill: none; }

.sky-top    { stop-color: var(--sky-top); }
.sky-bottom { stop-color: var(--sky-bottom); }

.window-reveal { fill: none; stroke: #3f2a47; stroke-width: 16; }
.window-frame  { fill: none; stroke: var(--ironwork); stroke-width: 4; }
.grille path { stroke: var(--ironwork); stroke-width: 3; fill: none; }

.sill        { fill: #46303f; }
.sill-shadow { fill: var(--skirting); }

/* The patch of light on the floor, which moves along the room after 15:00 (§4). */
.spill { fill: var(--vellum); opacity: var(--spill-alpha); }

/* --- the toran ------------------------------------------------------------ */

.toran-string   { stroke: #6b4a1f; stroke-width: 1; fill: none; }
.marigold       { fill: var(--marigold); }
.marigold-deep  { fill: var(--marigold-deep); }
.mango-leaf     { fill: var(--leaf); }

/* --- the panchang --------------------------------------------------------- */

.panchang-cord  { stroke: #8a7760; stroke-width: 0.8; fill: none; }
.panchang-paper { fill: var(--paper); }
.panchang-head  { fill: var(--oxblood); }
.panchang-mark  { fill: var(--marigold); }
.panchang-day   { fill: #8a7760; }

/* Her tithi, circled and never written: §3.1 forbids the label and §14 reserves the
 * word even if it were allowed one. */
.panchang-tithi { fill: var(--night); }
.panchang-ring  { fill: none; stroke: var(--oxblood); stroke-width: 1.1; }

/* --- the shelf of jars ---------------------------------------------------- */

.shelf-plank   { fill: var(--timber-lit); }
.shelf-bracket { fill: #3a2319; }
.jar-inside    { fill: #1f1626; }
.jar-glass     { fill: var(--glass); stroke: var(--glass-edge); stroke-width: 0.8; }
.jar-lid       { fill: #6b5238; }
/* A jar with nine in it. Brass rather than dull — the only thing a full jar says. */
.jar-sealed    { fill: var(--brass); }
/* What the cat brought, one tone for every one of them: §6 says a rarity is presented
 * exactly as junk is, so a bead never tells her which is which. */
.bead          { fill: var(--tarnish); }
.jar-glint     { stroke: var(--vellum); stroke-opacity: 0.28; stroke-width: 1.1; }

/* --- the easel ------------------------------------------------------------ */

.easel-leg      { stroke: var(--timber-lit); stroke-width: 4; stroke-linecap: round; fill: none; }
.easel-leg-back { stroke: #3e281a; stroke-width: 3; fill: none; }
.easel-ledge    { fill: var(--timber-lit); }
.canvas         { fill: var(--canvas); }

/* --- the chowki and her grimoire ------------------------------------------ */

.chowki-top   { fill: var(--timber-lit); }
.chowki-apron, .chowki-leg { fill: var(--timber); }
.grimoire-cover  { fill: #3e1f2e; }
/* The years she has finished, stacked under the table where books go. */
.volume-spine    { fill: #46233a; }
.grimoire-pages  { fill: var(--paper); }
.grimoire-spine  { fill: #57293e; }

/* Oxblood, spent here for the third and last time in the room — the Pact's discipline
 * carried over. His seal on her book is the one place he appears as a colour. */
.grimoire-seal { fill: var(--oxblood); }

/* --- the diya ------------------------------------------------------------- */

.diya-bowl { fill: var(--brass); }
.diya-foot { fill: #6b4e20; }
.diya-rim  { stroke: #b08a44; stroke-width: 0.8; fill: none; }

/* --- her broom ------------------------------------------------------------ */

.broom-handle  { fill: #6b4a2a; }
.broom-node    { stroke: #4e3320; stroke-width: 1.2; }
.broom-besom   { fill: #8a6f42; }
.broom-straw   { stroke: #6a5130; stroke-width: 0.9; fill: none; }
.broom-binding { fill: #5a3d22; }
.broom-thread  { stroke: #8f2630; stroke-width: 1.8; }

/* --- where a thing is standing (§18.5) ------------------------------------
 *
 * Each way a thing can stand is a class rather than a transform in the markup, so
 * that the client can swap one and CSS carries it there — which is how something
 * moves *while she is watching* (story 11.2.3) rather than only between visits.
 *
 * `transform-box: view-box` so these read in the room's own coordinates, the same
 * numbers art/furnishings.js would have written.
 *
 * Slowly, and only when it travels: 2.4s is long enough that catching it out of the
 * corner of her eye is the point, and short enough that she is not watching a thing
 * slide for an age. Nothing here runs on load — a room she has just opened is
 * already arranged, and only a class swap moves anything. */
.broom, .panchang, .diya {
  transform-box: view-box;
  transition: transform 2.4s cubic-bezier(.33, 0, .25, 1);
}

.broom.way-wall   { transform: translate(14px, 402px) rotate(-5deg); }
.broom.way-tilted { transform: translate(18px, 396px) rotate(-13deg); }
.broom.way-high   { transform: translate(10px, 372px) rotate(-3deg); }

/* Crooked pivots at the nail it hangs from, which is the only way a hanging thing can
 * go crooked without coming off the wall. */
.panchang { transform-origin: 60px 76px; }
.panchang.way-straight { transform: rotate(0deg); }
.panchang.way-crooked  { transform: rotate(-4deg); }

.diya.way-near { transform: translate(0, 0); }
.diya.way-far  { transform: translate(-34px, 0); }

@media (prefers-reduced-motion: reduce) {
  /* It still moves — she asked for less motion, not for a room that lies about where
   * things are — but it arrives rather than travelling (story 11.2.4). */
  .broom, .panchang, .diya { transition: none; }
}

/* --- what the room has moved (§18.5) --------------------------------------
 *
 * A witch's room does not hold still: between visits, one thing has sometimes moved.
 * Most of the ways it moves are transforms in art/furnishings.js and need nothing
 * here; the canvas turned to the wall is the exception, because the back of a canvas
 * is stretcher bars rather than primed cloth.
 *
 * `.canvas-brace` had no rule when it was first drawn, which means SVG's default
 * fill — black. That is the third time in two days a new shape has arrived black, so
 * `test/arrangement.test.js` now fails the build if any shape the room draws has no
 * colour of its own. */
.canvas-back  { fill: var(--timber); }
.canvas-brace { stroke: var(--timber-lit); stroke-width: 3; fill: none; }

/* --- an open window (story 11.1.2) ----------------------------------------
 *
 * A regression fix, not a new feature. The v1 rule repainted `--pane-top` and
 * `--pane-bottom`, which belonged to the glass rectangle §10 allowed and the drawn
 * room does not have — so from Epic 8 until now, opening the window changed her
 * state, persisted it, let the cat leave through it, and showed her nothing at all.
 * A test asserted the state flipped, which is exactly the gap between a mechanic
 * working and her being able to see that it worked.
 *
 * The sash is up: the lower sky is open air rather than glass, and the light on the
 * floor goes with it. One value, no new geometry (§18.1). */
body.window-open {
  --sky-bottom: #1d1533;
  --spill-alpha: 0;
}

/* --- motion (§18.5) -------------------------------------------------------
 *
 * Each object gets one small loop of its own, and no more. §10's ban on ambient
 * particles, floating dust and drifting stars stands unamended — `test/motion.test.js`
 * fails the build if a mote ever appears.
 *
 * Every period here is prime-ish against the cat's 4.1s breath and 6.7s tail, so the
 * room never pulses in unison and reads as a place rather than a metronome. */

@keyframes hover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-1.2deg); }
}
.broom-fly {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: hover 9.3s ease-in-out infinite;
}

@keyframes sway {
  0%, 100% { transform: rotate(-0.7deg); }
  50%      { transform: rotate(0.7deg); }
}
/* About its two fixings at the top of the window, so it swings rather than slides.
 * Selector weight matters here: `.furnishings > g` is (0,1,1) and would otherwise
 * win the `transform-box`, swinging the garland about its own bounding box. */
.furnishings > g.toran {
  transform-box: view-box;
  transform-origin: 210px 38px;
  animation: sway 13.1s ease-in-out infinite;
}

/* --- her things answer a touch (story 11.1.1) -----------------------------
 *
 * One gesture for all seven, deliberately: she should not be able to tell from the
 * acknowledgement which of them have something inside them. That discovery belongs
 * to Epic 9, and giving the grimoire a richer answer than the broom would hand it to
 * her for free.
 *
 * Touch only: this product has no pointer-hover state anywhere, and tools/lint.js
 * fails the build if one is introduced (§9). */
.furnishings > g {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1), filter 300ms ease;
}
.furnishings > g.touched {
  transform: translateY(-5px) scale(1.03);
  filter: drop-shadow(0 0 7px rgba(227, 164, 74, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  /* Still, in place, with no jump — and she still gets an answer when she touches
   * something, it simply arrives without travelling (story 11.1.7). */
  .broom-fly, .furnishings > g.toran { animation: none; }
  .furnishings > g { transition: none; }
  .furnishings > g.touched { transform: none; }
}