/* V-CORE visual v4 — cleaned hero image supplied from the approved composition. */
.skin-depth {
  grid-template-columns: minmax(225px,.72fr) minmax(560px,1.7fr) minmax(225px,.72fr);
  gap: clamp(20px,2.4vw,44px);
}

.skin-lab-v4 {
  min-height: 590px;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(156,0,28,.12),transparent 54%),
    #020204;
  box-shadow: 0 30px 80px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.035);
  transform: none;
}

.vcore-clean-visual {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.vcore-clean-visual > img {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 114%;
  max-width: none;
  transform: translate(-50%,-50%);
  filter: contrast(1.04) brightness(.92) saturate(.95);
  transition: transform 1.4s cubic-bezier(.18,.76,.2,1), filter 1.2s ease;
}

.skin-lab-v4:hover .vcore-clean-visual > img {
  transform: translate(-50%,-50%) scale(1.025);
  filter: contrast(1.08) brightness(.98) saturate(1.02);
}

.vcore-clean-visual::before,
.vcore-clean-visual::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.vcore-clean-visual::before {
  inset: 0;
  background:
    linear-gradient(90deg,#020204 0,rgba(2,2,4,.78) 8%,transparent 25%,transparent 76%,rgba(2,2,4,.65) 93%,#020204 100%),
    linear-gradient(180deg,rgba(2,2,4,.28),transparent 15%,transparent 86%,#020204 100%);
}

.vcore-clean-visual::after {
  left: 32%;
  right: 32%;
  bottom: 12%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255,8,43,.09);
  filter: blur(34px);
  animation: vcoreGlowBreath 2.8s ease-in-out infinite;
}

.vcore-layer-rail {
  position: absolute;
  z-index: 7;
  left: 4.5%;
  top: 49%;
  bottom: 10%;
  display: grid;
  align-content: space-between;
}

.vcore-layer-rail span {
  position: relative;
  display: grid;
  grid-template-columns: 25px auto;
  gap: 0 7px;
  min-width: 140px;
  color: #f1f2f4;
  font: 500 7.5px/1 Manrope,sans-serif;
  letter-spacing: .13em;
  text-shadow: 0 2px 8px #000;
}

.vcore-layer-rail span::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 100%;
  width: 55px;
  height: 1px;
  background: linear-gradient(90deg,rgba(255,255,255,.55),transparent);
}

.vcore-layer-rail b {
  grid-row: 1/3;
  color: #f62345;
  font-size: 9px;
  font-weight: 500;
}

.vcore-layer-rail i { font-style:normal; }
.vcore-layer-rail small {
  grid-column: 2;
  margin-top: 5px;
  color: rgba(255,255,255,.55);
  font-size: 6px;
  letter-spacing: .08em;
}

.vcore-depth-scale {
  position: absolute;
  z-index: 7;
  right: 4%;
  top: 47%;
  bottom: 11%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  color: rgba(255,255,255,.58);
  font: 500 5.8px/1 Manrope,sans-serif;
  letter-spacing: .12em;
}

.vcore-depth-scale i {
  width: 1px;
  margin: 9px 0;
  background: linear-gradient(#ff7789,#ec1238);
  box-shadow: 0 0 8px rgba(255,16,50,.56);
}

.vcore-depth-scale i::after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-right: 1px solid #ff4a65;
  border-bottom: 1px solid #ff4a65;
  transform: rotate(45deg);
}

.vcore-scan {
  position: absolute;
  z-index: 6;
  left: 29%;
  right: 29%;
  top: 43%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg,transparent,#ff2448,transparent);
  box-shadow: 0 0 12px #ff173e;
}

.skin-depth.is-active .vcore-scan {
  opacity: .62;
  animation: vcoreScanDown 3.4s ease-in-out infinite;
}

@keyframes vcoreScanDown {
  0%,100% { transform:translateY(0); opacity:.15; }
  45% { opacity:.72; }
  80% { transform:translateY(245px); opacity:.22; }
}

@keyframes vcoreGlowBreath {
  0%,100% { opacity:.35; transform:scale(.9); }
  50% { opacity:.9; transform:scale(1.08); }
}

@media (max-width: 1050px) {
  .skin-depth {
    grid-template-columns: minmax(210px,.75fr) minmax(460px,1.45fr);
  }
  .evidence-panel { grid-column:1/-1; }
}

@media (max-width: 600px) {
  .skin-depth { grid-template-columns:1fr; }
  .skin-lab-v4 { min-height:430px; margin-inline:-4px; }
  .vcore-clean-visual > img { width:145%; }
  .vcore-layer-rail { left:2%; top:51%; bottom:8%; }
  .vcore-layer-rail span { min-width:112px; grid-template-columns:20px auto; font-size:6.5px; }
  .vcore-layer-rail span::after { width:24px; }
  .vcore-layer-rail small { font-size:5.5px; }
  .vcore-depth-scale { right:1%; top:50%; bottom:8%; }
  .vcore-depth-scale small { font-size:5px; }
}