/* Night Vendor Living World — Phase 4 v1.0
   The Presence. Code-drawn silhouette only. No images, sound, layout shift, or blocked interaction. */

#nv-p4-presence-layer{
  position:fixed;
  inset:0;
  z-index:7;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
  opacity:1;
}
#nv-p4-presence-layer *{box-sizing:border-box;pointer-events:none;}

/* One reusable, deliberately incomplete human silhouette. */
.nv-p4-vendor{
  position:absolute;
  display:block;
  width:clamp(58px,7vw,92px);
  height:clamp(158px,24vw,238px);
  opacity:0;
  transform-origin:50% 100%;
  filter:blur(.25px) drop-shadow(-1px 0 1px rgba(185,216,248,.08)) drop-shadow(0 0 18px rgba(0,0,0,.82));
}
.nv-p4-vendor-head{
  position:absolute;
  left:36%;
  top:2%;
  width:31%;
  height:18%;
  border-radius:48% 46% 42% 44%;
  background:radial-gradient(circle at 44% 32%,rgba(18,25,32,.92),rgba(1,3,5,.99) 65%);
  border-left:1px solid rgba(185,216,248,.08);
  box-shadow:0 0 16px rgba(0,0,0,.86);
}
.nv-p4-vendor-neck{
  position:absolute;
  left:43%;
  top:17%;
  width:18%;
  height:11%;
  background:linear-gradient(90deg,rgba(1,3,5,.98),rgba(9,14,19,.92),rgba(1,3,5,.98));
}
.nv-p4-vendor-coat{
  position:absolute;
  left:12%;
  right:9%;
  top:23%;
  bottom:0;
  clip-path:polygon(31% 0,69% 0,88% 13%,96% 70%,100% 100%,53% 94%,8% 100%,12% 67%,18% 14%);
  background:
    linear-gradient(102deg,rgba(1,3,5,.99) 0 38%,rgba(18,25,31,.96) 49%,rgba(1,3,5,.995) 62% 100%);
  box-shadow:inset 1px 0 rgba(185,216,248,.09),0 0 28px rgba(0,0,0,.9);
}
.nv-p4-vendor-shoulder{
  position:absolute;
  left:2%;
  right:0;
  top:22%;
  height:22%;
  border-radius:44% 50% 18% 20%;
  background:radial-gradient(ellipse at 50% 35%,rgba(12,18,24,.98),rgba(1,3,5,.99) 72%);
  border-left:1px solid rgba(185,216,248,.055);
}
.nv-p4-vendor-hand{
  position:absolute;
  right:3%;
  top:52%;
  width:8%;
  height:19%;
  border-radius:60% 50% 68% 55%;
  background:rgba(2,5,8,.96);
  transform:rotate(-6deg);
  opacity:.88;
}
.nv-p4-vendor-glint{
  position:absolute;
  left:47%;
  top:8.5%;
  width:5%;
  height:1px;
  background:rgba(185,216,248,.12);
  box-shadow:0 0 5px rgba(185,216,248,.08);
  opacity:.48;
}

/* Embedded room host. Everything is absolute and never participates in layout. */
.nv-p4-presence-host{position:relative!important;isolation:isolate;}
.nv-p4-room-presence{
  position:absolute;
  inset:0;
  z-index:6;
  overflow:hidden;
  pointer-events:none;
  opacity:1;
}
.nv-p4-room-presence .nv-p4-vendor{z-index:1;}
.nv-p4-room-presence::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(90deg,transparent 0 62%,rgba(2,5,8,.16) 76%,transparent 100%);
  opacity:0;
}

/* Global edge visitor, used on reading pages where no visual set exists. */
#nv-p4-edge-figure{
  right:-9px;
  top:28vh;
  transform:translateX(76%) rotate(.35deg);
}

/* Narrow digital seam. It never moves or clips the real page. */
#nv-p4-rift{
  --nv-p4-rift-x:68%;
  position:absolute;
  left:var(--nv-p4-rift-x);
  top:9vh;
  width:clamp(22px,3.8vw,48px);
  height:82vh;
  opacity:0;
  transform:translateX(-50%) scaleX(.12);
  clip-path:polygon(46% 0,66% 8%,49% 18%,71% 29%,45% 42%,65% 54%,42% 66%,62% 77%,40% 89%,55% 100%,25% 94%,38% 81%,18% 70%,37% 57%,16% 44%,35% 31%,20% 17%,37% 7%);
  background:
    radial-gradient(ellipse at 48% 35%,rgba(94,134,166,.12),transparent 24%),
    linear-gradient(90deg,rgba(0,0,0,.98),rgba(4,8,12,1) 52%,rgba(0,0,0,.99));
  box-shadow:-2px 0 8px rgba(185,216,248,.08),2px 0 12px rgba(95,23,34,.10),0 0 32px rgba(0,0,0,.92);
}
#nv-p4-rift::before,
#nv-p4-rift::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(185,216,248,.17),rgba(95,23,34,.16),transparent);
  opacity:.6;
}
#nv-p4-rift::before{left:24%;}
#nv-p4-rift::after{right:22%;}
#nv-p4-rift .nv-p4-vendor{
  left:50%;
  bottom:5%;
  width:76px;
  height:214px;
  transform:translateX(-50%) scale(.78);
  filter:blur(.8px);
}

/* A tall body briefly interrupts a light source without adding a figure. */
#nv-p4-light-block{
  position:absolute;
  left:-22vw;
  top:0;
  width:26vw;
  min-width:150px;
  height:32vh;
  opacity:0;
  transform:skewX(-7deg);
  background:linear-gradient(105deg,transparent 0 19%,rgba(0,0,0,.82) 45%,rgba(0,0,0,.48) 66%,transparent 86%);
  filter:blur(7px);
}

/* Room placement. The Vendor is always partially obstructed. */
body.nv-p4-home .nv-p4-room-presence .nv-p4-vendor{right:3%;top:96px;transform:translateX(62%) rotate(.6deg);}
body.nv-p4-late-files .nv-p4-room-presence .nv-p4-vendor{left:3%;top:102px;transform:translateX(-62%) rotate(-.5deg);}
body.nv-p4-night-desk .nv-p4-room-presence .nv-p4-vendor{right:5%;top:82px;transform:translateX(68%) rotate(.4deg);}
body.nv-p4-hidden-bookshop .nv-p4-room-presence .nv-p4-vendor{left:70%;top:104px;transform:translateX(-50%) scale(.87);filter:blur(.65px) drop-shadow(-1px 0 1px rgba(185,216,248,.07)) drop-shadow(0 0 22px rgba(0,0,0,.88));}
body.nv-p4-fiction-shop .nv-p4-room-presence .nv-p4-vendor{right:11%;top:108px;transform:scaleX(-1) rotate(-.7deg);filter:blur(.75px) drop-shadow(-1px 0 1px rgba(185,216,248,.08)) drop-shadow(0 0 13px rgba(185,216,248,.025));}
body.nv-p4-widows-bell .nv-p4-room-presence .nv-p4-vendor{left:8%;top:88px;transform:translateX(-58%) scale(.9);}

/* Major presence events. Maximum opacity stays deliberately low. */
body.nv-p4-event-home-peek .nv-p4-room-presence .nv-p4-vendor,
body.nv-p4-event-cabinet-peek .nv-p4-room-presence .nv-p4-vendor,
body.nv-p4-event-desk-cross .nv-p4-room-presence .nv-p4-vendor,
body.nv-p4-event-bookshop-aisle .nv-p4-room-presence .nv-p4-vendor,
body.nv-p4-event-counter-reflection .nv-p4-room-presence .nv-p4-vendor,
body.nv-p4-event-bell-shadow .nv-p4-room-presence .nv-p4-vendor{
  animation:nv-p4-room-appear var(--nv-p4-duration,1100ms) cubic-bezier(.2,.72,.22,1) both;
}
body.nv-p4-event-counter-reflection .nv-p4-room-presence .nv-p4-vendor{animation-name:nv-p4-reflection-appear;}
body.nv-p4-event-bookshop-aisle .nv-p4-room-presence::after{animation:nv-p4-aisle-obstruction 1300ms ease-out both;}
body.nv-p4-event-reader-edge #nv-p4-edge-figure{animation:nv-p4-reader-edge 980ms cubic-bezier(.18,.72,.25,1) both;}
body.nv-p4-event-screen-rift #nv-p4-rift{animation:nv-p4-rift-open 940ms steps(1,end) both;}
body.nv-p4-event-screen-rift #nv-p4-rift .nv-p4-vendor{animation:nv-p4-rift-vendor 940ms ease-out both;}
body.nv-p4-event-light-cross #nv-p4-light-block{animation:nv-p4-light-cross 1080ms ease-in-out both;}
body.nv-p4-event-doorway-shadow .hallway-scene .door:nth-of-type(2),
body.nv-p4-event-doorway-shadow .hallway-scene .door-two{
  animation:nv-p4-doorway-deepen 1300ms steps(1,end) both;
}

@keyframes nv-p4-room-appear{
  0%{opacity:0;}
  18%{opacity:.12;}
  34%{opacity:.32;}
  68%{opacity:.19;}
  100%{opacity:0;}
}
@keyframes nv-p4-reflection-appear{
  0%{opacity:0;transform:scaleX(-1) translateX(-2px) rotate(-.7deg);}
  30%{opacity:.14;}
  55%{opacity:.29;transform:scaleX(-1) translateX(0) rotate(-.7deg);}
  100%{opacity:0;transform:scaleX(-1) translateX(1px) rotate(-.7deg);}
}
@keyframes nv-p4-aisle-obstruction{
  0%,100%{opacity:0;}
  35%{opacity:.18;}
  65%{opacity:.1;}
}
@keyframes nv-p4-reader-edge{
  0%{opacity:0;transform:translateX(78%) rotate(.35deg);}
  28%{opacity:.10;}
  51%{opacity:.25;transform:translateX(54%) rotate(.15deg);}
  72%{opacity:.18;transform:translateX(57%) rotate(.15deg);}
  100%{opacity:0;transform:translateX(78%) rotate(.35deg);}
}
@keyframes nv-p4-rift-open{
  0%{opacity:0;transform:translateX(-50%) scaleX(.08);}
  15%{opacity:.28;transform:translateX(-50%) scaleX(.45);}
  24%{opacity:.46;transform:translateX(-50%) scaleX(.82);}
  48%{opacity:.54;transform:translateX(-50%) scaleX(.72);}
  72%{opacity:.26;transform:translateX(-50%) scaleX(.30);}
  100%{opacity:0;transform:translateX(-50%) scaleX(.06);}
}
@keyframes nv-p4-rift-vendor{
  0%,18%{opacity:0;}
  31%{opacity:.12;}
  50%{opacity:.30;}
  69%{opacity:.13;}
  100%{opacity:0;}
}
@keyframes nv-p4-light-cross{
  0%{opacity:0;left:-25vw;}
  24%{opacity:.32;}
  55%{opacity:.54;}
  82%{opacity:.16;}
  100%{opacity:0;left:105vw;}
}
@keyframes nv-p4-doorway-deepen{
  0%,100%{filter:none;box-shadow:inherit;}
  22%{filter:brightness(.72);box-shadow:inset 0 0 70px rgba(0,0,0,.82);}
  58%{filter:brightness(.54);box-shadow:inset 0 0 95px rgba(0,0,0,.94);}
  78%{filter:brightness(.76);box-shadow:inset 0 0 65px rgba(0,0,0,.76);}
}

/* Reduced motion receives a still, low-opacity presence and never the rupture. */
@media (prefers-reduced-motion: reduce){
  body[class*="nv-p4-event-"] .nv-p4-room-presence .nv-p4-vendor,
  body.nv-p4-event-reader-edge #nv-p4-edge-figure,
  body.nv-p4-event-light-cross #nv-p4-light-block,
  body.nv-p4-event-doorway-shadow .hallway-scene .door:nth-of-type(2),
  body.nv-p4-event-doorway-shadow .hallway-scene .door-two{
    animation:none!important;
  }
  body.nv-p4-event-home-peek .nv-p4-room-presence .nv-p4-vendor,
  body.nv-p4-event-cabinet-peek .nv-p4-room-presence .nv-p4-vendor,
  body.nv-p4-event-desk-cross .nv-p4-room-presence .nv-p4-vendor,
  body.nv-p4-event-bookshop-aisle .nv-p4-room-presence .nv-p4-vendor,
  body.nv-p4-event-counter-reflection .nv-p4-room-presence .nv-p4-vendor,
  body.nv-p4-event-bell-shadow .nv-p4-room-presence .nv-p4-vendor,
  body.nv-p4-event-reader-edge #nv-p4-edge-figure{opacity:.13;}
  #nv-p4-rift{display:none!important;}
}

@media (max-width:820px){
  #nv-p4-presence-layer{z-index:7;}
  .nv-p4-vendor{width:58px;height:164px;}
  body.nv-p4-home .nv-p4-room-presence .nv-p4-vendor{right:1%;top:82px;transform:translateX(46%) rotate(.6deg);}
  body.nv-p4-late-files .nv-p4-room-presence .nv-p4-vendor{left:1%;top:84px;transform:translateX(-46%) rotate(-.5deg);}
  body.nv-p4-hidden-bookshop .nv-p4-room-presence .nv-p4-vendor{left:76%;top:96px;opacity:0;}
  body.nv-p4-fiction-shop .nv-p4-room-presence .nv-p4-vendor{right:5%;top:98px;}
  #nv-p4-edge-figure{top:31vh;width:52px;height:154px;}
  #nv-p4-rift{top:12vh;height:72vh;width:18px;}
  #nv-p4-rift .nv-p4-vendor{width:52px;height:154px;}
}