/* =========================================================================
   AANGAN · THE HOUSE KIT                                          (phase 0)
   -------------------------------------------------------------------------
   The app is nani's house (see .claude/memory-backup/aangan-nani-house.md).
   Six rooms is a lot of art, and what stops it fragmenting is that every room
   is built from the same kit: one palette, one light, one set of props, one
   shell. This file is that kit's half of the deal — the tokens and the shell.
   js/40-house.js draws the props.

   Rooms are PAINTED PLATES with live objects on top (owner 2026-07-29):
     .room-plate  the painted background, one image per room
     .room-light  the light rig — every plate is lit by the SAME lamp, so
                  plates that were made separately still read as one hour
     .room-objs   the things you touch: vector, crisp, stateful, animated
     .room-frame  the doorway you are standing in, shared by every room

   Namespaced `h-` / `.room*` so it cannot collide with the chalk system it
   will eventually replace. Nothing here is loaded by the app yet.
   ========================================================================= */

:root{
  /* ---- walls: distemper, gone chalky with age ---- */
  --h-wall:#d9c9a6; --h-wall-lt:#eadcbd; --h-wall-dk:#b8a681; --h-wall-sh:#8d7d5c;
  /* the oil-paint dado every 90s Indian room has to waist height */
  --h-dado:#5b6a49; --h-dado-lt:#74845f; --h-dado-dk:#3d4a2f;

  /* ---- floor: red oxide with mosaic chips ---- */
  --h-floor:#8f4a37; --h-floor-lt:#a9634a; --h-floor-dk:#6b3526; --h-grout:#5a2c20;

  /* ---- wood: sagwan, oiled and dark at the edges ---- */
  --h-wood:#7a4a25; --h-wood-lt:#a4703c; --h-wood-dk:#472a13;

  /* ---- brass: handles, the pooja lamp, the weighing scale ---- */
  --h-brass:#c8963f; --h-brass-lt:#eec97e; --h-brass-dk:#825c1d;

  /* ---- steel: Godrej almirah, tiffin, the fan's motor ---- */
  --h-steel:#9aa3a6; --h-steel-lt:#cbd4d6; --h-steel-dk:#5f696c;

  /* ---- cloth: printed cotton, the curtain and the sofa covers ---- */
  --h-cloth:#c1523d; --h-cloth-dk:#8c3325; --h-cloth-2:#3d6a6d; --h-cream:#f2e6cd;

  /* ---- the lamp. ONE source, upper left, every room, always ---- */
  --h-lit:#ffe6ae; --h-lit-hot:#fff6e0;
  --h-shade:rgba(46,25,13,.52);
  --h-ink:#3a2313;                                   /* the darkest line drawn */
  /* the wash that goes over every plate — this is what makes six pictures
     into one house even when the plates were not made together */
  --h-lightwash:radial-gradient(122% 96% at 17% 5%,
    rgba(255,229,172,.34) 0%, rgba(255,205,128,.13) 36%, rgba(255,190,110,0) 66%);
  --h-vignette:radial-gradient(132% 104% at 50% 44%,
    rgba(0,0,0,0) 50%, rgba(40,21,10,.20) 78%, rgba(34,17,8,.50) 100%);
  /* everything in the house casts the same shadow, down and to the right */
  --h-drop:drop-shadow(2px 4px 5px rgba(40,21,10,.46));
  --h-drop-sm:drop-shadow(1px 2px 3px rgba(40,21,10,.42));

  /* ---- motion ---- */
  --h-out:cubic-bezier(.2,.8,.25,1);
  --h-door:.62s;

  /* The doorway's jamb, in real pixels. A room insets its own contents by this
     so nothing it draws ends up under the frame — the first room built against
     a stretched-SVG frame had its price column sliced off. */
  --h-jamb:20px;
}

/* =========================== the room shell ============================= */
/* Every room is this. A room differs only by its plate, its objects and its
   ONE accent colour — never by its camera, its light or its layout. */
.room{position:relative;width:100%;height:100%;overflow:hidden;
  background:var(--h-wall-dk);isolation:isolate}
.room > *{position:absolute;inset:0}

.room-plate{background-position:center;background-size:cover;background-repeat:no-repeat;
  z-index:0}
/* the plate is a photograph of a room, so it holds still while you scroll */
.room-light{background:var(--h-lightwash);mix-blend-mode:soft-light;z-index:1;pointer-events:none}
.room-vig{background:var(--h-vignette);z-index:2;pointer-events:none}
.room-objs{z-index:3}
.room-frame{z-index:4;pointer-events:none}

/* the doorframe: sagwan, lit from the left like everything else in the house */
.h-jamb{position:absolute;display:block}
.h-j-l{left:0;top:0;bottom:0;width:var(--h-jamb);
  background:linear-gradient(90deg,var(--h-wood-dk),var(--h-wood-lt) 40%,var(--h-wood))}
.h-j-r{right:0;top:0;bottom:0;width:var(--h-jamb);
  background:linear-gradient(90deg,var(--h-wood),var(--h-wood-dk) 70%,#2e1a09)}
.h-j-t{left:0;right:0;top:0;height:var(--h-jamb);
  background:linear-gradient(180deg,var(--h-wood-lt),var(--h-wood) 55%,var(--h-wood-dk))}
/* the bead the carpenter ran round the opening, and the shadow it throws in */
.h-bead{position:absolute;left:var(--h-jamb);right:var(--h-jamb);top:var(--h-jamb);bottom:0;
  display:block;box-shadow:inset 0 0 0 2px rgba(46,26,9,.7),
    inset 0 7px 13px rgba(30,16,5,.5), inset 7px 0 11px rgba(30,16,5,.34),
    inset -7px 0 11px rgba(30,16,5,.44)}

/* the things you touch. Objects in the room, never cards floating over it. */
.h-obj{position:absolute;cursor:pointer;background:none;border:0;padding:0;
  filter:var(--h-drop);transition:transform .16s var(--h-out),filter .16s var(--h-out);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.h-obj > svg,.h-obj > img{display:block;width:100%;height:100%;pointer-events:none}
.h-obj:active{transform:translateY(1px) scale(.985);filter:var(--h-drop-sm)}
.h-obj:focus-visible{outline:3px solid var(--h-lit-hot);outline-offset:3px;border-radius:4px}
/* an object you can afford / have unlocked catches the light a little */
.h-obj[data-lit="1"]{filter:var(--h-drop) brightness(1.06)}

/* ====================== the doorway transition ========================== */
/* Moving between rooms is walking through a door: the printed cotton curtain
   is pushed aside, and falls back behind you. Replaces the chalk wipe. */
.h-door{position:fixed;inset:0;z-index:900;pointer-events:none;overflow:hidden;
  display:none}
.h-door.on{display:block;pointer-events:auto}
/* the print is a print: a fixed repeat, not one motif stretched up the panel */
.h-door .h-panel{position:absolute;top:0;bottom:0;width:52%;
  background-size:78px 78px;background-repeat:repeat;
  will-change:transform;transform-origin:top center}
/* the folds — cotton hanging off a rod gathers, and the gathers catch the lamp */
.h-door .h-panel::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(40,16,10,.34) 0 6px, rgba(40,16,10,.10) 10px 20px,
    rgba(255,232,190,.14) 26px 32px, rgba(40,16,10,.10) 38px 48px);
  mix-blend-mode:multiply;opacity:.85}
.h-door .h-panel::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(40,16,10,.42) 0, rgba(40,16,10,0) 16%),
             var(--h-vignette)}
.h-door .h-l{left:0}
.h-door .h-r{right:0}
/* the rod the curtain hangs from — it never moves */
.h-door .h-rod{position:absolute;left:0;right:0;top:0;height:9px;
  background:linear-gradient(#e0bd74,#c8963f 42%,#825c1d);
  box-shadow:0 3px 6px rgba(40,21,10,.5)}

@keyframes h-part-l{from{transform:translateX(0) skewY(0)}
  to{transform:translateX(-104%) skewY(1.4deg)}}
@keyframes h-part-r{from{transform:translateX(0) skewY(0)}
  to{transform:translateX(104%) skewY(-1.4deg)}}
@keyframes h-fall-l{from{transform:translateX(-104%) skewY(1.4deg)}
  to{transform:translateX(0) skewY(0)}}
@keyframes h-fall-r{from{transform:translateX(104%) skewY(-1.4deg)}
  to{transform:translateX(0) skewY(0)}}
.h-door.part .h-l{animation:h-part-l var(--h-door) var(--h-out) forwards}
.h-door.part .h-r{animation:h-part-r var(--h-door) var(--h-out) forwards}
.h-door.fall .h-l{animation:h-fall-l var(--h-door) var(--h-out) forwards}
.h-door.fall .h-r{animation:h-fall-r var(--h-door) var(--h-out) forwards}

/* ============================== the props =============================== */
/* Drawn once in js/40-house.js, reused in every room. This is rule 4, and it
   is the whole reason the house reads as one house. */
.h-prop{display:block;filter:var(--h-drop)}

/* the fan turns all day, in every room that has one */
.h-fan-blades{transform-box:fill-box;transform-origin:50% 50%;
  animation:h-spin 1.9s linear infinite}
@keyframes h-spin{to{transform:rotate(360deg)}}
/* it is a 90s fan, so it wobbles */
.h-fan-rod{transform-origin:50% 0;animation:h-wobble 3.7s ease-in-out infinite}
@keyframes h-wobble{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.5deg)}}

/* the tube light hums on, and the glow belongs to the room not the fitting */
.h-tube-glow{animation:h-flicker 9s ease-in-out infinite}
@keyframes h-flicker{0%,96%,100%{opacity:.9}97%{opacity:.62}98.5%{opacity:.95}}

/* the calendar's pages lift in the fan's draught */
.h-cal-leaf{transform-origin:50% 0;animation:h-leaf 4.3s ease-in-out infinite}
@keyframes h-leaf{0%,72%,100%{transform:rotateX(0)}84%{transform:rotateX(-14deg)}}

@media (prefers-reduced-motion:reduce){
  .h-fan-blades,.h-fan-rod,.h-tube-glow,.h-cal-leaf{animation:none}
  .h-door .h-l,.h-door .h-r{animation-duration:.01s}
}