/* encounters.css — house overlay + in-river boat drift.
   Consumes sibling-published numeric var inherited from .world, always with fallback:
   --window-light (0..1 daylight strength).
   Shadow direction/length is set by encounters.js from the ACTUAL sun screen
   position (scene:sun event, else .daylight-sun rect); no time-based x-offset here.
   Boat supports pointer and keyboard sailing; house navigation uses the painted-house hit target. */

/* House overlay: matches the .painting responsive frame exactly so the SVG
   (viewBox 0 0 1800 1100, preserveAspectRatio="none") stretches 1:1 with the
   object-fit:fill landscape images, using the shared responsive painting frame. */
.enc-layer {
  position: absolute;
  inset: 0;
  width: var(--painting-width);
  left: var(--painting-left);
  right: auto;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.enc-layer svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.boat-control {
  position: absolute;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
  border-radius: 50%;
  cursor: grab;
}
.boat-control:active { cursor: grabbing; }

/* Windows: painted fills match the original house in both lights. */
.enc-win {
  fill: #71887f;
  transition: fill 0.35s ease;
}

.world.is-evening .enc-win {
  fill: #efd092;
}

.enc-mull {
  fill: none;
  stroke: rgba(235, 223, 196, 0.85);
  stroke-width: 1;
}

/* Warm glow sits exactly over the windows and never translates: only its
   opacity follows the sibling's daylight number. The shadow alone rotates. */
.enc-glow {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.enc-glow-rect {
  fill: #ffcf7d;
}

.enc-layer.enc-warm .enc-glow {
  opacity: calc(var(--window-light, 1) * 0.8);
}
.enc-layer.enc-warm .enc-win {
  fill: #ffd489;
  filter: brightness(1.12) drop-shadow(2px 3px 7px rgba(255, 190, 90, 0.6));
}

/* Drawn door: swings open from its hinge edge while hovered/focused. */
.enc-door {
  fill: #7f8170;
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 0.55s ease, fill 0.55s ease;
}

.enc-door-step {
  fill: #b5a481;
}

.enc-layer.enc-open .enc-door {
  transform: scaleX(0.18);
  fill: #e8b96a;
}

/* Ground shadow: positioned by encounters.js via the SVG transform attribute
   (rotate + elongate about the house foot, away from the actual sun). There is
   deliberately NO CSS transform here — a var-based translate would fight the
   JS rotation and reintroduce the old centered x-offset bug. */
.enc-ground-shadow {
  fill: url(#house-cast-shade);
  opacity: 1;
  filter: url(#house-shadow-soft);
  mix-blend-mode: multiply;
}

/* Boat drift: JS positions the SVG every frame via the `translate` + `rotate`
   + `scale` properties (rAF lerp), so there is deliberately NO CSS transition here — a
   transition would chase each frame and corrupt anchor measurement. The
   style.css `bob` keyframes animate `transform`, which composes with the
   independent `translate`/`rotate`/`scale` properties.  */
.landmarks .boat-anchor .paper-boat {
  will-change: translate, scale;
}


/* Paused: everything static, no transitions or ripples. */
.world.still .enc-glow,
.world.still .enc-win,
.world.still .enc-door {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {

  .enc-glow,
  .enc-win,
  .enc-door,
  .landmarks .boat-anchor .paper-boat {
    transition: none;
  }
}

@media (hover: none) {
  .landmarks .boat-anchor .paper-boat {
    transition: none;
  }
}
/* Keep the footer note on the bank, clear of the boat's river route. */
@media (min-width: 1051px) { .world .footer-center { position: absolute; left: 29%; bottom: 75px; width: 170px; text-align: center; line-height: 1.5; } }