/* Night Vendor Living World Phase 7 v1.0
   The Second Look Protocol. One clear, silent close encounter using the existing
   Phase 4 proprietor figure. No layout shift, new artwork, sound, or controls. */

body.nv-p7-second-look #nv-p4-presence-layer{
  z-index:12;
}

/* During the close encounter, suppress the ordinary room placement so the
   visitor sees one proprietor, not two. */
body.nv-p7-second-look .nv-p4-room-presence .nv-p4-vendor,
body.nv-p7-second-look #nv-p4-rift{
  animation:none!important;
  opacity:0!important;
}

/* The existing global Phase 4 figure becomes the close, unmistakable presence. */
body.nv-p7-second-look #nv-p4-edge-figure{
  left:auto;
  right:-10px;
  top:var(--nv-p7-top,19vh);
  width:clamp(112px,15vw,176px);
  height:clamp(305px,53vh,470px);
  z-index:8;
  isolation:isolate;
  filter:blur(.02px) drop-shadow(-2px 0 1px rgba(205,230,248,.34)) drop-shadow(0 0 25px rgba(105,154,190,.24)) drop-shadow(0 0 48px rgba(0,0,0,.99));
  transform:translateX(18%) rotate(-.5deg);
  animation:nv-p7-close-right 1420ms steps(1,end) both!important;
}

body.nv-p7-second-look #nv-p4-edge-figure::before{
  content:"";
  position:absolute;
  left:-64%;
  right:-42%;
  top:-8%;
  bottom:-6%;
  z-index:-1;
  border-radius:48%;
  background:radial-gradient(ellipse at 52% 42%,rgba(174,216,244,.18),rgba(74,123,158,.09) 32%,rgba(7,13,19,.04) 50%,transparent 70%);
  filter:blur(10px);
}

body.nv-p7-second-look #nv-p4-edge-figure .nv-p4-vendor-head{
  background:radial-gradient(circle at 44% 32%,rgba(20,29,36,.98),rgba(1,3,5,1) 68%);
  border-left:2px solid rgba(205,230,248,.24);
}
body.nv-p7-second-look #nv-p4-edge-figure .nv-p4-vendor-shoulder{
  border-left:2px solid rgba(205,230,248,.18);
  background:radial-gradient(ellipse at 48% 34%,rgba(19,29,36,.99),rgba(1,3,5,1) 72%);
}
body.nv-p7-second-look #nv-p4-edge-figure .nv-p4-vendor-coat{
  background:linear-gradient(102deg,rgba(1,3,5,1) 0 34%,rgba(31,44,53,.98) 49%,rgba(1,3,5,1) 66% 100%);
  box-shadow:inset 2px 0 rgba(205,230,248,.18),0 0 34px rgba(0,0,0,.96);
}
body.nv-p7-second-look #nv-p4-edge-figure .nv-p4-vendor-glint{
  background:rgba(205,230,248,.34);
  box-shadow:0 0 7px rgba(185,216,248,.24);
  opacity:.72;
}

body.nv-p7-second-look[data-nv-p7-side="left"] #nv-p4-edge-figure{
  left:-10px;
  right:auto;
  transform:translateX(-18%) scaleX(-1) rotate(-.5deg);
  animation-name:nv-p7-close-left!important;
}

/* A fraction-of-a-second light failure hides the departure. */
body.nv-p7-second-look #nv-p4-presence-layer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 12%,rgba(8,17,25,.18),rgba(0,0,0,.58) 58%,rgba(0,0,0,.92)),
    rgba(0,0,0,.86);
  opacity:0;
  animation:nv-p7-blackout 1420ms steps(1,end) both;
}

/* The ceiling light contracts just before the proprietor is noticed. */
body.nv-p7-second-look #nv-p4-presence-layer::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:0;
  height:24vh;
  z-index:7;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.64),rgba(0,0,0,.18) 54%,transparent);
  opacity:0;
  animation:nv-p7-light-drop 1420ms steps(1,end) both;
}

@keyframes nv-p7-close-right{
  0%,14%{opacity:0;transform:translateX(18%) rotate(-.5deg);}
  14.1%,43%{opacity:.84;transform:translateX(18%) rotate(-.5deg);}
  43.1%,60%{opacity:.88;transform:translateX(14%) rotate(.15deg);}
  60.1%,100%{opacity:0;transform:translateX(14%) rotate(.15deg);}
}

@keyframes nv-p7-close-left{
  0%,14%{opacity:0;transform:translateX(-18%) scaleX(-1) rotate(-.5deg);}
  14.1%,43%{opacity:.84;transform:translateX(-18%) scaleX(-1) rotate(-.5deg);}
  43.1%,60%{opacity:.88;transform:translateX(-14%) scaleX(-1) rotate(.15deg);}
  60.1%,100%{opacity:0;transform:translateX(-14%) scaleX(-1) rotate(.15deg);}
}

@keyframes nv-p7-blackout{
  0%,58%{opacity:0;}
  58.1%,68%{opacity:.91;}
  68.1%,72%{opacity:.28;}
  72.1%,100%{opacity:0;}
}

@keyframes nv-p7-light-drop{
  0%,8%{opacity:0;}
  8.1%,14%{opacity:.34;}
  14.1%,57%{opacity:.12;}
  57.1%,72%{opacity:.58;}
  72.1%,100%{opacity:0;}
}

@media (max-width:820px){
  body.nv-p7-second-look #nv-p4-edge-figure{
    top:var(--nv-p7-top,23vh);
    width:clamp(104px,34vw,146px);
    height:clamp(278px,50vh,390px);
    right:-7px;
    transform:translateX(12%) rotate(-.35deg);
  }
  body.nv-p7-second-look[data-nv-p7-side="left"] #nv-p4-edge-figure{
    left:-7px;
    right:auto;
    transform:translateX(-12%) scaleX(-1) rotate(-.35deg);
  }
  @keyframes nv-p7-close-right{
    0%,14%{opacity:0;transform:translateX(12%) rotate(-.35deg);}
    14.1%,43%{opacity:.88;transform:translateX(12%) rotate(-.35deg);}
    43.1%,60%{opacity:.92;transform:translateX(8%) rotate(.2deg);}
    60.1%,100%{opacity:0;transform:translateX(8%) rotate(.2deg);}
  }
  @keyframes nv-p7-close-left{
    0%,14%{opacity:0;transform:translateX(-12%) scaleX(-1) rotate(-.35deg);}
    14.1%,43%{opacity:.88;transform:translateX(-12%) scaleX(-1) rotate(-.35deg);}
    43.1%,60%{opacity:.92;transform:translateX(-8%) scaleX(-1) rotate(.2deg);}
    60.1%,100%{opacity:0;transform:translateX(-8%) scaleX(-1) rotate(.2deg);}
  }
}

@media (prefers-reduced-motion: reduce){
  body.nv-p7-second-look #nv-p4-edge-figure,
  body.nv-p7-second-look #nv-p4-presence-layer::before,
  body.nv-p7-second-look #nv-p4-presence-layer::after{
    display:none!important;
    animation:none!important;
  }
}