/* Vessel Π — responsive, χωρίς σταθερό μήκος */

#vessel-wrapper{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

#vessel{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:calc(100% - 20px);   /* ⬅ responsive πλάτος */
  height:70%;
  border:6px solid #333;
  border-right:none;
  background:#fff;
  box-sizing:border-box;
}

/* Thick piston (solid wall) */
#piston{
  position:absolute;
  top:0;
  height:100%;
  width:15px;
  background:linear-gradient(
    to bottom,
    #7a7a7a 0%,
    #9e9e9e 35%,
    #e0e0e0 50%,   /* ⬅ φωτεινό κέντρο */
    #9e9e9e 65%,
    #7a7a7a 100%
  );
  border-left:2px solid #555;
  border-right:2px solid #555;
  box-sizing:border-box;
}

#catalyst-layer{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:0;

  background:
    /* μακροσκοπική ανομοιογένεια */
    linear-gradient(
      to right,
      #b5b5b5 0%,
      #9c9c9c 30%,
      #a2a2a2 55%,
      #c3c3c3 75%,
      #a9a9a9 100%
    ),

    /* μικροσκίαση */
    linear-gradient(
      135deg,
      rgba(255,255,255,0.12),
      rgba(136, 136, 136, 0.18)
    );

  background-blend-mode: multiply;
  filter: contrast(1.15) brightness(0.97);

  opacity:0;
  pointer-events:none;
  z-index:-1;
}

#catalyst-layer::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.05) 0px,
      rgba(0,0,0,0.05) 1px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      transparent 2px,
      transparent 5px
    );

  opacity:0.35;
  mix-blend-mode: overlay;
}





